{"id":46851,"date":"2019-10-21T03:01:08","date_gmt":"2019-10-20T17:01:08","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=46851"},"modified":"2019-10-21T06:25:14","modified_gmt":"2019-10-20T20:25:14","slug":"landing-page-navigational-value-add-on-mobile-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-navigational-value-add-on-mobile-tutorial\/","title":{"rendered":"Landing Page Navigational Value Add on Mobile Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Landing Page Navigational Value Add on Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/rotate_value_add.jpg\" title=\"Landing Page Navigational Value Add on Mobile Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Landing Page Navigational Value Add on Mobile Tutorial<\/p><\/div>\n<p>The recent <a title='Responsive Design Viewport Initial Scale Tutorial' href='#rdvist'>Responsive Design Viewport Initial Scale Tutorial<\/a> represented a &#8230;<\/p>\n<ul>\n<li>CSS viewport, and after that, &#8220;glow styling&#8221;, set of improvements specific to mobile platforms &#8230; and you can probably guess that we&#8217;re also interested, today, in &#8230;<\/li>\n<li>Javascript client event code improvement specific to mobile platforms aiding navigation with the top menus &#8230; where the idea is to introduce the concept of &#8230;<br \/>\n<blockquote><p>\nLook, Mum, no fingers!\n<\/p><\/blockquote>\n<p> &#8230; navigation between Landing Page HTML\/Javascript\/CSS webpages from left to right just by changing the orientation of your mobile device from\/to Portrait\/Landscape (having not acted any other way within the current webpage)<\/li>\n<\/ul>\n<p>We&#8217;ve never done this before, and daresay am not sure I&#8217;ve seen it on many other websites, so went about informing the user of the navigational possibility here by placing the &#128257; ( ie. &amp;#128257; ) emoji next to the menu item an orientation change can navigate you to (clearing the emoji on any other action on that webpage).  So, this is not technically difficult, but we did find iOS problems with a <a target=_blank title='orientationchange event info from w3schools' href='https:\/\/www.w3schools.com\/jquerymobile\/tryit.asp?filename=tryjqmob_events_orientationchange2'>&#8220;screen.orientation&#8221;<\/a> always coming back &#8220;undefined&#8221; and so (thanks to the great advice of <a target=_blank title='Great advice, thanks' href='https:\/\/stackoverflow.com\/questions\/44709114\/javascript-screen-orientation-on-safari'>this webpage<\/a>) we ended up checking for &#8220;undefined&#8221; and resorting to the use of <a target=_blank title='window.watchMedia info from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_win_matchmedia.asp'>window.matchMedia<\/a> in this scenario.<\/p>\n<p>This new Javascript code &#8230;<\/p>\n<p><code><br \/>\nvar wasso='';<br \/>\nvar spanemoji='';<br \/>\n function orwork() {<br \/>\nif (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n  screen = screen || window;<br \/>\n  wasso=''  + screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type;<br \/>\n  if (('' + wasso) == 'undefined') {<br \/>\n   var mql=window.matchMedia(\"(orientation: portrait)\");<br \/>\n\/\/ If there are matches, we're in portrait<br \/>\nif(mql.matches) {<br \/>\n    wasso=\"Portrait\"; \/\/ Portrait orientation<br \/>\n} else {<br \/>\n    wasso=\"Landscape\"; \/\/ Landscape orientation<br \/>\n}<br \/>\n  }<br \/>\n  if (('' + wasso) != '') {<br \/>\n     var lis=document.getElementsByTagName('li');<br \/>\n     var candidate=null, cfound=false;;<br \/>\n     for (var il=0; il&lt;lis.length; il++) {<br \/>\n       if (lis[il].outerHTML.indexOf('current-page') != -1) {<br \/>\n        if (candidate == null) {<br \/>\n         if (('' + document.URL).indexOf('\/Link') != -1) {<br \/>\n           candidate=lis[il];<br \/>\n           cfound=true;<br \/>\n           spanemoji='&amp;#128257;';<br \/>\n         } else if (!cfound && lis[il].outerHTML.indexOf('noncurrent-page') == -1) {<br \/>\n           cfound=true;<br \/>\n         } else if (cfound) {<br \/>\n           candidate=lis[il];<br \/>\n           cfound=true;<br \/>\n           spanemoji='&amp;#128257;';<br \/>\n         }<br \/>\n        }<br \/>\n       }<br \/>\n     }<br \/>\n     if (candidate) {<br \/>\n       candidate.innerHTML+=\"&lt;span id='sdrot' title='Navigate to here on device rotation'&gt;\" + spanemoji + \"&lt;\/span&gt;\";<br \/>\n     }<br \/>\n\/\/ Listen for orientation changes ... thanks to <a target=_blank title='https:\/\/davidwalsh.name\/orientation-change' href='https:\/\/davidwalsh.name\/orientation-change'>https:\/\/davidwalsh.name\/orientation-change<\/a><br \/>\nwindow.addEventListener(\"orientationchange\", function() {<br \/>\n  \/\/ Announce the new orientation number<br \/>\n  var thisso=''  + screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type;<br \/>\n  if (('' + thisso) == 'undefined') {<br \/>\n   var mql=window.matchMedia(\"(orientation: portrait)\");<br \/>\n\/\/ If there are matches, we're in portrait<br \/>\nif(mql.matches) {<br \/>\n    thisso=\"Portrait\"; \/\/ Portrait orientation<br \/>\n} else {<br \/>\n    thisso=\"Landscape\"; \/\/ Landscape orientation<br \/>\n}<br \/>\n  }<br \/>\n  if (('' + wasso) != '') { \/\/ && wasso != ('' + thisso)) {<br \/>\n   if (('' + document.URL).indexOf('\/Link') != -1) {<br \/>\n     location.href=document.URL.split('\/Link')[0] + '\/Welcome.html';<br \/>\n   } else if (('' + document.URL).indexOf('\/Guestbook') != -1) {<br \/>\n     location.href=document.URL.split('\/Guestbook')[0] + '\/Links.html';<br \/>\n   } else if (('' + document.URL).indexOf('\/News') != -1) {<br \/>\n     location.href=document.URL.split('\/News')[0] + '\/Guestbook.html';<br \/>\n   } else if (('' + document.URL).indexOf('\/Service') != -1) {<br \/>\n     location.href=document.URL.split('\/Service')[0] + '\/News.html';<br \/>\n   } else if (('' + document.URL).indexOf('\/Contact') != -1) {<br \/>\n     location.href=document.URL.split('\/Contact')[0] + '\/Services.html';<br \/>\n   } else if (('' + document.URL).indexOf('\/About') != -1) {<br \/>\n     location.href=document.URL.split('\/About')[0] + '\/Contact_Us.html';<br \/>\n   } else {<br \/>\n     location.href=document.URL.split('.au')[0] + '.au\/About_Us.html';<br \/>\n   }<br \/>\n  }<br \/>\n}, false);<br \/>\n<br \/>\nwindow.addEventListener(\"onmousedown\", function() {<br \/>\n  if (document.getElementById('sdrot')) { document.getElementById('sdrot').innerHTML=''; }<br \/>\n  wasso='';<br \/>\n}, false);<br \/>\n<br \/>\nwindow.addEventListener(\"touchstart\", function() {<br \/>\n  if (document.getElementById('sdrot')) { document.getElementById('sdrot').innerHTML=''; }<br \/>\n  wasso='';<br \/>\n}, false);<br \/>\n  }<br \/>\n}<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; only makes sense for mobile platforms, and we have that &#8220;if&#8221; statement helping out too that is called into play <b>an additional line of code<\/b> as per &#8230;<\/p>\n<p><code><br \/>\nfunction widthfix() {  \/\/<br \/>\n if (navigator.userAgent.match(\/Android|BlackBerry|iPad|iPhone|iPod|Opera Mini|IEMobile\/i)) { \/\/ it is a mobile device<br \/>\n   if (screen.width &lt; 700) {<br \/>\n    var mvp = document.getElementById('myviewport');<br \/>\n    mvp.setAttribute('content','width=device-width, initial-scale=' + eval(screen.width \/ 768));<br \/>\n   }<br \/>\n }<br \/>\n <b>orwork();<\/b><br \/>\n \/\/ Below is as per the previous posting<br \/>\n if (1 == 7 && navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile\/i)) { \/\/ it is a mobile device<br \/>\n   document.getElementById('body_content').style.width='100%';<br \/>\n   document.getElementById('nav_layer').style.width='100%';<br \/>\n   document.getElementById('widget0').style.width='100%';<br \/>\n }<br \/>\n}<br \/>\n<\/code><\/p>\n<hr>\n<p id='rdvist'>Previous relevant <a target=_blank title='Responsive Design Viewport Initial Scale Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/responsive-design-viewport-initial-scale-tutorial\/'>Responsive Design Viewport Initial Scale Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Responsive Design Viewport Initial Scale Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/responsive_design_viewport_initial_scale.jpg\" title=\"Responsive Design Viewport Initial Scale Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Responsive Design Viewport Initial Scale Tutorial<\/p><\/div>\n<p>The recent <a title='Responsive Design Viewport Width Considerations Tutorial' href='#rdvwct'>Responsive Design Viewport Width Considerations Tutorial<\/a> was a Responsive Design improvement step for our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index.htm\" title=\"Click picture\">Landing Page<\/a> series of HTML\/Javascript\/CSS webpages at RJM Programming, but what it addressed was &#8220;what not to do&#8221;.<\/p>\n<p>Today, it is more the case, with mobile devices less than 700px wide, viewport wise, what is a &#8220;good step to do&#8221;?<\/p>\n<p>In really simple terms it is getting the head around &#8230;<\/p>\n<ul>\n<li>treating the meta tag <a target=_blank href='https:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp' title='Responsive Web Design - The Viewport'>viewport<\/a> (within the head tag of a webpage) like a lot of other HTML tags within the body tag, do not hold off from giving it an ID attribute (actually restoring, somewhat) how we used to do it) &#8230; <b>so we did<\/b> &#8230;<br \/>\n<code><br \/>\n&lt;meta<b> id=\u201dmyviewport\u201d<\/b> name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<br \/>\n<\/code><br \/>\n &#8230; and then &#8230;\n<\/li>\n<li>add into that Javascript function widthfix the <b>new code<\/b> &#8230;<br \/>\n<code><br \/>\nfunction widthfix() {  \/\/<br \/>\n <b>if (navigator.userAgent.match(\/Android|BlackBerry|iPad|iPhone|iPod|Opera Mini|IEMobile\/i)) { \/\/ it is a mobile device<br \/>\n   if (screen.width &lt; 700) {<br \/>\n    var mvp = document.getElementById('myviewport');<br \/>\n    mvp.setAttribute('content','width=device-width, initial-scale=' + eval(screen.width \/ 768));<br \/>\n   }<br \/>\n }<\/b><br \/>\n \/\/ Below is as per the previous posting<br \/>\n if (1 == 7 && navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile\/i)) { \/\/ it is a mobile device<br \/>\n   document.getElementById('body_content').style.width='100%';<br \/>\n   document.getElementById('nav_layer').style.width='100%';<br \/>\n   document.getElementById('widget0').style.width='100%';<br \/>\n }<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; adjusting that &#8220;Initial Scale&#8221; setting of the viewport for those smaller devices, off the webpage document onload event\n<\/li>\n<\/ul>\n<p>If you are on such a mobile device, perhaps you see this improvement when accessing <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index.htm\" title=\"Click picture\">the RJM Programming Landing Page<\/a>.<\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/responsive-design-viewport-initial-scale-tutorial\/'>Responsive Design Viewport Initial Scale Tutorial<\/a>.<\/p>\n<hr>\n<p id='rdvwct'>Previous relevant <a target=_blank title='Responsive Design Viewport Width Considerations Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/responsive-design-viewport-width-considerations-tutorial\/'>Responsive Design Viewport Width Considerations Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Responsive Design Viewport Width Considerations Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/responsive_design_viewport_width.jpg\" title=\"Responsive Design Viewport Width Considerations Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Responsive Design Viewport Width Considerations Tutorial<\/p><\/div>\n<p>Regarding our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index.htm\" title=\"Click picture\">Landing Page<\/a> series of HTML\/Javascript\/CSS webpages here at RJM Programming, we&#8217;re streamlining our device width (<a target=_blank title='Responsive Web Design' href='https:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp'>Responsive Web Design<\/a>) considerations of &#8230;<\/p>\n<ul>\n<li><a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-friendly-meta-viewport-tag-zoom-tutorial\/'>Mobile Friendly Meta Viewport Tag Zoom Tutorial<\/a> by now going with &#8230;<br \/>\n<table>\n<tr>\n<th>Was ..<\/th>\n<th><b>Now is<\/b> &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\n&lt;meta id=\u201dmyviewport\u201d name=\u201dviewport\u201d content=\u201dwidth=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes\u201d \/&gt;<br \/>\n<\/code>\n<\/td>\n<td>\n<code><br \/>\n<b>&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<\/b><br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<li><a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-pagespeed-and-firebug-mobile-friendly-primer-tutorial\/' title='Google PageSpeed and Firebug Mobile Friendly Primer Tutorial'>Google PageSpeed and Firebug Mobile Friendly Primer Tutorial<\/a> by now going with &#8230;<br \/>\n<table>\n<tr>\n<th>Was ..<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\nfunction widthfix() {  \/\/<br \/>\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile\/i)) { \/\/ it is a mobile device<br \/>\n   document.getElementById('body_content').style.width='100%';<br \/>\n   document.getElementById('nav_layer').style.width='100%';<br \/>\n   document.getElementById('widget0').style.width='100%';<br \/>\n }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th><b>Now is<\/b> &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\nfunction widthfix() {  \/\/<br \/>\n if (<b>1 == 7 && <\/b>navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile\/i)) { \/\/ it is a mobile device<br \/>\n   document.getElementById('body_content').style.width='100%';<br \/>\n   document.getElementById('nav_layer').style.width='100%';<br \/>\n   document.getElementById('widget0').style.width='100%';<br \/>\n }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<\/ul>\n<p>Why?<\/p>\n<ul>\n<li>viewport advice of W3School&#8217;s <a target=_blank href='https:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp' title='Responsive Web Design - The Viewport'>Responsive Web Design &#8211; The Viewport<\/a> useful link, thanks &#8230; to keep it simple &#8230;<br \/>\n<code><br \/>\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<br \/>\n<\/code>\n<\/li>\n<li>we were able to use Safari (web browser) Develop Menu &#8220;Responsive Design Mode&#8221; functionality (as per <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/safari-develop-menu-responsive-design-primer-tutorial\/' title='Safari Develop Menu Responsive Design Primer Tutorial'>Safari Develop Menu Responsive Design Primer Tutorial<\/a>) to see for ourselves the improvement where our previous width based Javascript logic amendments had been interfering with the meta viewport suggestions better in keeping with Responsive Design thoughts<\/li>\n<\/ul>\n<p>Food for thought, we hope, for those chipping away at responsive design amalgamations!<\/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='#d46756' onclick='var dv=document.getElementById(\"d46756\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46756' 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='#d46824' onclick='var dv=document.getElementById(\"d46824\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onload\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46824' 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='#d46851' onclick='var dv=document.getElementById(\"d46851\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/orientation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46851' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The recent Responsive Design Viewport Initial Scale Tutorial represented a &#8230; CSS viewport, and after that, &#8220;glow styling&#8221;, set of improvements specific to mobile platforms &#8230; and you can probably guess that we&#8217;re also interested, today, in &#8230; Javascript client &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-navigational-value-add-on-mobile-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":[385,400,576,630,631,652,680,3116,770,795,830,870,889,3117,3115,997,1071,3119,1319,3118,1583],"class_list":["post-46851","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-emoji","tag-event","tag-html","tag-ipad","tag-iphone","tag-javascript","tag-landing-page","tag-landscape","tag-menu","tag-mobile","tag-navigation","tag-onload","tag-orientation","tag-orientationchange","tag-portrate","tag-programming","tag-rotate","tag-screen-orientation","tag-tutorial","tag-watchmedia","tag-window"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46851"}],"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=46851"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46851\/revisions"}],"predecessor-version":[{"id":46855,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46851\/revisions\/46855"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=46851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=46851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=46851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}