{"id":22696,"date":"2016-06-13T03:01:35","date_gmt":"2016-06-12T17:01:35","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=22696"},"modified":"2016-06-13T20:35:30","modified_gmt":"2016-06-13T10:35:30","slug":"web-slideshow-like-powerpoint-hashtag-navigation-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/web-slideshow-like-powerpoint-hashtag-navigation-tutorial\/","title":{"rendered":"Web Slideshow Like PowerPoint Hashtag Navigation Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ansible_playbook.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Web Slideshow Like PowerPoint Hashtag Navigation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ansible_toast.jpg\" title=\"Web Slideshow Like PowerPoint Hashtag Navigation Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Web Slideshow Like PowerPoint Hashtag Navigation Tutorial<\/p><\/div>\n<p>Yesterday, with our  <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>, we were involved in the first hashtag navigation event trapping we&#8217;d ever done at this blog, and this set us to thinking of what web application we have could benefit from this new capability.  When it comes to hashtag navigation, for me, I immediately think of reading a book online, perhaps with its table of contents sending you off to various webpage positions all in the one big data source perhaps, and this navigation is more than like hashtag navigation &#8230; via &#8230; for example &#8230;<\/p>\n<ul>\n<li>Javascript code like &#8230;<br \/>\n<code><br \/>\n  location.href='#chapter3';<br \/>\n<\/code>\n<\/li>\n<li>&lt;a href=&#8217;#chapter3&#8242; title=&#8217;Lobbing you onto chapter 3 now&#8217;&gt;Go to chapter 3&lt;\/a&gt;<\/li>\n<\/ul>\n<p>Our thinking led us to reworking the Powerpoint lookalike web application we first talked about with <a title='Web Slideshow Like PowerPoint Primer Tutorial' href='#wslppt'>Web Slideshow Like PowerPoint Primer Tutorial<\/a> as shown below, which uses hashtag navigation quite a bit, or could benefit from some more, as well.<\/p>\n<p>What we decided to do was to add some HTML and CSS elements that Android mobile developers probably are very familiar with the look of, and that is the <a target=_blank title='Andoid toast information' href='https:\/\/developer.android.com\/reference\/android\/widget\/Toast.html'>toast<\/a> view &#8230;<\/p>\n<blockquote cite='https:\/\/developer.android.com\/reference\/android\/widget\/Toast.html'><p>\nA toast is a view containing a quick little message for the user. The toast class helps you create and show those.\n<\/p><\/blockquote>\n<p> &#8230; which feels like a temporary dialog box, not asking for user input, but imparting information.  It should be noted that what we do today with our web application could have also been tackled by involving <a target=_blank title='jQuery UI Dialog' href='https:\/\/jqueryui.com\/dialog\/'>jQuery UI Dialog<\/a> methods as well, but we preferred to use the great leads we found at this <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/30746977\/how-to-realize-an-alert-that-disappears-after-some-seconds'>useful link<\/a>, thanks.<\/p>\n<p>In our HTML and Javascript <a target=_blank title='ansible_playbook.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ansible_playbook.html-GETME'>ansible_playbook.html<\/a> code today that changed in <a target=_blank title='ansible_playbook.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ansible_playbook.html-GETME'>this way<\/a> to bring about today&#8217;s hashtag navigation trapping functionality, and which has this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ansible_playbook.html\" title='click picture'>live run<\/a> link, we set up new and entirely independent <i>toastIn<\/i> and <i>toastOut<\/i> arrays whereby if a PowerPoint slide snippet matches an entry in <i>toastIn<\/i> the equivalently indexed <i>toastOut<\/i> array member is output as the content of the new temporary dialog box (which is really just an HTML div element with its <i>visibility<\/i> property &#8220;hidden&#8221; or not) shown for 5 seconds.  And the trigger for this action is the trapping of 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>A bi-product benefit of this hashtagging is that it can be used to attempt to have your PowerPoint lookalike web application content live entirely <a target=_blank title='Above the fold information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Above_the_fold'>&#8220;above the fold&#8221;<\/a> by having enough of these <i>toastIn<\/i> and <i>toastOut<\/i> array entries to rejig PowerPoint slide content &#8220;starts&#8221; to these matched <i>toastIn<\/i> array entries, that you establish yourself in the code.<\/p>\n<hr>\n<p id='wslppt'>Previous relevant <a target=_blank title='Web Slideshow Like PowerPoint Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/web-slideshow-like-powerpoint-primer-tutorial\/'>Web Slideshow Like PowerPoint 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\/ansible_playbook.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Web Slideshow Like PowerPoint Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ansible_playbook.jpg\" title=\"Web Slideshow Like PowerPoint Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Web Slideshow Like PowerPoint Primer Tutorial<\/p><\/div>\n<p>We are fans of Microsoft&#8217;s <a target=_blank title='PowerPoint information by Microsoft' href='https:\/\/office.live.com\/start\/PowerPoint.aspx'>PowerPoint<\/a> slideshow creation software here, for the dissemination of information in a slideshow.  And a PowerPoint presentation can have lots of great special effects, that is true.  Even so, there can be a &#8220;this has been prepared in advance&#8221; &#8220;am just churning out this presentation again&#8221; feel to some presentations done this way.<\/p>\n<p>So we thought we&#8217;d start on a PowerPoint hybrid feeling web application idea, and in these early days it is just an idea.  As such, it is not generic enough yet, but this project has the chance to be turned into something generic should it pan out to be useful.  Because am not sure if it could be useful, we&#8217;re &#8220;flying a kite&#8221; today, to see if it could be useful for anybody out there who has &#8220;dreamed&#8221; in a way such that you say &#8230;<\/p>\n<ul>\n<li id='lywhbg'>&#8220;I wish PowerPoint would let me click on a link and either see some web content there and then or see the web content in a new &#8216;slide&#8217;.&#8221;  Is this you?  <a style=text-decoration:underline; onclick=\" document.getElementById('ywhbg').style.display='block'; document.getElementById('ywhbg').src += '?autoplay=1'; \">Yes<\/a> <a href=#lywhbg onclick=\" alert('Well, be like that then.  Narrrrggh'); \">No<\/a><br \/>\n<iframe loading=\"lazy\" style='display:none;' id='ywhbg' width=\"420\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/7o9wvYXR3n0\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/li>\n<li id='lywhbg2'>&#8220;I wish PowerPoint would let me jump back to a new &#8216;slide&#8217; from any other slide using a technique showing on every slide.&#8221;  Is this you?  <a style=text-decoration:underline; onclick=\" document.getElementById('ywhbg2').style.display='block'; document.getElementById('ywhbg2').src += '?autoplay=1'; \">Yes<\/a> <a href=#lywhbg2 onclick=\" alert('Well, be like that then, but I understand, as there are ways to do this in PowerPoint.'); \">No<\/a><br \/>\n<iframe loading=\"lazy\" style='display:none;' id='ywhbg2' width=\"420\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/7o9wvYXR3n0\" frameborder=\"0\" allowfullscreen><\/iframe><\/li>\n<\/ul>\n<p> &#8230; and so our PowerPoint hybrid feeling web application idea works on the basis of the presenter always clicking to move forwards through the presentation, but can refresh the webpage &#8216;slide&#8217; to start that &#8216;slide&#8217; content again, or jump to any other slide of the presentation, via an HTML <a target=_blank href='http:\/\/www.w3schools.com\/tags\/tag_select.asp' title='HTML select tag information from w3schools'>select<\/a> &#8220;dropdown&#8221; element available near the top of each &#8216;slide&#8217;.<\/p>\n<p>We did one called <a target=_blank title='ansible_playbook.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ansible_playbook.html_GETME'>ansible_playbook.html<\/a> to present a slideshow about Ansible Core below &#8230;<\/p>\n<p><iframe loading=\"lazy\" id='acp' width=\"100%\" height=\"800\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ansible_playbook.html\" frameborder=\"0\"><\/iframe><\/p>\n<p> &#8230; or, if you want to see it on a new webpage try this <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ansible_playbook.html'>live run<\/a>.<\/p>\n<p>The way it works and can become more generically useful is that, currently, it &#8230;<\/p>\n<ul>\n<li>Works on an array called <i>chapters<\/i> of webpage &#8216;slide&#8217; headings &#8230;<br \/>\n<code><br \/>\nvar chapters=[\"Ansible Core - Introduction to Playbooks Tutorial\", \"What is Ansible?\", \"Who Uses Ansible?\", \"How Do You Install Ansible?\", \"Why has Ansible become Popular?\", \"What is ansible.cfg File?\", \"What is an Ansible Inventory File?\", \"What is an Ansible Playbook?\", \"How about a Single Test Server Ansible Scenario?\", \"How about a nonTLS Web Server with nginx Ansible Scenario?\", \"How about a TLS Web Server with nginx Ansible Scenario?\", \"How about a Complex Application Deployment Ansible Scenario?\", \"PHPStorm Development Stack Unit Testing Integration With Ansible\", \"Questions and Answers Regarding this Tutorial about Ansible\"];<br \/>\n<\/code>\n<\/li>\n<li>You write subarrays called the <i>chapters<\/i> member name minus the blanks and special characters, and in that array you can put &#8216;slide&#8217; records, exemplified by &#8220;What is an Ansible Playbook?&#8221; subarray &#8230;<br \/>\n<code><br \/>\nvar WhatisanAnsiblePlaybook=[\"Configuration Management Script\",<br \/>\n\t\t\t\t\t\"Playbooks are made up of ...\",<br \/>\n\t\t\t\t\t\"https:\/\/www.rjmprogramming.com.au\/ITblog\/ansible-playbook-tls-tutorial#what_is_a_Playbook_file_made_up_of\",<br \/>\n\t\t\t\t\t\"Playbooks are written in YAML ...\",<br \/>\n\t\t\t\t\t\"http:\/\/en.wikipedia.org\/wiki\/YAML\",<br \/>\n\t\t\t\t\t\"https:\/\/www.rjmprogramming.com.au\/ITblog\/ansible-playbook-tls-tutorial#more_about_YAML_vs_JSON_format\",<br \/>\n\t\t\t\t\t\"Works on a single host just as readily as for many (hosts)\",<br \/>\n\t\t\t\t\t\"What follows is web_notls.yml Playbook ... as a taste of what is to come ...\",<br \/>\n\t\t\t\t\t'file:\/\/\/Library\/pgAgent\/mybox\/playbooks\/web-notls.yml',<br \/>\n\t\t\t\t\t\"And a complex application deployment Playbook from page 115 of Ansible Up and Running ...\",<br \/>\n\t\t\t\t\t\"https:\/\/github.com\/lorin\/ansible-mezzanine\/blob\/master\/mezzanine.yml\"];<br \/>\n<\/code><br \/>\n&#8230; in a variety of recognized formats, and processed via lots of Javascript <a target=_blank title='Javascript eval() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp'>eval()<\/a> methodology, those being &#8230;<\/p>\n<ol>\n<li>just ascii text with no HTML feel to it whatsoever &#8230; eg. &#8220;Playbooks are made up of &#8230;&#8221;<\/li>\n<li>some HTML &#8230; eg. &#8220;&lt;div style=background-color:white&gt;&lt;b&gt;$ git clone https:\/\/github.com\/ansible\/ansible.git &#8211;recursive&lt;\/div&gt;&#8221;<\/li>\n<li>local hard disk file link &#8230; eg. &#8216;file:\/\/\/Library\/pgAgent\/mybox\/playbooks\/web-notls.yml&#8217;\n<li>local http: URL link &#8230; eg. &#8220;http:\/\/localhost:8888\/ansible_up_and_running.jpg&#8221;\n<li>home based http: or https: URL link &#8230; eg. &#8220;https:\/\/www.rjmprogramming.com.au\/ITblog\/ansible-playbook-tls-tutorial#more_about_YAML_vs_JSON_format&#8221;\n<li>away from home based http: or https: URL link &#8230; eg. &#8220;https:\/\/github.com\/lorin\/ansible-mezzanine\/blob\/master\/mezzanine.yml&#8221;\n<\/ol>\n<p>&#8230; the implications for 3 and 4 above being that if you run the &#8216;slideshow&#8217; on a public website you might have to arrange your own mapping of URLs, the chief non-generic parts of the code you might come across perusing and reworking <a target=_blank title='ansible_playbook.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ansible_playbook.html_GETME'>ansible_playbook.html<\/a> &#8230; in which case hone in on (mentions of) <i>file:<\/i> and <i>localhost<\/i> and <i>rjmprogramming.com.au<\/i> as candidates for your own changes.  The reason we have a difference between the thinking for 5 and 6 above is that 5 could work called within an HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> element.<\/p>\n<\/ul>\n<p>As you can imagine, you end up with a pretty personalized presentation that can zip here and there, and leave room for resizing web browser windows, to allow room, for instance, for some dynamic desktop session interactivity in additional screen windows, if you like.<\/p>\n<p>Anyway, if you try it and want to send <a target=_blank title='Feedback web application' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html'>feedback<\/a>, we&#8217;d welcome your ideas.<\/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='#d22449' onclick='var dv=document.getElementById(\"d22449\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/slideshow\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d22449' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<p><\/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='#d22696' onclick='var dv=document.getElementById(\"d22696\"); 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='d22696' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday, with our HTML a Tag Navigation Primer Tutorial, we were involved in the first hashtag navigation event trapping we&#8217;d ever done at this blog, and this set us to thinking of what web application we have could benefit from &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/web-slideshow-like-powerpoint-hashtag-navigation-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":[1913,103,1914,399,557,576,652,663,1807,830,975,980,997,1151,1288,1319,1345,1404],"class_list":["post-22696","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-andoid","tag-array","tag-dialog","tag-eval","tag-hashtag","tag-html","tag-javascript","tag-jquery","tag-link","tag-navigation","tag-powerpoint","tag-presentation","tag-programming","tag-slideshow","tag-toast","tag-tutorial","tag-url","tag-web-browser"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22696"}],"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=22696"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22696\/revisions"}],"predecessor-version":[{"id":22717,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22696\/revisions\/22717"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=22696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=22696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=22696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}