{"id":4935,"date":"2013-10-27T05:03:13","date_gmt":"2013-10-26T18:03:13","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=4935"},"modified":"2013-10-27T05:03:13","modified_gmt":"2013-10-26T18:03:13","slug":"javascript-stylesheet-toggler-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-stylesheet-toggler-tutorial\/","title":{"rendered":"JavaScript Stylesheet Toggler Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/StyleToggler\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"JavaScript Stylesheet Toggler Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/StyleToggler\/ToggleStylesheet.jpg\" title=\"JavaScript Stylesheet Toggler Tutorial\" \/><\/a><p class=\"wp-caption-text\">JavaScript Stylesheet Toggler Tutorial<\/p><\/div>\n<p>JavaScript <a target=_blank title='Document Object Model information from Wikipedia' href='http:\/\/en.wikipedia.org\/wiki\/Document_Object_Model\u200e'>DOM<\/a> programming is very useful, and today it is used to toggle the CSS stylesheet styling without leaving the webpage you are on by using a &lt;form action=&#8221;#&#8221;&gt; type of arrangement (though we don&#8217;t reach the action with this tutorial, we just respond to an HTML button onclick event, which never causes us to leave the webpage we are on &#8230; bit like <a target=_blank title='Ajax' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Ajax'>Ajax<\/a> &#8230; JavaScript DOM can do a lot of Ajaxy feeling things minus the server side bits <a target=_blank title='Ajax' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=PHP'>PHP<\/a>, for example, can enhance your table with, when using Ajax).<\/p>\n<p>This tutorial touches on cross-browser issues, and this can get quite complex sometimes.   It is not only the number of browsers but their versions that sometimes come into play in HTML\/JavaScript\/CSS work.   Sometimes it is best if there are two choices in ways to do it that end with the same result, to pick the one that is less likely to be testing the boundaries of cross-browser functionality thoughts.   This may involve thinking dumb &#8230; something moi has mastered over a very loooooong time &#8230; sun go up, sun go down many many many many many times <a target=_blank title='kemosabi' href='http:\/\/www.funtrivia.com\/askft\/Question33642.html'>kemosabi<\/a>.<\/p>\n<p>One of the most everchanging cross-browser issues involves the handling of the onclick event of an HTML button, and for this <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/StyleToggler\/'>tutorial<\/a> we liked the advice of this other <a target=_blank title='good advice' href='http:\/\/www.dynamicdrive.com\/forums\/showthread.php?24783-srcElement-problem-in-firefox'>tutorial<\/a> (especially the advice of John &#8230; thanks).   Other than that, which is like liquid gold, the solid gold advice came from  <em>&#8220;JavaScript &amp; Ajax&#8221; seventh edition by Tom Negrino and Dori Smith<\/em>.<\/p>\n<p>Here is a link to some downloadable HTML\/JavaScript programming source code that you could rename to <a target=_blank title='styletoggler.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/StyleToggler\/styletoggler.html_GETME'>styletoggler.html<\/a><\/p>\n<p>Here is a link to some downloadable CSS stylesheet (one) code that you could rename to <a target=_blank title='styleone.css' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/StyleToggler\/styleone.css_GETME'>styleone.css<\/a><\/p>\n<p>Here is a link to some downloadable CSS stylesheet (two) code that you could rename to <a target=_blank title='styletwo.css' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/StyleToggler\/styletwo.css_GETME'>styletwo.css<\/a><\/p>\n<p>Yes &#8230; <a target=_blank title='Monty Python' href='http:\/\/www.youtube.com\/watch?v=G6D1YI-41ao'>well<\/a>.<\/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='#d4935' onclick='var dv=document.getElementById(\"d4935\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=63\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d4935' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript DOM programming is very useful, and today it is used to toggle the CSS stylesheet styling without leaving the webpage you are on by using a &lt;form action=&#8221;#&#8221;&gt; type of arrangement (though we don&#8217;t reach the action with this &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-stylesheet-toggler-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,862,997,1319],"class_list":["post-4935","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-css","tag-html","tag-javascript","tag-onclick-event","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/4935"}],"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=4935"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/4935\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=4935"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=4935"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=4935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}