jacmaes
9/12/2014 - 10:25 PM

gistfile1.txt

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Enquire Test</title>
    <meta name="viewport" content="width=device-width">
    <!-- Normalize CSS -->
    <link rel="stylesheet" src="http://normalize-css.googlecode.com/svn/trunk/normalize.css"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"/>
</head>

<body>
    <div id="result-1">
    </div>

    <div id="result-2">
    </div>

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Enquire.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.0.0/enquire.min.js"></script>
<script>
(function () {
        var result1 = $('#result-1')
        var result2 = $('#result-2')

        enquire.register("screen and (max-width: 959px)", {
            deferSetup: true,
            setup: function () {result1.load('ajax/480.html');},
            match: function () {result1.fadeIn();},
            unmatch: function () {result1.hide();}
        });
        enquire.register("screen and (min-width: 960px)", {
            deferSetup: true,
            setup: function () {result2.load('ajax/960.html');},
            match: function () {result2.fadeIn();},
            unmatch: function () {result2.hide();}
        });
})();
</script>
</body>
</html>