jq/js/css all handling all resize

derp a lerp double derp herpty derp

by Cory Danielson

HTML

<p>
Resize this frame to see the different window size handlers running.
</p>

<br /><hr />

<div class="half">
  <h2>jQuery</h2>
  times called: <span id="called">0</span>
  <br />
  width: <span id="widthSpan" class="w"></span> px
  <br />
  height: <span id="heightSpan" class="h"></span> px
</div>

<div class="half">
  <h2>javascript</h2>
  times called: <span id="called-js">0</span>
  <br />
  width: <span id="widthSpan-js" class="w"></span> px
  <br />
  height: <span id="heightSpan-js" class="h"></span> px

</div>

CSS

* { font: normal normal bold  16pt/18pt Georgia; color: #333; }

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

@media screen and (max-width: 500px) /* < 600px wide */
{
    .w {
        color: #0f0;
    }
}

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

JavaScript

//jQuery solution
var jqCalled = 0;
function jqueryResize() {
  $('#called').html(++jqCalled);
	$('#heightSpan').html($(window).height());
	$('#widthSpan').html($(window).width());
}

$(window).on('resize', jqueryResize);


// Native Javascript solution
var jsCalled = 0;
function jsResize() {
    document.getElementById('called-js').innerHTML = ++jsCalled;
    document.getElementById('heightSpan-js').innerHTML = window.innerHeight;
    document.getElementById('widthSpan-js').innerHTML = window.innerWidth;
}

window.onresize = jsResize;

// set initial values

jqueryResize();
jsResize();