<html>
<head>
<title>CSS counter via var - RJM Programming - February, 2021 ... thanks to https://css-tricks.com/valid-css-content/</title>
<script type='text/javascript'>
var icnt=0;
var detcnt=0;
var hgts=[];
var spanstr="<span id=myspan style='--tooltip-string:" + icnt + ";'><h1>CSS counter via var</h1><h3>RJM Programming - February, 2021</h3><h4>Thanks to <a target=_blank title='https://css-tricks.com/valid-css-content/' href='https://css-tricks.com/valid-css-content/'>https://css-tricks.com/valid-css-content/</a></h4></span>";
var dods=(location.search.split('nodods=')[1] ? false : true);
var dodsprefix='', dodssuffix='', dodsmiddle='';
if (dods) {
dodsprefix='<details data-height="1930px" onclick="depends(this, this.getAttribute(' + "'" + 'data-height' + "'" + '));"><summary>'; // for image height 1800
dodsmiddle='</summary>';
dodssuffix='</details>';
}

function depends(deto, bigh) {
//alert(bigh);
var newb='';
if (!deto.open) {
if (deto.outerHTML.indexOf(' data-smallh=') == -1) {
var rectis=deto.getBoundingClientRect();
deto.setAttribute('data-smallh', ('' + rectis.height).replace('px','') + 'px');
}
deto.style.height=bigh;
deto.style.minHeight=bigh;
newb='linear-gradient(rgba(255,255,255,0.1),rgba(255,255,255,0.1)),url(' + ('' + deto.style.background).split('url(')[1];
deto.style.background=newb;
deto.style.backgroundRepeat='no-repeat';
deto.style.backgroundPosition='0px 60px';
//deto.height=bigh;
} else {
deto.style.height=deto.getAttribute('data-smallh');
deto.style.minHeight=deto.getAttribute('data-smallh');
newb='linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.9)),url(' + ('' + deto.style.background).split('url(')[1];
deto.style.background=newb;
deto.style.backgroundRepeat='no-repeat';
deto.style.backgroundPosition='0px 60px';
//deto.height=deto.getAttribute('data-smallh');
}
}

function dimgh(selem) {
var img = document.createElement('img');
img.onload = function() {
//alert(('' + img.height).replace('px','') + 'px');
var hashbits=img.src.split('#');
if (hashbits.length > 1) {
if (document.getElementById('ilist')) {
if (eval(('' + img.height).replace('px','')) <= 100) {
document.getElementById('ilist').value=document.getElementById('ilist').value.replace(':' + img.title, '::' + img.title);
}
}
hgts[eval(hashbits[1])]=(eval(130 + eval(('' + img.height).replace('px',''))) + 'px');
} else {
if (document.getElementById('ilist')) {
if (eval(('' + img.height).replace('px','')) <= 99) {
document.getElementById('ilist').value=document.getElementById('ilist').value.replace(':' + img.title, '::' + img.title);
}
}
hgts.push(eval(130 + eval(('' + img.height).replace('px',''))) + 'px');
}
};
if (document.getElementById('ilist')) {
img.title = selem;
img.src = selem;
} else {
img.title = selem;
img.src = selem + '#' + eval(-1 + hgts.length);
}
return selem;
}

function dethfix() {
for (var ii=1; ii<=detcnt; ii++) {
document.getElementById('det' + ii).setAttribute('data-height', hgts[eval(-1 + ii)]);
//alert(document.getElementById('det' + ii).getAttribute('data-height'));
}
}

function thisdecodeURIComponent(inname, inval) {
var outval=decodeURIComponent(inval), dwiurl='';
if (inval != '') {
icnt=eval(inname.replace('dw',''));
dwiurl=(location.search.split(inname.replace('dw', 'di') + '=')[1] ? decodeURIComponent(location.search.split(inname.replace('dw', 'di') + '=')[1].split('&')[0]) : '');
if (dwiurl != '') {
//alert(dwiurl);
if (!dods || dwiurl.indexOf('#') != -1) {
outval='<div style="--tooltip-string:url(' + dwiurl.split('#')[0] + ');">' + decodeURIComponent(inval) + '</div>';
} else {
detcnt++;
hgts.push(0);
outval=dodsprefix.replace('<details', '<details id=det' + detcnt).replace('>', ' style="background:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),url(' + dimgh(dwiurl) + ');background-repeat:no-repeat;background-position:0px 60px;">') + '<div class=nested style="--tooltip-string:url(' + dwiurl.split('#')[0] + ');">' + decodeURIComponent(inval) + '</div>' + dodsmiddle + dodssuffix;
}
} else {
outval='<div>' + decodeURIComponent(inval) + '</div>';
}
spanstr="<span id=myspan style='--tooltip-string:" + icnt + ";'><h1>CSS counter via var</h1><h3>RJM Programming - February, 2021</h3><h4>Thanks to <a target=_blank title='https://css-tricks.com/valid-css-content/' href='https://css-tricks.com/valid-css-content/'>https://css-tricks.com/valid-css-content/</a></h4></span>";
icnt++;
while (inval != '') {
inval=(location.search.split('dw' + icnt + '=')[1] ? decodeURIComponent(location.search.split('dw' + icnt + '=')[1].split('&')[0]) : '');
if (inval != '') {
spanstr="<span id=myspan style='--tooltip-string:" + icnt + ";'><h1>CSS counter via var</h1><h3>RJM Programming - February, 2021</h3><h4>Thanks to <a target=_blank title='https://css-tricks.com/valid-css-content/' href='https://css-tricks.com/valid-css-content/'>https://css-tricks.com/valid-css-content/</a></h4></span>";
inname='dw' + icnt;
dwiurl=(location.search.split(inname.replace('dw', 'di') + '=')[1] ? decodeURIComponent(location.search.split(inname.replace('dw', 'di') + '=')[1].split('&')[0]) : '');
if (dwiurl != '') {
//alert(dwiurl);
if (!dods || dwiurl.indexOf('#') != -1) {
outval+='<div style="--tooltip-string:url(' + dwiurl.split('#')[0] + ');">' + inval + '</div>';
} else {
hgts.push(0);
detcnt++;
outval+=dodsprefix.replace('<details', '<details id=det' + detcnt).replace('>', ' style="background:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),url(' + dimgh(dwiurl) + ');background-repeat:no-repeat;background-position:0px 60px;">') + '<div class=nested style="--tooltip-string:url(' + dwiurl.split('#')[0] + ');">' + inval + '</div>' + dodsmiddle + dodssuffix;
}
} else {
outval+='<div>' + inval + '</div>';
}
}
icnt++;
}
}
if (detcnt > 0) {
setTimeout(dethfix, 4000);
}
return outval;
}

function makeget(formo) {
var rawlist=document.getElementById('ilist').value;
if (rawlist != '') {
var cbits=rawlist.split(','), ubits=[];
for (var iuy=0; iuy<cbits.length; iuy++) {
ubits=cbits[iuy].split(':');
if (ubits.length == 1) {
formo.innerHTML+='<input type=hidden name=dw' + eval(1 + iuy) + ' value="' + ubits[0] + '"></input>';
} else {
formo.innerHTML+='<input type=hidden name=dw' + eval(1 + iuy) + ' value="' + ubits[0] + '"></input>';
if (eval(-1 + ubits.length) > 1) {
formo.innerHTML+='<input type=hidden name=di' + eval(1 + iuy) + ' value="' + ubits[eval(-1 + ubits.length)] + '#"></input>';
} else {
formo.innerHTML+='<input type=hidden name=di' + eval(1 + iuy) + ' value="' + ubits[eval(-1 + ubits.length)] + '"></input>';
}
}
}
return true;
} else {
return false;
}
}

function cfsub() {
document.getElementById('fsub').click();
}

function checkstodcolon(ithiso) {
var outv=ithiso.value;
var ics=[];
var colons=outv.split(',');
for (var icx=0; icx<colons.length; icx++) {
ics=colons[icx].split(':');
if (ics.length == 2) {
hgts.push(0);
//alert(ics[eval(-1 + ics.length)]);
dimgh(ics[eval(-1 + ics.length)]);
}
}
if (outv != ithiso.value) { ithiso.value=outv; }
}

var dwstr=(location.search.split('dw1=')[1] ? thisdecodeURIComponent('dw1', location.search.split('dw1=')[1].split('&')[0]) : '<form id=myform onsubmit="return makeget(this);" action=./css_count_image.html><input id=ilist type=text placeholder="Enter comma separated list (we' + "'" + 'll CSS countdown via counter & var) of sets of Title:ImageURL (two :: means do not use details/summary)" style=width:99%;" value="" onblur="if (this.value.length > 0) { checkstodcolon(this); setTimeout(cfsub, 3000); }"></input><br><br><input style=display:none; type=submit id=fsub value=Display></input></form>');
</script>
<style>
div {
color: blue;
}

#myspan {
counter-reset: the-final-countdown var(--tooltip-string);
line-height: 2;
}

div::before {
counter-increment: the-final-countdown -1;
content: "~" counter(the-final-countdown) "~";
background: yellow;
display: inline-block;
width: 5rem;
margin-right: 0.5rem;
text-align: center;
color: blue;
}

div:not(.nested)::after {
content: var(--tooltip-string);
}
</style>
</head>
<body data-style="--tooltip-string:12;">

<script type='text/javascript'>
document.write(spanstr + dwstr);
let div = document.querySelector("div");
</script>
<input type=text style='position:absolute;top:-200px;left:-200px;' value=''></input>
</body>
</html>