file browser

js/q05geometry.php

<html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>     
<script src="jquery-3.3.1/jquery.js"></script>
<script>
$().ready(function () {
    info();
    $(window).resize(info);
    });
let infoCnt = 0;
function info() { 
    $(document.documentElement).width('100vw');    
    $(document.documentElement).css('overflow' , 'auto');    

    infoCnt ++;
    $('#g0 div').each(function(i, e) {
       let x,y,z;
       let t = $(e).text();
       t = (x = t.indexOf(':')) < 0 ? t + ':' : t.substring(0, x+1);
       if (i == 0)
           t += ' infoCnt=' + infoCnt;
       let f = t == 'for #g0:' ? '#g0' : t == 'for body:' ? $('body') : t == 'for html:' ? $('html') : t == 'for document:' ? document : t == 'for window:' ? window: t == 'for window.top:' ? window.top: e
       t += ' ' + Math.round($(f).width()) + 'x' + Math.round($(f).height()); 
       $(e).text(t);
       try {
            t += '@' + Math.round((x = $(f).offset()).left) + ',' + Math.round(x.top);
       } catch (err) {
            t += '[@offset ' + err + ']';
       }
       $(e).text(t);
       t += ' scroll=' + Math.round($(f).scrollLeft()) + ',' + Math.round($(f).scrollTop());
       $(e).text(t);

        $('#uW').html('<li> window.inner ' + Math.round(window.innerWidth) + 'x' + Math.round(window.innerHeight) + '</li>'
            + '<li> window.      ' + Math.round(window.width) + 'x' + Math.round(window.height) + '</li>'
            + '<li> window.outer ' + Math.round(window.outerWidth) + 'x' + Math.round(window.outerHeight) + '</li>'
    //        + '<li> window.client ' + Math.round(window.clientWidth) + 'x' + Math.round(window.clientHeight) + '</li>'
            + '<li> $(window).inner ' + Math.round($(window).innerWidth()) + 'x' + Math.round($(window).innerHeight()) + '</li>'
            + '<li> $(window).      ' + Math.round($(window).width()) + 'x' + Math.round($(window).height()) + '</li>'
            + '<li> $(window).outer ' + Math.round($(window).outerWidth()) + 'x' + Math.round($(window).outerHeight()) + '</li>'
    //        + '<li> $(window).client ' + Math.round($(window).clientWidth()) + 'x' + Math.round($(window).clientHeight()) + '</li>'
        );
    });
}
</script>
 

<title>q05 jquery geometry </title>
</head>
<body>
<h1> geometry </h1>
<div id="g0">
<div>first div in div g0</div>
<div>for #g0</div>
<div>for body</div>
<div>for html</div>
<div>for document</div>
<div>for window</div>
<div>for window.top</div>
<div>und noch eins:</div>
<div style="clear: both">last div in div g0:</div>
</div>
<h1> window </h1>
<ul id="uW"> </ul>
<h1>Source <?php echo __file__; ?> </h1>
<?php highlight_file(__file__) ?>
 </body>
</html>