{"id":20091,"date":"2016-02-11T03:01:31","date_gmt":"2016-02-10T17:01:31","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=20091"},"modified":"2016-08-19T12:12:36","modified_gmt":"2016-08-19T02:12:36","slug":"landing-page-mobile-phone-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-mobile-phone-tutorial\/","title":{"rendered":"Landing Page Mobile Phone Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index_20160209.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Landing Page Mobile Phone Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\/landing-20of.jpg\" title=\"Landing Page Mobile Phone Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Landing Page Mobile Phone Tutorial<\/p><\/div>\n<p>If you&#8217;re writing a web application for general use, the general device categorization of &#8230;<\/p>\n<ul>\n<li>mobile<\/li>\n<li>non-mobile<\/li>\n<\/ul>\n<p> &#8230; is, sometimes, not enough of a differentiation, though that was our categorization a couple of days ago constructing <a target=_blank title='Landing Page Mobile Tutorial' href='#lpmt'>Landing Page Mobile Tutorial<\/a> as shown below.  For instance, with our RJM Programming Landing Page project we think we need to differentiate via &#8230;<\/p>\n<ul>\n<li>mobile tablet<\/li>\n<li>mobile phone<\/li>\n<li>non-mobile<\/li>\n<\/ul>\n<p> &#8230; because a <i>mobile tablet<\/i> is wide enough for a lot of the reasoning logic designed for the non-mobile platforms to work (but not all (eg. think it is still good to <i>float:bottom<\/i> for mobile tablets)), and it is that middle <i>mobile phone<\/i> designation that needs most of the detailed consideration for us as far as the web application program logic goes.<\/p>\n<p>With those smaller device widths what becomes crucially important is that the user &#8230;<\/p>\n<ul>\n<li>can use the (mobile) pinch gesture to zoom in and out<\/li>\n<li>can use the (mobile) swipe right and swipe left gestures to reach places not within the immediate view<\/li>\n<li>can use scrolling (or perhaps you think of it as (mobile) swiping down and swiping up) to reach functionality not within the immediate view<\/li>\n<\/ul>\n<p>Sounds all good and easy on paper, but if you involve an HTML iframe element, as we do, making all this work for the small widths of a <i>mobile phone<\/i> and not dumb down the web application takes a bit of work, making use of encompassing HTML div elements for instance, and the advice of great links like <a target=_blank title='Useful link ... thanks' href='http:\/\/stackoverflow.com\/questions\/20123960\/how-to-get-iframe-width-100-in-iphone-portrait-view'>this one<\/a> &#8230; so, thanks.<\/p>\n<p>The HTML and Javascript and CSS code today you could call <a target=_blank title='index.htm new landing page for RJM Programming' href='http:\/\/www.rjmprogramming.com.au\/index.htm---GETME'>index.htm<\/a> changed from yesterday as per <a target=_blank title='index.htm new landing page for RJM Programming' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/index.htm---GETME'>this link<\/a> and you can try out these navigation &#8220;overlay&#8221; changes with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index_20160209.htm\" title='Click picture'>live run<\/a> link.<\/p>\n<p>That code segment from times past, below, changes as per the <b>bold<\/b> bits below &#8230;<\/p>\n<p><code><br \/>\n<b><br \/>\n function predepending() {<br \/>\n  if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n    htmlis='';<br \/>\n    if (document.URL.indexOf('?') != -1) {<br \/>\n    location.href='indexmobile.html' + document.URL.substring(document.URL.indexOf('?'));<br \/>\n    } else if (document.URL.indexOf('#') != -1) {<br \/>\n    location.href='indexmobile.html' + document.URL.substring(document.URL.indexOf('#'));<br \/>\n    } else {<br \/>\n    location.href='indexmobile.html';<br \/>\n    }<br \/>\n  }<br \/>\n }<br \/>\n<\/b><br \/>\n function depending(his) {<br \/>\n<b><br \/>\n  predepending();<br \/>\n  if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n    his=his.replace(\/:50;\/g, \":5;\").replace(\"75%\", \"100%\").replace(\"75%\", \"95%\").replace(\"iframe \",\"iframe scrolling='no' \");<br \/>\n  }<br \/>\n<\/b><br \/>\n  if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n   return his.replace(\"60\",\"1000\").replace(\/&lt;br&gt;\/g, \"&amp;nbsp;\").replace(\/right\/g, \"bottom\").replace(\/s below\/g, \"s to the right\");<br \/>\n  }<br \/>\n  return his;<br \/>\n }<br \/>\n&lt;\/script&gt;<br \/>\n&lt;script type=\"text\/javascript\" src=\"idea.js\" async defer&gt;&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body id=\"body\" onload=\"<b> predepending();<\/b> if (def.length == 0) { document.getElementById('amusic').style.textDecoration='line-through'; setTimeout(looknow, 10000); } \" style=\" background: url('http:\/\/www.rjmprogramming.com.au\/ephemeral\/siteimage.jpg');   \"&gt;<br \/>\n&lt;script type='text\/javascript'&gt; htmlis=depending(htmlis); document.write(htmlis); &lt;\/script&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p><b><i>Stop Press<\/i><\/b> (later that day)<\/p>\n<p>The iWeb template does not suit mobile and HTML iframe elements, and think you&#8217;ll find a lot of web design systems don&#8217;t suit, so what we decided to do was to take <i>index.htm<\/i> and <i>index.html<\/i> parts to make a new <i>indexmobile.html<\/i> that <i>index.htm<\/i> calls if one of those small width scenarios.<\/p>\n<hr>\n<p id='lpmt'>Previous relevant <a target=_blank title='Landing Page Mobile Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-mobile-tutorial\/'>Landing Page Mobile 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_20160204.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Landing Page Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\/landing-10of.jpg\" title=\"Landing Page Mobile Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Landing Page Mobile Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Landing Page Overlay Tutorial' href='#lpot'>Landing Page Overlay Tutorial<\/a> as shown below, had an emphasis on what was going on with the right hand side of our RJM Programming Landing Page.  When dealing with the &#8220;right hand side&#8221; quite often optimism has to be tempered with &#8230; <i>&#8220;How the heck is this going to work with a mobile platform?&#8221;<\/i> &#8230; and so it was with our changes &#8230; the small widths of mobile devices probably means that the additional One Page Website functionality would be better placed using &#8230;<\/p>\n<ul>\n<li><i>float: bottom<\/i> <font size=1> &#8230; rather than float: right<\/font> (ie. new HTML right hand side elements should be near bottom instead)<\/li>\n<li><i>top: 1000<\/i> <font size=1> &#8230; rather than top: 60<\/font> (ie. new HTML div element near bottom rather than near top)<\/li>\n<li><i>&amp;nbsp;<\/i> <font size=1> &#8230; rather than &lt;br&gt;<\/font> (ie. space rather than line feed)<\/li>\n<\/ul>\n<p> &#8230; for mobile platforms &#8230; and you&#8217;ll see all this reflected in our new Javascript function designed to differentiate between mobile and non-mobile platforms, shown below &#8230;<\/p>\n<p><code><br \/>\n function depending(his) {<br \/>\n  if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n   return his.replace(\"60\",\"1000\").replace(\/&lt;br&gt;\/g, \"&amp;nbsp;\").replace(\/right\/g, \"bottom\").replace(\/s below\/g, \"s to the right\");<br \/>\n  }<br \/>\n  return his;<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; called in the <i>document.body<\/i> via &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt; htmlis=depending(htmlis); document.write(htmlis); &lt;\/script&gt; &lt;\/body&gt; &lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; illustrating how Javascript can perform a little like a server language like PHP, holding back on the production of the HTML via that HTML defined in a var<font size=1>iable<\/font> and modified, so long as that Javascript is capable of checking for the necessary symptoms, which it can in our case, checking for mobile platform usage (as PHP can), before making use of Javascript DOM <a target=_blank title='Javascript DOM document.write() method information' href='http:\/\/www.w3schools.com\/jsref\/met_doc_write.asp'><i>document.write()<\/i><\/a> method.<\/p>\n<p>We also cater for a randomised background image scenario using external Javascript (you could call <a target=_blank title='idea.js' href='http:\/\/www.rjmprogramming.com.au\/idea.js_GETME'>idea.js<\/a>) in an HTML script tag that has <a target=_blank title='HTML script tag async property information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_script_async.asp'><i>async<\/i><\/a> and <a target=_blank title='HTML script tag defer property information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_script_defer.asp'><i>defer<\/i><\/a> defined (as we do not see any of this as &#8220;mission critical&#8221;) that adds to an already established Array in local Javascript (called <i>thebs<\/i>, with initial size of 5) more background image URLs that fit the bill, and can be called on via &#8230;<\/p>\n<p><code><br \/>\nvar ibs=Math.floor(Math.random() * thebs.length) + 0;<br \/>\n<\/code><\/p>\n<p> &#8230; to establish an image index in that variable <i>ibs<\/i> to perform the background image &#8220;shuffle&#8221; via the code (snippet) &#8230;<\/p>\n<p><code><br \/>\n      if (eval(ibs) <= 4) {\n       if (document.getElementById(thebs[ibs]) != null) {\n       if (document.getElementById(thebs[ibs]).style.backgroundImage != null) {\n       document.getElementById('body').style.backgroundImage=document.getElementById(thebs[ibs]).style.backgroundImage;\n       }\n       }\n      } else {\n       document.getElementById('body').style.backgroundImage=eval('\"url(' + \"'\" + thebs[ibs] + \"')\" + '\"');\n      }\n<\/code><\/p>\n<p>The HTML and Javascript and CSS code today you could call <a target=_blank title='index.htm new landing page for RJM Programming' href='http:\/\/www.rjmprogramming.com.au\/index.htm--GETME'>index.htm<\/a> changed from yesterday as per <a target=_blank title='index.htm new landing page for RJM Programming' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/index.htm--GETME'>this link<\/a> and you can try out these navigation \"overlay\" changes with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index_20160205.htm\" title='Click picture'>live run<\/a> link.<\/p>\n<hr>\n<p id='lpot'>Previous relevant <a target=_blank title='Landing Page Overlay Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-overlay-tutorial\/'>Landing Page Overlay 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_20160204.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Landing Page Overlay Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\/landing-02of.jpg\" title=\"Landing Page Overlay Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Landing Page Overlay Tutorial<\/p><\/div>\n<p>Yesterday's <a title='Landing Page Primer Tutorial' href='#lppt'>Landing Page Primer Tutorial<\/a> as shown below, got us into our RJM Programming Landing Page changes project.  We set up the framework for how the job will be done.  Of course there are other ways to approach the job, and the <i>index.htm<\/i> calling <i>index.html<\/i> is just one of many approaches.<\/p>\n<p>Today we build on that with another <i>\"overlay\"<\/i> idea we've never used before, so we're pretty keen for you to see how it works.  Yesterday you may recall ...<\/p>\n<blockquote><p>\nWe encased the HTML iframe element above in an HTML div element and added one of our <i>http:\/\/www.rjmprogramming.com.au\/ephemeral<\/i> images as an HTML body element background image.\n<\/p><\/blockquote>\n<p> ... but we forgot to tell you that that HTML div is defined as being <i>align='center'<\/i> and with that in mind we want you to think of that HTML div as the canopy of a tree with bits on the left and right where things can dangle down.  With <i>index.html<\/i> work we already had things making use of the \"dangle\" space on the left and you can read about that with <a target=_blank title='CSS3 Landing Page Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-landing-page-primer-tutorial\/'>CSS3 Landing Page Primer Tutorial<\/a> (which is the same place to read about the rounded borders on our HTML button elements today), but, today, we concentrate on the \"dangle\" space to the right.  We want to give you access to some of our <a target=_blank title='One Image Site' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/one-image-site\/'>One Image Page Website<\/a> ideas using ...<\/p>\n<ul>\n<li>HTML button elements with <i>onclick<\/i> events (specified to take you to new tabs or windows for those One Image Page Websites) with a background image reflecting a bit of what you might be seeing and helped out by the CSS property <i><a target=_blank title='CSS background-position property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_background-position.asp'>background-position<\/a>: x y;<\/i>'s panning feel a bit similar to the panning feel of <a target=_blank title='Paintbrush Panning Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/paintbrush-panning-primer-tutorial\/'>Paintbrush Panning Primer Tutorial<\/a><\/li>\n<li>HTML <i>a<\/i> tag that, curiously, has no defined <i>href<\/i> property (so navigates you nowhere) but when clicked sets up modes of use for the HTML button elements above as to whether background music plays while you view the One Image Page Website photography, the emoji used derived from the methodology defined in <a target=_blank title='HTML\/Javascript\/PHP Broadcast and Listen CSS Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptphp-broadcast-and-listen-css-tutorial\/\/'>HTML\/Javascript\/PHP Broadcast and Listen CSS Tutorial<\/a><\/li>\n<\/ul>\n<p>So the mechanism for this \"overlay\" is that we mimic the HTML div element above except that this new, separate, HTML div element ...<\/p>\n<ul>\n<li>has same <i>position<\/i> property set to <i>absolute<\/i><\/li>\n<li>has a <i>z-index<\/i> property one greater than that previous one<\/li>\n<li>has a \"slivery\" <i>height<\/i> of 12 and a repositioned <i>top<\/i> of 60 designed to not interfere with other navigation ... and yet ...<\/li>\n<\/ul>\n<p>Within this new HTML div element as above we place our HTML button elements with a <i>float<\/i> property of <i>right<\/i> and that same slightly bigger <i>z-index<\/i> property, and ... <br \/><img src='http:\/\/www.rjmprogramming.com.au\/ephemeral\/landing-03of.jpg' title='Tutorial picture'><\/img><br \/> ... voila ... perhaps curiously, though these HTML buttons fall outside the boundaries of that HTML div element they are helped by it to be navigable (ie. clickable).  And so this is a new \"overlay\" idea we'd like to add to other <a target=_blank title='Overlay blog posts here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>\"overlay\" ideas<\/a> we've been showing you at this blog.<\/p>\n<p>The HTML and Javascript and CSS code today you could call <a target=_blank title='index.htm new landing page for RJM Programming' href='http:\/\/www.rjmprogramming.com.au\/index.htm-GETME'>index.htm<\/a> changed from yesterday as per <a target=_blank title='index.htm new landing page for RJM Programming' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/index.htm-GETME'>this link<\/a> and you can try out these navigation \"overlay\" changes with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index_20160204.htm\" title='Click picture'>live run<\/a> link.<\/p>\n<hr>\n<p id='lppt'>Previous relevant <a target=_blank title='Landing Page Primer Tutorial' href='http:\/\/www.rjmprigramming.com.au\/ITblog\/landing-page-primer-tutorial\/'>Landing Page 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\/index_20160202.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Landing Page Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\/landing-01of.jpg\" title=\"Landing Page Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Landing Page Primer Tutorial<\/p><\/div>\n<p>There are (at the very least) a couple of useful \"equivalence\" file naming ideas regarding web applications ... <\/p>\n<ul>\n<li>the equivalence of .jpeg and .jpg extensions ... the same content can be pointed at two different ways, effectively, by a server-side programming in PHP or ASP.Net, for example ... as we talked about with the \"Did you know?\" of <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-image-optimization-primer-tutorial' title='.jpeg and .jpg discussion'>FFmpeg Image Optimization Primer Tutorial<\/a><\/li>\n<li>the hierarchical \"equivalence\" of .htm and .html ... default <a target=_blank href='https:\/\/en.wikipedia.org\/wiki\/Apache_HTTP_Server' title='Apache web server information from Wikipedia ... thanks'>Apache<\/a>\/PHP(\/MySql) web servers have order of priority \"index.htm\" then \"index.html\" then \"index.php\", <a target=_blank title='IIS web server information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Internet_Information_Services'>IIS<\/a> (hosting ASP.Net) web servers  have order of priority \"default.htm\" then \"default.html\" then \"default.aspx\" then \"default.asp\" (where a URL source filename is not specified as in the RJM Programming landing page URL of <i>http:\/\/www.rjmprogramming.com.au<\/i>)<\/li>\n<\/ul>\n<p>For many years we've allowed the RJM Programming landing page URL of <i>http:\/\/www.rjmprogramming.com.au<\/i> point at Apache web server [DocumentRoot]\/index.html (by not having a [DocumentRoot]\/index.htm exist) ... that looked like ... <br \/><img src='http:\/\/www.rjmprogramming.com.au\/ephemeral\/landing-00of.jpg' title='RJM Programming landing page as of 2\/2\/2016' \/><br \/> ... but as of 2\/2\/2016 we've set out to make changes which we'll keep you up to date with.  And we used this hierarchy of \".htm\" and \".html\" to our advantage by now having the RJM Programming landing page URL of <i>http:\/\/www.rjmprogramming.com.au<\/i> point at (the newly existant) Apache web server [DocumentRoot]\/<a target=_blank title='index.htm new landing page for RJM Programming' href='http:\/\/www.rjmprogramming.com.au\/index.htm_GETME'>index.htm<\/a> which in turn calls [DocumentRoot]\/index.html in an HTML iframe element, as you can see from the 2\/2\/2016 <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index_20160202.htm\" title='click picture'>live run<\/a>.  This arrangement may change over time.  This is all work in progress.<\/p>\n<p>We encased the HTML iframe element above in an HTML div element and added one of our <i>http:\/\/www.rjmprogramming.com.au\/ephemeral<\/i> images as an HTML body element background image.  So as we leave it on 2\/2\/2016 the RJM Programming landing page looks like ... <br \/><img src='http:\/\/www.rjmprogramming.com.au\/ephemeral\/landing-01of.jpg' title='RJM Programming landing page as of 2\/2\/2016' \/><\/p>\n<p>As we continue in this series of tutorials we don't pretend to be experts on aesthetics but we will show you some HTML and Javascript (no PHP, deliberately (read <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/linux-sudo-nohup-watchdog-primer-tutorial\/'>Linux sudo nohup Watchdog Primer Tutorial<\/a> to get this in context, for us)) functionality ideas that could supplement some great graphical design ideas you have to start something yourself, perhaps.<\/p>\n<p>Before we leave today's pretty simple start to all this (also shown at WordPress 4.1.1's <a target=_blank title='Landing Page Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-primer-tutorial\/'>Landing Page Primer Tutorial<\/a>), we want to share with you, (perhaps in your role) as a web server administrator, where to find ...<\/p>\n<ul>\n<li>on Apache\/PHP(\/MySql) where is the \".htm\" \".html\" \".php\" hierarchy (order) defined in CentOS WHM httpd.conf configuration file ...<br \/><code><br \/>\n&lt;IfModule dir_module&gt;<br \/>\n    DirectoryIndex index.htm index.html index.php<br \/>\n&lt;\/IfModule&gt;<br \/>\n<\/code><br \/> ... but please note the default in MAMP local web server, for instance, is ...<br \/><code><br \/>\n&lt;IfModule dir_module&gt;<br \/>\n    DirectoryIndex index.html index.php<br \/>\n&lt;\/IfModule&gt;<br \/>\n<br \/><\/code><br \/>... not recognising .htm extension at all<\/li>\n<li>on Apache\/PHP(\/MySql) where is DocumentRoot defined in (MAMP local web server) httpd.conf configuration file ...<br \/><code>DocumentRoot \"\/Applications\/MAMP\/htdocs\"<\/code><\/li>\n<li>a MAMP specific definition in httpd.conf statement that makes its default port be 8888 rather than the usual 80 is ...<br \/><code>Listen 8888<\/code><\/li>\n<\/ul>\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='#d19929' onclick='var dv=document.getElementById(\"d19929\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/landing-page\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d19929' 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='#d19950' onclick='var dv=document.getElementById(\"d19950\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d19950' 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='#d19965' onclick='var dv=document.getElementById(\"d19965\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d19965' 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='#d20091' onclick='var dv=document.getElementById(\"d20091\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/android\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20091' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;re writing a web application for general use, the general device categorization of &#8230; mobile non-mobile &#8230; is, sometimes, not enough of a differentiation, though that was our categorization a couple of days ago constructing Landing Page Mobile Tutorial &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-mobile-phone-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":[3,12,37],"tags":[76,85,106,161,1798,174,281,282,318,352,354,385,1797,438,446,576,1796,631,652,680,744,795,799,822,827,830,894,897,932,997,1073,1200,1319,1397,1411,1496],"class_list":["post-20091","post","type-post","status-publish","format-standard","hentry","category-android","category-elearning","category-tutorials","tag-android","tag-apache","tag-asp-net","tag-border","tag-border-radius","tag-button","tag-css","tag-css3","tag-design","tag-document-write","tag-dom","tag-emoji","tag-extension","tag-firebug","tag-float","tag-html","tag-iis","tag-iphone","tag-javascript","tag-landing-page","tag-mamp","tag-mobile","tag-mobile-phone","tag-music-2","tag-mysql","tag-navigation","tag-overlay","tag-pan","tag-php","tag-programming","tag-rounded-border","tag-stop-press","tag-tutorial","tag-watchdog","tag-web-server","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20091"}],"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=20091"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20091\/revisions"}],"predecessor-version":[{"id":24273,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20091\/revisions\/24273"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=20091"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=20091"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=20091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}