jq/js/css all handling all resize

derp a lerp double derp herpty derp

by Sree K

HTML

width: <span id="widthSpan"></span> px
<br />
height: <span id="heightSpan"></span> px





<!--

----------[> 
RESIZE RESULTS TO LESS/MORE THAN 400PX WIDTH/HEIGHT 
----------[> 

-->

CSS

* { font: normal normal bold  24pt/30pt Georgia; color: #333; }

/* css solution */
@media screen and (max-height: 400px)  /* < 400px high */
{
    #heightSpan {
        color: #0f0;
    }
}

@media screen and (max-width: 400px) /* < 400px wide */
{
    #widthSpan {
        color: #0f0;
    }
}

@media screen and (max-width: 400px) and (max-height: 400px) /* both */
{
    body {
        background-color: #35362E;
        color: #0f0;
    }
}

JavaScript

//jQuery solution

$('#heightSpan').html($(window).height());
$('#widthSpan').html($(window).width());

$(window).on('resize', function(){
    $('#heightSpan').html($(window).height());
    $('#widthSpan').html($(window).width());
});

//Native javascript solution
window.onresize = function(){
    if (window.innerHeight > 500)
    {
        console.log('JAVASCRIPT BLOWIN UP YER LOGS, LOGS');
    }
    
    if (window.innerWidth > 500)
    {
        console.log('JAVASCRIPT BLOWIN UP YER LOGS, LOGS');
    }
}   
    
    
/* 
----------> 
RESIZE TO LESS/MORE THAN 400PX WIDTH/HEIGHT 
----------> 
*/