{"id":16215,"date":"2015-07-29T05:01:21","date_gmt":"2015-07-28T19:01:21","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=16215"},"modified":"2015-08-01T19:08:44","modified_gmt":"2015-08-01T09:08:44","slug":"cssjavascript-text-justification-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/cssjavascript-text-justification-primer-tutorial\/","title":{"rendered":"CSS\/Javascript Text Justification Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/text_justify.gif\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"CSS\/Javascript Text Justification Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/text_justify.jpg\" title=\"CSS\/Javascript Text Justification Primer Tutorial\" id='vqqiwbspt' onmouseover=\"  this.src=this.src.replace('.jpg','.g~i~f').replace('.gif','.j~p~g').replace('~','').replace('~','').replace('~','');    \"      \/><\/a><p class=\"wp-caption-text\">CSS\/Javascript Text Justification Primer Tutorial<\/p><\/div>\n<p>Do you still read hardcopy newspapers or magazines or books?<\/p>\n<p>It depends on your native language written text arrangements a lot, but in English, with a newspaper or magazine or book written in English, it is often the case that the words are in columns, and as we traditionally read left to right &#8230; though, given a few <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=qBiVlMHh7aI'>drinks?!<\/a> &#8230; and so the text (of a paragraph (HTML <a target=_blank title='HTML p tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_p.asp'><i>p<\/i><\/a> tag)) justifies to the left quite often, and sometimes also to the right (against the column).   Think, though, you see this less on the web, and we don&#8217;t do it here, for instance, as the default, at this blog &#8230; until <font size=7>today<\/font> &#8230; easy does it there &#8230; still, today, it is not the <font size=2><i>default<\/i><\/font> but as of today, we allow (albeit, pretty unfriendly) mechanisms by which you can make this left <i>and<\/i> right text justification happen at this WordPress blog.<\/p>\n<p>Before we show how it was achieved on the WordPress blog, as an optional thing, let&#8217;s go over our proof of concept steps we went through with our small HTML <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/justify.html_GETME\">text_justify.html<\/a> (proof of concept) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/justify.html\" title='Live run'>live run<\/a> showing that &#8230;<\/p>\n<ul>\n<li>left and right justification can be achieved via <a target=_blank title='Text justify information from w3schools ... thanks' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_text-justify.asp'>CSS<\/a> as per (within &lt;head&gt; and &lt;\/head&gt;) styling such as &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\ndiv {<br \/>\n    text-align: justify;<br \/>\n    text-justify: inter-word;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code>\n<\/li>\n<li>left and right justification can be achieved dynamically via Javascript as per (within &lt;head&gt; and &lt;\/head&gt;) a <a target=_blank title='HTML p tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_button.asp'>button<\/a> onclick <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/text_justify.jpg\" title='Javascript way off a button'>event<\/a> logic such as &#8230;<br \/>\n<code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\nfunction changethem() {<br \/>\n  var ps=document.getElementsByTagName(\"p\");<br \/>\n  for (var i=0; i&lt;ps.length; i++) {<br \/>\n    ps[i].style.textAlign='justify';<br \/>\n    ps[i].style.textJustify='inter-word';<br \/>\n    ps[i].style.width='100%;';<br \/>\n    ps[i].style.backgroundColor='lightgreen';<br \/>\n  }<br \/>\n  document.getElementById('mybut').style.backgroundColor='lightgreen';<br \/>\n}<br \/>\n&lt;\/script&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>So, coming back to the WordPress blog thoughts, left and right justification is achieved by &#8230;<\/p>\n<ol>\n<li>Clicking on a link for the <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\">Blog<\/a><\/li>\n<li>Clicking on that <i>&#8220;by&#8221;<\/i> dropdown we first started creating with <a target=_blank title='Wordpress Blog Multiple Post Primer Tutorial' href='#wbmppt'>WordPress Blog Multiple Post Primer Tutorial<\/a> (as shown below) &#8230; and clicking its &#8220;BY&#8221; version, or &#8230;<\/li>\n<li>Clicking on that last &#8220;Left and Right Paragraph Justification&#8221; dropdown option (and mobile users may have to click the &lt;-Show button as well) &#8230; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/text_justify.gif\" title='WordPress blog ways'>voila<\/a> &#8230; the blog postings below will be justified (if still in English) to the left <i>and<\/i> the right (at the same time (and not requiring any steak knives))<\/li>\n<\/ol>\n<p>The mechanism by which we allow you, the reader, see the blog you are reading with <i>p<\/i>aragraph justification left <i>and<\/i> right, like you might see in newspapers and magazines, is achieved by hooking into the functionality of <a target=_blank title='Wordpress Blog Multiple Post Primer Tutorial' href='#wbmppt'>WordPress Blog Multiple Post Primer Tutorial<\/a> as shown below &#8230; and the code changes to good old WordPress header.php involved the <b>bold<\/b> changes as below &#8230;<\/p>\n<p><code><br \/>\nfunction metasep() {<br \/>\nvar mss;<br \/>\nif (document.getElementsByClassName) {<br \/>\n mss=document.getElementsByClassName(\"meta-sep\");<br \/>\n} else {<br \/>\n mss=document.getElementsByTagName(\"span\");<br \/>\n}<br \/>\nvar imss, jmss=-1;<br \/>\nfor (imss=0; imss&lt;mss.length; imss++) {<br \/>\nif (jmss &lt; 0 && mss[imss].innerHTML == \"by\") {<br \/>\njmss = imss;<br \/>\n}<br \/>\n}<br \/>\nif (jmss &gt;= 0 && 1 == 1) {<br \/>\n<b>if (1 == 2) <\/b>mss[jmss].innerHTML = \"&lt;select ontouchend=' yehBut(); ' onmouseover=' getBytheby(); ' ontouchstart=' getBytheby(); ' onmouseout=' yehBut(); ' onclick=' this.style.display=\\\"none\\\"; document.getElementById(\\\"stutsm\\\").style.display=\\\"inline\\\"; document.getElementById(\\\"bstutsm\\\").style.display=\\\"inline\\\"; document.getElementById(\\\"sstutsm\\\").style.display=\\\"inline\\\"; document.getElementById(\\\"istutsm\\\").src= document.getElementById(\\\"istutsm\\\").src + \\\"?populate=stutsm\\\"; ' style='width:50px;' id='stuts' title=' ... welcome to the long hover functionality that shows multiple Blog Post showing functionality'&gt;&lt;option value=''&gt;by&lt;\/option&gt;&lt;option value='by'&gt;by&lt;\/option&gt;&lt;\/select&gt;&lt;select multiple size=5 style='width:300px;display:none;' id='stutsm' title='Show multiple tutorials'&gt;&lt;\/select&gt;&lt;input type='button' onclick='metasepnext();' style='display:none;margin-top:-8px;' value='&lt;-Show' id='bstutsm'&gt;&lt;\/input&gt;&lt;span id='sstutsm' style='display:none;'&gt; by &lt;\/span&gt;&lt;iframe style='width:1;height:1;' width=1 height=1 id='istutsm' src='http:\/\/www.rjmprogramming.com.au\/wordpress\/bytheby.php'&gt;&lt;\/iframe&gt;\";<br \/>\n<b>mss[jmss].innerHTML = \"&lt;select ontouchend=' yehBut(); ' onmouseover=' getBytheby(); ' ontouchstart=' getBytheby(); ' onmouseout=' yehBut(); ' onclick=' this.style.display=\\\"none\\\"; document.getElementById(\\\"stutsm\\\").style.display=\\\"inline\\\"; document.getElementById(\\\"bstutsm\\\").style.display=\\\"inline\\\"; document.getElementById(\\\"sstutsm\\\").style.display=\\\"inline\\\"; document.getElementById(\\\"istutsm\\\").src= document.getElementById(\\\"istutsm\\\").src + \\\"?populate=stutsm\\\";  setTimeout(stutsmlast, 3000); ' style='width:50px;' id='stuts' title=' ... welcome to the long hover functionality that shows multiple Blog Post showing functionality'&gt;&lt;option value=''&gt;by&lt;\/option&gt;&lt;option value='by'&gt;by&lt;\/option&gt;&lt;option onclick=' justifyit(); ' value=' '&gt;BY&lt;\/option&gt;&lt;\/select&gt;&lt;select multiple size=5 style='width:300px;display:none;' id='stutsm' title='Show multiple tutorials'&gt;&lt;\/select&gt;&lt;input type='button' onclick='metasepnext();' style='display:none;margin-top:-8px;' value='&lt;-Show' id='bstutsm'&gt;&lt;\/input&gt;&lt;span id='sstutsm' style='display:none;'&gt; by &lt;\/span&gt;&lt;iframe style='width:1;height:1;' width=1 height=1 id='istutsm' src='https:\/\/www.rjmprogramming.com.au\/ITblog\/bytheby.php'&gt;&lt;\/iframe&gt;\";<br \/>\n}<br \/>\n}<br \/>\nfunction justifyit() {<br \/>\n  var ps=document.getElementsByTagName(\"p\");<br \/>\n  for (var i=0; i&lt;ps.length; i++) {<br \/>\n    ps[i].style.textAlign='justify';<br \/>\n    ps[i].style.textJustify='inter-word';<br \/>\n    ps[i].style.width='100%;';<br \/>\n  }<br \/>\n}<br \/>\nfunction stutsmlast() {<br \/>\n  document.getElementById('stutsm').innerHTML += \"&lt;option onclick=' justifyit(); ' value=' '&gt;Left and Right Paragraph Justification&lt;\/option&gt;\";<br \/>\n}<\/b><br \/>\n<\/code><\/p>\n<p>Hope you get ideas from today&#8217;s CSS and Javascript thoughts.<\/p>\n<hr>\n<p id='wbmppt'>Previous relevant <a target=_blank title='Wordpress Blog Multiple Post Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-multiple-post-primer-tutorial\/'>WordPress Blog Multiple Post 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\/bytheby.png\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Wordpress Blog Multiple Post Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/bytheby.png\" title=\"Wordpress Blog Multiple Post Primer Tutorial\" id='qqiwbspt' onmouseover=\"  this.src=this.src.replace('.jpg','.p~n~g').replace('.png','.g~i~f').replace('.gif','.j~p~g').replace('~','').replace('~','').replace('~','');    \"      \/><\/a><p class=\"wp-caption-text\">Wordpress Blog Multiple Post Primer Tutorial<\/p><\/div>\n<p>Like with yesterday&#8217;s <a target=_blank title='Wordpress Blog Oldest Link Primer Tutorial' href='#wbolpt'>WordPress Blog Oldest Link Primer Tutorial<\/a> as shown below, today we again tackle a navigational idea here at this WordPress Blog, and again we are in the area up above the <a target=_blank title='Above the fold information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Above_the_fold'>&#8220;fold&#8221;<\/a>, thank goodness, adding extra functionality underneath an uncontroversial byword &#8230; chortle, chortle.   Today, thought it would be good to offer a navigation option where you would be able to see two tutorials side by side, for comparison purposes perhaps.  We do this by setting up a multiple select HTML tag of tutorial options, and on selecting some tutorial(s) the user gets a new popup <i>var wo=window.open(&#8220;&#8221;,&#8221;_blank&#8221;,&#8221;top=10,left=10,width=1000,height=900&#8243;);<\/i> (with a blank first parameter, that then gets populated via <i>wo.document.write([theNecessaryHTML]);<\/i>) window to show the tutorials, hopefully side by side, but depending on the web platform rendering rules, as well.<\/p>\n<p>To enable such functionality involves a bit of work and it is PHP work in our favourite header.php to establish this link and PHP coding to display that &#8220;multiple&#8221; blog posting possibility as the underlying functionality.<\/p>\n<p>Let&#8217;s start with the header.php changes as shown in <b>bold<\/b> below ( and if there is no course functionality use &lt;body onload=&#8221; metasep(); &#8220;&gt; ) &#8230;<\/p>\n<p><code><br \/>\n<b><br \/>\nfunction metasepnext() {<br \/>\n  \/\/ alert(999);<br \/>\n    var pse, pseone, psetwo;<br \/>\n    var doprefix=\"&lt;html&gt;&lt;body&gt;&lt;table&gt;&lt;tr&gt;&lt;\/tr&gt;&lt;\/table&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n    var sin=document.getElementById(\"stutsm\");<br \/>\n    for (var im=0; im&lt;sin.options.length; im++) {<br \/>\n     if (sin.options[im].selected) {<br \/>\n        if (sin.options[im].value.indexOf(\"=\") != -1) {<br \/>\n            pseone=sin.options[im].value.split(\"&\");<br \/>\n            pse=sin.options[im].value.split(\"=\");<br \/>\n            psetwo=pse[1].split(\"&\");<br \/>\n        if (sin.options[im].value.indexOf(\"?page_id=\") != -1) {<br \/>\n            doprefix=doprefix.replace(\"&lt;\/tr&gt;\", \"&lt;iframe style='width:610;height:900;' src='\" + pseone[0] + \"'&gt;&lt;\/iframe&gt;&lt;\/td&gt;&lt;\/tr&gt;\");<br \/>\n} else {<br \/>\n            doprefix=doprefix.replace(\"&lt;\/tr&gt;\", \"&lt;iframe style='width:610;height:900;' src='\" + pseone[0] + \"#post-\" + psetwo[0] + \"'&gt;&lt;\/iframe&gt;&lt;\/td&gt;&lt;\/tr&gt;\");<br \/>\n}<br \/>\n        }<br \/>\n     }<br \/>\n    }<br \/>\n    if (doprefix.indexOf(\"&lt;tr&gt;&lt;\/tr&gt;\") == -1) {<br \/>\n       var mywo=window.open(\"\", \"_blank\", \"top=20,left=20,width=1250,height=950\");<br \/>\n       mywo.document.write(doprefix);<br \/>\n    }<br \/>\n}<br \/>\nfunction metasep() {<br \/>\nvar mss;<br \/>\nif (document.getElementsByClassName) {<br \/>\n mss=document.getElementsByClassName(\"meta-sep\");<br \/>\n} else {<br \/>\n mss=document.getElementsByTagName(\"span\");<br \/>\n}<br \/>\n  var imss, jmss=-1;<br \/>\n  for (imss=0; imss&lt;mss.length; imss++) {<br \/>\n    if (jmss &lt; 0 && mss[imss].innerHTML == \"by\") {<br \/>\n       jmss = imss;<br \/>\n    }<br \/>\n  }<br \/>\n  if (jmss &gt;= 0 && 1 == 1) {<br \/>\n    \/\/ mss[jmss].style.height = \"50px\";<br \/>\n    \/\/ mss[jmss].style.width = \"50px\";<br \/>\n    \/\/ mss[jmss].innerHTML = \"&lt;iframe src='http:\/\/www.rjmprogramming.com.au\/wordpress\/bytheby.php' title='by'&gt;&lt;\/iframe&gt;\";<br \/>\n    mss[jmss].innerHTML = \"&lt;select ontouchend=' yehBut();  ' onmouseover=' getBytheby();  ' ontouchstart=' getBytheby();  '  onmouseout=' yehBut(); '   onclick=' this.style.display=\"none\"; document.getElementById(\"stutsm\").style.display=\"inline\";  document.getElementById(\"bstutsm\").style.display=\"inline\";  document.getElementById(\"sstutsm\").style.display=\"inline\";   document.getElementById(\"istutsm\").src=  document.getElementById(\"istutsm\").src + \"?populate=stutsm\"; ' style='width:50px;' id='stuts' title=' ... welcome to the long hover functionality that shows multiple Blog Post showing functionality'&gt;&lt;option value=''&gt;by&lt;\/option&gt;&lt;option value='by'&gt;by&lt;\/option&gt;&lt;\/select&gt;&lt;select multiple size=5 style='width:300px;display:none;' id='stutsm' title='Show multiple tutorials'&gt;&lt;\/select&gt;&lt;input type='button' onclick='metasepnext();' style='display:none;margin-top:-8px;' value='&lt;-Show' id='bstutsm'&gt;&lt;\/input&gt;&lt;span id='sstutsm' style='display:none;'&gt; by &lt;\/span&gt;&lt;iframe style='width:1;height:1;' width=1 height=1 id='istutsm' src='http:\/\/www.rjmprogramming.com.au\/wordpress\/bytheby.php'&gt;&lt;\/iframe&gt;\";<br \/>\n  }<br \/>\n}<br \/>\n<\/b><br \/>\nfunction courseCookies() {<br \/>\n<b><br \/>\n  metasep(); \/\/ meta-sep class dropdown<br \/>\n<\/b><br \/>\n  checkpt(); \/\/ category and tag \"oldest\"<br \/>\n  rptwo();  \/\/ Recent Post images<br \/>\n...<br \/>\n}<br \/>\n<\/code><\/p>\n<p>The new standalone PHP source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/bytheby.php_GETME\" title=\"bytheby.php\">bytheby.php<\/a> and you will see in it the use of @<a target=_blank title='file-\nget_contents PHP method information' href='http:\/\/php.net\/manual\/en\/function.file-get-contents.php'>file_get_contents<\/a> PHP method where the @ suppresses immediate output, and so is useful, as is this <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/272361\/how-can-i-handle-the-warning-of-file-get-contents-function-in-php'>link<\/a> &#8230; thanks.<\/p>\n<p>Our contextual help Javascript source code (all in the one place) can be downloaded by <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/wajax.js----------GETME' title='wajax.js'>wajax.js<\/a> which 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> for these modifications today.<\/p>\n<hr \/>\n<p id='wbolpt'>Previous relevant <a target=_blank title='Wordpress Blog Oldest Link Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=11877'>WordPress Blog Oldest Link 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\/OldestTagcat.png\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Wordpress Blog Oldest Link Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/OldestTagcat.png\" title=\"Wordpress Blog Oldest Link Primer Tutorial\" id='qiwbspt' onmouseover=\"  this.src=this.src.replace('.jpg','.p~n~g').replace('.png','.g~i~f').replace('.gif','.j~p~g').replace('~','').replace('~','').replace('~','');    \"   \/><\/a><p class=\"wp-caption-text\">Wordpress Blog Oldest Link Primer Tutorial<\/p><\/div>\n<p>On a WordPress Blog such as this one there are various mechanisms to search for information.   Three of the useful ones are to search by Category or Tag or by search words.   This, by default, with the default behaviour of the underlying template software of the Twenty Ten theme of this WordPress Blog (the last similar posting being <a target=_blank title='Wordpress Blog Submenu Primer Tutorial' href='#wbspt'>WordPress Blog Submenu Primer Tutorial<\/a> as shown below), results in Blog Posting links that sort with the most recent postings first.  For the most part this is a great decision, but there may be times when a user wants an overview of a big topic and start simply, and work up from there.   In such circumstances it makes sense to be able to jump to the oldest, and usually the simplest relevant blog posting, and work from this the other way around.<\/p>\n<p>To enable such functionality involves a bit of work and it is PHP work in our favourite header.php to establish this link and PHP coding to display that &#8220;oldest&#8221; blog posting as the underlying functionality.<\/p>\n<p>Let&#8217;s start with the header.php changes as shown in <b>bold<\/b> below ( and if there is no course functionality use &lt;body onload=&#8221; checkpt(); &#8220;&gt; ) &#8230;<\/p>\n<p><code><br \/>\n<b><br \/>\nfunction checkpt() {<br \/>\n var du=document.URL, ih;<br \/>\n var abit=\"&nbsp&lt;a target='myccor' onclick=\" document.getElementById('myccor').style.width='100%';  document.getElementById('myccor').style.height='1200'; \"   title=' ... welcome to the long hover functionality that shows oldest Blog Posts within a category or tag or normal search' ontouchend=' yehBut();  ' onmouseover=' getOldestPost();  ' ontouchstart=' getOldestPost();  '  onmouseout=' yehBut(); '  href='http:\/\/www.rjmprogramming.com.au\/wordpress\/gotoend.php?\";<br \/>\n var h1s;<br \/>\n if (du.indexOf(\"&paged=\") == -1) {<br \/>\n  if (du.indexOf(\"?cat=\") != -1 || du.indexOf(\"?tag=\") != -1 || du.indexOf(\"?s=\") != -1) {<br \/>\n if (document.body.innerHTML.indexOf(\"Older posts\") != -1) {<br \/>\n   h1s=document.getElementsByTagName(\"h1\");<br \/>\n   for (ih=0; ih&lt;h1s.length; ih++) {<br \/>\n    if (h1s[ih].className == \"page-title\") {<br \/>\n     if (h1s[ih].innerHTML.indexOf(\"&lt;\/span&gt;\") != -1) {<br \/>\n        abit = abit + location.search.substring(1) + \"&max=256&step=256'&gt;(oldest)&lt;\/a&gt;\";<br \/>\n        h1s[ih].innerHTML = h1s[ih].innerHTML.replace(\"&lt;\/span&gt;\", abit + \"&lt;\/span&gt;\");<br \/>\n     }<br \/>\n}<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n }<br \/>\n}<br \/>\n<\/b><br \/>\nfunction courseCookies() {<br \/>\n<b><br \/>\n  checkpt(); \/\/ category and tag \"oldest\"<br \/>\n<\/b><br \/>\n  rptwo();  \/\/ Recent Post images<br \/>\n...<br \/>\n}<br \/>\n<\/code><\/p>\n<p>The new standalone PHP source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/gotoend.php_GETME\" title=\"gotoend.php\">gotoend.php<\/a> and you will see in it the use of @<a target=_blank title='file-\nget_contents PHP method information' href='http:\/\/php.net\/manual\/en\/function.file-get-contents.php'>file_get_contents<\/a> PHP method where the @ suppresses immediate output, and so is useful, as is this <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/272361\/how-can-i-handle-the-warning-of-file-get-contents-function-in-php'>link<\/a> &#8230; thanks.<\/p>\n<p>Our contextual help Javascript source code (all in the one place) can be downloaded by <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/wajax.js---------GETME' title='wajax.js'>wajax.js<\/a> which 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> for these modifications today.<\/p>\n<hr \/>\n<p id='wbspt'>Previous relevant <a target=_blank title='Wordpress Blog Submenu Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=11802'>WordPress Blog Submenu 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\/WordpressSubmenu-10of.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Wordpress Blog Submenu Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/WordpressSubmenu-10of.jpg\" title=\"Wordpress Blog Submenu Primer Tutorial\" id='iwbspt' onmouseover=\"  this.src=this.src.replace('12of','8OF').replace('11of','12OF').replace('10of','11OF').replace('9of','10OF').replace('8of','9OF').replace('OF','of');    \"   \/><\/a><p class=\"wp-caption-text\">Wordpress Blog Submenu Primer Tutorial<\/p><\/div>\n<p>Lots of websites have a menu of options somewhere near to the top of their landing pages (and the others that follow), to put the navigable parts of the website close to the user&#8217;s attention.  So you definitely see those major options up above the <a target=_blank title='Above the fold information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Above_the_fold'>&#8220;fold&#8221;<\/a> (in web design parlance) &#8230; and that is great.   The other thing people who surf the net (on laptops or desktops, and even though the hover event is not a mobile device thing, the innards of WordPress are helping it work for mobile devices as well) often instinctively do, is to hover over those menus looking to see if there are any submenus coming off those menus, and &#8220;gettable toable&#8221; without having clicked (or touched) anything yet.  These submenus are a win-win for everybody in a lot of ways, because the user may be interested in that functionality, and the web designer can fit more functionality in without overcrowding the look of the web design.<\/p>\n<p>In WordPress, and here we are specifically exemplifying the &#8220;Twenty Ten&#8221; theme used for this WordPress Blog website, it is a pretty simple procedure to add a submenu (or dropdown menu) &#8230;<\/p>\n<ol>\n<li>Log on as the Administrator using the Meta Menu option &#8220;Site Admin&#8221; over to the right (of the WordPress &#8220;Twenty Ten&#8221; theme, anyway) and down the bottom<\/li>\n<li>Hover over Page icon and pick &#8220;Add New Page&#8221; option (this type of work is the essence of <a target=_blank title='Content Management System' href='http:\/\/en.wikipedia.org\/wiki\/Content_management_system'>CMS<\/a> (Content Management System) &#8230; your easier way of &#8220;uploading&#8221; content to your blog (or forum or whatever))<\/li>\n<li>Make sure the viewing option tag is set to &#8220;HTML&#8221;, rather than &#8220;Visual&#8221; &#8230; it&#8217;s easier to learn some HTML<\/li>\n<li>Enter in a good submenu webpage Title &#8230; after a bit you get underneath that title a message from WordPress &#8230; example for our pictured &#8220;Ephemeral&#8221; submenu is &#8220;Permalink: http:\/\/www.rjmprogramming.com.au\/wordpress\/?page_id=11781&#8221;<\/li>\n<li>At right in Page Attributes section with the Parent dropdown we pick &#8220;One Image Site&#8221; as the parent menu under which we want to see &#8220;Ephemeral&#8221; &#8230; by the way, the order of this versus the next step is not important &#8230;<\/li>\n<li>Now you have the job of putting in content, which is up to you, but for &#8220;Ephemeral&#8221; we want to navigate directly to &#8220;Ephemeral&#8221; webpages with a popup window, so we use blog page code (note how the 11781 is used) like &#8230;<br \/>\n<code><br \/>\n&lt;script&gt;<br \/>\n if ((document.URL + \"*\").indexOf(\"?page_id=11781*\") != -1) {<br \/>\n  window.open(\"http:\/\/www.rjmprogramming.com.au\/ephemeral\", \"_blank\", \"left=100,top=100,width=900,height=800\");<br \/>\n}<br \/>\n&lt;\/script&gt;<br \/>\n<\/code>\n<\/li>\n<li>Click or touch the Publish button &#8230; and voila, &#8220;Ephemeral&#8221; appears as a workable submenu (or dropdown menu)<\/li>\n<\/ol>\n<p>In a way, personally, <a target=_blank title='HTML select tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp'>dropdowns<\/a> are good for this same basic reason of maximising information for the least amount of space.  Whether overcrowding is not your &#8220;scene&#8221; will determine your feelings on this subject &#8230; perhaps you&#8217;d like to read about <a target=_blank title='Bread or Toast Cut Diagonally So Much Better' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=1515'>diagonally cut sandwiches<\/a> while you think about it?<\/p>\n<p>Hope you get something out of our tutorial today, and please note that any self-respecting CMS platform (or other WordPress theme other than &#8220;Twenty Ten&#8221;) will be able to do this same functionality, as it is commonly asked for by the web design community.<\/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='#d11802' onclick='var dv=document.getElementById(\"d11802\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Wordpress\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d11802' 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='#d11877' onclick='var dv=document.getElementById(\"d11877\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=PHP\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d11877' 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='#d11877' onclick='var dv=document.getElementById(\"d11877\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=PHP\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d11877' 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='#d11877' onclick='var dv=document.getElementById(\"d11877\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d11877' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Do you still read hardcopy newspapers or magazines or books? It depends on your native language written text arrangements a lot, but in English, with a newspaper or magazine or book written in English, it is often the case that &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/cssjavascript-text-justification-primer-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":[281,576,652,1643,997,1212,1254,1644,1319,1456],"class_list":["post-16215","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-css","tag-html","tag-javascript","tag-justification","tag-programming","tag-styling","tag-text","tag-text-justification","tag-tutorial","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/16215"}],"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=16215"}],"version-history":[{"count":12,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/16215\/revisions"}],"predecessor-version":[{"id":16336,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/16215\/revisions\/16336"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=16215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=16215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=16215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}