Home » SEO » Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width

Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width

Table of Contents
    Add a header to begin generating the table of contents
    Scroll to Top

    Updated: May 07, 2015

    There are some great options for managing Javascript when using CSS media queries in a responsive website. MediaCheck, jRespond, and Breakpoints.js all allow you to fire javascript functions based on customizable breakpoints in browser width. However, recently I was working on a small site with only a single function to be called at a smaller browser size, in conjunction with a media query, and thought I’d forgo one of these scripts and manage my change using a jQuery window width measurement.

    The Problem: jQuery $(window).width() and CSS3 Media Queries do not always match.

    Initially I was using the below code:

    $(window).resize(function(){
    	if ($(window).width() <= 800){	
    		// do something here
    	}	
    });
    

    When viewing the site in Firefox, I noticed a small difference in the width at which my media query and javascript were firing. Roger Johansson recently wrote up a great article documenting the inconsistent treatment of vertical scrollbars in media query widths. This inconsistency causes a small difference between browsers in the actual window width when a media query fires, which in turn causes media query and jQuery width measurements to not match in some popular browsers: Firefox, IE, and Opera. Here is a code example showing the difference between the jQuery window width and the media query width measurement.

    The solution: use jQuery to test for a changed CSS property, rather than the browser width

    Rather than the measuring the screen width on resize of the window, I check for a css rule that is changed by the media query. This way, regardless of the how the browser treats the scrollbar, the media query will fire at the same time.

    Suppose the “sampleClass” class has a float:left rule before the media query, and a float:none rule after, on window resize I check for the change in that rule. We also need to test the css class on initial load of the page.

    The jQuery

    $(document).ready(function() {
        // run test on initial page load
        checkSize();
    
        // run test on resize of the window
        $(window).resize(checkSize);
    });
    
    //Function to the css rule
    function checkSize(){
        if ($(".sampleClass").css("float") == "none" ){
            // your code here
        }
    }
    
    

    The CSS

    .sampleClass {float:left;}
    @media only screen and (max-width: 800px){
    	.sampleClass {float:none;}
    }
    
    About the Author
    Share This Article
    Facebook
    Twitter
    Pinterest
    LinkedIn
    Discussion

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Related Content

    About FourFront

    FourFront uses data to provide digital marketing and market research services. In our blog, our team of analysts, strategists, and engineers provides tips, insights, analysis, and commentary.

    Keep In Touch

    Learn about new articles by following us on social:
    Scroll to Top

    Sign Up for Updates

    Get regular updates about what’s happening at FourFront!

    Enter your full name and email to be in the know about all things SEO, data solutions, and much more.

    Submit a Request