{"id":17561,"date":"2015-10-04T05:01:40","date_gmt":"2015-10-03T19:01:40","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=17561"},"modified":"2015-10-03T12:27:02","modified_gmt":"2015-10-03T02:27:02","slug":"wordpress-visual-synopsis-automated-scrolling-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-visual-synopsis-automated-scrolling-tutorial\/","title":{"rendered":"WordPress Visual Synopsis Automated Scrolling Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wordpress_visual_synopsis.png\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"WordPress Visual Synopsis Automated Scrolling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wordpress_visual_synopsis.png\" title=\"WordPress Visual Synopsis Automated Scrolling Tutorial\" \/><\/a><p class=\"wp-caption-text\">WordPress Visual Synopsis Automated Scrolling Tutorial<\/p><\/div>\n<p>Yesterday, with <a target=_blank title='WordPress Visual Synopsis Slideshow Posting Links Tutorial' href='#wvssplt'>WordPress Visual Synopsis Slideshow Posting Links Tutorial<\/a> as shown below, we continued on with our Visual Synopsis view functionality for this blog, adding some Blog Posting Links, and today, we allow for an automated left to right scrolling functionality.<\/p>\n<p>With this automated scrolling we involved a &#8220;location.href=&#8217;#td_[blog_posting_permalink_code]&#8217;;&#8221; arrangement rather that a &#8220;window.scrollBy(x,y);&#8221; or &#8220;window.scrollTo(x,y);&#8221; method, as this is what worked best on Firefox.<\/p>\n<p>So what coding changes were needed for this blog automated scrolling?  It was only the TwentyTen theme&#8217;s header.php PHP code (of Javascript) that changed for today&#8217;s requirements in <i><b><font color=red>bold itallic<\/i><\/b><\/font> specifically for today <i><b>bold itallic<\/i><\/b> specifically for yesterday and just <b>bold<\/b> for earlier work  &#8230;<\/p>\n<ul>\n<li>header.php <b>bold<\/b> onload event changes, as per our usual pattern, as shown below with &#8230;\n<p><code><br \/>\n<b><i><font color=red><br \/>\nvar sscr=false;<br \/>\nvar xsscr=0;<br \/>\nvar presscr=false;<br \/>\nfunction startscrolling() {<br \/>\n if (sscr) {<br \/>\n  document.getElementById('slide' + 'showdiv').style.borderStyle='dotted';<br \/>\n  xsscr++;<br \/>\n  var tdplaces=document.body.innerHTML.split('&lt;td id=\"td_');<br \/>\n  if (xsscr &gt;= tdplaces.length) xsscr=1;<br \/>\n  var pretdplaces=tdplaces[xsscr].split('\"');<br \/>\n  if (1 == 1) {<br \/>\n  location.href='#td_' + pretdplaces[0];<br \/>\n  } else {<br \/>\n  document.title=xsscr;<br \/>\n  window.scrollTo(xsscr, 0);<br \/>\n  document.title='+' + xsscr;<br \/>\n  }<br \/>\n  setTimeout(startscrolling, 1000);<br \/>\n } else {<br \/>\n  document.getElementById('slide' + 'showdiv').style.borderStyle='solid';<br \/>\n }<br \/>\n}<br \/>\n<\/font><\/i><br \/>\nfunction uptop() {<br \/>\n    var <i>calign='center', endnextp, preendnextp, nexttitle=\"\", prevtitle=\"\", prevbprefix=\"\", bprefix=\"\", preexambit, exambit, ivsbitsare, <\/i>preendp, endp, endpsuffix=\"\", doittoday=false, uptopdiv=\"&lt;div id='slide\" + \"showdiv' style='border: 20px solid yellow;height: 680px; overflow: scroll;'<font color=red> onclick='if (!presscr) { sscr=false; } presscr=false;'<\/font>&gt; &lt;b&gt;&lt;font color=green&gt;&lt;h3<font color=red> id='vssh'<\/font>&gt;Visual Synopsis (Slideshows) ... &lt;a href='#backtoblog' title='Back to Blog'&gt;Back to Blog&lt;\/a&gt;<font color=red> ... &lt;a href='#vssh' id='asscr' onclick='if (!sscr) { presscr=true; sscr=true; startscrolling(); } else { sscr=false;   }; ' title='Scroll to Right'&gt;Scroll to Right&lt;\/a&gt;<\/font>&lt;\/h3&gt;&lt;\/font&gt;&lt;\/b&gt;&lt;br&gt;&lt;table cellpadding=20&gt;&lt;tbody&gt;&lt;tr&gt;&lt;\/tr&gt;&lt;\/tbody&gt;&lt;\/table&gt;&lt;\/div&gt;&lt;p id='backtoblog'&gt;&lt;\/p&gt;\";<br \/>\n<\/b><\/i><br \/>\n...<br \/>\n<\/code><\/p>\n<p>We, again+, hope you try it (you&#8217;re here, again+ &#8230; <a href=# onclick=\"document.getElementById('avs').click();\" title=\"Visual Synopsis\">yoo hoo!<\/a>, again+), and, again+, like it.  <a href=# onclick=\"document.getElementById('avs').click();\" title=\"Visual Synopsis\">Again+<\/a>?<\/p>\n<hr>\n<p id='wvssplt'>Previous relevant <a target=_blank title='WordPress Visual Synopsis Slideshow Posting Links Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-visual-synopsis-slideshow-posting-links-tutorial\/'>WordPress Visual Synopsis Slideshow Posting Links Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wordpress_visual_synopsis.gif\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"WordPress Visual Synopsis Slideshow Posting Links Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wordpress_visual_synopsis.gif\" title=\"WordPress Visual Synopsis Slideshow Posting Links Tutorial\" \/><\/a><p class=\"wp-caption-text\">WordPress Visual Synopsis Slideshow Posting Links Tutorial<\/p><\/div>\n<p>Yesterday, with <a target=_blank title='WordPress Visual Synopsis Slideshow Primer Tutorial' href='#wvsspt'>WordPress Visual Synopsis Slideshow Primer Tutorial<\/a> as shown below, we started on some Visual Synopsis view functionality for this blog.  We got to the point that the blog postings could be summarised up the top in a table enforcing a horizontal line of images and\/or slideshow presentations representing the blog posts on the web page the user is currently on.  We discuss this also at WordPress 4.1.1 with <a target=_blank title='WordPress Visual Synopsis Slideshow Posting Links Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-visual-synopsis-slideshow-posting-links-tutorial\/'>WordPress Visual Synopsis Slideshow Posting Links Tutorial<\/a>.<\/p>\n<p>An improvement to this functionality we&#8217;ve been developing today is to add some meaning to the relationship between these blog postings because at this blog, blog postings can &#8230;<\/p>\n<ol>\n<li>stand alone as a piece of work &#8230; or &#8230;<\/li>\n<li>be the most recent of a series of blog postings linked, usually reverse chronologically, but not always &#8230; or &#8230;<\/li>\n<li>be in the middle of a series of blog postings linked &#8230; or &#8230;<\/li>\n<li>be the oldest of a series of blog postings linked &#8230; quite often our <i>&#8220;&#8230; Primer Tutorial&#8221;<\/i> type of blog posting<\/li>\n<\/ol>\n<p>We&#8217;d like to have the Visual Synopsis reflect these relationships in some ways, so we, respectively &#8230;<\/p>\n<ol>\n<li>center justify the blog posting titles for these &#8230; and &#8230;<\/li>\n<li>left justify the blog posting titles for these and add a single right arrow link to navigate to the next (older) Visual Synopsis cell and add a double right arrow link to navigate to the next (older) Visual Synopsis cell&#8217;s blog posting into a new webpage &#8230; and &#8230;<\/li>\n<li>center justify the blog posting titles for these and add a single left\/right arrow link to navigate to the previous\/next (more recent\/older) Visual Synopsis cell and and add a double left\/right arrow link to navigate to the previous\/next (more recent\/older) Visual Synopsis cell&#8217;s blog posting into a new webpage &#8230; and &#8230;<\/li>\n<li>right justify the blog posting titles for these and add a single left arrow link to navigate to the previous (more recent) Visual Synopsis cell and and add a double left arrow link to navigate to the previous (more recent) Visual Synopsis cell&#8217;s blog posting into a new webpage<\/li>\n<\/ol>\n<p>This is a bit like the very well established web design idea of <a target=_blank title='Breadcrumb navigation technique information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Breadcrumb_%28navigation%29'>&#8220;breadcrumbs&#8221;<\/a> that you see so often on the web, including WordPress blogs.<\/p>\n<p>So what coding changes were needed for this blog posting linking?  It was only the TwentyTen theme&#8217;s header.php PHP code (of Javascript) that changed for today&#8217;s requirements in <i><b>bold itallic<\/i><\/b> specifically for today and just <b>bold<\/b> for yesterday&#8217;s work  &#8230;<\/p>\n<ul>\n<li>header.php <b>bold<\/b> onload event changes, as per our usual pattern, as shown below with &#8230;<br \/>\n<code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n\/\/ ... etc etc etc<br \/>\n<b><i><br \/>\nvar morex=0;<br \/>\nvar prevred=\"\";<br \/>\nvar thisred=\"\";<br \/>\nvar pleaseclickit=false;<br \/>\nfunction sctop() {<br \/>\n if (prevred != \"\") {<br \/>\n   document.getElementById(prevred).style.borderColor='orange';<br \/>\n }<br \/>\n if (thisred != \"\") {<br \/>\n   document.getElementById(thisred).style.borderColor='red';<br \/>\n   prevred=thisred;<br \/>\n }<br \/>\n if (pleaseclickit) {<br \/>\n   document.getElementById(thisred.replace('td_','top_')).click();<br \/>\n   pleaseclickit=false;<br \/>\n }<br \/>\n window.scrollBy(morex,-50);<br \/>\n morex=0;<br \/>\n}<br \/>\nfunction urlit(upc) {<br \/>\n var retlc=upc.toLowerCase();<br \/>\n while (retlc.indexOf(\"\/\") != -1) {<br \/>\n   retlc=retlc.replace(\"\/\",\"\");<br \/>\n }<br \/>\n while (retlc.indexOf(\"+\") != -1) {<br \/>\n   retlc=retlc.replace(\"+\",\"\");<br \/>\n }<br \/>\n while (retlc.indexOf(\"'\") != -1) {<br \/>\n   retlc=retlc.replace(\"'\",\"\");<br \/>\n }<br \/>\n while (retlc.indexOf(\" \") != -1) {<br \/>\n   retlc=retlc.replace(\" \",\"-\");<br \/>\n }<br \/>\n return retlc;<br \/>\n}<br \/>\nfunction breadcrumbit(thisa, statuschars, prevt, nextt) {<br \/>\n  var reta=thisa;<br \/>\n  var topp=\"top\";<br \/>\n  if (thisa.indexOf(\"bottom_\") != -1) topp=\"bottom\";<br \/>\n  if (statuschars == \"  \" && prevt != \"\" && nextt != \"\") {<br \/>\n   reta='&lt;a id=\"ps_' + urlit(prevt) + '\" onclick=\"thisred=' + \"'td_\" + urlit(prevt) + \"'\" + '; pleaseclickit=true; morex=-350; setTimeout(sctop,1000); \" href=#' + topp + '_' + urlit(prevt) + \" title='\" + prevt + \"'&gt;&nbsp;&#8647;&nbsp;&lt;\/a&gt;\" + '&lt;a id=\"s_' + urlit(prevt) + '\" onclick=\"thisred=' + \"'td_\" + urlit(prevt) + \"'\" + '; morex=-350; setTimeout(sctop,1000); \" href=#' + topp + '_' + urlit(prevt) + \" title='\" + prevt + \"'&gt;&nbsp;&#8592;&nbsp;&lt;\/a&gt;\" + thisa + '&lt;a id=\"e_' + urlit(nextt) + '\" onclick=\"thisred=' + \"'td_\" + urlit(nextt) + \"'\" + '; morex=350; setTimeout(sctop,1000);  \"  href=#' + topp + '_' + urlit(nextt) + \" title='\" + nextt + \"'&gt;&nbsp;&#8594;&nbsp;&lt;\/a&gt;\" + '&lt;a id=\"e_' + urlit(nextt) + '\" onclick=\"thisred=' + \"'td_\" + urlit(nextt) + \"'\" + '; pleaseclickit=true; morex=350; setTimeout(sctop,1000);  \"  href=#' + topp + '_' + urlit(nextt) + \" title='\" + nextt + \"'&gt;&nbsp;&#8649;&nbsp;&lt;\/a&gt;\";<br \/>\n  } else if (statuschars == \"  \" && prevt != \"\" && nextt == \"\") {<br \/>\n   reta='&lt;a id=\"ps_' + urlit(prevt) + '\" onclick=\"thisred=' + \"'td_\" + urlit(prevt) + \"'\" + '; pleaseclickit=true; morex=-350; setTimeout(sctop,1000); \" href=#' + topp + '_' + urlit(prevt) + \" title='\" + prevt + \"'&gt;&nbsp;&#8647;&nbsp;&lt;\/a&gt;\" + '&lt;a id=\"s_' + urlit(prevt) + '\" onclick=\"thisred=' + \"'td_\" + urlit(prevt) + \"'\" + '; morex=-350; setTimeout(sctop,1000);  \" href=#' + topp + '_' + urlit(prevt) + \" title='\" + prevt + \"'&gt;&nbsp;&#8592;&nbsp;&lt;\/a&gt;\" + thisa;<br \/>\n  } else if (nextt != \"\" && prevt == \"\") {<br \/>\n   reta=thisa + '&lt;a id=\"e_' + urlit(nextt) + '\" onclick=\"thisred=' + \"'td_\" + urlit(nextt) + \"'\" + '; morex=350; setTimeout(sctop,1000);  \" href=#' + topp + '_' + urlit(nextt) + \" title='\" + nextt + \"'&gt;&nbsp;&#8594;&nbsp;&lt;\/a&gt;\" + '&lt;a id=\"ne_' + urlit(nextt) + '\" onclick=\"thisred=' + \"'td_\" + urlit(nextt) + \"'\" + '; pleaseclickit=true; morex=350; setTimeout(sctop,1000); \" href=#' + topp + '_' + urlit(nextt) + \" title='\" + nextt + \"'&gt;&nbsp;&#8649;&nbsp;&lt;\/a&gt;\";<br \/>\n  }<br \/>\n  return reta;<br \/>\n}<br \/>\n<\/i><br \/>\nfunction uptop() {<br \/>\n    var <i>calign='center', endnextp, preendnextp, nexttitle=\"\", prevtitle=\"\", prevbprefix=\"\", bprefix=\"\", preexambit, exambit, ivsbitsare, <\/i>preendp, endp, endpsuffix=\"\", doittoday=false, uptopdiv=\"&lt;div id='slide\" + \"showdiv' style='border: 20px solid yellow;height: 680px; overflow: scroll;'&gt; &lt;b&gt;&lt;font color=green&gt;&lt;h3&gt;Visual Synopsis (Slideshows) ... &lt;a href='#backtoblog' title='Back to Blog'&gt;Back to Blog&lt;\/a&gt;&lt;\/h3&gt;&lt;\/font&gt;&lt;\/b&gt;&lt;br&gt;&lt;table cellpadding=20&gt;&lt;tbody&gt;&lt;tr&gt;&lt;\/tr&gt;&lt;\/tbody&gt;&lt;\/table&gt;&lt;\/div&gt;&lt;p id='backtoblog'&gt;&lt;\/p&gt;\";<br \/>\n    var vsbitsare=docgetclass(\"wp-caption\", \"div\");<br \/>\n    var wasih=document.body.innerHTML;<br \/>\n    if (wasih.indexOf(\"slid\" + \"eshowdiv\") == -1) {<br \/>\n    for (ivsbitsare=0; ivsbitsare&lt;vsbitsare.length; ivsbitsare++) {<br \/>\n      if (vsbitsare[ivsbitsare].innerHTML.indexOf(\"youtube.com\/watch\") == -1 && vsbitsare[ivsbitsare].innerHTML.indexOf(\"mywta\") == -1) {<br \/>\n       if (uptopdiv.indexOf(encodeURIComponent(vsbitsare[ivsbitsare].innerHTML)) == -1) {<br \/>\n        <i>bprefix=\"\";<br \/>\n        nexttitle=\"\";<br \/>\n        exambit=document.body.innerHTML.split(vsbitsare[ivsbitsare].innerHTML);<br \/>\n        if (exambit.length &gt; 1) {<br \/>\n          preexambit=exambit[0].split(\"&lt;\");<br \/>\n          if (uptopdiv.indexOf(encodeURIComponent(vsbitsare[eval(0 + ivsbitsare)].innerHTML)) == -1 && preexambit[eval(-1 + preexambit.length)].indexOf(\"div \") == 0 && preexambit[eval(-2 + preexambit.length)].indexOf(\"\/p\") == 0 && preexambit[eval(-3 + preexambit.length)].indexOf(\"\/a\") == 0 && preexambit[eval(-4 + preexambit.length)].indexOf(\"a \") == 0 && preexambit[eval(-5 + preexambit.length)].indexOf(\"p \") == 0 && preexambit[eval(-6 + preexambit.length)].indexOf(\"hr\") == 0) {<br \/>\n           bprefix=\"  \";<br \/>\n           if (eval(1 + ivsbitsare) &lt; eval(vsbitsare.length)) {<br \/>\n           endnextp=vsbitsare[eval(1 + ivsbitsare)].innerHTML.split(\"&lt;\/p&gt;\");<br \/>\n        if (endnextp.length &gt; 1) {<br \/>\n          if (endnextp[eval(-1 + endnextp.length)] == \"\") {<br \/>\n            preendnextp=endnextp[eval(-2 + endnextp.length)].split(\"&gt;\");<br \/>\n          } else {<br \/>\n            preendnextp=endnextp[eval(-1 + endnextp.length)].split(\"&gt;\");<br \/>\n          }<br \/>\n        nexttitle=preendnextp[eval(-1 + preendnextp.length)];<br \/>\n            exambit=document.body.innerHTML.split(vsbitsare[eval(1 + ivsbitsare)].innerHTML);<br \/>\n           if (exambit.length &gt; 1) {<br \/>\n            preexambit=exambit[0].split(\"&lt;\");<br \/>\n            if (uptopdiv.indexOf(encodeURIComponent(vsbitsare[eval(1 + ivsbitsare)].innerHTML)) == -1 && preexambit[eval(-1 + preexambit.length)].indexOf(\"div \") == 0 && preexambit[eval(-2 + preexambit.length)].indexOf(\"\/p\") == 0 && preexambit[eval(-3 + preexambit.length)].indexOf(\"\/a\") == 0 && preexambit[eval(-4 + preexambit.length)].indexOf(\"a \") == 0 && preexambit[eval(-5 + preexambit.length)].indexOf(\"p \") == 0 && preexambit[eval(-6 + preexambit.length)].indexOf(\"hr\") == 0) {<br \/>\n             nexttitle=nexttitle; \/\/preendnextp[eval(-1 + preendnextp.length)];<br \/>\n            } else {<br \/>\n             nexttitle=\"\";<br \/>\n            }<br \/>\n           }<br \/>\n        }<br \/>\n        }<br \/>\n          } else if (eval(1 + ivsbitsare) &lt; eval(vsbitsare.length)) {<br \/>\n           endnextp=vsbitsare[eval(eval(1 + ivsbitsare))].innerHTML.split(\"&lt;\/p&gt;\");<br \/>\n        if (endnextp.length &gt; 1) {<br \/>\n          if (endnextp[eval(-1 + endnextp.length)] == \"\") {<br \/>\n            preendnextp=endnextp[eval(-2 + endnextp.length)].split(\"&gt;\");<br \/>\n          } else {<br \/>\n            preendnextp=endnextp[eval(-1 + endnextp.length)].split(\"&gt;\");<br \/>\n          }<br \/>\n        if (1 == 2) nexttitle=preendnextp[eval(-1 + preendnextp.length)];<br \/>\n        }<br \/>\n           exambit=document.body.innerHTML.split(vsbitsare[eval(1 + ivsbitsare)].innerHTML);<br \/>\n           if (exambit.length &gt; 1) {<br \/>\n            preexambit=exambit[0].split(\"&lt;\");<br \/>\n            if (uptopdiv.indexOf(encodeURIComponent(vsbitsare[eval(1 + ivsbitsare)].innerHTML)) == -1 && preexambit[eval(-1 + preexambit.length)].indexOf(\"div \") == 0 && preexambit[eval(-2 + preexambit.length)].indexOf(\"\/p\") == 0 && preexambit[eval(-3 + preexambit.length)].indexOf(\"\/a\") == 0 && preexambit[eval(-4 + preexambit.length)].indexOf(\"a \") == 0 && preexambit[eval(-5 + preexambit.length)].indexOf(\"p \") == 0 && preexambit[eval(-6 + preexambit.length)].indexOf(\"hr\") == 0) {<br \/>\n             bprefix=\" \";<br \/>\n             prevtitle=\"\";<br \/>\n             nexttitle=preendnextp[eval(-1 + preendnextp.length)];<br \/>\n            } else {<br \/>\n             nexttitle=\"\";<br \/>\n            }<br \/>\n           }<br \/>\n          }<br \/>\n        }<br \/>\n        if (bprefix == \"\") prevtitle=\"\";<br \/>\n        <\/i>endpsuffix=\"\";<br \/>\n        endp=vsbitsare[ivsbitsare].innerHTML.split(\"&lt;\/p&gt;\");<i><br \/>\n        calign='center';<br \/>\n        if (bprefix == \" \") calign='left';<br \/>\n        if (bprefix == \"  \" && nexttitle == \"\") calign='right';<br \/>\n        <\/i>if (endp.length &gt; 1) {<br \/>\n          if (endp[eval(-1 + endp.length)] == \"\") {<i><br \/>\n            preendp=endp[eval(-2 + endp.length)].split(\"&gt;\");<br \/>\n            endpsuffix=\"&lt;br&gt;&lt;div align='\" + calign + \"'&gt;&lt;font color=gray&gt;\" + breadcrumbit(\"&lt;a id='top_\" + urlit(preendp[eval(-1 + preendp.length)]) + \"' target=_blank title='\" + preendp[eval(-1 + preendp.length)] + \"' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/\" + urlit(preendp[eval(-1 + preendp.length)]) + \"'&gt;\" + preendp[eval(-1 + preendp.length)] + \"&lt;\/a&gt;\", bprefix, prevtitle, nexttitle) + \"&lt;\/font&gt;&lt;\/div&gt;\";<br \/>\n          <\/i>} else {<i><br \/>\n            preendp=endp[eval(-1 + endp.length)].split(\"&gt;\");<br \/>\n            endpsuffix=\"&lt;br&gt;&lt;div align='\" + calign + \"'&gt;&lt;font color=gray&gt;\" + breadcrumbit(\"&lt;a id='top_\" + urlit(preendp[eval(-1 + preendp.length)]) + \"'  target=_blank title='\" + preendp[eval(-1 + preendp.length)] + \"' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/\" + urlit(preendp[eval(-1 + preendp.length)]) + \"'&gt;\" + preendp[eval(-1 + preendp.length)] + \"&lt;\/a&gt;\", bprefix, prevtitle, nexttitle) + \"&lt;\/font&gt;&lt;\/div&gt;\";<br \/>\n          <\/i>}<br \/>\n        }<i><br \/>\n        prevbprefix=bprefix;<br \/>\n        prevtitle=preendp[eval(-1 + preendp.length)];<br \/>\n        if (uptopdiv.indexOf(encodeURIComponent(vsbitsare[eval(0 + ivsbitsare)].innerHTML)) == -1) uptopdiv=uptopdiv.replace('&lt;\/tr&gt;', '&lt;td id=\"td_' + urlit(preendp[eval(-1 + preendp.length)]) + '\" style=\"border: 5px orange solid;\"&gt;' + endpsuffix.replace('&lt;br&gt;','') + '&lt;br&gt;&lt;iframe style=\"width: 640px;height: 600px;\" src=\"' + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/clicktheslideshow.php?somebodyhtml=\" + encodeURIComponent(vsbitsare[ivsbitsare].innerHTML) + '\"&gt;&lt;\/iframe&gt;' + endpsuffix.replace(\/top_\/g, \"bottom_\").replace(\/#bottom_\/g, \"#top_\") + '&lt;\/td&gt;&lt;\/tr&gt;');<br \/>\n        <\/i>doittoday=true;<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n    if (doittoday) {<br \/>\n      document.body.innerHTML = uptopdiv + wasih;<br \/>\n      window.scrollTo(0,0);<br \/>\n    }<br \/>\n    }<br \/>\n}<br \/>\n<\/b><br \/>\nfunction courseCookies() {<br \/>\n  img_alt();  \/\/ Make sure all img have alt (=title)<br \/>\n  ajaxcontexthelp_mode();  \/\/ Check on Context Help mode<br \/>\n  download_mode();  \/\/ Check on Download mode<br \/>\n  metasep(); \/\/ meta-sep class dropdown<br \/>\n  checkpt(); \/\/ category and tag \"oldest\"<br \/>\n  rptwo();  \/\/ Recent Post images<br \/>\n  ul_li_noclass();  \/\/ Alternative to bullet ul\/li lists<br \/>\n  winit();  \/\/ Ajax functionality 26\/11\/2014 ... slow hover ... not for mobile<br \/>\n  checkMarginLeftImages();<br \/>\n  \/\/setTimeout(checkAcourseBackground, 3000);<br \/>\n  if ((ourpp != \"\" || ourpn != \"\") && ourpp != ourp && ourpn != ourp) {<br \/>\n    quizmaybe('atopn','atopp');<br \/>\n  }<br \/>\n  <b><br \/>\n  var stih=document.getElementById('site-title').innerHTML;<br \/>\n  if (stih.indexOf(\"up\" + \"top\") == -1) { \/\/visualsynopsis=\") != -1) {<br \/>\n    document.getElementById('site-title').innerHTML+='&lt;a <i>id=\"avs\"<\/i> 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)\"&gt;&amp;#127910;&lt;\/a&gt;';<br \/>\n<i>    if (document.URL.indexOf(\"visualsynopsis=\") != -1) document.getElementById('avs').click();<\/i><br \/>\n  }<br \/>\n  <\/b><br \/>\n  \/\/ ... etc etc etc<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload=\" setTimeout(initpostedoncc, 3000); widgetcon(); precc(); courseCookies();\" &lt;?php body_class(); ?&gt;&gt;<br \/>\n<\/code><\/p>\n<p>We, again, hope you try it (you&#8217;re here, again &#8230; <a href=# onclick=\"document.getElementById('avs').click();\" title=\"Visual Synopsis\">yoo hoo!<\/a>, again), and, again, like it.  <a href=# onclick=\"document.getElementById('avs').click();\" title=\"Visual Synopsis\">Again<\/a>?<\/p>\n<hr>\n<p id='wvsspt'>Previous relevant <a target=_blank title='WordPress Visual Synopsis Slideshow Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-visual-synopsis-slideshow-primer-tutorial\/'>WordPress Visual Synopsis Slideshow Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wordpress_visual_synopsis.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"WordPress Visual Synopsis Slideshow Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wordpress_visual_synopsis.jpg\" title=\"WordPress Visual Synopsis Slideshow Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">WordPress Visual Synopsis Slideshow Primer Tutorial<\/p><\/div>\n<p>Think I am not alone in hankering for chances to &#8220;cut to the chase&#8221; when surfing the web, because, although there is great information out there, there can also be too much of it, and users appreciate ways to reduce the amount to take in, on occasions.<\/p>\n<p>At this blog we try to have a visual side up the top of a blog posting, consisting of a combination of &#8230;<\/p>\n<ol>\n<li>one image explaining something about the blog posting &#8230; or &#8230;<\/li>\n<li>a link to a potential slideshow consisting of several image stills &#8230; or &#8230;<\/li>\n<li>one image hoverable overable (our so-called &#8220;twirl&#8221; arrangement, suitable for laptops, at least)<\/li>\n<\/ol>\n<p> &#8230; before the blog posting wording starts.<\/p>\n<p>We figure a good &#8220;cut to the chase&#8221; could be to leave it as that top bit, as a Visual Synopsis (Slideshows) if the blog postings relevant to the WordPress blog webpage the user is currently on.  Sounds a bit silly, when you are already on it?  Well, we don&#8217;t think it is so silly for one of those blog postings that has been developing over time, especially one that has been using many scenario 1 blog postings in a series, because now, if you pick the latest one of these, and choose to invoke this new functionality &#8230;<\/p>\n<p><i>(which, by the way, is invoked by clicking on the Cinema symbol (&amp;#127910; <a target=_blank title='Cinema symbol' href='http:\/\/www.iemoji.com\/view\/emoji\/324\/symbols\/cinema'>&#127910;<\/a>) after the word &#8220;Blog&#8221; up the top of the page)<\/i><\/p>\n<p> &#8230; all the relevant images of blog postings will line up from left to right in chronological order.<\/p>\n<p>Down below we allow you to open a new web page taking you to a WordPress 4.1.1 blog posting, whereas if you click the image of the Visual Synopsis (Slideshows) you may be taken to an image or a slideshow or a live run, perhaps &#8230; it depends, but is more often than not more involved with the &#8220;cutting to the chase&#8221; about the matter than reading the wording of the Blog Posting, perhaps.<\/p>\n<p>It&#8217;s one of those things that some users may like, and others may not.<\/p>\n<p>So what coding changes were needed for this?  It was twofold (basically, though there are Ajax contextual help changes as well), with the usual first suspect being our favourite header.php code changes and then a whole new piece of PHP as per &#8230;<\/p>\n<ul>\n<li>header.php <b>bold<\/b> onload event changes, as per our usual pattern, as shown below with &#8230;<br \/>\n<code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n\/\/ ... etc etc etc<br \/>\n<b><br \/>\nfunction uptop() {<br \/>\n    var preendp, endp, endpsuffix=\"\", doittoday=false, uptopdiv=\"&lt;div id='slide\" + \"showdiv' style='border: 20px solid yellow;height: 680px; overflow: scroll;'&gt; &lt;b&gt;&lt;font color=green&gt;&lt;h3&gt;Visual Synopsis (Slideshows) ... &lt;a href='#backtoblog' title='Back to Blog'&gt;Back to Blog&lt;\/a&gt;&lt;\/h3&gt;&lt;\/font&gt;&lt;\/b&gt;&lt;br&gt;&lt;table cellpadding=20&gt;&lt;tbody&gt;&lt;tr&gt;&lt;\/tr&gt;&lt;\/tbody&gt;&lt;\/table&gt;&lt;\/div&gt;&lt;p id='backtoblog'&gt;&lt;\/p&gt;\";<br \/>\n    var vsbitsare=docgetclass(\"wp-caption\", \"div\");<br \/>\n    var wasih=document.body.innerHTML;<br \/>\n    if (wasih.indexOf(\"slid\" + \"eshowdiv\") == -1) {<br \/>\n    for (var ivsbitsare=0; ivsbitsare&lt;vsbitsare.length; ivsbitsare++) {<br \/>\n      if (vsbitsare[ivsbitsare].innerHTML.indexOf(\"youtube.com\/watch\") == -1 && vsbitsare[ivsbitsare].innerHTML.indexOf(\"mywta\") == -1) {<br \/>\n       if (uptopdiv.indexOf(encodeURIComponent(vsbitsare[ivsbitsare].innerHTML)) == -1) {<br \/>\n        endpsuffix=\"\";<br \/>\n        endp=vsbitsare[ivsbitsare].innerHTML.split(\"&lt;\/p&gt;\");<br \/>\n        if (endp.length &gt; 1) {<br \/>\n          if (endp[eval(-1 + endp.length)] == \"\") {<br \/>\n            preendp=endp[eval(-2 + endp.length)].split(\"&gt;\");<br \/>\n            endpsuffix=\"&lt;br&gt;&lt;font color=gray&gt;&lt;a target=_blank title='\" + preendp[eval(-1 + preendp.length)] + \"' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/\" + preendp[eval(-1 + preendp.length)].toLowerCase().replace(\"\/\",\"\").replace(\" \",\"-\").replace(\"\/\",\"\").replace(\" \",\"-\").replace(\"\/\",\"\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\") + \"'&gt;\" + preendp[eval(-1 + preendp.length)] + \"&lt;\/a&gt;&lt;\/font&gt;\";<br \/>\n          } else {<br \/>\n            preendp=endp[eval(-1 + endp.length)].split(\"&gt;\");<br \/>\n            endpsuffix=\"&lt;br&gt;&lt;font color=gray&gt;&lt;a target=_blank title='\" + preendp[eval(-1 + preendp.length)] + \"' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/\" + preendp[eval(-1 + preendp.length)].toLowerCase().replace(\"\/\",\"\").replace(\" \",\"-\").replace(\"\/\",\"\").replace(\" \",\"-\").replace(\"\/\",\"\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\") + \"'&gt;\" + preendp[eval(-1 + preendp.length)] + \"&lt;\/a&gt;&lt;\/font&gt;\";<br \/>\n          }<br \/>\n        }<br \/>\n        uptopdiv=uptopdiv.replace('&lt;\/tr&gt;', '&lt;td style=\"border: 5px orange solid;\"&gt;' + endpsuffix.replace('&lt;br&gt;','') + '&lt;br&gt;&lt;iframe style=\"width: 640px;height: 600px;\" src=\"' + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/clicktheslideshow.php?somebodyhtml=\" + encodeURIComponent(vsbitsare[ivsbitsare].innerHTML) + '\"&gt;&lt;\/iframe&gt;' + endpsuffix + '&lt;\/td&gt;&lt;\/tr&gt;');<br \/>\n        doittoday=true;<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n    if (doittoday) {<br \/>\n      document.body.innerHTML = uptopdiv + wasih;<br \/>\n      window.scrollTo(0,0);<br \/>\n    }<br \/>\n    }<br \/>\n}<br \/>\n<\/b><br \/>\nfunction courseCookies() {<br \/>\n  img_alt();  \/\/ Make sure all img have alt (=title)<br \/>\n  ajaxcontexthelp_mode();  \/\/ Check on Context Help mode<br \/>\n  download_mode();  \/\/ Check on Download mode<br \/>\n  metasep(); \/\/ meta-sep class dropdown<br \/>\n  checkpt(); \/\/ category and tag \"oldest\"<br \/>\n  rptwo();  \/\/ Recent Post images<br \/>\n  ul_li_noclass();  \/\/ Alternative to bullet ul\/li lists<br \/>\n  winit();  \/\/ Ajax functionality 26\/11\/2014 ... slow hover ... not for mobile<br \/>\n  checkMarginLeftImages();<br \/>\n  \/\/setTimeout(checkAcourseBackground, 3000);<br \/>\n  if ((ourpp != \"\" || ourpn != \"\") && ourpp != ourp && ourpn != ourp) {<br \/>\n    quizmaybe('atopn','atopp');<br \/>\n  }<br \/>\n  <b><br \/>\n  var stih=document.getElementById('site-title').innerHTML;<br \/>\n  if (stih.indexOf(\"up\" + \"top\") == -1) { \/\/visualsynopsis=\") != -1) {<br \/>\n    document.getElementById('site-title').innerHTML+='&lt;a 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)\"&gt;&amp;#127910;&lt;\/a&gt;';<br \/>\n  }<br \/>\n  <\/b><br \/>\n  \/\/ ... etc etc etc<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload=\" setTimeout(initpostedoncc, 3000); widgetcon(); precc(); courseCookies();\" &lt;?php body_class(); ?&gt;&gt;<br \/>\n<\/code>\n<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/clicktheslideshow.php_GETME\" title='clicktheslideshow.php'>clicktheslideshow.php<\/a> &#8230; as you can well imagine there is a lot of PHP <a target=_blank title='PHP file_get_contents method information' href='http:\/\/php.net\/manual\/en\/function.file-get-contents.php'>file_get_contents<\/a><\/li>\n<li>Ajax contextual help changes affected <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/wajax.js--------------------GETME' title='wajax.js'>wajax.js<\/a> (the generic Ajax Javascript code, and its vacant looking mate <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/nothing.js-------GETME' title='nothing.js'>nothing.js<\/a>) (changed as per <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/wordpress\/wajax.js--------------------GETME' title='wajax.js'>wajax.js<\/a> and <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/wordpress\/nothing.js-------GETME' title='nothing.js'>nothing.js<\/a>)<\/li>\n<\/ul>\n<p>We hope you try it (you&#8217;re here &#8230; <a href=# onclick=\"document.getElementById('avs').click();\" title=\"Visual Synopsis\">yoo hoo!<\/a>), and like it.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d17510' onclick='var dv=document.getElementById(\"d17510\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=SQL\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17510' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d17537' onclick='var dv=document.getElementById(\"d17537\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=SQL\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17537' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d17561' onclick='var dv=document.getElementById(\"d17561\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=scrolling\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17561' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday, with WordPress Visual Synopsis Slideshow Posting Links Tutorial as shown below, we continued on with our Visual Synopsis view functionality for this blog, adding some Blog Posting Links, and today, we allow for an automated left to right scrolling &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-visual-synopsis-automated-scrolling-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[151,1703,429,564,652,703,830,932,997,1151,1319,1324,1325,1407,1456],"class_list":["post-17561","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-blog","tag-breadcrumbs","tag-file_get_contents","tag-hierarchy","tag-javascript","tag-linked-list","tag-navigation","tag-php","tag-programming","tag-slideshow","tag-tutorial","tag-twentyten","tag-twentyten-theme","tag-web-design","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17561"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=17561"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17561\/revisions"}],"predecessor-version":[{"id":17564,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17561\/revisions\/17564"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=17561"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=17561"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=17561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}