{"id":20672,"date":"2016-03-14T03:01:06","date_gmt":"2016-03-13T17:01:06","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=20672"},"modified":"2016-03-13T17:57:26","modified_gmt":"2016-03-13T07:57:26","slug":"intelligent-hashtagging-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/intelligent-hashtagging-primer-tutorial\/","title":{"rendered":"Intelligent Hashtagging Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Intelligent Hashtagging Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.jpg\" title=\"Intelligent Hashtagging Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Intelligent Hashtagging Primer Tutorial<\/p><\/div>\n<p>The HTML hashtagging navigation technique off an HTML <i>a<\/i> tag like &#8230;<\/p>\n<p><code><br \/>\n&lt;a href='#page3' title='Go to page 3 via hashtagging'&gt;Go to page 3 via hashtagging navigation&lt;\/a&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; does not involve a rerun of the Javascript DOM document.body&#8217;s <i>onload<\/i> event, and that may dampen the spirit of some programmers, and they resort to Ajax techniques perhaps, to get more logic in by staying on the same webpage, but we are here to tell you that you should think of using <a target=_blank title='window.getComputedStyle information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle'>window.getComputedStyle()<\/a> method techniques teamed with <a target=_blank title='window.innerWidth information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/innerWidth'>window.innerWidth<\/a> property and the <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> Javascript functionality &#8230; <\/p>\n<p><code><br \/>\nfunction firstCheck() {<br \/>\n  top.document.title=\"You are on Page \" + eval(Math.floor((eval(<b>getScrollLeft()<\/b>) + eval(pw)) \/ eval(pw)));<br \/>\n  setTimeout(firstCheck,1000);<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; to stay on your one webpage and be able to add intelligence as the user navigates, via hashtagging, to other parts of the webpage, effectively off to the left or right of the screen, controlled by our CSS &#8220;usual suspect&#8221; (for <a target=_blank title='Overlay tutorials' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>overlay<\/a> tutorials) <a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a>.<\/p>\n<p>We do it today, with our dynamic &#8220;Book of Proverbs&#8221; that has &#8230;<\/p>\n<ul>\n<li>Next Page HTML <i>a<\/i> link hashtagging navigation &#8230; plus a rudimentary &#8230;<\/li>\n<li>Breadcrumb hashtagging navigation to some other pages<\/li>\n<li>A proverb &#8230; aw shucks &#8230; thanks to <a target=_blank title='http:\/\/tww.id.au\/proverbs\/proverbs.html' href='http:\/\/tww.id.au\/proverbs\/proverbs.html'>http:\/\/tww.id.au\/proverbs\/proverbs.html<\/a><\/li>\n<li>A (homegrown) image from <a target=_blank title='Ephemeral' href='http:\/\/www.rjmprogramming.com.au\/ephemeral'>Ephemeral<\/a><\/li>\n<\/ul>\n<p>As you try the <a target=_blank title='detect_hashtag_navigation.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.html'>live run<\/a>, look up at top.document.title and it shows the Page number you are on &#8230; <font size=1>a small step for man, a giant leap for mankind<\/font> not &#8230; but we do use <a target=_blank title='window.getComputedStyle information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle'>window.getComputedStyle()<\/a> to add intelligence (helped along by the great leads <a target=_blank title='Great lead' href='http:\/\/stackoverflow.com\/questions\/871399\/cross-browser-method-for-detecting-the-scrolltop-of-the-browser-window'><b>this link<\/b><\/a> provided &#8230; thanks), as you can tell with our HTML and Javascript source code you could call <a target=_blank title='detect_hashtag_navigation.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.html_GETME'>detect_hashtag_navigation.html<\/a><\/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='#d20672' onclick='var dv=document.getElementById(\"d20672\"); 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='d20672' style='display: none; border-left: 2px solid green; border-top:2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The HTML hashtagging navigation technique off an HTML a tag like &#8230; &lt;a href=&#8217;#page3&#8242; title=&#8217;Go to page 3 via hashtagging&#8217;&gt;Go to page 3 via hashtagging navigation&lt;\/a&gt; &#8230; does not involve a rerun of the Javascript DOM document.body&#8217;s onload event, and &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/intelligent-hashtagging-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":[69,281,354,557,576,652,830,997,1126,1319,1827,1826],"class_list":["post-20672","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-ajax","tag-css","tag-dom","tag-hashtag","tag-html","tag-javascript","tag-navigation","tag-programming","tag-settimeout","tag-tutorial","tag-window-getcomputedstyle","tag-window-innerwidth"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20672"}],"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=20672"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20672\/revisions"}],"predecessor-version":[{"id":20676,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20672\/revisions\/20676"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=20672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=20672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=20672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}