{"id":22708,"date":"2016-06-14T03:01:43","date_gmt":"2016-06-13T17:01:43","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=22708"},"modified":"2016-06-13T16:19:08","modified_gmt":"2016-06-13T06:19:08","slug":"horizontal-hashtag-navigation-trapping-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/horizontal-hashtag-navigation-trapping-primer-tutorial\/","title":{"rendered":"Horizontal Hashtag Navigation Trapping Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Horizontal Hashtag Navigation Trapping Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/horizontal_hashtagging.jpg\" title=\"Horizontal Hashtag Navigation Trapping Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Horizontal Hashtag Navigation Trapping Primer Tutorial<\/p><\/div>\n<p>Yesterday we got into some hashtag navigation event trapping, after &#8230;<\/p>\n<ul>\n<li>our discovery, during <a target=_blank title='HTML a Tag Navigation Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-a-tag-navigation-primer-tutorial\/'>HTML a Tag Navigation Primer Tutorial<\/a><\/li>\n<li>our follow up, during <a target=_blank title='Web Slideshow Like PowerPoint Hashtag Navigation Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/web-slideshow-like-powerpoint-hashtag-navigation-tutorial\/'>Web Slideshow Like PowerPoint Hashtag Navigation Tutorial<\/a><\/li>\n<\/ul>\n<p> &#8230; where that &#8220;follow up&#8221; was really dealing with &#8220;vertical navigation&#8221;, which is probably your more natural human idea of web navigation.  But what about &#8220;horizontal navigation&#8221; where the webpage content continues off to the right of your screen, for those of us that read left to right?  It should be noted that some languages of the world read right to left, and that is worth considering, should you take up the mantle and use the source code below to continue on with your studies and web application work.<\/p>\n<p>So we applied these thoughts to a recent <a target=_blank title='Ansible and Vagrant Deploys Git and Jenkins Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/ansible-and-vagrant-deploys-git-and-jenkins-primer-tutorial\/'>Ansible and Vagrant Deploys Git and Jenkins Primer Tutorial<\/a>&#8216;s slideshow presentation to end up with HTML and Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/index.htm-GETME\">horizontal_slideshow.html<\/a> perhaps, and that changed to cater for horizontal hashtag navigation &#8220;event&#8221; trapping techniques in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/index.htm-GETME\">this way<\/a>, and that you can try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/\" title='Click picture'>here<\/a>, where you can compare the old &#8220;@&#8221; method versus the new &#8220;Start of Movie&#8221; horizontal hashtag navigation &#8220;event&#8221; trapping method, for your perusal and edification.<\/p>\n<p><code><br \/>\nlocation.href='#i7'; \/\/ navigate to the 8th slide of the slideshow<br \/>\n<\/code><\/p>\n<p> &#8230; as distinct from the (still unchanged) &#8220;@&#8221; link method where the leftmost &#8220;cell&#8221; has Javascript DOM slap over it the relevant image data that should happen next for the slideshow to progress forward.<\/p>\n<p>So the new &#8220;horizontal navigation&#8221; hashtag event trapping uses the same &#8220;last three days&#8221; way that monitors changes to &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='Javascript windows.location.hash information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_loc_hash.asp'>windows.location.hash<\/a><br \/>\n<\/code><\/p>\n<p>Along the way we try the HTML5 <a target=_blank title='HTML progress element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_progress.asp'>progress<\/a> element, in preference to the <a target=_blank title='HTML meter element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_meter.asp'>meter<\/a> element (that we last talked about with <a target=_blank title='HTML\/Javascript Staged Animation Meter Presentation Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-staged-animation-meter-presentation-tutorial\/'>HTML\/Javascript Staged Animation Meter Presentation Tutorial<\/a> at this blog), to show you progress through the slideshow when you view it using the new functionality.<\/p>\n<p>So we applied these thoughts to a recent <a target=_blank title='Ansible and Vagrant Deploys Git and Jenkins Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/ansible-and-vagrant-deploys-git-and-jenkins-primer-tutorial\/'>Ansible and Vagrant Deploys Git and Jenkins Primer Tutorial<\/a>&#8216;s slideshow presentation to end up with HTML and Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/index.htm-GETME\">horizontal_slideshow.html<\/a> perhaps, and that changed to cater for horizontal hashtag navigation &#8220;event&#8221; trapping techniques in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/index.htm-GETME\">this way<\/a>, and that you can try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/\" title='Click picture'>here<\/a> (and perhaps compare against the old approach <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/Jenkins\/index.html\" title='Old way'>here<\/a>), where you can compare the old &#8220;@&#8221; method versus the new &#8220;Start of Movie&#8221; horizontal hashtag navigation &#8220;event&#8221; trapping method, for your perusal and edification.<\/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='#d22708' onclick='var dv=document.getElementById(\"d22708\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hashtag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d22708' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday we got into some hashtag navigation event trapping, after &#8230; our discovery, during HTML a Tag Navigation Primer Tutorial our follow up, during Web Slideshow Like PowerPoint Hashtag Navigation Tutorial &#8230; where that &#8220;follow up&#8221; was really dealing with &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/horizontal-hashtag-navigation-trapping-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":[1580,354,557,576,578,1598,1517,830,997,1915,1238,1319],"class_list":["post-22708","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-cell","tag-dom","tag-hashtag","tag-html","tag-html5","tag-jacascript","tag-meter","tag-navigation","tag-programming","tag-progress","tag-table","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22708"}],"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=22708"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22708\/revisions"}],"predecessor-version":[{"id":22715,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22708\/revisions\/22715"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=22708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=22708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=22708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}