{"id":23993,"date":"2016-08-16T03:01:21","date_gmt":"2016-08-15T17:01:21","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=23993"},"modified":"2016-08-09T12:44:14","modified_gmt":"2016-08-09T02:44:14","slug":"google-search-engine-mobile-friendly-tester-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-search-engine-mobile-friendly-tester-tutorial\/","title":{"rendered":"Google Search Engine Mobile Friendly Tester Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.google.com\/webmasters\/tools\/mobile-friendly\/?url=http%3A%2F%2Fwww.rjmprogramming.com.au%2F&#038;utm_source=gws&#038;utm_medium=metaline&#038;utm_campaign=notmobilefriendy\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Google Search Engine Mobile Friendly Tester TutorialGoogle Search Engine Mobile Friendly Tester Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/google_mobile_friendly.jpg\" title=\"Google Search Engine Mobile Friendly Tester Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Google Search Engine Mobile Friendly Tester Tutorial<\/p><\/div>\n<p>The term &#8220;mobile-friendly&#8221; has entered our lexicon strongly, and have a feeling now is an influence on <a target=_blank title='Search Engine Optimization information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Search_engine_optimization'>SEO<\/a> &#8220;scores&#8221; for websites &#8230; <font size=1>doh! (we suspect?!)<\/font>.<\/p>\n<p>Getting definitive information is not easy on this topic, but, rest assured, you can get lots of information.  Which gets us to an interesting philosophical question, perhaps?  Should you try to get to know about something intimately, and from first principles, with everything?<\/p>\n<p>If you are in the &#8220;yes&#8221; camp here, there is no doubt that this is admirable and you should be listened to and applauded if you&#8217;ve spent all this time studying a topic thoroughly &#8230; <i>&#8220;the web needs you&#8221;<\/i>!<\/p>\n<p>If you are in the &#8220;no&#8221; camp here, like me, perhaps you are like me &#8230; ? &#8230;<\/p>\n<ul>\n<li>searching for information as a &#8220;lead in&#8221;, and willing to do a modicum of hard work, to work some bits out for yourself &#8230; and\/or &#8230;<\/li>\n<li>willing to submit to the &#8220;obvious&#8221; reputation of the information supplier, and &#8220;submit&#8221; to its functionality\/advice &#8230; supposing I was to invent the suffix <i>opiosis<\/i> for this, then you could say I proudly suffer from Wikipedia<i>opiosis<\/i> and Google<i>opiosis<\/i> and w3schools<i>opiosis<\/i> and computerhope.com<i>opiosis<\/i> amongst quite a few others<\/li>\n<\/ul>\n<p> &#8230; because I don&#8217;t believe we were all put here to all reinvent wheels, but if we share information, that is good, and this is enhanced if everyone is willing to do their bit by verifying and testing a bit before &#8220;sprouting&#8221;, shall we say?<\/p>\n<p><a target=_blank title='End of rant' href='http:\/\/acronymsandslang.com\/definition\/524289\/EOR-meaning.html'>EOR<\/a> &#8230; so we set the scene for a very useful &#8220;search engine relationship&#8221; tool &#8230; Google, meet Pijtim (<i><font size=1>&#8220;pilgrim on journey to infinite mobile-friendliness&#8221;<\/font><\/i>) &#8230; Pijtim, test website via <a target=_blank title='Google Mobile-friendly Tester' href='https:\/\/www.google.com.au\/webmasters\/tools\/mobile-friendly\/'>Google Mobile-Friendly Test<\/a><\/p>\n<p>We found out that Google did not like our <a target=_blank title='Old mobile landing page for RJM Programming' href='http:\/\/www.rjmprogramming.com.au\/indexmobile.html'>old mobile landing page<\/a> as evidenced by this <a target=_blank href='https:\/\/www.google.com\/webmasters\/tools\/mobile-friendly\/?url=http%3A%2F%2Fwww.rjmprogramming.com.au%2Findexmobile.html&#038;utm_source=gws&#038;utm_medium=metaline&#038;utm_campaign=notmobilefriendy' title='Google mobile-friendly test on old mobile landing page for RJM Programming'>Google mobile-friendly test<\/a>, and so we fixed a few things under the categories &#8230;<\/p>\n<ul>\n<li>Content wider than screen<\/li>\n<li>Links too close together<\/li>\n<\/ul>\n<p> &#8230; including, alas &#8220;defunctioning&#8221; (<font size=1>is a thing we battle against, here, as much as possible &#8230; but &#8230; c&#8217;est la vie<\/font>) &#8230; and got to improve our Google Search Engine look so that our <a target=_blank title='New mobile landing page for RJM Programming' href='http:\/\/www.rjmprogramming.com.au\/Welcome.html'>new mobile landing page<\/a> sits better, as evidenced by <a target=_blank href='https:\/\/www.google.com\/webmasters\/tools\/mobile-friendly\/?url=http%3A%2F%2Fwww.rjmprogramming.com.au%2F&#038;utm_source=gws&#038;utm_medium=metaline&#038;utm_campaign=notmobilefriendy' title='Google mobile-friendly test on new mobile landing page for RJM Programming'>Google mobile-friendly test<\/a>, and meaning, after a little time on revisiting the <a target=_blank title='Google search for rjmprogramming' href='https:\/\/www.google.com.au\/#q=rjmprogramming'>Google search engine<\/a> we see, no more, the link &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank href='https:\/\/www.google.com\/webmasters\/tools\/mobile-friendly\/?url=http%3A%2F%2Fwww.rjmprogramming.com.au%2Findexmobile.html&#038;utm_source=gws&#038;utm_medium=metaline&#038;utm_campaign=notmobilefriendy' title='Google mobile-friendly test on old mobile landing page for RJM Programming'>Your page is not mobile-friendly.<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; as we show with today&#8217;s <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/google_mobile_friendly.jpg' title='Click picture'>tutorial picture<\/a>.<\/p>\n<p>By the way, other web browser search engines have mobile-friendly testers too.  Here is the <a target=_blank title='Bing mobile-friendly tester' href='https:\/\/www.bing.com\/webmaster\/tools\/mobile-friendliness'>Bing mobile-friendly tester<\/a>, for example.<\/p>\n<p>Regarding the big topic of &#8220;mobile-friendly&#8221; websites we encourage you to read and read, online, via search engine queries like <a target=_blank title='Google search for rjmprogramming' href='https:\/\/www.google.com.au\/#q=mobile-friendly'>this<\/a>, and if you want to latch onto a thread here at this blog you could read <a title='Mobile Friendly Meta Viewport Tag Zoom Tutorial' href='#mfmvtzt'>Mobile Friendly Meta Viewport Tag Zoom Tutorial<\/a> as shown below.<\/p>\n<hr>\n<p id='mfmvtzt'>Previous relevant <a target=_blank title='Mobile Friendly Meta Viewport Tag Zoom Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-friendly-meta-viewport-tag-zoom-tutorial\/'>Mobile Friendly Meta Viewport Tag Zoom 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\/viewport_zoom.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Mobile Friendly Meta Viewport Tag Zoom Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_zoom.jpg\" title=\"Mobile Friendly Meta Viewport Tag Zoom Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Mobile Friendly Meta Viewport Tag Zoom Tutorial<\/p><\/div>\n<p>Yesterday, with <a title='Mobile Friendly Meta Viewport Tag Primer Tutorial' href='#mfmvtp'>Mobile Friendly Meta Viewport Tag Primer Tutorial<\/a> as shown below, we featured the HTML meta tag &#8230;<\/p>\n<p>&lt;meta id=&#8221;myviewport&#8221; name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes&#8221; \/&gt;<\/p>\n<p> &#8230; and explained more of its uses, taking a look at its <i>content<\/i> definition as per &#8230;<\/p>\n<ul>\n<li><b>width<\/b> &#8230; most often useful to put <i>device-width<\/i> here, but doesn&#8217;t have to be<\/li>\n<li><b>initial-scale<\/b> &#8230; most often useful to put <i>1<\/i> here<\/li>\n<li><b>minimum-scale<\/b> &#8230; minimum zoom setting<\/li>\n<li><b>maximum-scale<\/b> &#8230; maximum zoom setting<\/li>\n<li><b>user-scalable<\/b> &#8230; most often useful to put <i>yes<\/i> here, but you may want to control everything and put <i>no<\/i><\/li>\n<\/ul>\n<p>Today, if you are on a mobile device, we want to show that the HTML meta viewport tag can be used to zoom in and\/or out on your web application run on a web browser of your mobile device.<\/p>\n<p>We start our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_zoom.html\" title='Click picture'>live run<\/a> (with the HTML and Javascript code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_zoom.html_GETME\">viewport_zoom.html<\/a>) by starting our &#8220;Eat at Joe&#8217;s&#8221; animated GIF content with &#8230;<\/p>\n<ul>\n<li><b>width<\/b>=<i>device-width<\/i><\/li>\n<li><b>initial-scale<\/b>=<i>1<\/i><\/li>\n<li><b>user-scalable<\/b>=<i>yes<\/i> (though most of the point here is for you to sit back and watch what the web application does to zoom around your webpage of your web application run on a web browser of your mobile device)<\/li>\n<\/ul>\n<p> &#8230; and change the <b>initial-scale<\/b> dynamically with Javascript DOM to head towards &#8230;<\/p>\n<ul>\n<li><b>minimum-scale<\/b><\/li>\n<\/ul>\n<p> &#8230; before heading out to &#8230;<\/p>\n<ul>\n<li><b>maximum-scale<\/b><\/li>\n<\/ul>\n<p> &#8230; and then back to <strike>infinity and beyond<\/strike> <b>minimum-scale<\/b> etcetera etcetera etcetera.<\/p>\n<p>We hope you enjoy our spacy feeling web application today.  You can control the initial settings via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_zoom.html?ask=y\" title='Control viewport live run'>viewport prompting live run<\/a>.<\/p>\n<hr>\n<p id='mfmvtpt'>Previous relevant <a target=_blank title='Mobile Friendly Meta Viewport Tag Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-friendly-meta-viewport-tag-primer-tutorial\/'>Mobile Friendly Meta Viewport Tag 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\/detect_hashtag_navigation.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Mobile Friendly Meta Viewport Tag Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.jpeg\" title=\"Mobile Friendly Meta Viewport Tag Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Mobile Friendly Meta Viewport Tag Primer Tutorial<\/p><\/div>\n<p>A couple of days ago we cautioned against thinking the HTML meta tag was a &#8220;cure all&#8221; to make a web application mobile friendly.  Well, lately we&#8217;ve had a web application where it made ALL the difference, and so, today, we want to take that opportunity to explain why this tag can help out with web application mobile friendliness, but please don&#8217;t think we resile from that original &#8220;cure all&#8221; warning, because mobile friendly solutions usually do involve more than the inclusion of one of these, albeit, wonderful (and a programmer&#8217;s &#8220;phew&#8221; tool) HTML head elements, the HTML <a target=_blank title='HTML meta tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_meta.asp'>meta<\/a> <a target=_blank title='Viewport information from w3schools' href='http:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp'>viewport<\/a> tag.<\/p>\n<p>First take a look at our <a title='Intelligent Hashtagging Primer Tutorial' href='#ihpt'>Intelligent Hashtagging Primer Tutorial<\/a> below and reference that to our BEFORE and AFTER scenario of it illustrated in today&#8217;s tutorial picture picture (of an iPad).  Without the HTML meta tag the browser has no guidance regarding scale and will choose its own determinations about this, and with our huge width of data with our intelligent hash tagging web application, it will do something that was not wanted, to also live with the window.innerWidth usage web application Javascript internal &#8220;intelligence&#8221; about knowing which page you are on without you ever going back through an HTML body onload event.  Feel at this stage that we should explain &#8230; we don&#8217;t let loose with the use of this &#8220;intelligence&#8221; but if you examine the HTML closely you&#8217;ll see all the HTML element IDs are based on the page number &#8230; so you could add lots more &#8220;intelligence&#8221; &#8230; will leave that for you &#8230; am feeling a dumb spell coming on!<\/p>\n<p>Okay, let&#8217;s break down parts of that HTML meta tag &#8230;<\/p>\n<p>&lt;meta id=&#8221;myviewport&#8221; name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes&#8221; \/&gt;<\/p>\n<p> &#8230; to explain more of its uses &#8230;<\/p>\n<ul>\n<li><b>width<\/b> &#8230; most often useful to put <i>device-width<\/i> here, but doesn&#8217;t have to be<\/li>\n<li><b>initial-scale<\/b> &#8230; most often useful to put <i>1<\/i> here, and this is what stops the left hand side of today&#8217;s tutorial picture happening<\/li>\n<li><b>minimum-scale<\/b> &#8230; minimum zoom setting<\/li>\n<li><b>maximum-scale<\/b> &#8230; maximum zoom setting<\/li>\n<li><b>user-scalable<\/b> &#8230; most often useful to put <i>yes<\/i> here, but you may want to control everything and put <i>no<\/i><\/li>\n<\/ul>\n<p>Today, if you are on a mobile device, we want to show that the HTML meta viewport tag can be changed dynamically via code like &#8230;<\/p>\n<p><code><br \/>\n   viewport = document.querySelector(\"meta[name=viewport]\"); \/\/ thanks to http:\/\/stackoverflow.com\/questions\/3588628\/can-i-change-the-viewport-meta-tag-in-mobile-safari-on-the-fly<br \/>\n   viewport.setAttribute('content', 'width=' + width + ', initial-scale=' + initial_scale + ', minimum-scale=' + minimimum_scale + ', maximum-scale=' + maximimum_scale + ', user-scalable=' + user_scalable);<br \/>\n<\/code><\/p>\n<p> &#8230; the idea for which we got from this <a target=_blank title='Very useful link' href='http:\/\/stackoverflow.com\/questions\/3588628\/can-i-change-the-viewport-meta-tag-in-mobile-safari-on-the-fly'>very useful link<\/a>.<\/p>\n<p>To try this out (on a mobile device, only, will you see any affect) you can try this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.html?ask=y\" title='Control viewport live run'>viewport prompting live run<\/a> (as distinct from the run of the mill <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.html\" title='Click picture'>live run<\/a>).  Here is the new HTML and Javascript source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.html-GETME\" tile='detect_hashtag_navigation.html'>detect_hashtag_navigation.html<\/a> changed for all these mobile friendly considerations as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.html-GETME\">these changes<\/a>, from a couple of days ago.<\/p>\n<p>Okay, we have another agenda today.  On a mobile device, you may or may not want to cater for the user rotating the device, and so changing its <a target=_blank title='Mobile device orientation information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Detecting_device_orientation'>&#8220;orientation&#8221;<\/a>.  The way you can go about knowing this has happened, and we feel compelled to tell our users with today&#8217;s web application, because the top.document.title Page Numbers may get out of kilter should they proceed (unawares).  We go about detecting by, in general terms &#8230;<\/p>\n<ol>\n<li>storing away global var<font size=1>iables<\/font> for <i>window.innerWidth<\/i> and <i>window.innerHeight<\/i> at the HTML body <i>onload<\/i> event<\/li>\n<li>in the Javascript function that regularly checks on our Page Number calculations, and puts the findings into top.document.title, we <b>check as per<\/b> &#8230;<br \/>\n<code><br \/>\nfunction firstCheck() {<br \/>\n  <b>var durl=document.URL.split('#');<br \/>\n  var isok='y';<\/b><br \/>\n  top.document.title=\"You are on Page \" + eval(Math.floor((eval(getScrollLeft()) + eval(pw)) \/ eval(pw)));<br \/>\n  <b><br \/>\n  if (eval(pw) &gt; eval(ph) && window.innerHeight &gt; window.innerWidth && !done) {<br \/>\n      done=true;<br \/>\n      isok=prompt(\"Change of orientation may make top.document.title (ie. Page Number) wrong.  Continue anyway, or change default answer to refresh for new orientation.\", isok);<br \/>\n  } else if (eval(pw) &lt; eval(ph) && window.innerHeight &lt; window.innerWidth && eval(window.innerWidth \/ eval(pw)) &lt; eval(numpages - 1) && !done) {<br \/>\n      done=true;<br \/>\n      isok=prompt(\"Change of orientation may make top.document.title (ie. Page Number) wrong.  Continue anyway, or change default answer to refresh for new orientation.\", isok);<br \/>\n  }<br \/>\n<\/b><b><br \/>\n  if (isok != null) {<br \/>\n      if (isok != 'y') {<br \/>\n       if (durl[0].indexOf('?') != -1) {<br \/>\n        location.href=durl[0] + '&huh=' + window.innerHeight + '#page' + eval(Math.floor((eval(getScrollLeft()) + eval(pw)) \/ eval(pw)));<br \/>\n       } else {<br \/>\n        location.href=durl[0] + '?huh=' + window.innerHeight + '#page' + eval(Math.floor((eval(getScrollLeft()) + eval(pw)) \/ eval(pw)));<br \/>\n       }<br \/>\n      }<br \/>\n  }<br \/>\n<\/b><br \/>\n  setTimeout(firstCheck,1000);<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p>So we have that tutorial picture BEFORE and AFTER image snapshot, but maybe you are on a mobile device and want to see that <span style='border:1px solid orange;'>AFTER<\/span> and BEFORE (yes, AFTER is on the left &#8230; can you guess why?) scenario yourself?  Well, cast your eyes below, and we hope you come back to read more blog posts soon &#8230; bye &#8230;<\/p>\n<table>\n<tr>\n<td style='width:50%;border:1px solid orange;'><iframe style='height:500px;width:300px;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.html' title='AFTER'><\/iframe><\/td>\n<td style='width:50%;'><iframe style='height:500px;width:300px;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.htm' title='BEFORE'><\/iframe><\/td>\n<\/tr>\n<\/table>\n<p> &#8230; and take a look up at your web browser&#8217;s title for this blog posting&#8217;s web page &#8230; see how top.document.title usage, rather than just document.title usage, has such power &#8230; see it change by navigating in either.  We last, sort of, raved about this top.document.title thought when we presented <a target=_blank title='Javascript Associative Array Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-associative-array-primer-tutorial\/'>Javascript Associative Array Primer Tutorial<\/a> &#8230; <font size=1>and now we&#8217;re almost over it<\/font>.<\/p>\n<hr>\n<p id='ihpt'>Previous relevant <a target=_blank title='Intelligent Hashtagging Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/intelligent-hashtagging-primer-tutorial\/'>Intelligent Hashtagging 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\/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<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='#d20701' onclick='var dv=document.getElementById(\"d20701\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/viewport\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20701' 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='#d20730' onclick='var dv=document.getElementById(\"d20730\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mobile\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20730' 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='#d23993' onclick='var dv=document.getElementById(\"d23993\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d23993' style='display: none; border-left: 2px solid green; border-top:2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The term &#8220;mobile-friendly&#8221; has entered our lexicon strongly, and have a feeling now is an influence on SEO &#8220;scores&#8221; for websites &#8230; doh! (we suspect?!). Getting definitive information is not easy on this topic, but, rest assured, you can get &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-search-engine-mobile-friendly-tester-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":[513,795,798,1111,1120,1319,1421],"class_list":["post-23993","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-google","tag-mobile","tag-mobile-friendly","tag-search-engine","tag-seo","tag-tutorial","tag-website"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/23993"}],"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=23993"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/23993\/revisions"}],"predecessor-version":[{"id":23997,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/23993\/revisions\/23997"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=23993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=23993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=23993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}