Window Object Screen Member Variables Overlay Tutorial

Window Object Screen Member Variables Overlay Tutorial

Onto yesterday’s Window Object Screen Member Variables Tutorial we nuance …

• “overlay”
  
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.body.innerHTML+='<span id=vertborder data-class="hseparator" style="color:transparent;position:absolute;left:91%;top:50%;z-index:99;transform:rotate(90deg);">document.documentElement.clientHeight=' + document.documentElement.clientHeight + '</span>';
} else {
document.body.innerHTML+='<span id=vertborder data-class="hseparator" style="color:transparent;position:absolute;left:94.25%;top:50%;z-index:99;transform:rotate(90deg);">document.documentElement.clientHeight=' + document.documentElement.clientHeight + '</span>';
}

  and “flex”
  
<style>
.hseparator { /* thanks to https://stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-horizontal-rule */
display: flex;
align-items: center;
text-align: center;
}

.hseparator::before,
.hseparator::after {
content: '';
flex: 1;
border-bottom: 1px solid #000;
}

.hseparator:not(:empty)::before {
margin-right: .25em;
}

.hseparator:not(:empty)::after {
margin-left: .25em;
}
</style>

  styles of document.documentElement.clientHeight and document.documentElement.clientWidth respective means of indicating the dimension for the user’s screen scenario …
• for mobile display a screen orientation string ( based on the “faux” <img alt=”#screen.orientation” id=mynoimg style=’display:none;’></img> )
  
var ismob=false;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
ismob=true;
}
var thisso=(('' + ismob) == 'false' ? '' : ('' + (screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type))); //"portrait";

function omo(areao) {
if (areao.alt == '#screen.orientation') {
conceptis=('' + (screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type));
//alert(conceptis);
console.log(tdr(areao.alt.replace(/^\#/g,'') + '=' + conceptis));
} else if (areao.alt == '#screen') {
console.log(tdr('screen.width,screen.height=' + screen.width + ',' + screen.height));
} else {
conceptis='' + eval(areao.alt.replace(/^\#/g,''));
console.log(tdr(areao.alt.replace(/^\#/g,'') + '=' + conceptis));
}
}

if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (8 == 8) {
setInterval(function(){ omo(document.getElementById('mynoimg')); }, 5000);
} else {
// Listen for the deviceorientation event and handle the raw data
window.addEventListener('deviceorientation', function(eventData) {
omo(document.getElementById('mynoimg'));
});
}
}


• improve text readability

… in the changed “second draft” window_dom_concept.html web application below.

Previous relevant Window Object Screen Member Variables Tutorial is shown below.

Window Object Screen Member Variables Tutorial

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 https://moo-you.tistory.com/882 …

… thanks. Knowing that, we harnessed the great mobilefish generated HTML map element, thanks, to write a “first draft” window_dom_concept.html web application to help the user explore these window object member variables for themselves using …

We hope it is of some interest!

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.