formstone/src/docs/mediaquery.html

Library of modular front end components.

<h4>Basic</h4>

<!-- START: FIRSTDEMO -->

<style>
  .demo_output { margin: 20px 0; }
  .demo_output span { display: inline-block; width: 90px; }
  .demo_output p { margin: 0 0 20px; }
  .demo_output p:first-child { font-weight: 600; }
</style>

<script>
  Formstone.Ready(function() {
    $(window).on("mqchange.mediaquery", logChange);

    if (!$.mediaquery("state")) {
      $.mediaquery({
        minWidth     : [ 320, 500, 740, 980, 1220 ],
        maxWidth     : [ 1220, 980, 740, 500, 320 ],
        minHeight    : [ 400, 800 ],
        maxHeight    : [ 800, 400 ]
      });
    } else {
      logChange({}, $.mediaquery("state"));
    }

    $.mediaquery("bind", "demo", "(min-width: 740px)", {
      enter: logBind,
      leave: logBind
    });

  });

  function logChange(e, state) {
    var html = "";
    html += "<p><span>Change:</span><span>MinWidth:</span>" + state.minWidth + "<br>";
    html += "<span></span><span>MaxWidth:</span>"+ state.maxWidth + "<br>";
    html += "<span></span><span>MinHeight:</span>"+ state.minHeight + "<br>";
    html += "<span></span><span>MaxHeight:</span>"+ state.maxHeight + "</p>";

    $(".demo_basic").prepend(html);
  }

  function logBind() {
    var mql = this,
      type = mql.matches ? "Enter" : "Leave"
      html = "<p><span>" + type + ":</span>" + mql.media + "<br>";

    $(".demo_binding").prepend(html);
  }
</script>

<div class="demo_output demo_basic form_textarea"></div>

<!-- END: FIRSTDEMO -->

<h4>Binding</h2>
<div class="demo_output demo_binding form_textarea"></div>