{"id":42307,"date":"2018-12-13T03:01:40","date_gmt":"2018-12-12T17:01:40","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=42307"},"modified":"2018-12-12T20:34:24","modified_gmt":"2018-12-12T10:34:24","slug":"wordpress-link-to-iframe-via-calendar-widget-mobile-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-link-to-iframe-via-calendar-widget-mobile-tutorial\/","title":{"rendered":"WordPress Link to Iframe via Calendar Widget Mobile Tutorial"},"content":{"rendered":"
\"WordPress<\/a>

WordPress Link to Iframe via Calendar Widget Mobile Tutorial<\/p><\/div>\n

Try controlling the size of an HTML iframe in tight confines on a mobile platform, and perhaps you get the feeling of trying to tame a brumby. We tried some horse whispering for an hour but got precisely nowhere, and so used “plan B”, that is to make the content smaller, while still adding knowledge. How about adding the blog posting title<\/a> for the day of the month currently shown in the WordPress TwentyTen theme Calendar widget? And if they’ve clicked one of these links, take them straight to that whole blog posting rather than the “middleman<\/strike>person” precis. The Javascript (DOM) (including lots of inline CSS styling) became …<\/p>\n


\nfunction wordreps(tih,dowtoi,myc) {
\n if (1 == 2) { alert(\"Soon we will have a word report for \" + tih.replace(' ', \" 1 is \" + ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'][dowtoi] + ' ')); }
\n}
\n
\nfunction ifrcheck(iois,dayoneis,monthyishere) {
\n if (iois != null) {
\n var aaconto = (iois.contentWindow || iois.contentDocument);
\n if (aaconto != null) {
\n if (aaconto.document) { aaconto = aaconto.document; }
\n if (aaconto.body != null) {
\n if (1 == 2) { alert(aaconto.body.innerText); }
\n }
\n }
\n }
\n}
\n
\nfunction clickbcal() {
\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('calendar_wrap','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 }
\n if (colspantlines.length > 1) {
\n dayoftheweekthatoneis=eval(colspantlines[1].split('\"')[0]);
\n }
\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<\/b>
\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 iuy=0; iuy<31; iuy++) {
\n ahrefsare.push('');
\n }
\n var citn='?citn=y';
\n if (document.URL.indexOf('?') != -1) { citn='&citn=y'; }
\n wohtml=document.getElementById('calendar_wrap').outerHTML.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','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 }<\/b> else {
\n wohtml=document.getElementById('calendar_wrap').outerHTML.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','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 }
\n }
\n document.getElementById('justshow').innerHTML=wohtml;
\n document.getElementById('justshow').style.display='block';
\n location.href='#justshow';
\n }
\n}
\n
\nfunction postcalendar() {
\n if ((location.hash + '').indexOf('content') != -1<\/i> && (document.URL.indexOf('?m=') != -1 || document.URL.split('\/').length >= 4)) {<\/i>
\n var aps=document.getElementsByTagName('a');
\n var kaps=false, huhas=[];
\n for (var iaps=0; iaps<aps.length; iaps++) {
\n if (!kaps) {
\n if (('' + aps[iaps].target).toLowerCase().indexOf('blank') == -1 && document.body.innerHTML.indexOf(aps[iaps].outerHTML) != -1) {
\n huhas=document.body.innerHTML.split(aps[iaps].outerHTML);
\n if (huhas[0].indexOf('entry-title') != -1 && aps[iaps].href.replace('\/wordpress?','\/ITblog\/').replace('\/wordpress\/','\/ITblog\/').indexOf('\/ITblog\/') != -1) {
\n kaps=true;
\n if (document.URL.indexOf('citn=') != -1) {
\n location.href=aps[iaps].href; \/\/aps[iaps].click();
\n } else {
\n aps[iaps].target='_blank';
\n }
\n }
\n }
\n }
\n }
\n }<\/i>
\n if (document.getElementById('calendar_wrap')) {
\n document.getElementById('calendar_wrap').innerHTML+='<input type=button value=\"Iframes Up Top\" onclick=\"clickbcal();\"><\/input>';
\n }
\n}
\n<\/code><\/p>\n

… for a codebase that suits both mobile and non-mobile platforms, the latter of which were catered for well by yesterday’s WordPress Link to Iframe via Calendar Widget Primer Tutorial<\/a>.<\/p>\n

Two aspects of interest here are …<\/p>\n