{"id":65401,"date":"2024-11-25T03:01:00","date_gmt":"2024-11-24T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=65401"},"modified":"2024-11-22T18:31:01","modified_gmt":"2024-11-22T08:31:01","slug":"wordpress-calendar-widget-above-the-fold-ondblclick-iframe-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-calendar-widget-above-the-fold-ondblclick-iframe-tutorial\/","title":{"rendered":"WordPress Calendar Widget Above the Fold Ondblclick Iframe Tutorial"},"content":{"rendered":"
\"WordPress<\/a>

WordPress Calendar Widget Above the Fold Ondblclick Iframe Tutorial<\/p><\/div>\n

We’re revisiting our WordPress Blog TwentyTen themed Calendar Widget last referred to with WordPress Calendar Widget Above the Fold Word Count Tutorial<\/a> regarding it’s “Iframes Up the Top” functionality.<\/p>\n

On the revisit we made we immediately thought of two improvement “categories”, if you will …<\/p>\n

    \n
  1. help improve the iframe “programmatical” look …<\/li>\n
  2. add an “ondblclick” event part to the “Iframes Up Top” button clicking functionality<\/li>\n<\/ol>\n

    Let’s flesh this out a bit …<\/p>\n

      \n
    1. help improve the iframe “programmatical” look … it used to use no hashtagging nor scrolling, and so the small size of each iframe, in a month’s worth of iframe elements showed very little of use after “programmatical” work … now for both “onclick” and “odblclick” logics some wording of the posting title related to the blog posting of the relevant day will show …\n<\/li>\n
    2. add an “ondblclick” event part to the “Iframes Up Top” button clicking functionality … we click the permalink of a URL such as …
      \n
      \n      https:\/\/www.rjmprogramming.com.au\/ITblog\/2024\/09\/15<\/a> September, 15 2024 blog posting \"summary\" webpage
      \n<\/code>
      \n … “programmatically” navigating to …
      \n
      \n      Google Charts Geo Chart Nesting and Zooming Tutorial<\/a> blog posting, scrolling to the caption up the top of the webpage
      \n<\/code>\n<\/li>\n<\/ol>\n

      … and we flesh out more document.getElementById(‘content’).innerText style content to display in places as the user hovers over these day of the month blog post iframe elements.<\/p>\n

      All our changes occurred in TwentyTen theme’s header.php as per<\/font><\/p>\n

      <?php
      \n
      \nvar precb=0;
      \n
      \nfunction preclickbcal() {
      \n precb=1;
      \n setTimeout(function(){
      \n precb=2;
      \n clickbcal();
      \n }, 3000);
      \n}<\/font>
      \n
      \nfunction clickbcal() {
      \n if (precb == 1) { precb=0; return ''; }<\/font>
      \n if (document.getElementById('justshow')) {
      \n var wohtml='';
      \n if (document.URL.indexOf('domorecalendar=') == -1 && 1 == 7) {
      \n wohtml=document.getElementById('calendar_wrap').outerHTML.replace('<thead>','<thead style=height:120px;>').replace(\/calendar_wrap\/g,'calendar_iframe_wrap').replace(\/a href\/g,'iframe src').replace(\/\\<\\\/a\\>\/g,'<\/iframe>').replace(\/\\\" title\\=\/g,'#content\" style=\"background-color:yellow;\" title=').replace('>1<\/iframe>',' id=ifrcal1><\/iframe>').replace('>2<\/iframe>',' id=ifrcal2><\/iframe>').replace('>3<\/iframe>',' id=ifrcal3><\/iframe>').replace('>4<\/iframe>',' id=ifrcal4><\/iframe>').replace('>5<\/iframe>',' id=ifrcal5><\/iframe>').replace('>6<\/iframe>',' id=ifrcal6><\/iframe>').replace('>7<\/iframe>',' id=ifrcal7><\/iframe>').replace('>8<\/iframe>',' id=ifrcal8><\/iframe>').replace('>9<\/iframe>',' id=ifrcal9><\/iframe>').replace('>10<\/iframe>',' id=ifrcal10><\/iframe>').replace('>11<\/iframe>',' id=ifrcal11><\/iframe>').replace('>12<\/iframe>',' id=ifrcal12><\/iframe>').replace('>13<\/iframe>',' id=ifrcal13><\/iframe>').replace('>14<\/iframe>',' id=ifrcal14><\/iframe>').replace('>15<\/iframe>',' id=ifrcal15><\/iframe>').replace('>16<\/iframe>',' id=ifrcal16><\/iframe>').replace('>17<\/iframe>',' id=ifrcal17><\/iframe>').replace('>18<\/iframe>',' id=ifrcal18><\/iframe>').replace('>19<\/iframe>',' id=ifrcal19><\/iframe>').replace('>20<\/iframe>',' id=ifrcal20><\/iframe>').replace('>21<\/iframe>',' id=ifrcal21><\/iframe>').replace('>22<\/iframe>',' id=ifrcal22><\/iframe>').replace('>23<\/iframe>',' id=ifrcal23><\/iframe>').replace('>24<\/iframe>',' id=ifrcal24><\/iframe>').replace('>25<\/iframe>',' id=ifrcal25><\/iframe>').replace('>26<\/iframe>',' id=ifrcal26><\/iframe>').replace('>27<\/iframe>',' id=ifrcal27><\/iframe>').replace('>28<\/iframe>',' id=ifrcal28><\/iframe>').replace('>29<\/iframe>',' id=ifrcal29><\/iframe>').replace('>30<\/iframe>',' id=ifrcal30><\/iframe>').replace('>31<\/iframe>',' id=ifrcal31><\/iframe>');
      \n } else if (document.URL.indexOf('domorecalendar=') != -1 || 1 == 1) {
      \n var colspantlines=document.getElementById('calendar_wrap').outerHTML.split('<tbody')[1].split('<\/tr>')[0].split(' colspan=\"');
      \n var dayoftheweekthatoneis=0, monthyesr='';
      \n var mys=document.getElementById('calendar_wrap').outerHTML.split('<caption>');
      \n if (mys.length > 1) {
      \n monthyesr=mys[1].split('<')[0];
      \n \/\/alert(monthyesr);
      \n }
      \n if (colspantlines.length > 1) {
      \n dayoftheweekthatoneis=eval(colspantlines[1].split('\"')[0]);
      \n }
      \n cttcs=[];
      \n var ahrefsare=document.getElementById('calendar_wrap').outerHTML.replace(' title=\"View posts',' TITLE=\"View posts').replace(\/\\\"col\\\" title\\=\/g,\"'col' title=\").split('\" title=\"');
      \n for (var ziuy=1; ziuy<ahrefsare.length; ziuy++) {
      \n if (document.URL.indexOf('animated_emoji=') != -1 || ('' + location.search + location.hash).replace('#justshow','psi').indexOf('psi') == -1<\/font>) { cttcs.push(ahrefsare[ziuy].split('\"')[0]); }
      \n }
      \n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {
      \n \/\/alert(document.getElementById('calendar_wrap').outerHTML);
      \n \/\/alert(ahrefsare.length);
      \n for (var iuy=0; iuy<31; iuy++) {
      \n ahrefsare.push('');
      \n }
      \n \/\/alert(ahrefsare.length);
      \n var citn='?citn=y';
      \n if (document.URL.indexOf('?') != -1) { citn='&citn=y'; }
      \n if (precb != 0) {
      \n \/\/alert('here7');
      \n wohtml=document.getElementById('calendar_wrap').outerHTML.replace(\/\\\"\\ aria\\-label\\=\/g, '?psi=0\\\" aria-label=').replace('<thead>','<thead style=height:120px;>').replace(\/\\\"col\\\" title\\=\/g,\"'col' title=\").replace('<caption>','<caption style=\"border:2px solid purple;background-color:orange;\" onclick=\"wordreps(this.innerHTML,' + dayoftheweekthatoneis + \",'\" + monthyesr + \"'\" + ');\">').replace(\/calendar_wrap\/g,'calendar_iframe_wrap').replace(\/\\\" title\\=\/g,citn + '#content\" title=').replace('>1<\/a>','>1<br><br>' + ahrefsare[1].split('\"')[0] + '<\/a>').replace('>2<\/a>','>2<br><br>' + ahrefsare[2].split('\"')[0] + '<\/a>').replace('>3<\/a>','>3<br><br>' + ahrefsare[3].split('\"')[0] + '<\/a>').replace('>4<\/a>','>4<br><br>' + ahrefsare[4].split('\"')[0] + '<\/a>').replace('>5<\/a>','>5<br><br>' + ahrefsare[5].split('\"')[0] + '<\/a>').replace('>6<\/a>','>6<br><br>' + ahrefsare[6].split('\"')[0] + '<\/a>').replace('>7<\/a>','>7<br><br>' + ahrefsare[7].split('\"')[0] + '<\/a>').replace('>8<\/a>','>8<br><br>' + ahrefsare[8].split('\"')[0] + '<\/a>').replace('>9<\/a>','>9<br><br>' + ahrefsare[9].split('\"')[0] + '<\/a>').replace('>10<\/a>','>10<br><br>' + ahrefsare[10].split('\"')[0] + '<\/a>').replace('>11<\/a>','>11<br><br>' + ahrefsare[11].split('\"')[0] + '<\/a>').replace('>12<\/a>','>12<br><br>' + ahrefsare[12].split('\"')[0] + '<\/a>').replace('>13<\/a>','>13<br><br>' + ahrefsare[13].split('\"')[0] + '<\/a>').replace('>14<\/a>','>14<br><br>' + ahrefsare[14].split('\"')[0] + '<\/a>').replace('>15<\/a>','>15<br><br>' + ahrefsare[15].split('\"')[0] + '<\/a>').replace('>16<\/a>','>16<br><br>' + ahrefsare[16].split('\"')[0] + '<\/a>').replace('>17<\/a>','>17<br><br>' + ahrefsare[17].split('\"')[0] + '<\/a>').replace('>18<\/a>','>18<br><br>' + ahrefsare[18].split('\"')[0] + '<\/a>').replace('>19<\/a>','>19<br><br>' + ahrefsare[19].split('\"')[0] + '<\/a>').replace('>20<\/a>','>20<br><br>' + ahrefsare[20].split('\"')[0] + '<\/a>').replace('>21<\/a>','>21<br><br>' + ahrefsare[21].split('\"')[0] + '<\/a>').replace('>22<\/a>','>22<br><br>' + ahrefsare[22].split('\"')[0] + '<\/a>').replace('>23<\/a>','>23<br><br>' + ahrefsare[23].split('\"')[0] + '<\/a>').replace('>24<\/a>','>24<br><br>' + ahrefsare[24].split('\"')[0] + '<\/a>').replace('>25<\/a>','>25<br><br>' + ahrefsare[25].split('\"')[0] + '<\/a>').replace('>26<\/a>','>26<br><br>' + ahrefsare[26].split('\"')[0] + '<\/a>').replace('>27<\/a>','>27<br><br>' + ahrefsare[27].split('\"')[0] + '<\/a>').replace('>28<\/a>','>28<br><br>' + ahrefsare[28].split('\"')[0] + '<\/a>').replace('>29<\/a>','>29<br><br>' + ahrefsare[29].split('\"')[0] + '<\/a>').replace('>30<\/a>','>30<br><br>' + ahrefsare[30].split('\"')[0] + '<\/a>').replace('>31<\/a>','>31<br><br>' + ahrefsare[31].split('\"')[0] + '<\/a>');
      \n } else {<\/font>
      \n wohtml=document.getElementById('calendar_wrap').outerHTML.replace(\/\\\"\\ ariNOWAYa\\-label\\=\/g, '#psi0\\\" aria-label=').replace('<thead>','<thead style=height:120px;>').replace(\/\\\"col\\\" title\\=\/g,\"'col' title=\").replace('<caption>','<caption style=\"border:2px solid purple;background-color:orange;\" onclick=\"wordreps(this.innerHTML,' + dayoftheweekthatoneis + \",'\" + monthyesr + \"'\" + ');\">').replace(\/calendar_wrap\/g,'calendar_iframe_wrap').replace(\/\\\" title\\=\/g,citn + '#content\" title=').replace('>1<\/a>','>1<br><br>' + ahrefsare[1].split('\"')[0] + '<\/a>').replace('>2<\/a>','>2<br><br>' + ahrefsare[2].split('\"')[0] + '<\/a>').replace('>3<\/a>','>3<br><br>' + ahrefsare[3].split('\"')[0] + '<\/a>').replace('>4<\/a>','>4<br><br>' + ahrefsare[4].split('\"')[0] + '<\/a>').replace('>5<\/a>','>5<br><br>' + ahrefsare[5].split('\"')[0] + '<\/a>').replace('>6<\/a>','>6<br><br>' + ahrefsare[6].split('\"')[0] + '<\/a>').replace('>7<\/a>','>7<br><br>' + ahrefsare[7].split('\"')[0] + '<\/a>').replace('>8<\/a>','>8<br><br>' + ahrefsare[8].split('\"')[0] + '<\/a>').replace('>9<\/a>','>9<br><br>' + ahrefsare[9].split('\"')[0] + '<\/a>').replace('>10<\/a>','>10<br><br>' + ahrefsare[10].split('\"')[0] + '<\/a>').replace('>11<\/a>','>11<br><br>' + ahrefsare[11].split('\"')[0] + '<\/a>').replace('>12<\/a>','>12<br><br>' + ahrefsare[12].split('\"')[0] + '<\/a>').replace('>13<\/a>','>13<br><br>' + ahrefsare[13].split('\"')[0] + '<\/a>').replace('>14<\/a>','>14<br><br>' + ahrefsare[14].split('\"')[0] + '<\/a>').replace('>15<\/a>','>15<br><br>' + ahrefsare[15].split('\"')[0] + '<\/a>').replace('>16<\/a>','>16<br><br>' + ahrefsare[16].split('\"')[0] + '<\/a>').replace('>17<\/a>','>17<br><br>' + ahrefsare[17].split('\"')[0] + '<\/a>').replace('>18<\/a>','>18<br><br>' + ahrefsare[18].split('\"')[0] + '<\/a>').replace('>19<\/a>','>19<br><br>' + ahrefsare[19].split('\"')[0] + '<\/a>').replace('>20<\/a>','>20<br><br>' + ahrefsare[20].split('\"')[0] + '<\/a>').replace('>21<\/a>','>21<br><br>' + ahrefsare[21].split('\"')[0] + '<\/a>').replace('>22<\/a>','>22<br><br>' + ahrefsare[22].split('\"')[0] + '<\/a>').replace('>23<\/a>','>23<br><br>' + ahrefsare[23].split('\"')[0] + '<\/a>').replace('>24<\/a>','>24<br><br>' + ahrefsare[24].split('\"')[0] + '<\/a>').replace('>25<\/a>','>25<br><br>' + ahrefsare[25].split('\"')[0] + '<\/a>').replace('>26<\/a>','>26<br><br>' + ahrefsare[26].split('\"')[0] + '<\/a>').replace('>27<\/a>','>27<br><br>' + ahrefsare[27].split('\"')[0] + '<\/a>').replace('>28<\/a>','>28<br><br>' + ahrefsare[28].split('\"')[0] + '<\/a>').replace('>29<\/a>','>29<br><br>' + ahrefsare[29].split('\"')[0] + '<\/a>').replace('>30<\/a>','>30<br><br>' + ahrefsare[30].split('\"')[0] + '<\/a>').replace('>31<\/a>','>31<br><br>' + ahrefsare[31].split('\"')[0] + '<\/a>');
      \n }<\/font>
      \n \/\/alert(wohtml);
      \n } else {
      \n if (precb != 0) {
      \n \/\/var dfx=prompt('here77 ' + document.getElementById('calendar_wrap').outerHTML, document.getElementById('calendar_wrap').outerHTML);
      \n wohtml=document.getElementById('calendar_wrap').outerHTML.replace(\/\\\"\\ aria\\-label\\=\/g, '?psi=0\\\" aria-label=').replace('<thead>','<thead style=height:120px;>').replace(\/\\\"col\\\" title\\=\/g,\"'col' title=\").replace('<caption>','<caption style=\"border:2px solid purple;background-color:orange;\" onclick=\"wordreps(this.innerHTML,' + dayoftheweekthatoneis + \",'\" + monthyesr + \"'\" + ');\">').replace(\/calendar_wrap\/g,'calendar_iframe_wrap').replace(\/a href\/g,'iframe onload=\"ifrcheck(this,' + dayoftheweekthatoneis + \",'\" + monthyesr + \"'\" + ');\" src').replace(\/\\<\\\/a\\>\/g,'<\/iframe>').replace(\/\\\" title\\=\/g,'#content\" style=\"background-color:yellow; transform: scale(0.98,0.98); -o-transform: scale(0.98,0.98); -moz-transform: scale(0.98,0.98); -ms-transform: scale(0.98,0.98); -webkit-transform: scale(0.98,0.98); height:350px;\" title=');
      \n } else {<\/font>
      \n wohtml=document.getElementById('calendar_wrap').outerHTML.replace(\/\\\"\\ ariNOWAYa\\-label\\=\/g, '#psi0\\\" aria-label=').replace('<thead>','<thead style=height:120px;>').replace(\/\\\"col\\\" title\\=\/g,\"'col' title=\").replace('<caption>','<caption style=\"border:2px solid purple;background-color:orange;\" onclick=\"wordreps(this.innerHTML,' + dayoftheweekthatoneis + \",'\" + monthyesr + \"'\" + ');\">').replace(\/calendar_wrap\/g,'calendar_iframe_wrap').replace(\/a href\/g,'iframe onload=\"ifrcheck(this,' + dayoftheweekthatoneis + \",'\" + monthyesr + \"'\" + ');\" src').replace(\/\\<\\\/a\\>\/g,'<\/iframe>').replace(\/\\\" title\\=\/g,'#content\" style=\"background-color:yellow; transform: scale(0.98,0.98); -o-transform: scale(0.98,0.98); -moz-transform: scale(0.98,0.98); -ms-transform: scale(0.98,0.98); -webkit-transform: scale(0.98,0.98); height:350px;\" title=');
      \n }<\/font>
      \n }
      \n }
      \n document.getElementById('justshow').innerHTML=cttcsize(wohtml, monthyesr, dayoftheweekthatoneis);
      \n document.getElementById('justshow').style.display='block';
      \n \/\/setTimeout(function(){ location.href='#justshow'; }, 30000);
      \n location.href='#justshow';
      \n }
      \n precb=0;<\/font>
      \n}
      \n
      \nfunction captionsearchit() {
      \n var fone=-1, was_ih='', kk=0, anymore=''<\/font>;
      \n var ps=document.getElementsByTagName(\"p\");
      \n for (var i=0; i<ps.length; i++) {
      \n if (('' + ps[i].className) == 'wp-caption-text') {
      \n if (fone < 0) { fone=i; }
      \n was_ih=ps[i].innerHTML;
      \n if (('' + ps[i].id).indexOf('psi') != -1) {
      \n ps[i].innerHTML+=\"&nbsp;&nbsp;&nbsp;<a title='Search ...' data-title='\" + was_ih + \"' id=apsi\" + i + \" onclick=\\\"if (document.getElementById('spanback')) { document.getElementById('spanback').style.display='inline-block'; document.getElementById('aback').title='Back to reading ' + this.getAttribute('data-title') + ' ...'; this.title=this.getAttribute('data-title'); document.getElementById('aback').href=('#' + this.id).replace('#a','#'); } document.getElementById('s').scrollIntoView(); document.getElementById('s').focus(); \\\" style=text-decoration:none;cursor:pointer; title=Search>&#128269;<\/a>\";
      \n } else {
      \n ps[i].id='psi' + i;
      \n if (('' + location.search + location.hash).indexOf('psi') != -1) {
      \n var sps=document.getElementsByTagName(\"span\");
      \n for (var si=0; si<sps.length; si++) {
      \n if (('' + sps[si].className).indexOf('entry-date') != -1 && anymore == '') {
      \n anymore='<br>&nbsp;<a onclick=\"window.scrollBy(0,-130);\" title=Image style=text-decoration:none;cursor:pointer;>&#128444;<\/a>&nbsp;<font size=1>' + sps[si].innerHTML + '<\/font>';
      \n ps[i].ondblclick=function(){ window.open(document.URL.split('#')[0] + '#content','_blank','top=100,left=100,width=700,height=700'); };
      \n ps[i].title+=' ... double click opens in new popup window.';
      \n ps[i].title+=' ' + String.fromCharCode(10) + (document.getElementById('content').innerText || document.getElementById('content').contentWindow || document.getElementById('content').contentDocument).split('BY')[1].trim();
      \n document.body.title='' + (document.getElementById('content').innerText || document.getElementById('content').contentWindow || document.getElementById('content').contentDocument).split('BY')[1].trim();
      \n }
      \n }
      \n }<\/font>
      \n ps[i].innerHTML+=\"&nbsp;&nbsp;&nbsp;<a title='Search ...' data-title='\" + was_ih + \"' id=apsi\" + i + \" onclick=\\\"if (document.getElementById('spanback')) { document.getElementById('spanback').style.display='inline-block'; document.getElementById('aback').title='Back to reading ' + this.getAttribute('data-title') + ' ...'; this.title=this.getAttribute('data-title'); document.getElementById('aback').href=('#' + this.id).replace('#a','#'); } document.getElementById('s').scrollIntoView(); document.getElementById('s').focus(); \\\" style=text-decoration:none;cursor:pointer; title=Search>&#128269;<\/a>\" + anymore<\/font>;
      \n if (kk == 0 && ('' + location.hash).indexOf('psi') != -1) {
      \n kk=1;
      \n document.getElementById('psi' + i).scrollIntoView();
      \n }<\/font>
      \n }
      \n }
      \n }
      \n postcaptionsearchit();
      \n}
      \n
      \n setTimeout(captionsearchit, 1000);<\/font>
      \n<\/code>
      \n?><\/p>\n

      \n

      \n

      Previous relevant WordPress Calendar Widget Above the Fold Word Count Tutorial<\/a> is shown below.<\/p>\n

      \"WordPress<\/a>

      WordPress Calendar Widget Above the Fold Word Count Tutorial<\/p><\/div>\n

      We’re trying out a new idea extending the recent WordPress Calendar Widget Above the Fold Cut to the Chase Tutorial<\/a>‘s …<\/p>\n