{"id":68849,"date":"2025-06-30T03:01:00","date_gmt":"2025-06-29T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=68849"},"modified":"2025-06-29T19:32:01","modified_gmt":"2025-06-29T09:32:01","slug":"window-object-screen-member-variables-overlay-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/window-object-screen-member-variables-overlay-tutorial\/","title":{"rendered":"Window Object Screen Member Variables Overlay Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/window_dom_concept.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window Object Screen Member Variables Overlay Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/window_dom_concept_better.png\" title=\"Window Object Screen Member Variables Overlay Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Window Object Screen Member Variables Overlay Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='Window Object Screen Member Variables Tutorial' href='#wosmvt'>Window Object Screen Member Variables Tutorial<\/a> we nuance &#8230;<\/p>\n<ul>\n<li>&#8220;overlay&#8221;<br \/>\n<code><br \/>\n    if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n    document.body.innerHTML+='&lt;span id=vertborder data-class=\"hseparator\" style=\"color:transparent;position:absolute;left:91%;top:50%;z-index:99;transform:rotate(90deg);\"&gt;document.documentElement.clientHeight=' + document.documentElement.clientHeight + '&lt;\/span&gt;';<br \/>\n    } else {<br \/>\n    document.body.innerHTML+='&lt;span id=vertborder data-class=\"hseparator\" style=\"color:transparent;position:absolute;left:94.25%;top:50%;z-index:99;transform:rotate(90deg);\"&gt;document.documentElement.clientHeight=' + document.documentElement.clientHeight + '&lt;\/span&gt;';<br \/>\n    }<br \/>\n<\/code><br \/>\n and &#8220;flex&#8221;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n.hseparator { \/* thanks to https:\/\/stackoverflow.com\/questions\/2812770\/add-centered-text-to-the-middle-of-a-horizontal-rule *\/<br \/>\n  display: flex;<br \/>\n  align-items: center;<br \/>\n  text-align: center;<br \/>\n}<br \/>\n<br \/>\n.hseparator::before,<br \/>\n.hseparator::after {<br \/>\n  content: '';<br \/>\n  flex: 1;<br \/>\n  border-bottom: 1px solid #000;<br \/>\n}<br \/>\n<br \/>\n.hseparator:not(:empty)::before {<br \/>\n  margin-right: .25em;<br \/>\n}<br \/>\n<br \/>\n.hseparator:not(:empty)::after {<br \/>\n  margin-left: .25em;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><br \/>\n styles of document.documentElement.clientHeight and document.documentElement.clientWidth respective means of indicating the dimension for the user&#8217;s screen scenario &#8230;<\/li>\n<li>for mobile display a screen orientation string <font size=1>( based on the &#8220;faux&#8221; &lt;img alt=&#8221;#screen.orientation&#8221; id=mynoimg style=&#8217;display:none;&#8217;&gt;&lt;\/img&gt; )<\/font><br \/>\n<code><br \/>\n  var ismob=false;<br \/>\n  if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n    ismob=true;<br \/>\n  }<br \/>\n  var thisso=(('' + ismob) == 'false' ? '' : (''  + (screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type))); \/\/\"portrait\";<br \/>\n<br \/>\n  function omo(areao) {<br \/>\n    if (areao.alt == '#screen.orientation') {<br \/>\n    conceptis=(''  + (screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type));<br \/>\n    \/\/alert(conceptis);<br \/>\n    console.log(tdr(areao.alt.replace(\/^\\#\/g,'') + '=' + conceptis));<br \/>\n    } else if (areao.alt == '#screen') {<br \/>\n    console.log(tdr('screen.width,screen.height=' + screen.width + ',' + screen.height));<br \/>\n    } else {<br \/>\n    conceptis='' + eval(areao.alt.replace(\/^\\#\/g,''));<br \/>\n    console.log(tdr(areao.alt.replace(\/^\\#\/g,'') + '=' + conceptis));<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n  if (8 == 8) {<br \/>\n  setInterval(function(){  omo(document.getElementById('mynoimg'));   }, 5000);<br \/>\n  } else {<br \/>\n    \/\/ Listen for the deviceorientation event and handle the raw data<br \/>\n  window.addEventListener('deviceorientation', function(eventData) {<br \/>\n      omo(document.getElementById('mynoimg'));<br \/>\n  });<br \/>\n  }<br \/>\n  }<br \/>\n<br \/>\n<\/code>\n<\/li>\n<li>improve text readability<\/li>\n<\/ul>\n<p> &#8230; in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/window_dom_concept.html-GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/window_dom_concept.html-GETME\" rel=\"noopener\">&#8220;second draft&#8221;<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/window_dom_concept.html\" rel=\"noopener\">window_dom_concept.html web application<\/a> <a href='#ifwdc'>below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/window-object-screen-member-variables-overlay-tutorial\/' rel=\"noopener\">New Window Object Screen Member Variables Overlay Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wosmvt'>Previous relevant <a target=\"_blank\" title='Window Object Screen Member Variables Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/window-object-screen-member-variables-tutorial\/' rel=\"noopener\">Window Object Screen Member Variables Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/window_dom_concept.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Window Object Screen Member Variables Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/window_dom_concept.gif\" title=\"Window Object Screen Member Variables Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Window Object Screen Member Variables Tutorial<\/p><\/div>\n<p>We stumbled upon an excellent diagram image to explain some of the window object member variables available to Javascript DOM and describing the various dimensions of device screen parts at <a target=\"_blank\" title='https:\/\/moo-you.tistory.com\/882' href='https:\/\/moo-you.tistory.com\/882' rel=\"noopener\">https:\/\/moo-you.tistory.com\/882<\/a> &#8230;<\/p>\n<p><img src='https:\/\/img1.daumcdn.net\/thumb\/R1280x0\/?scode=mtistory2&#038;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FKLuBr%2Fbtr61lXPiFD%2FAAAAAAAAAAAAAAAAAAAAAP0DZaiNKSs8BrrgNUD2sAMXoVpcDF76MYN11yZgTum0%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1751295599%26allow_ip%3D%26allow_referer%3D%26signature%3Dsg7ChbPrQoyTI0gTw1AHnkIGr7k%253D'><\/img><\/p>\n<p> &#8230; thanks.  Knowing that, we harnessed the great <a target=\"_blank\" title='mobilefish' href='http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php' rel=\"noopener\">mobilefish<\/a> generated HTML <a target=\"_blank\" title='HTML map element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp' rel=\"noopener\">map<\/a> element, thanks, to write a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/window_dom_concept.html_GETME\" rel=\"noopener\">&#8220;first draft&#8221;<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/window_dom_concept.html\" rel=\"noopener\">window_dom_concept.html web application<\/a> to help the user explore these window object member variables for themselves using &#8230;<\/p>\n<p><iframe id=ifwdc style=\"width:100%;height:500px;\" src='\/\/www.rjmprogramming.com.au\/window_dom_concept.html'><\/iframe><\/p>\n<p>We hope it is of some interest!<\/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='#d68834' onclick='var dv=document.getElementById(\"d68834\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/window\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68834' 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='#d68849' onclick='var dv=document.getElementById(\"d68849\"); 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='d68849' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Onto yesterday&#8217;s Window Object Screen Member Variables Tutorial we nuance &#8230; &#8220;overlay&#8221; if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.body.innerHTML+='&lt;span id=vertborder data-class=&#8221;hseparator&#8221; style=&#8221;color:transparent;position:absolute;left:91%;top:50%;z-index:99;transform:rotate(90deg);&#8221;&gt;document.documentElement.clientHeight=&#8217; + document.documentElement.clientHeight + &#8216;&lt;\/span&gt;&#8217;; } else { document.body.innerHTML+='&lt;span id=vertborder data-class=&#8221;hseparator&#8221; style=&#8221;color:transparent;position:absolute;left:94.25%;top:50%;z-index:99;transform:rotate(90deg);&#8221;&gt;document.documentElement.clientHeight=&#8217; + document.documentElement.clientHeight + &#8216;&lt;\/span&gt;&#8217;; } and &#8220;flex&#8221; &lt;style&gt; .hseparator &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/window-object-screen-member-variables-overlay-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":[161,2507,354,3033,576,590,592,652,3045,764,5225,800,849,875,894,997,2256,2272,2567,1319,1721,1583],"class_list":["post-68849","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-border","tag-dimension","tag-dom","tag-flex","tag-html","tag-image","tag-image-map","tag-javascript","tag-measurement","tag-member","tag-member-variable","tag-mobilefish","tag-object","tag-oop","tag-overlay","tag-programming","tag-screen","tag-size","tag-text-shadow","tag-tutorial","tag-variable","tag-window"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/68849"}],"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=68849"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/68849\/revisions"}],"predecessor-version":[{"id":68854,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/68849\/revisions\/68854"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=68849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=68849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=68849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}