{"id":5657,"date":"2013-12-26T05:07:02","date_gmt":"2013-12-25T18:07:02","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=5657"},"modified":"2020-06-24T12:51:56","modified_gmt":"2020-06-24T02:51:56","slug":"htmljavascriptcss-frameset-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptcss-frameset-primer-tutorial\/","title":{"rendered":"HTML\/Javascript\/CSS Frameset Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Frameset\/frameset_supervisor.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript\/CSS Frameset Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Frameset\/Frameset.jpg\" title=\"HTML\/Javascript\/CSS Frameset Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript\/CSS Frameset Primer Tutorial<\/p><\/div>\n<p>Here is a tutorial that addresses more Javascript DOM ideas and builds on three previous tutorials that looked at Sliding Menus via the tutorials ending with <a href=\"#mjdt\" title=\"More Javascript DOM Tutorial\">More Javascript DOM Tutorial<\/a>.<\/p>\n<p>Framesets are a good way to organize HTML that work well with the scenario where a menu controls content, all presented together on the one webpage.<\/p>\n<p>It is amazing that the arrangement of this could involve so few changes from the same basic content of our Sliding Menus tutorials, and yet the look is considerably different.<\/p>\n<p>Thanks to Wikipedia for the data about Mountain Heights on Earth which helped with the content of this tutorial.<\/p>\n<p>This tutorial also touched on the idea of transparency with a png background image using GIMP, and I found this <a target=_blank title='GIMP png transparency advice' href='http:\/\/geekswithblogs.net\/TimH\/archive\/2006\/03\/20\/72797.aspx'>link<\/a> really helpful.<\/p>\n<p>Let&#8217;s see some  <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Frameset\/frameset_supervisor.html'>HTML\/Javascript\/CSS Frameset Primer Tutorial<\/a> code in live action for this tutorial where you use a Frameset design to present Montain Heights application.<\/p>\n<p>Link to some downloadable HTML programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Frameset\/frameset_supervisor.html_GETME' title='Download me'>frameset_supervisor.html<\/a> supervises <a target=_blank title='Download me' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Frameset\/frameset_left.html_GETME'>frameset_content.html<\/a>.<\/p>\n<p>Here is a new link to show the way that the Sliding Menu code changed and became the Frameset Content code &#8230; <a target=_blank title='Sliding Menus to Frameset Content html' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Frameset\/sliding_menus_plus-frameset.html-GETME\">sliding_menus_plus-frameset.html<\/a>.<\/p>\n<p>Regarding this topic I really like and got help from <em>&#8220;JavaScript &amp; Ajax&#8221; seventh edition by Tom Negrino and Dori Smith<\/em> <\/p>\n<hr \/>\n<p id=\"mjdt\">Previous <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=3659' title='More Javascript DOM Tutorial'>More Javascript DOM Tutorial<\/a> below &#8230;<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SlidingMenus\/sliding_menus_plus.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"More Javascript DOM Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SlidingMenus\/JavascriptDOM_SlidingMenus.jpg\" title=\"More Javascript DOM Tutorial\" \/><\/a><p class=\"wp-caption-text\">More Javascript DOM Tutorial<\/p><\/div>\n<p>Here is a tutorial that addresses more Javascript DOM ideas and builds on two previous tutorials <a href=\"#hcjsmpt\" title=\"HTML\/CSS\/Javascript Sliding Menus Primer Tutorial\">HTML\/CSS\/Javascript Sliding Menus Primer Tutorial<\/a> and <a target=_blank href='#jdt' title='JavaScript and the DOM Tutorial'>JavaScript and the DOM Tutorial<\/a>.<\/p>\n<p>Some of the salient points about Javascript DOM are:<\/p>\n<ul>\n<li>Javascript DOM can make the use of HTML form elements obsolete, so that you can alter the current webpage without a change of page<\/li>\n<li>key to successful easy Javascript DOM use involves HTML elements with id= definitions mapped to use of <em>var v=document.getElementById([ideq]); v.style.display=&#8217;block&#8217;;<\/em> type of usage<\/li>\n<li>can use Javascript DOM using HTML elements with class= definitions mapped to use of <em>var vs=document.getElementsByClassName([classeq]); vs[0].style.display=&#8217;block&#8217;;<\/em><\/li>\n<li>HTML element additions are easily achieved for &lt;start id=&#8217;el&#8217;&gt;HTML contents&lt;\/start&gt; style HTML elements after &#8220;contents&#8221; via (syntax like) <em>var xel=document.getElementById(&#8216;el&#8217;); xel.innerHTML = xel.innerHTML + &#8221; are extended.&#8221;;<\/em> &#8230; please note that there is no such HTML element as &lt;start&gt; but hopefully you get what I mean by HTML elements with the three parts of start, innerHTML, and \/start<\/li>\n<li>HTML element &#8220;plugins&#8221; are easily achieved for &lt;start id=&#8217;el&#8217;&gt;HTML contents&lt;\/start&gt; style HTML elements in the middle of &#8220;HTML contents&#8221; via (syntax like) <em>var xel=document.getElementById(&#8216;el&#8217;); xel.innerHTML = xel.innerHTML.replace(&#8220;L c&#8221;, &#8220;L drop dead gorgeous c&#8221;);<\/em><\/li>\n<li>Javascript DOM techniques are really suited to HTML div elements, but xel.innerHTML = xel.innerHTML.replace(&#8220;&lt;\/tbody&gt;&#8221;, &#8220;&lt;tr>&lt;td&gt;new col 1 of 2&lt;\/td&gt;&lt;td&gt;new col 2 of 2&lt;\/td&gt;&lt;\/tr&gt;&lt;\/tbody&gt;&#8221;); type syntax could add a record to a table HTML element (that has a &lt;tbody&gt;&lt;\/tbody&gt;, that is), for example<\/li>\n<li>whenever you have a style= part to an HTML element there is almost always an equivalent Javascript DOM syntax possibility starting (like) <em>xel.style.[styleProperty] = [stylePropertyValue];<\/em>  and you can see those properties detailed here at <a target=_blank title='HTML DOM Style Object information from W3Schools' href='http:\/\/www.w3schools.com\/jsref\/dom_obj_style.asp'>HTML DOM Style Object<\/a><\/li>\n<li>as you can see, Javascript DOM makes for very dynamic web pages, and if no database or file manipulation is required, and\/or if you have no PHP, it is a good alternative to <a target=_blank title='Ajax Preview Window Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=579'>Ajax<\/a> to make your web pages dynamic and with more functionality per page<\/li>\n<\/ul>\n<p>This Javascript DOM tutorial builds on the idea of a Sliding Menu.   What is a Sliding Menu?   Glad you asked.  Sliding Menus let you present a set of links without the clutter until you choose to &#8220;let the clutter in&#8221;.   We are not showing a jQuery solution here, as we have simplified it quite a bit, but there are good jQuery approaches to Sliding Menu requirements, such as shown for <a target=_blank title='jQuery UI Accordian Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=965'>jQuery UI Accordian Primer Tutorial<\/a>.   As you can imagine, Sliding Menus are very popular with Mobile App developers and this <a target=_blank title='Android App Sliding Menus demo' href='https:\/\/play.google.com\/store\/apps\/details?id=com.slidingmenu.example&#038;hl=en'>link<\/a> goes to an Android mobile app advice demo page.<\/p>\n<p>Thanks to Wikipedia for the data about Mountain Heights on Earth which helped with the content of this tutorial.<\/p>\n<p>This tutorial also touched on the idea of transparency with a png background image using GIMP, and I found this <a target=_blank title='GIMP png transparency advice' href='http:\/\/geekswithblogs.net\/TimH\/archive\/2006\/03\/20\/72797.aspx'>link<\/a> really helpful.<\/p>\n<p>Let&#8217;s see some  <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SlidingMenus\/sliding_menus_plus.html'>More Javascript DOM Tutorial<\/a> code in live action for this tutorial where you use a Javascript DOM enhanced Sliding Menu.<\/p>\n<p>Link to some downloadable HTML programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SlidingMenus\/sliding_menus_plus.html_GETME' title='Download me'>sliding_menus_plus.html<\/a> and you may want to  compare this to the previous Sliding Menus tutorial programming code  <a target=_blank title='Download me' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SlidingMenus\/sliding_menus.html_GETME'>sliding_menus.html<\/a> with the difference being the Javascript DOM changes (plus a couple of minor CSS changes).\n<\/p>\n<p>Regarding this topic I really like and got help from <em>&#8220;JavaScript &amp; Ajax&#8221; seventh edition by Tom Negrino and Dori Smith<\/em> <\/p>\n<p><strong><em>Did you know?<\/em><\/strong><\/p>\n<p>You may notice that the word Javascript does not appear within the code of sliding_menus.html as above, so you may wonder how it can be claimed to involve Javascript.   The reason is that Javascript is the default language of HTML element event code, so, just as you can have <br \/><em>&lt;a href=&#8221;<a target=_blank title='Two Ronnies' href='http:\/\/www.youtube.com\/watch?v=h-mX9T2qyIQ#zkWMcRlE1mQ'>http:\/\/www.youtube.com\/watch?v=h-mX9T2qyIQ#zkWMcRlE1mQ<\/a>&#8221; onclick=&#8221;alert(&#8216;FUNEX?&#8217;);'&#8221; title=&#8221;Two Ronnies Question&#8221;&gt;FUNEX?&lt;\/a&gt;<\/em> <br \/>you can just as well use syntax like <br \/><em>&lt;a href=&#8221;<a target=_blank title='Two Ronnies' href='http:\/\/www.youtube.com\/watch?v=h-mX9T2qyIQ#zkWMcRlE1mQ'>http:\/\/www.youtube.com\/watch?v=h-mX9T2qyIQ#zkWMcRlE1mQ<\/a>&#8221; onclick=&#8221;Javascript: alert(&#8216;S,VFX&#8217;);'&#8221; title=&#8221;Two Ronnies Answer&#8221;&gt;S,VFX&lt;\/a&gt; <\/em><\/p>\n<p>CSS doesn&#8217;t appear either, but when CSS is written inline (within the HTML) it just resides within <em>&lt;style&gt;<\/em> and  <em>&lt;\/style&gt;<\/em> within  <em>&lt;head&gt;<\/em> and  <em>&lt;\/head&gt;<\/em> within  <em>&lt;html&gt;<\/em> and  <em>&lt;\/html&gt;<\/em> &#8230; have a read of <a target=_blank title='Cascading Style Sheets Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=736'>Cascading Style Sheets Primer Tutorial<\/a> or visit the &#8220;spiritual home&#8221; of HTML or CSS or Javascript at <a target=_blank title='w3schools' href='http:\/\/www.w3schools.com\/'>w3schools<\/a> and learn at a fundamental level.\n<\/p>\n<p><strong><em>And did you know?<\/em><\/strong><\/p>\n<p>You may have noticed the Javascript code snippet as below in sliding_menus_plus.html &#8230;<br \/>\n<br \/>\n<em>function plusPlanet(planet, col) {<br \/>\n if (typeof(col)===&#8217;undefined&#8217;) col = &#8216;red&#8217;;<br \/>\n&#8230; blah blah blah<br \/>\n}<\/em><br \/>\n&#8230; this is the way like you can do with VB.Net (via use of &#8220;Optional&#8221; keyword via syntax like Public Sub thecalled(ByVal blah1 As String, Optional ByVal blah2 As String = &#8220;blah&#8221;) ) or C++ (OOP function\/method <a target=_blank title='C++ Xcode OOP Operator Overloading Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=2699'>overloading<\/a> methods) or PHP (via syntax like function thecalled($blah1, $blah2 = &#8220;blah&#8221;)) function\/method calls where you don&#8217;t have to define all the parameters in your call so that <em>planetPlus(&#8216;Mars&#8217;);<\/em> call is completely equivalent to <em>planetPlus(&#8216;Mars&#8217;, &#8216;red&#8217;);<\/em> in that the default value of col is handled by the function itself if it is undefined\n<\/p>\n<hr \/>\n<p id=\"hcjsmpt\">Previous <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=3252' title='HTML\/CSS\/Javascript Sliding Menus Primer Tutorial'>HTML\/CSS\/Javascript Sliding Menus Primer Tutorial<\/a> below &#8230;<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SlidingMenus\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/CSS\/Javascript Sliding Menus Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SlidingMenus\/Sliding_Menus.jpg\" title=\"HTML\/CSS\/Javascript Sliding Menus Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">HTML\/CSS\/Javascript Sliding Menus Primer Tutorial<\/p><\/div>\n<p>Here is a tutorial that introduces you to the website idea of Sliding Menus.   What is a Sliding Menu?   Glad you asked.  Sliding Menus let you present a set of links without the clutter until you choose to &#8220;let the clutter in&#8221;.   We are not showing a jQuery solution here, as we have simplified it quite a bit, but there are good jQuery approaches to Sliding Menu requirements, such as shown for <a target=_blank title='jQuery UI Accordian Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=965'>jQuery UI Accordian Primer Tutorial<\/a>.   As you can imagine, Sliding Menus are very popular with Mobile App developers and this <a target=_blank title='Android App Sliding Menus demo' href='https:\/\/play.google.com\/store\/apps\/details?id=com.slidingmenu.example&#038;hl=en'>link<\/a> goes to an Android mobile app advice demo page.<\/p>\n<p>Thanks to Wikipedia for the data about Mountain Heights on Earth which helped with the content of this tutorial.<\/p>\n<p>This tutorial also touched on the idea of transparency with a png background image using GIMP, and I found this <a target=_blank title='GIMP png transparency advice' href='http:\/\/geekswithblogs.net\/TimH\/archive\/2006\/03\/20\/72797.aspx'>link<\/a> really helpful.<\/p>\n<p>Let&#8217;s see some  <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SlidingMenus\/'>HTML and CSS and Javascript<\/a> code in live action for this tutorial where you use a Sliding Menu. <\/p>\n<p>Link to some downloadable HTML programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SlidingMenus\/sliding_menus.html_GETME' title='Download me'>sliding_menus.html<\/a>.\n<\/p>\n<p>Regarding this topic I really like and got help from <em>&#8220;JavaScript &amp; Ajax&#8221; seventh edition by Tom Negrino and Dori Smith<\/em> <\/p>\n<p><strong><em>Did you know?<\/em><\/strong><\/p>\n<p>You may notice that the word Javascript does not appear within the code of sliding_menus.html as above, so you may wonder how it can be claimed to involve Javascript.   The reason is that Javascript is the default language of HTML element event code, so, just as you can have <br \/><em>&lt;a href=&#8221;<a target=_blank title='Two Ronnies' href='http:\/\/www.youtube.com\/watch?v=h-mX9T2qyIQ#zkWMcRlE1mQ'>http:\/\/www.youtube.com\/watch?v=h-mX9T2qyIQ#zkWMcRlE1mQ<\/a>&#8221; onclick=&#8221;alert(&#8216;FUNEX?&#8217;);'&#8221; title=&#8221;Two Ronnies Question&#8221;&gt;FUNEX?&lt;\/a&gt;<\/em> <br \/>you can just as well use syntax like <br \/><em>&lt;a href=&#8221;<a target=_blank title='Two Ronnies' href='http:\/\/www.youtube.com\/watch?v=h-mX9T2qyIQ#zkWMcRlE1mQ'>http:\/\/www.youtube.com\/watch?v=h-mX9T2qyIQ#zkWMcRlE1mQ<\/a>&#8221; onclick=&#8221;Javascript: alert(&#8216;S,VFX&#8217;);'&#8221; title=&#8221;Two Ronnies Answer&#8221;&gt;S,VFX&lt;\/a&gt; <\/em><\/p>\n<p>CSS doesn&#8217;t appear either, but when CSS is written inline (within the HTML) it just resides within <em>&lt;style&gt;<\/em> and  <em>&lt;\/style&gt;<\/em> within  <em>&lt;head&gt;<\/em> and  <em>&lt;\/head&gt;<\/em> within  <em>&lt;html&gt;<\/em> and  <em>&lt;\/html&gt;<\/em> &#8230; have a read of <a target=_blank title='Cascading Style Sheets Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=736'>Cascading Style Sheets Primer Tutorial<\/a> or visit the &#8220;spiritual home&#8221; of HTML or CSS or Javascript at <a target=_blank title='w3schools' href='http:\/\/www.w3schools.com\/'>w3schools<\/a> and learn at a fundamental level.\n<\/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='#d3252' onclick='var dv=document.getElementById(\"d3252\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=Javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d3252' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr \/>\n<p id=\"jdt\">Previous <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=574' title='JavaScript and the DOM Tutorial'>JavaScript and the DOM Tutorial<\/a> below &#8230;<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/javascript-php-html.png\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"JavaScript and the DOM Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/javascript-php-html.png\" title=\"JavaScript and the DOM Tutorial\"  \/><\/a><p class=\"wp-caption-text\">JavaScript and the DOM Tutorial<\/p><\/div>\n<p>JavaScript is a tremendous web client-side language to learn.   You may have heard of a server-side JavaScript, but this tutorial only deals with client-side work.   This tutorial builds a JavaScript layer on top of the <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=550'>PHP tutorial<\/a> made earlier, showing how the DOM can be used to change the look of your webpage dynamically, even if most of it is in an iFrame (but there are limits).<\/p>\n<p>PHP is a wonderful language to learn.   It is usually associated with being a web server-side language (as with this tutorial, where it is being shown on a local <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=532'>MAMP<\/a> web server) but can be a <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=262'>command line tool<\/a> as well.   If you like PHP you may eventually like <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=482'>ASP.Net<\/a> and\/or Python, and vice versa.   It has sophisticated data structures, Object Oriented (the thinking that you can build classes with data and methods which define objects created as you run the program &#8230; eg. you might write a class for book and have data members for things like numPages and publisher, author, creationDate and have methods called things like getCreationDate, setCreationDate, getAuthor, setAuthor allowing the user to use these methods rather than changing the  data members themselves &#8230; heaven forbid that!) code concepts, and really combines well with <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=293'>JavaScript<\/a> (as a client-side language).     <\/p>\n<p><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/javascript.html_GETME'>Download programming source code and rename to javascript.html<\/a><br \/><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/phpjavascripthtml.php_GETME'>Download source code and rename to phpjavascripthtml.php<\/a><\/p>\n<p><a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/php-javascript-html.png'>Tutorial<\/a> &#8230;<\/p>\n<p><strong><em>Did you know &#8230;<\/em><\/strong><br \/>\nJavaScript makes a great easy-access Calculator?<\/p>\n<p>Try typing the lines below into the address bar of your favourite browser:<\/p>\n<p>Javascript: eval(512 \/ 380);<br \/>\nJavascript: eval(512 * 380);<br \/>\nJavascript: eval(512 &#8211; 380);<br \/>\nJavascript: eval(512 + 380);<br \/>\nJavascript: eval(512 % 380);<\/p>\n<p>These days we spend so much time on the Internet it is a much quicker way to get to a calculator!\n<\/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='#d574' onclick='var dv=document.getElementById(\"d574\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=Javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d574' 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='#d3659' onclick='var dv=document.getElementById(\"d3659\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=Javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d3659' 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='#d5657' onclick='var dv=document.getElementById(\"d5657\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=Javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d5657' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Here is a tutorial that addresses more Javascript DOM ideas and builds on three previous tutorials that looked at Sliding Menus via the tutorials ending with More Javascript DOM Tutorial. Framesets are a good way to organize HTML that work &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptcss-frameset-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,37],"tags":[281,327,460,461,576,652,997,1152,1319],"class_list":["post-5657","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-css","tag-did-you-know","tag-frame","tag-frameset","tag-html","tag-javascript","tag-programming","tag-sliding-menus","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/5657"}],"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=5657"}],"version-history":[{"count":1,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/5657\/revisions"}],"predecessor-version":[{"id":49452,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/5657\/revisions\/49452"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=5657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=5657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=5657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}