jquery, add/remove class when window width changes

by

Well, I know I’m late to the party, but I saw some things like $(document).ready() that weren’t really necessary.

Try to cache your selectors if you’re calling them over and over again, a la var $window = $(window); This will help with performance. I use a function expression to encapsulate to I stay out of the global scope but still have access to my $window and $html cached jQuery selected elements.

(function($) {
    var $window = $(window),
        $html = $('html');

    $window.resize(function resize(){
        if ($window.width() < 514) {
            return $html.addClass('mobile');
        }

        $html.removeClass('mobile');
    }).trigger('resize');
})(jQuery);

http://jsfiddle.net/userdude/rzdGJ/1

Probably a little cleaner, little easier to follow:

(function($) {
    var $window = $(window),
        $html = $('html');

    function resize() {
        if ($window.width() < 514) {
            return $html.addClass('mobile');
        }

        $html.removeClass('mobile');
    }

    $window
        .resize(resize)
        .trigger('resize');
})(jQuery);

http://jsfiddle.net/userdude/rzdGJ/2

More Related Contents:

  1. rocking effect in jquery? [closed]
  2. jQuery get the rendered height of an element?
  3. Change the image source on rollover using jQuery
  4. How to fire AJAX request Periodically?
  5. Show div on scrollDown after 800px
  6. Stopping fixed position scrolling at a certain point?
  7. Submit form using AJAX and jQuery
  8. How to check if click event is already bound – JQuery
  9. Sort divs in jQuery based on attribute ‘data-sort’?
  10. Set selected option of select box
  11. Toggle input disabled attribute using jQuery
  12. jQuery find element by data attribute value
  13. Populating One Select Box Based on the Selection in Another Select Box – JQuery?
  14. jquery live hover
  15. Reset select2 value and show placeholder
  16. Use jQuery to Select Visited Links
  17. How to hide/show more text within a certain length (like youtube)
  18. Use success() or complete() in AJAX call
  19. Validate Format of an Email Address using Jquery.validate.js [closed]
  20. Check if YouTube video is playing and run script
  21. How to return an object from a Spring MVC controller in response to AJAX request?
  22. $(”) vs $(”) in jQuery
  23. Is it safe to use $.support.cors = true; in jQuery?
  24. What is the best practice for parsing remote content with jQuery?
  25. jquery fill dropdown with json data
  26. Find all elements on a page whose element ID contains a certain text using jQuery
  27. JQuery .data() not working?
  28. jQuery validator plugin + ajax submitting not working
  29. jQuery $(this) selector function and limitations
  30. scroll up and down a div on button click using jquery

Leave a Comment