{"id":17095,"date":"2015-09-11T05:01:54","date_gmt":"2015-09-10T19:01:54","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=17095"},"modified":"2016-02-08T18:19:51","modified_gmt":"2016-02-08T08:19:51","slug":"html-with-external-javascript-multiple-slottings-in-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-with-external-javascript-multiple-slottings-in-tutorial\/","title":{"rendered":"HTML with External Javascript Multiple Slottings In Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML with External Javascript Multiple Slottings In Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.gif\" title=\"HTML with External Javascript Multiple Slottings In Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML with External Javascript Multiple Slottings In Tutorial<\/p><\/div>\n<p>Our quest to extend the functionality of our &#8220;slotterer inerrer&#8221; of HTML elements continues today, to the brink of where, to go forward, we may introduce an optional use of PHP server-side functionality, as of tomorrow.  But for today, we show that HTML with External Javascript will be enough to allow for the entry of several URLs of HTML data, at the one sitting, to add that <a target=_blank title='onions' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=onion'>&#8220;onion of the 4th dimension&#8221;<\/a> feel.  Is it okay to do this &#8220;midstream&#8221;?   We think that it is not so bad, but perhaps better, in a large project, especially, is to sit down at the planning stage and envisage this requirement, and plan accordingly &#8230; c&#8217;est la vie.<\/p>\n<p>We like to offer comma separated user entry options to allow for such extended functionality usually, because so many people are so used to the CSV (comma separated data) format &#8230; and have you noticed how friendly CSV is with Spreadsheet programs like Excel?<\/p>\n<p>So the HTML was unaffected by this change, as you might expect with a burgeoning modular design, but the existing core of the (external) Javascript needed tweaking.<\/p>\n<p>We&#8217;ve tried to follow some of the cues of <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-writes-php-vertical-textboxes-primer-tutorial\/' title='PHP Writes PHP Vertical TextBoxes Primer Tutorial'>PHP Writes PHP Vertical TextBoxes Primer Tutorial<\/a> to aid with generic thinking external Javascript here that both &#8230;<\/p>\n<ul>\n<li>works as a unit tested piece of coding &#8230; and &#8230;<\/li>\n<li>stays true to the interface requirements should PHP get done later, as a layer of &#8220;smarts&#8221; over it<\/li>\n<\/ul>\n<p> &#8230; &#8220;unit testing&#8221; being the most important thing here &#8230; if you can unit test effectively you can build just about any complicated thing, out of its parts, with a web application, or desktop one, for that matter.  Sometimes the quest to unit test a part of a project you are doing within an IDE can be the most challenging part of the whole project &#8230; because there can be, occasionally, with IDE work, the disadvantage that the parts of code to make up the solution get intertwined with the IDE, and, perhaps, get too dependent on the existance of the other parts to separate them, and &#8220;unit test&#8221; that they are &#8220;good to go&#8221; as a tiny separate part of the solution.  The thing to look for, is entry and exit points, such as &#8230;<\/p>\n<ul>\n<li>perhaps a &#8220;unit tested&#8221; piece of code kicks in when a file of a certain type exists &#8230; well, create that file yourself, and &#8220;unit test&#8221; manually, or perhaps, in an IDE, via the use of its debugger<\/li>\n<li>perhaps a &#8220;unit tested&#8221; piece of code kicks in when another process finishes &#8230; perhaps, temporarily, here, add the code line to the &#8220;parent&#8221; process code, near its end, presumably, to run your &#8220;unit tested&#8221; bit, and while the code is this way, run that &#8220;parent&#8221; code only &#8230; and when happy, put things back to the way they were<\/li>\n<li>etcetera, etcetera, etcetera<\/li>\n<\/ul>\n<p>Behind today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\" title='Click picture'>live run<\/a> is the HTML and Javascript source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html-----GETME\" title='slotin.html'>slotin.html<\/a> which didn&#8217;t change from yesterday as you can see <a target=_blank onclick=\"window.open('http:\/\/www.youtube.com\/watch?v=rTVjnBo96Ug','_blank');\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html-----GETME\" title='slotin.html'>here<\/a>.  You will do best &#8220;connecting the dots&#8221; to the &#8220;iframe dash&#8221; by trying out the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\" title='Click picture'>live run<\/a> and seeing how this web application works.<\/p>\n<p>The Javascript source code <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.js--GETME\" title='slotin.js'>slotin.js<\/a> had these <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.js--GETME\" title='slotin.js'>changes<\/a>.<\/p>\n<p>So please try a run with a few URLs comma separated as well <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.htm\" title='Comma separated live run simulated via external Javascript usage'>here<\/a>.<\/p>\n<hr>\n<p id='hwejsit'>Previous relevant <a target=_blank title='HTML with External Javascript Slotting In Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-with-external-javascript-slotting-in-tutorial'>HTML with External Javascript Slotting In Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML with External Javascript Slotting In Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.png\" title=\"HTML with External Javascript Slotting In Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML with External Javascript Slotting In Tutorial<\/p><\/div>\n<p>There are a few reasons to continue on the quest to improve our &#8220;slotterer inerrer&#8221; of HTML elements.  Three of these reasons below are the focus of today&#8217;s tutorial.<\/p>\n<ol>\n<li>Where we left off yesterday (<a target=_blank title='HTML\/Javascript Slotting In Iframe Tutorial' href='#hjsiit'>HTML\/Javascript Slotting In Iframe Tutorial<\/a> as shown below) we had some success allowing for the HTML elements of this rjmprogramming.com.au domain&#8217;s webpage HTML elements be collected, and be available to be slotted into our slotin.html web application we&#8217;ve been working on lately.  However, am not sure if you noticed, but many HTML <a target=_blank title='HTML img tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_img.asp'>img<\/a> tags were missing and HTML a tags were often resulting in &#8220;broken links&#8221; &#8230; can you hazard a guess why?\n<p> &#8230; <\/p>\n<p> &#8230; if you guessed &#8220;it&#8217;s to do with relative URLs&#8221; you&#8217;d have been spot on &#8230; as relative URLs need the context of where the HTML is run from, to succeed, and we&#8217;d done nothing to change those relative URLs that are &#8220;out of sync&#8221;, so they should be mapped to &#8220;absolute URLs&#8221; to fix this problem &#8230; do you remember us concerning ourselves about this with our PHP tutorial called <a target=_blank title='Javascript putElement(s)By via PHP Relative URLs Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-putelementsby-via-php-relative-urls-tutorial\/'>Javascript putElement(s)By via PHP Relative URLs Tutorial<\/a>?  The basis for today&#8217;s similarly minded Javascript code is based on code from that PHP, as shown below &#8230;<br \/>\n<code><br \/>\nvar url=\"\";  \/\/ filled out in other parts of the external Javascript<br \/>\nfunction relative_to_absolute(inth) {<br \/>\n    var huhs, posthuhs, ii, m, delimis=\" \";<br \/>\n    var uubits=url.split(\"?\");<br \/>\n    if (uubits[0].indexOf(\"\/\") != -1) {<br \/>\n      var uuubits=uubits[0].split(\"\/\");<br \/>\n      if (uuubits[eval(uuubits.length - 1)] != \"\") {<br \/>\n        if (uuubits[eval(uuubits.length - 1)].indexOf(\".\") != -1) {<br \/>\n          uubits[0] = uubits[0].replace(\"\/\" + uuubits[eval(uuubits.length - 1)], \"\/\");<br \/>\n        } else {<br \/>\n          uubits[0] += \"\/\";<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    var uudirname=uubits[0];<br \/>\n    var outth = inth;<br \/>\n    var ideas = new Array(\" href='\", ' href=\"', \" Href='\", ' Href=\"', \" HREF='\", ' HREF=\"', \" href=\", \" Href=\", \" HREF=\", \" src='\", ' src=\"', \" Src='\", ' Src=\"', \" SRC='\", ' SRC=\"', \" src=\", \" Src=\", \" SRC=\");<br \/>\n    if (uudirname != \"\" && url != \"\") {<br \/>\n     for (m=0; m&lt;ideas.length; m++) {<br \/>\n      huhs = inth.split(ideas[m]);<br \/>\n      if (huhs.length &gt; 1) {<br \/>\n        for (ii=eval(huhs.length - 1); ii&gt;=1; ii--) {<br \/>\n          delimis=ideas[m].substring(eval(ideas[m].length - 1), eval(ideas[m].length));<br \/>\n          if (delimis == \"=\") delimis=\" \";<br \/>\n          posthuhs=huhs[ii].trim().replace(\"&gt;\",\" \").replace(\/mailto:\/g, \"http:\").replace(\/javascript:none;\/g, \"http:\").split(delimis);<br \/>\n          if (posthuhs[0].length &gt; 0) {<br \/>\n          if (posthuhs[0].substring(0,1) == \"#\" || posthuhs[0].substring(0,4).toLowerCase().replace(\/file\/g, \"http\").toLowerCase() == \"http\") {<br \/>\n              outth = outth;<br \/>\n          } else if (posthuhs[0].substring(0,1) != \"\/\" && posthuhs[0].substring(0,1) != \"'\" && posthuhs[0].substring(0,1) != '\"') {<br \/>\n              while (outth.indexOf(posthuhs[0]) != -1) {<br \/>\n                outth=outth.replace(posthuhs[0], \"youwill-never-ever-findthis\");<br \/>\n              }<br \/>\n              outth=outth.replace(\/youwill-never-ever-findthis\/g, uudirname + posthuhs[0]);<br \/>\n              \/\/alert(posthuhs[0] + \" To \" + uudirname + posthuhs[0]);<br \/>\n          } else if (posthuhs[0].substring(1,2) != \"\/\" && posthuhs[0].substring(0,1) != \"'\" && posthuhs[0].substring(0,1) != '\"') {<br \/>\n              while (outth.indexOf(posthuhs[0]) != -1) {<br \/>\n                outth=outth.replace(posthuhs[0], \"youwill-never-ever-findthis\");<br \/>\n              }<br \/>\n              outth=outth.replace(\/youwill-never-ever-findthis\/g, uudirname.substring(0, eval(uudirname.length - 1)) + posthuhs[0]);<br \/>\n              \/\/alert(posthuhs[0] + \" to \" + uudirname.substring(0, eval(uudirname.length - 1)) + posthuhs[0]);<br \/>\n          }<br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n     }<br \/>\n    }<br \/>\n    return outth;<br \/>\n}<\/code>\n<\/li>\n<li>we wanted to gather the internal Javascript we&#8217;ve been using and put it into external Javascript for a couple of reasons &#8230;\n<ul>\n<li>modularity<\/li>\n<li>think we may make use of some more generic code design that can come into play via the calling of external Javascript &#8230; ideas still stewing &#8230; like we did with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-writes-php-vertical-textboxes-primer-tutorial\/' title='PHP Writes PHP Vertical TextBoxes Primer Tutorial'>PHP Writes PHP Vertical TextBoxes Primer Tutorial<\/a><\/li>\n<\/ul>\n<\/li>\n<li>we wanted to tell the user if the HTML iframe we use causes a cross-domain error to occur resulting in a change to the &#8220;andthen&#8221; function as per &#8230;<br \/>\n<code><br \/>\nvar errcnt=0;<br \/>\nfunction andthen() {<br \/>\n    xf = document.getElementById(\"myiframe\");<br \/>\n    yf = (xf.contentWindow || xf.contentDocument);<br \/>\n    try {<br \/>\n    if (yf.document) { yf = yf.document; }<br \/>\n    if (yf.body == null) {<br \/>\n    errcnt++;<br \/>\n    \/\/document.title += errcnt;<br \/>\n    setTimeout(andthen, 2000);<br \/>\n    if (errcnt == 15) alert(\"This URL ... \" + url + \" ... cannot be examined.\");<br \/>\n    } else {<br \/>\n    errcnt=0;<br \/>\n    \/\/alert(yf.body.innerHTML);<br \/>\n    fillarrays(encodeURIComponent(yf.body.innerHTML));<br \/>\n    }<br \/>\n    } catch (err) {<br \/>\n    errcnt+=15;<br \/>\n    if (errcnt &gt;= 15) {<br \/>\n      errcnt=0;<br \/>\n      alert(\"The URL ... \" + url + \" ... cannot be examined ... \" + err.message);<br \/>\n    } else {<br \/>\n      setTimeout(andthen, 2000);<br \/>\n    }<br \/>\n    }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8230; utilizing the Javascript try\/catch error catching functionality you can read more about <a target=_blank title='Javascript try\/catch error catching functionality information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_errors.asp'>here<\/a>\n<\/li>\n<\/ol>\n<p>The corresponding HTML and Javascript code affects for this were &#8230;<\/p>\n<ol>\n<li>the HTML and Javascript source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html---GETME\" title='slotin.html'>slotin.html<\/a> which improved in functionality from yesterday via these <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html---GETME\" title='slotin.html'>changes<\/a><\/li>\n<li>the HTML source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html----GETME\" title='slotin.html'>slotin.html<\/a> shrunk a lot as you can see with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html----GETME\" title='slotin.html'>this link<\/a> because the external Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.js-GETME\" title='slotin.js'>slotin.js<\/a> was created<\/li>\n<li>the Javascript source code <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.js-GETME\" title='slotin.js'>changes<\/a> involved modularisation readiness (bit like with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-writes-php-vertical-textboxes-primer-tutorial\/' title='PHP Writes PHP Vertical TextBoxes Primer Tutorial'>PHP Writes PHP Vertical TextBoxes Primer Tutorial<\/a>) and that cross-domain error checking<\/li>\n<\/ol>\n<p>To see this in action, try a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\" title='Click picture'>live run<\/a>.<\/p>\n<hr>\n<p id='hjsiit'>Previous relevant <a target=_blank title='HTML\/Javascript Slotting In Iframe Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-slotting-in-iframe-tutorial\/'>HTML\/Javascript Slotting In Iframe Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript Slotting In Iframe Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin-172of.jpg\" title=\"HTML\/Javascript Slotting In Iframe Tutorial\" id='iosi' onmouseover=\"  this.src=this.src.replace('166of.j','167of.xj').replace('167of.j','168of.xj').replace('168of.j','169of.xj').replace('169of.j','170of.xj').replace('170of.j','171of.xj').replace('171of.j','172of.xj').replace('172of.j','173of.xj').replace('173of.j','166of.xj').replace('.xj','.j');  \" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Slotting In Iframe Tutorial<\/p><\/div>\n<p>Okay, so we&#8217;ve come enough of a full circle to not be too dizzy, and to be able to show you a bit more to the &#8220;slotting in&#8221; concept of a couple of days ago, now that, yesterday, you saw how an HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> element can be a child to a normal everyday run-of-the-mill average so-so &#8230; okaaaayyy already! &#8230; HTML webpage parent, who is pretty much part of the crowd if you know what <font size=2>we of the usual crowd<\/font> <font size=1>mean.<\/font><\/p>\n<p>So, today, with no PHP tricks up the left sleeve and no handkerchiefs up the right sleeve, and definitely no Ajax cleaning products up the middle sleeve, we allow you (on this rjmprogramming.com.au) to pluck out HTML elements from one webpage, and be able to place them dynamically and position them on the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\" title='Click picture'>live run<\/a> webpage, building on <a target=_blank title='HTML\/Javascript Slotting In Follow Up Tutorial' href='#hjsifut'>HTML\/Javascript Slotting In Follow Up Tutorial<\/a> as shown below.<\/p>\n<p>Some issues surprise piecing this functionality together, when you involve real web data &#8230; that is a thing about programming &#8230; there is a big surprising phase of the programming\/unit testing phase when you let it loose on some real web data, where you should factor in &#8220;surprise time&#8221; &#8230; and we &#8220;kludged&#8221; somewhat for &#8230;<\/p>\n<ul>\n<li>CSS style position:absolute; &#8230; we &#8220;kludged&#8221; to position:relative; &#8230; no, we didn&#8217;t do position:second-cousin-twice-removed;<\/li>\n<li>we avoided &#8220;too simple&#8221; HTML elements not involving a blank of some sort (eg. &lt;br&gt;) &#8230; telling them apart would involve more work, which we didn&#8217;t do<\/li>\n<li>we did an initial <i>setTimeout(andthen, 2000);<\/i> approach to making the &#8220;connection&#8221; to the HTML iframe element, but found that, in the real world, you need to cater for slower scenarios and &#8220;wait&#8221; for &#8220;yf.body&#8221; &#8230; in that similar way to <a target=_blank title='Javascript DOM Big Changes Iframe Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-dom-big-changes-iframe-tutorial\/'>Javascript DOM Big Changes Iframe Tutorial<\/a>&#8216;s (of yesterday) &#8220;yf.body&#8221; was not null &#8230; as per &#8230;<br \/>\n<code><br \/>\nfunction andthen() {<br \/>\n    xf = document.getElementById(\"myiframe\");<br \/>\n    yf = (xf.contentWindow || xf.contentDocument);<br \/>\n    if (yf.document) { yf = yf.document; }<br \/>\n    if (yf.body == null) {<br \/>\n    setTimeout(andthen, 2000);<br \/>\n    } else {<br \/>\n    fillarrays(encodeURIComponent(yf.body.innerHTML));<br \/>\n    }<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li>we didn&#8217;t try a drag and drop approach (which we may or may not try one day &#8230; again, mobile platforms present problems here)<\/li>\n<li>how good\n<p><i> var blah=window.open(&#8220;&#8221;, &#8220;_blank&#8221;, &#8220;top=100,left=100,width=400,height=400&#8221;);<br \/> blah.document.write([someHTML]);<\/i><\/p>\n<p> is as a way to display an HTML element &#8230; but, sadly, not so apt in the mobile platform space<\/li>\n<\/ul>\n<p>Behind today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\" title='Click picture'>live run<\/a> is the HTML and Javascript source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html--GETME\" title='slotin.html'>slotin.html<\/a> which improved in functionality a couple of days ago via these <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html--GETME\" title='slotin.html'>changes<\/a>.  You will do best &#8220;connecting the dots&#8221; to the &#8220;iframe dash&#8221; by trying out the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\" title='Click picture'>live run<\/a> and seeing how this web application works.<\/p>\n<hr>\n<p id='hjsifut'>Previous relevant <a target=_blank title='HTML\/Javascript Slotting In Follow Up Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-slotting-in-follow-up-tutorial\/'>HTML\/Javascript Slotting In Follow Up Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript Slotting In Follow Up Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotting_in.gif\" title=\"HTML\/Javascript Slotting In Follow Up Tutorial\" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Slotting In Follow Up Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a target=_blank title='HTML\/Javascript Slotting In Primer Tutorial' href='#hjsipt'>HTML\/Javascript Slotting In Primer Tutorial<\/a> as shown below, got the ball rolling for our generic &#8220;slotting in&#8221; HTML element web application based around <a target=_blank title='HTML DOM innerHTML Property information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp'>HTML DOM innerHTML property<\/a> program logic.<\/p>\n<p>The work yesterday was a start but the &#8220;slotting in&#8221; was pretty non-specific by nature, and in describing it in a dropdown (HTML <a target=_blank title='HTML select tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp'>select<\/a> element) we describe it as <i>&#8220;Nearby&#8221;<\/i> &#8230; but what if you want to place the new HTML element <i>&#8220;Before&#8221;<\/i> or <i>&#8220;After&#8221;<\/i>?   Today&#8217;s work goes towards improving the program logic, with this more precise functionality in mind.<\/p>\n<p>We need Javascript <a target=_blank title='Javascript Array object information' href='http:\/\/www.ecma-international.org\/ecma-262\/5.1\/#sec-15.4'>Array<\/a> objects to get this going, and you may remember us discussing this with <a target=_blank title='Javascript Array List of Functionality Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-array-list-of-functionality-primer-tutorial\/'>Javascript Array List of Functionality Primer Tutorial<\/a> in previous times.<\/p>\n<p>Behind today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\" title='Click picture'>live run<\/a> is the HTML and Javascript source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html-GETME\" title='slotin.html'>slotin.html<\/a> which improved in functionality from yesterday via these <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html-GETME\" title='slotin.html'>changes<\/a>.  You will do best &#8220;connecting the dots&#8221; by trying out the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\" title='Click picture'>live run<\/a> and seeing how this web application works.<\/p>\n<hr>\n<p id='hjsipt'>Previous relevant <a target=_blank title='HTML\/Javascript Slotting In Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-slotting-in-primer-tutorial\/'>HTML\/Javascript Slotting In 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\/HTMLCSS\/slotin.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript Slotting In Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotting_in.jpg\" title=\"HTML\/Javascript Slotting In Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Slotting In Primer Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a target=_blank title='Wordpress Posted On CSS Styling Following You Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-posted-on-css-styling-following-you-tutorial\/'>WordPress Posted On CSS Styling Following You Tutorial<\/a> set us to thinking about a generic web application to slot in HTML elements into existing web pages.  There are ways, again, with Javascript DOM to do with nodes and hierarchical child and parent HTML element relationships that may do the job, but we opted to concentrate (with Javascript DOM) on the <a target=_blank title='HTML DOM innerHTML Property information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp'>HTML DOM innerHTML property<\/a>, and nag away at its endless uses, it seems to us.  This property is truly amazingly useful.<\/p>\n<p>As your HTML knowledge has progressed you have no doubt come across HTML elements where the <i>innerHTML<\/i> property is not defined, the one springing to mind being the HTML <a target=_blank title='HTML input tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_input.asp'>input<\/a> element.  They are ones not needing a <i>&lt;\/[tagName]&gt;<\/i> type of closing arrangement.  Our web application, today, still attempts to be able to allow a <i>&#8220;slotting in&#8221;<\/i> even for these, if they have a defined ID= that is.  So how is this done?  Well, <i>innerHTML<\/i> is not only defined for those &#8220;smaller&#8221; sized HTML element arrangements, but it also makes sense for &#8230;<\/p>\n<ul>\n<li>body &#8230; as in document.body.innerHTML &#8230; and do you remember? &#8230;<\/li>\n<li>head &#8230; as in document.head.innerHTML &#8230; and the use of this in <a target=_blank title='HTML\/Javascript Vertical Buttons Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-vertical-buttons-primer-tutorial\/'>HTML\/Javascript Vertical Buttons Primer Tutorial<\/a><\/li>\n<\/ul>\n<p> &#8230; so we make use of that document.body.innerHTML to slot our new HTML element in front of <i>&lt;[document.getElementById([theID]).tagName] ID=&#8221;[theID]&#8221;<\/i> to make this happen.<\/p>\n<p>What else comes into play today?  One thing that we hadn&#8217;t had to resort to much in the past was the <a target=_blank title='HTMLCollection interface information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCollection'>HTMLCollection<\/a> interface whose friendliness with the return (array) of <i>document.getElementsByTagName([tagName])<\/i> was invaluable.<\/p>\n<p>So all this is all about Javascript DOM and web application client logic, and it may seem a bit of a dry subject at first glance, but, really, it is a thing that is best placed (and understood) in practice, and that is what you should do &#8230; practice with a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\" title='Click picture'>live run<\/a>.<\/p>\n<p>Behind this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\" title='Click picture'>live run<\/a> is the HTML and Javascript source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html_GETME\" title='slotin.html'>slotin.html<\/a> and we&#8217;ll leave you with the crucial generic Javascript functionality that makes this functionality work &#8230;<\/p>\n<p><code><br \/>\nfunction slotthisin(placedhtml, intowhat) {<br \/>\n var ispot=0, lastbit=\"\";<br \/>\n if (typeof intowhat === 'undefined') {<br \/>\n  document.body.innerHTML+=placedhtml.replace('[action]', '[' + raction + ']');<br \/>\n } else if (typeof intowhat === 'object') {<br \/>\n  if (typeof intowhat.length === 'undefined') {<br \/>\n   if (intowhat.innerHTML != \"\") {<br \/>\n     if (intowhat.tagName != 'A') {<br \/>\n      intowhat.innerHTML+=placedhtml.replace('[action]', '[' + raction + ']');<br \/>\n     } else if (document.body.innerHTML.indexOf(intowhat.innerHTML + \"&lt;\/a&gt;\") != -1) {<br \/>\n      document.body.innerHTML=document.body.innerHTML.replace(intowhat.innerHTML + \"&lt;\/a&gt;\", intowhat.innerHTML + \"&lt;\/a&gt;\" + placedhtml.replace('[action]', '[' + raction + ']'));<br \/>\n     } else if (document.body.innerHTML.indexOf(intowhat.innerHTML + \"&lt;\/A&gt;\") != -1) {<br \/>\n      document.body.innerHTML=document.body.innerHTML.replace(intowhat.innerHTML + \"&lt;\/A&gt;\", intowhat.innerHTML + \"&lt;\/A&gt;\" + placedhtml.replace('[action]', '[' + raction + ']'));<br \/>\n     }<br \/>\n   } else if (document.body.innerHTML.toUpperCase().indexOf(\"&lt;\" + intowhat.tagName.toUpperCase() + ' ID=\"' + intowhat.id.toUpperCase() + '\"') != -1) {<br \/>\n     ispot=document.body.innerHTML.toUpperCase().indexOf(\"&lt;\" + intowhat.tagName.toUpperCase() + ' ID=\"' + intowhat.id.toUpperCase() + '\"');<br \/>\n     lastbit=document.body.innerHTML.substring(ispot);<br \/>\n     document.body.innerHTML=document.body.innerHTML.substring(0,ispot) + placedhtml.replace('[action]', '[' + raction + ']') + lastbit;<br \/>\n   }<br \/>\n  } else {<br \/>\n   for (var ii=0; ii&lt;intowhat.length; ii++) {<br \/>\n    if (intowhat.item(ii).innerHTML != \"\") {<br \/>\n     if (intowhat.item(ii).tagName != 'A') {<br \/>\n      intowhat.item(ii).innerHTML+=placedhtml.replace('[action]', '[' + raction + ']');<br \/>\n     } else if (document.body.innerHTML.indexOf(intowhat.item(ii).innerHTML + \"&lt;\/a&gt;\") != -1) {<br \/>\n      document.body.innerHTML=document.body.innerHTML.replace(intowhat.item(ii).innerHTML + \"&lt;\/a&gt;\", intowhat.item(ii).innerHTML + \"&lt;\/a&gt;\" + placedhtml.replace('[action]', '[' + raction + ']'));<br \/>\n     } else if (document.body.innerHTML.indexOf(intowhat.item(ii).innerHTML + \"&lt;\/A&gt;\") != -1) {<br \/>\n      document.body.innerHTML=document.body.innerHTML.replace(intowhat.item(ii).innerHTML + \"&lt;\/A&gt;\", intowhat.item(ii).innerHTML + \"&lt;\/A&gt;\" + placedhtml.replace('[action]', '[' + raction + ']'));<br \/>\n     }<br \/>\n    } else if (intowhat.item(ii).id) {<br \/>\n     if (intowhat.item(ii).id != '') {<br \/>\n      if (document.body.innerHTML.toUpperCase().indexOf(\"&lt;\" + intowhat.item(ii).tagName.toUpperCase() + ' ID=\"' + intowhat.item(ii).id.toUpperCase() + '\"') != -1) {<br \/>\n       ispot=document.body.innerHTML.toUpperCase().indexOf(\"&lt;\" + intowhat.item(ii).tagName.toUpperCase() + ' ID=\"' + intowhat.item(ii).id.toUpperCase() + '\"');<br \/>\n       lastbit=document.body.innerHTML.substring(ispot);<br \/>\n       document.body.innerHTML=document.body.innerHTML.substring(0,ispot) + placedhtml.replace('[action]', '[' + raction + ']') + lastbit;<br \/>\n      }<br \/>\n     }<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n } else if (intowhat != \"\") {<br \/>\n  slotthisin(placedhtml.replace('[action]', '[' + raction + ']'), document.getElementById(intowhat));<br \/>\n } else {<br \/>\n  document.body.innerHTML=placedhtml.replace('[action]', '[' + raction + ']') + document.body.innerHTML;<br \/>\n }<br \/>\n}<br \/>\n<\/code><\/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='#d16986' onclick='var dv=document.getElementById(\"d16986\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=dom\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d16986' 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='#d16998' onclick='var dv=document.getElementById(\"d16998\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=array\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d16998' 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='#d17058' onclick='var dv=document.getElementById(\"d17058\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17058' 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='#d17076' onclick='var dv=document.getElementById(\"d17076\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=external-javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17076' 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='#d17095' onclick='var dv=document.getElementById(\"d17095\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=url\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17095' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Our quest to extend the functionality of our &#8220;slotterer inerrer&#8221; of HTML elements continues today, to the brink of where, to go forward, we may introduce an optional use of PHP server-side functionality, as of tomorrow. But for today, we &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-with-external-javascript-multiple-slottings-in-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":[103,277,283,1596,354,393,409,576,1681,587,1525,652,997,1319,1337,1345],"class_list":["post-17095","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-array","tag-cross-domain","tag-csv","tag-document-body-innerhtml","tag-dom","tag-error-handling","tag-external-javascript","tag-html","tag-htmlcollection","tag-iframe","tag-innerhtml","tag-javascript","tag-programming","tag-tutorial","tag-unit-testing","tag-url"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17095"}],"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=17095"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17095\/revisions"}],"predecessor-version":[{"id":20054,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17095\/revisions\/20054"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=17095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=17095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=17095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}