{"id":19444,"date":"2016-01-10T03:01:30","date_gmt":"2016-01-09T17:01:30","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=19444"},"modified":"2016-01-17T11:27:26","modified_gmt":"2016-01-17T01:27:26","slug":"htmljavascript-clairvoyance-tester-mobile-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-clairvoyance-tester-mobile-tutorial\/","title":{"rendered":"HTML\/Javascript Clairvoyance Tester Mobile Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clairvoyance.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript Clairvoyance Tester Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clairvoyance.jpeg\" title=\"HTML\/Javascript Clairvoyance Tester Mobile Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Clairvoyance Tester Mobile Tutorial<\/p><\/div>\n<p>Today&#8217;s HTML and Javascript web application is a Clairvoyance Tester (we last talked about with <a title='HTML\/Javascript Clairvoyance Tester Primer Tutorial' href='#hjctpt'>HTML\/Javascript Clairvoyance Tester Primer Tutorial<\/a> as shown below) &#8230; d\u00e9j\u00e0 vu perhaps? &#8230; yes, we didn&#8217;t deliver on all promises for all platforms last time with this, as the background image didn&#8217;t show early enough for mobile platforms to be useful.<\/p>\n<p>Today it is almost as instructive about what didn&#8217;t help (to make this web application non-mobile plus mobile friendly) as to what eventually did to fix this issue &#8230; on the list of definitely no help is &#8230;<\/p>\n<ul>\n<li>use in HTML script tag of <i>async<\/i> and\/or <i>defer<\/i> &#8230; thought this might be the least obtrusive fix but mobile platforms must wait for document.write(prompt()) to be fully resolved, I guess<\/li>\n<\/ul>\n<p> &#8230; and tried, but no adverse effect, but no fixed effect either &#8230; was to &#8230; <\/p>\n<ul>\n<li>reinstate the <i>div<\/i> position absolute overlaying the whole webpage but separated and not a parent of anything else, with controlled <i>z-index<\/i> arrangements everywhere<\/li>\n<\/ul>\n<p> &#8230; and what wasn&#8217;t tried, but may have worked &#8230; was &#8230; <\/p>\n<ul>\n<li>use jQuery techniques<\/li>\n<li>try the advice of <a target=_blank title='Promising link' href='https:\/\/varvy.com\/pagespeed\/defer-loading-javascript.html'>this promising looking link &#8230; thanks anyway<\/a><\/li>\n<\/ul>\n<p> &#8230; and so what worked (allowing for non-mobile to still work &#8230; doh!) &#8230; was to &#8230; <\/p>\n<ul>\n<li>detect for mobile platforms in Javascript (thanks to <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/11381673\/detecting-a-mobile-browser'>this link<\/a> here) and if the URL does not have &#8220;isMobile=&#8221; (our new arrangement) check if &#8230;\n<ol>\n<li>mobile platform<\/li>\n<li>first go through<\/li>\n<li>&#8220;Another Test&#8221; link not created yet<\/li>\n<\/ol>\n<p> &#8230; and if all true, circumvent the <i>prompt<\/i> window, simulating the answer of &#8220;Cancel&#8221; for it, create your own &#8220;Another Test&#8221; link which ditches its &#8220;onclick&#8221; logic in favour of this same outcome in its &#8220;href&#8221; value (now arranged to include &#8220;isMobile=y&#8221; within its URL and its &#8220;target&#8221; remains nothing (ie. it will clobber the webpage here)), and click that &#8220;Another Test&#8221; link using the Javascript &#8220;click()&#8221; method\n<\/li>\n<\/ul>\n<p>I&#8217;m not so sure the clairvoyants in planes or trains or automobiles anticipated all this, but if you did, we&#8217;ve got some <a target=_blank title='Trains, Planes and Automobiles' href='https:\/\/www.youtube.com\/watch?v=_unm4X89D_o'>shower curtain rings<\/a> going at a very special price, for today only &#8230; but there&#8217;s more &#8230;<\/p>\n<p>We wanted to show you some HTML and Javascript code for this as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clairvoyance.html-GETME\" title='clairvoyance.html'>clairvoyance.html<\/a> changed for the findings above in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clairvoyance.html-GETME\" title='clairvoyance.html'>this way<\/a>.<\/p>\n<hr>\n<p id='hjctpt'>Previous relevant <a target=_blank title='HTML\/Javascript Clairvoyance Tester Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-clairvoyance-tester-primer-tutorial\/'>HTML\/Javascript Clairvoyance Tester 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\/clairvoyance.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"The Three P Three Modes Calling Card Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clairvoyance_tester.jpg\" title=\"HTML\/Javascript Clairvoyance Tester Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Clairvoyance Tester Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s HTML and Javascript web application is a Clairvoyance Tester, but then I don&#8217;t have to tell you you&#8217;re clairvoyant, because you just knew I was going to say it anyway &#8230; <font size=1>as you knew that this blog posting was coming out today<\/font>.<\/p>\n<p>We wrote it to illustrate the good use a &#8230;<\/p>\n<p><code><br \/>\n&lt;body style=\"background-color: yellow;background: url('clairvoyance.jpg') repeat;background-position:10px 200px; \"&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; background image can be put to, in conjunction with our <i>document.write(prompt())<\/i> scenario that makes a web application feel a little like those interactive command line desktop applications in the <a target=_blank title='Yep, there is a YouTube clip!' href='https:\/\/www.youtube.com\/watch?v=d-Fi9T_u1f0'>days of yore<\/a>, because when you have a web application launching straight into things, it can be a bit offputting to be asked something before being shown something, in these times outside the <a target=_blank title='Yep, there is a YouTube clip!' href='https:\/\/www.youtube.com\/watch?v=d-Fi9T_u1f0'>days of yore<\/a>.<\/p>\n<p>And yes, we tried once again for a better CSS solution using a fully opaque background image (<a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=bIV4KLCmJ98'><i>and we haven&#8217;t given up<\/i><\/a>) and got some semi-okay ideas going, but decided in the end to do the more straightforward approach of using the wonderful, marvellous, Gimp image editor to give the background image about <a id='o50' href='#o50' onclick=\" document.getElementById('im50').style.display='inline'; \">50% opacity<\/a><img id='im50' style='display:none;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clairvoyance.jpg'><\/img>, since it is so easy to do in Gimp (as we show with <a target=_blank title='Gimp Transparency Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-transparency-primer-tutorial\/'>Gimp Transparency Primer Tutorial<\/a>).<\/p>\n<p>There was another CSS idea we tried for the first time with this too.  While trying all the incarnations, as mentioned above, what was good to do, whether you are succeeding with &#8220;opacity difference&#8221; (between background and foreground) or not, is to place a very thick border of a different colour (we chose white) as a &#8220;buffer zone&#8221; between the background and foreground as per (our HTML for the major foreground HTML element of interest) &#8230;<\/p>\n<p><code><br \/>\n&lt;table id=\"mytable\" style=\"background-color:white;opacity:1.0; border: 125px solid white;\"&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; which could have been enough to make it all work, even without &#8230;<\/p>\n<ul>\n<li><a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=bIV4KLCmJ98'><i>Semi opaque HTML body element (or even an HTML div element) overlayed on a fully opaque foregound<\/i><\/a> &#8230; we left off the &#8220;quest&#8221; <a target=_blank title='The quest' href='http:\/\/www.w3schools.com\/cssref\/pr_background-position.asp'>here<\/a><\/li>\n<li><a target=_blank title='Gimp Transparency Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-transparency-primer-tutorial\/'>Gimp transparency magic<\/a><\/li>\n<\/ul>\n<p>So we&#8217;ll leave you with the HTML and Javascript source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clairvoyance.html_GETME\" title='clairvoyance.html'>???<\/a> (as if you needed to know) and (as if you need to have) a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clairvoyance.html\">live run<\/a> &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>anyone, anyone?<\/a> &#8230; <font size=1>link<\/font>.<\/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='#d18965' onclick='var dv=document.getElementById(\"d18965\"); 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='d18965' 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='#d19444' onclick='var dv=document.getElementById(\"d19444\"); 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='d19444' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today&#8217;s HTML and Javascript web application is a Clairvoyance Tester (we last talked about with HTML\/Javascript Clairvoyance Tester Primer Tutorial as shown below) &#8230; d\u00e9j\u00e0 vu perhaps? &#8230; yes, we didn&#8217;t deliver on all promises for all platforms last time &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-clairvoyance-tester-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,15,37],"tags":[127,281,476,477,491,576,652,795,997,1319],"class_list":["post-19444","post","type-post","status-publish","format-standard","hentry","category-elearning","category-games","category-tutorials","tag-background-image","tag-css","tag-game","tag-games-2","tag-gimp","tag-html","tag-javascript","tag-mobile","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/19444"}],"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=19444"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/19444\/revisions"}],"predecessor-version":[{"id":19526,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/19444\/revisions\/19526"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=19444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=19444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=19444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}