WordPress Link to Iframe via Calendar Widget Primer Tutorial

WordPress Link to Iframe via Calendar Widget Primer Tutorial

WordPress Link to Iframe via Calendar Widget Primer Tutorial

Calendar functionality in web applications can be very useful. To organize data in a chronological order makes a lot of sense given the lives we live here on Earth where we are able to rely on the sun rising every day. At this blog, for example, we post once every Sun rising (somewhere on Earth) every day.

The WordPress TwentyTen theme has a Calendar widget you can choose to use on your blog, and we decided to do that here at this blog. If this Calendar widget had been a …

  • Text Widget we could have added to its functionality with today’s “WordPress Link to Iframe via Calendar” directly in the code of the Text Widget … and then you could get inside the native PHP and use …
  • WordPress Codex approach to native code amendments … or, at least for us, here, with our …
  • TwentyTen theme’s header.php gets changed to add in the new “WordPress Link to Iframe via Calendar” functionality, working off what the widget already provides via document.body onload event Javascript DOM code

We like the look of WordPress TwentyTen theme’s Calendar widget, so why not start with its outerHTML property value as used in the (Javascript DOM) code …


function clickbcal() {
if (document.getElementById('justshow')) {
var 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,'#stuts" style="background-color:yellow;" title=');
document.getElementById('justshow').innerHTML=wohtml;
document.getElementById('justshow').style.display='block';
location.href='#justshow';
}
}

function postcalendar() {
if (document.getElementById('calendar_wrap')) {
document.getElementById('calendar_wrap').innerHTML+='<input type=button value="Iframes Up Top" onclick="clickbcal();"></input>';
}
}

… called via document.body onload event Javascript DOM code call in the PHP’s HTML …


<body onload=" postcalendar(); ">

… manifested (and used) by one additional button added to the end of the Calendar widget labelled “Iframes Up Top”.

Did the “justshow” (HTML, within header.php) bit …


<div id="justshow" style="position:absolute;top:0;left:0;display:none;z-index:23;"></div>

<div id="main">

… remind you of another WordPress blog change? Take a read of WordPress Blog Posting Thread Content Summary Tutorial. We hope this helps you out.


Previous relevant WordPress Blog Posting Thread Content Summary Tutorial is shown below.

WordPress Blog Posting Thread Content Summary Tutorial

WordPress Blog Posting Thread Content Summary Tutorial

Yesterday’s WordPress Blog Posting Content Summary Primer Tutorial used the reveal HTML5 “stars” …

… to allow for “scrunched up” presentations of multiple blog posts so really only had huge impactive use with the WordPress Blog document root index.php call of it, where several of the latest blog postings are shown to the user. However, in the way we go about it here, we construct these …

Blog Posting Threads

… that call on and contain blog postings related to it (from the recent past, usually, but doesn’t have to be). These “lead in” blog postings are presented in full separated from the new blog posting content by our home (CSS) styled …


<hr />

… horizontal rule elements. Today, we make use of that “habit” we have to introduce new …

… “pairings” to scrunch these up, when the user has decided to generally “scrunch up” (though we are going to think about doing it all the time after seeing what it’s like, for a while).

Not much new here, you might say, but there is something new about what we do navigation wise in these scenarios. We have another “habit” with our blog posting creations for these “blog posting threads”. Invariably, we’re pretty sure, we provide within the new blog posting, an HTML a hashtagging link (eg. #wpbpcspt to get to blog posting “thread” member below, often “yesterday’s”). We want it to be that if the user uses one of these a hashtagging links that causes any (new) “closed” details/summary “guardians against verbosity” to open up. How is that done? We maintain a global …


  1. var nohlist=";";

    … which gets to be accessed and used in a new Javascript function …

  2. function checknohlist() {
    if (('' + location.hash).indexOf('#') != -1) {
    if (nohlist.indexOf(';#' + location.hash.split('#')[1] + ';') != -1) {
    document.getElementById('ds_' + location.hash.split('#')[1]).setAttribute('open', true);
    nohlist=nohlist.replace(';#' + location.hash.split('#')[1] + ';',';');
    }
    }
    if (nohlist.replace(';','') != '') setTimeout(checknohlist, 3000);
    }

    … using the hashtagging “flagger” location.hash … the bits of a URL after and including the # character, as relevant … that is hashtagging, to us … and this new function is now used in amended function from yesterday as per

  3. function details_summary(mou) {
    var other_bits=[], hrother_bits=[], ihrb=0, fb='', fbids=[], thatidis='', hrp='';
    var dbitssare=document.body.innerHTML.split('<div class="entry-content">');
    var dbitseare=document.body.innerHTML.split('<div class="entry-utility">');
    if (document.URL.indexOf('detailssummary=') != -1 || mou != 0) {
    if (dbitssare.length > 1 && dbitssare.length == dbitseare.length) {
    var dbih=document.body.innerHTML, idbih=1;
    for (var idb=0; idb<dbitssare.length; idb++) {
    if (('' + dbitssare[eval(1 + idb)]).indexOf('<p>') != -1) {
    if (('' + dbitssare[eval(1 + idb)]).split('<p>')[idbih].split('</p>')[0] == '') {
    if (('' + dbitssare[eval(1 + idb)]).split('<p>').length >= eval(1 + eval(idbih))) {
    idbih++;
    }
    }
    dbih=dbih.replace('<div class="entry-content">','<details class="gendetails" title="Click me to toggle open/close ... ' + ('' + dbitssare[eval(1 + idb)]).split('<p>')[idbih].split('</p>')[0].replace(/\'/g,'`').replace(/\"/g,'`').replace(/\>/g,'>').replace(/\</g,'<') + '"><summary></summary><div title="entry-content" class="entry-content">');
    } else {
    dbih=dbih.replace('<div class="entry-content">','<details class="gendetails" title="Click me to toggle open/close"><summary></summary><div title="entry-content" class="entry-content">');
    }
    if (document.URL.indexOf('andmorehr=') != -1 || 1 == 1) {
    other_bits=dbih.split('<div title="entry-content" class="entry-content">');
    hrother_bits=other_bits[eval(-1 + other_bits.length)].split('<div class="entry-utility">')[0].split('<hr ');
    hrp='<hr ';
    for (ihrb=1; ihrb<hrother_bits.length; ihrb++) {
    if (hrother_bits[ihrb].indexOf('</p>') != -1 && hrother_bits[ihrb].indexOf('If this was interesting you may be interested') == -1) {
    thatidis='';
    fb=hrp + hrother_bits[ihrb].split('>')[0] + '>';
    fbids=(hrp + hrother_bits[ihrb]).split(fb)[1].split('</p>')[0].split('<p id="');
    if (fbids.length <= 1) {
    fbids=(hrp + hrother_bits[ihrb]).split(fb)[1].split('</p>')[0].split("<p id='");
    if (fbids.length > 1) {
    thatidis=fbids[1].split("'")[0];
    }
    } else {
    thatidis=fbids[1].split('"')[0];
    }
    if (nohlist.replace(';','') == '' && thatidis != '') {
    setTimeout(checknohlist, 3000);
    }
    if (thatidis != '') {
    nohlist+='#' + thatidis + ';';
    dbih=dbih.replace((hrp + hrother_bits[ihrb]), (fb + '<details id="ds_' + thatidis + '" class="innerdetails" title="Click me to toggle open/close"><summary>' + (hrp + hrother_bits[ihrb]).split(fb)[1].split('</p>')[0] + '</p></summary>' + (hrp + hrother_bits[ihrb]).split((hrp + hrother_bits[ihrb]).split('</p>')[0] + '</p>')[1] + '</details>'));
    } else {
    dbih=dbih.replace((hrp + hrother_bits[ihrb]), (fb + '<details class="innerdetails" title="Click me to toggle open/close"><summary>' + (hrp + hrother_bits[ihrb]).split(fb)[1].split('</p>')[0] + '</p></summary>' + (hrp + hrother_bits[ihrb]).split((hrp + hrother_bits[ihrb]).split('</p>')[0] + '</p>')[1] + '</details>'));
    }
    }
    hrp='<hr ';
    }
    }

    dbih=dbih.replace('<div class="entry-utility">','</details><div title="entry-utility" class="entry-utility">');
    }
    document.body.innerHTML=dbih;
    }
    if (document.URL.indexOf('detailssummary=') != -1 && mou == 0) {
    document.getElementById("eds").innerHTML = "&#10133;";
    document.getElementById("eds").title = "Open up blog posting contents now";
    document.getElementById("eds").style.visibility='visible';
    }
    } else if (mou == 0 && dbitssare.length > 1 && dbitssare.length == dbitseare.length) {
    document.getElementById("eds").style.visibility='visible';
    }
    }

So if you try today’s live run and “motor down” to one of the “blog posting threads” we have … and a lot are … you’ll see those new details/summary pairings “guarding against verbosity” unless you use some of those hashtagging links into these “lead in” blog posting thread submembers, or if you click the details element yourself.


Previous relevant WordPress Blog Posting Content Summary Primer Tutorial is shown below.

WordPress Blog Posting Content Summary Primer Tutorial

WordPress Blog Posting Content Summary Primer Tutorial

We really like WordPress.org for the basis of this blog’s design (and recognize WordPress.com as a great idea for those not wanting to host their own Apache/PHP/MySql domain). And am sure you would not be surprised that I am not alone. Take a read of the excellent WordPress information by Websitebuilder.org and, reading closely, you’ll see how popular this blogging platform is, and mention of a number of famous people using it.

I’ve never had much trouble with WordPress, so, not all the time, but occasionally, I tweak it. For this, we suggest, as WordPress would, to use their Codex PHP (with MySql) coding advice, and on a personal level, though, you’ll see, reading this blog, that we also like the direct approach of, mainly, changing the header.php PHP code that sits in, for our case of a theme called TwentyTen (“twentyten” in lowercase) …


[documentRootOfWordPressWebsite]/wp-content/themes/twentyten/

Today’s tweak of header.php relates to a matter dear to our hearts. The desire to cater for mobile users with small screens, yet not be dumbing blog posting content down just for the sake of it. Today we channel just about our favourite reveal based idea you can read more about at HTML5 Details Summary Primer Tutorial to harness the goodies that came with HTML5 in the form of the …

Implementing this in header.php went like this …

  1. added into

    <body onload=" changeasfordownload(); if (cafd == cafd) { cafd=0; } else { cafd=true; } checkonl(); setTimeout(initpostedoncc, 3000); widgetcon(); precc(); courseCookies(); cookie_fonts(); is_mentioned_by(); calendar_pass(); prejustshow(); details_summary(0);">
  2. added a new emoji button up near the top …

    document.getElementById('site-title').innerHTML+='<a id="avs" style="text-decoration:none;" href=# onmouseover="getVisualSynopsis(event);" onmouseout="yehbut();" ontouchstart="getVisualSynopsis(event);" ontouchend="yehbut();" onclick=" uptop(); " title="... you can wait for the long hover functionality about Visual Synopsis (Slideshows)">&#127910;</a> <a style="cursor:pointer;text-decoration:none;" onclick="popselid();" title="Filter Content via Div ID">&#10135;</a> <a style="cursor:pointer;text-decoration:none;visibility:hidden;" title="Blog post contents reduced to summary" id="eds" onclick="pre_details_summary();">&#10134;</a>' + printscreen(0);
  3. then added these two new Javascript functions to suit those events defined above …


    function pre_details_summary() {
    var idos=0,dos=[];
    if (('' + document.getElementById("eds").title) == 'Blog post contents reduced to summary') {
    if (document.body.innerHTML.indexOf('<summary></summary>') == -1) {
    details_summary(1);
    } else {
    dos=document.getElementsByTagName('details');
    for (idos=0; idos<dos.length; idos++) {
    if (dos[idos].className == "gendetails") {
    dos[idos].removeAttribute('open');
    }
    }
    }
    document.getElementById("eds").innerHTML = "&#10133;";
    document.getElementById("eds").title = "Open up blog posting contents now";
    } else {
    dos=document.getElementsByTagName('details');
    for (idos=0; idos<dos.length; idos++) {
    if (dos[idos].className == "gendetails") {
    dos[idos].setAttribute('open', true);
    }
    }
    document.getElementById("eds").innerHTML = "&#10134;";
    document.getElementById("eds").title = "Blog post contents reduced to summary";
    }
    }

    function details_summary(mou) {
    var dbitssare=document.body.innerHTML.split('<div class="entry-content">');
    var dbitseare=document.body.innerHTML.split('<div class="entry-utility">');
    if (document.URL.indexOf('detailssummary=') != -1 || mou != 0) {
    if (dbitssare.length > 1 && dbitssare.length == dbitseare.length) {
    var dbih=document.body.innerHTML, idbih=1;
    for (var idb=0; idb<dbitssare.length; idb++) {
    if (('' + dbitssare[eval(1 + idb)]).indexOf('<p>') != -1) {
    if (('' + dbitssare[eval(1 + idb)]).split('<p>')[idbih].split('</p>')[0] == '') {
    if (('' + dbitssare[eval(1 + idb)]).split('<p>').length >= eval(1 + eval(idbih))) {
    idbih++;
    }
    }
    dbih=dbih.replace('<div class="entry-content">','<details class="gendetails" title="Click me to toggle open/close ... ' + ('' + dbitssare[eval(1 + idb)]).split('<p>')[idbih].split('</p>')[0].replace(/\'/g,'`').replace(/\"/g,'`').replace(/\>/g,'>').replace(/\</g,'<') + '"><summary></summary><div title="entry-content" class="entry-content">');
    } else {
    dbih=dbih.replace('<div class="entry-content">','<details class="gendetails" title="Click me to toggle open/close"><summary></summary><div title="entry-content" class="entry-content">');
    }
    dbih=dbih.replace('<div class="entry-utility">','</details><div title="entry-utility" class="entry-utility">');
    }
    document.body.innerHTML=dbih;
    }
    if (document.URL.indexOf('detailssummary=') != -1 && mou == 0) {
    document.getElementById("eds").innerHTML = "&#10133;";
    document.getElementById("eds").title = "Open up blog posting contents now";
    document.getElementById("eds").style.visibility='visible';
    }
    } else if (mou == 0 && dbitssare.length > 1 && dbitssare.length == dbitseare.length) {
    document.getElementById("eds").style.visibility='visible';
    }
    }

Of course, this is most of benefit when you are not already honing in on the one WordPress blog posting, but there’s more fun to come, we reckon!

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>