Media query, stop jQuery with window resize?

Question

I have a demo here to illustrate my problem. It's a scrolling image gallery. When an image is clicked it's shown bigger - lightbox style.

The hover and click on the images is done with jQuery. I wanted the page to be responsive to work with phone screens. If the browser is resized to 400px approximately the layout changes to one column and scrolls vertically.

When the layout changes I wanted the jQuery to stop - I don't want the hover and I don't want the larger image when it's clicked. How can I stop or change the jQuery when the media query kicks in?

<!DOCTYPE html>
<html>
<head>
    <title>Title of the document</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

    <style type="text/css">
        #header{
        position:fixed;
        margin:20px 0 0 20px;
        }
        #header #logo{
        width:100px;
        height:80px;
        background:red;
        }
        ul#gallery {
        margin:120px 0 0 0;
        float:left;
        height:500px;
        margin-right:-20000px;
        }
        ul#gallery li{
        display:inline;
        }
        ul#gallery li img{
        float:left;
        height:100%;
        }
        #lightbox {
            position:fixed; 
            top:0; 
            left:0; 
            width:100%; 
            height:100%; 
            background:url(overlay.png) repeat; 
            text-align:center;
        }
        #lightbox p {
            text-align:right; 
            color:#fff; 
            margin-right:20px; 
            font-size:12px; 
        }
        #lightbox img {
            box-shadow:0 0 15px #111;
            -webkit-box-shadow:0 0 15px #111;
            -moz-box-shadow:0 0 15px #111;
            max-width:940px;
        }
        #content img{
          height:85%;
          max-width:100%;
        }

        /*--------------------------------------
          Media Query
        ---------------------------------------*/

        @media screen and (max-width: 400px){
            #header #logo{
            height:50px;
            }
            ul#gallery {
            margin:20px 0 0 0;
            width:400px;
            }
            ul#gallery li{
            display:block;
            }
            ul#gallery li img{
            opacity:0.5;
            height:auto;
            width:400px;
            }
            #header{
            position:static;
            margin:10px 0 0 20px;
            }
        }
    </style>
</head>
<body>
    <div id="header">
        <div id="logo"></div><!-- #logo -->
    </div><!-- #header -->

    <ul id="gallery">
        <li><a href="images/01.jpg" class="lightbox_trigger"><img src="images/01.jpg" /></a></li>
        <li><a href="images/02.jpg" class="lightbox_trigger"><img src="images/02.jpg" /></a></li>
        <li><a href="images/03.jpg" class="lightbox_trigger"><img src="images/03.jpg" /></a></li>
        <li><a href="images/04.jpg" class="lightbox_trigger"><img src="images/04.jpg" /></a></li>
        <li><a href="images/05.jpg" class="lightbox_trigger"><img src="images/05.jpg" /></a></li>
        <li><a href="images/06.jpg" class="lightbox_trigger"><img src="images/06.jpg" /></a></li>
        <li><a href="images/07.jpg" class="lightbox_trigger"><img src="images/07.jpg" /></a></li>
        <li><a href="images/08.jpg" class="lightbox_trigger"><img src="images/08.jpg" /></a></li>
        <li><a href="images/09.jpg" class="lightbox_trigger"><img src="images/09.jpg" /></a></li>
        <li><a href="images/10.jpg" class="lightbox_trigger"><img src="images/10.jpg" /></a></li>
        <li><a href="images/11.jpg" class="lightbox_trigger"><img src="images/11.jpg" /></a></li>
        <li><a href="images/12.jpg" class="lightbox_trigger"><img src="images/12.jpg" /></a></li>
        <li><a href="images/13.jpg" class="lightbox_trigger"><img src="images/13.jpg" /></a></li>
        <li><a href="images/14.jpg" class="lightbox_trigger"><img src="images/14.jpg" /></a></li>
        <li><a href="images/15.jpg" class="lightbox_trigger"><img src="images/15.jpg" /></a></li>
    </ul>

    <script>
    jQuery(document).ready(function($) {

      $('#gallery img').hover(
         function () {
           $(this).css('opacity',1)
         }, 
         function () {
           $(this).css('opacity',.4);
         }
       );

        $('.lightbox_trigger').click(function(e) {

            e.preventDefault();

            var image_href = $(this).attr("href");

            if ($('#lightbox').length > 0) { // #lightbox exists

                $('#content').html('<img src="' + image_href + '" />');

                //$('#lightbox').show();

                $('#lightbox').fadeIn('2000');
            }

            else { 

                var lightbox = 
                '<div id="lightbox">' +
                    '<p>Click to close</p>' +
                    '<div id="content">' + 
                        '<img src="' + image_href +'" />' +
                    '</div>' +  
                '</div>';

                $('body').append(lightbox);
            }

        });

        $('#lightbox').live('click', function() { 
            $('#lightbox').hide();
        });

    });
    </script>
</body>
</html>

Try .resize() - though the CSS should kick in before the JS does, which might miss it. — Orbling
– Orbling, Commented Sep 5, 2012 at 19:30

Varinder · Accepted Answer · 2012-09-06 01:01:13Z

Well, there are many ways to approach this.

In your case, you can possible check screen size on a click event and do appropreate operations.

Something like this:

    var winWidth = $(window).width(); //cache window width
    $(window).resize(function() {
        winWidth = $(this).width(); //updating winWidth with current window width
    });

Now when the light box handler is clicked do the winWidth size checking:

  $('.lightbox_trigger').click(function(e) {

        e.preventDefault();

        var image_href = $(this).attr("href");

       if (winWidth > 400) {       //Checking if screen size is greater than 400
         if ($('#lightbox').length > 0) { // #lightbox exists

            $('#content').html('<img src="' + image_href + '" />');

            //$('#lightbox').show();

            $('#lightbox').fadeIn('2000');
          }

          else { 

            var lightbox = 
            '<div id="lightbox">' +
                '<p>Click to close</p>' +
                '<div id="content">' + 
                    '<img src="' + image_href +'" />' +
                '</div>' +  
            '</div>';

            $('body').append(lightbox);
          }
        }
    });

If you're doin this kinda screen checking quiet often i suggest you to have a look at enquire.js http://wickynilliams.github.com/enquire.js/

Hope it helps :)

Collectives™ on Stack Overflow

Media query, stop jQuery with window resize?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related