file browser

js/q02layout.php

<html>
 <head>
<script src="jquery-3.2.1/jquery.js"></script>
<script>
var cnt=0, lh;
$().ready(function () {
        lh = $('#a1').height();
        $('#a1, #a2, #b1, #b2, #c1, #c2').css({display: 'inline-block', verticalAlign: 'top'}).on('click', dbl);
        $('#a1, #a2, #c1, #c2').css({overflow: 'hidden'}).height(lh);
        $('#b1, #b2').css({overflow: 'auto'});
        $('#a1').css({backgroundColor: 'ffc0c0'});
        $('#a2').css({backgroundColor: 'ffe0e0'});
        $('#b1').css({backgroundColor: 'c0ffc0'});
        $('#b2').css({backgroundColor: 'e0ffe0'});
        $('#c1').css({backgroundColor: 'c0c0ff'});
        $('#c2').css({backgroundColor: 'e0e0ff'});
        rsz();
        $(window).on('resize', rsz);
    });
    $().load(rsz);
    var msg;
function rsz() {
    $('#b2').width('100%');
        var w = Math.min($('#b2').width(), screen.width),
                h = Math.min(window.innerHeight, screen.height);
        msg = 'w.iW=' + window.innerWidth + ' w=' + w + ' h=' + h;
        if (w >= 500) {
            $('#b1').show();
            $('#a1, #b1, #c1').width(200);
            $('#a2, #b2, #c2').width(w - 200 - 7);
        } else {
            $('#b1').hide();
            $('#b2').width(w);
            $('#a1, #c1').width(w / 5);
            $('#a2, #c2').width(w * 4 / 5 - 7);
        }

        if (h >= 12 * lh) {
            $('#c1, #c2').show();
            $('#b1, #b2').height(h / 2  - 2 * lh);
        } else {
            $('#c1, #c2').hide();
            $('#b1, #b2').height(h / 2 - lh );
        }
        $('#a1').html('a1 iH=' + h);
    }

function dbl(e) {
        $(e.target).text($(e.target).text() + ' * ' + $(e.target).text() + ' click ' + ++cnt + 'msg: ' + msg + ' lh=' + lh + ' b2 scr ' + $('#b2').prop('scrollHeight') + ' h=' + $('#b2').css('height') + ' at ' + e.pageX + ',' + e.pageY);
    }
</script>
 

  <title>q02 jquery layout </title>
 </head>
<body>
<h1>h1 jQuery example q02</h1>
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="b1">b1
</div>
<div id="b2">b2</div>
<div id="c1">c1</div>
<div id="c2">c2</div>

<h1>Source <?php echo __file__; ?> </h1>
<?php highlight_file(__file__) ?>
 </body>
</html>