jquery, add/remove class when window width changes

Question

I've written out a very basic script to add/remove a class on load or when a window is resized.

I was just wondering if there was a better way of doing this or if it is possible to reduce the lines of code.

Basically I want to be able to alter the styles when the site is viewed on a smaller screen. I thought it would be best to add a new class to the html tag when it went under a certain width...

Anyways here's my code.

<script type="text/javascript">
 $(document).ready( function() {
    /* Check width on page load*/
    if ( $(window).width() < 514) {
     $('html').addClass('mobile');
    }
    else {}
 });

 $(window).resize(function() {
    /*If browser resized, check width again */
    if ($(window).width() < 514) {
     $('html').addClass('mobile');
    }
    else {$('html').removeClass('mobile');}
 });

Thanks

Gillian

one of the options is using Media Queries

Ram
– Ram

2012-06-15 08:58:29 +00:00
Commented Jun 15, 2012 at 8:58 — Ram
– Ram, Commented Jun 15, 2012 at 8:58

Jared Farrish · Accepted Answer · 2012-06-15 09:16:28Z

57

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

edited Jun 15, 2012 at 9:16

answered Jun 15, 2012 at 9:11

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

arshad Over a year ago

An example of a GOOD ANSWER :)

Vladyn Over a year ago

probably bet answer here!

Maria Blair Over a year ago

that is a really awesome answer -- thank you so much, Jared!

Jeremey Over a year ago

Better late than never! This is a great solution.

Rab Khan · Accepted Answer · 2012-06-15 09:24:52Z

16

Use Media classes

@media screen and (max-width: 900px) {
  .class {
    width:800px;

  }
}

@media screen and (max-width: 500px) {
      .class {
        width:450px;

  }
}

edited Jun 15, 2012 at 9:24

answered Jun 15, 2012 at 9:03

Rab Khan

35.7k4 gold badges52 silver badges66 bronze badges

3 Comments

iappwebdev Over a year ago

I really like this solution, short 'n simple!

Jared Farrish Over a year ago

I can't explain why, I've just never learned to trust @media queries.

Rab Khan Over a year ago

but you must have a strong reason to convince yourself otherwise

Rapnar · Accepted Answer · 2013-01-21 18:24:27Z

16

First of all, DRY (Don't Repeat Yourself) your code by using a function:

function checkWidth(init)
{
    /*If browser resized, check width again */
    if ($(window).width() < 514) {
        $('html').addClass('mobile');
    }
    else {
        if (!init) {
            $('html').removeClass('mobile');
        }
    }
}

$(document).ready(function() {
    checkWidth(true);

    $(window).resize(function() {
        checkWidth(false);
    });
});

edited Jan 21, 2013 at 18:24

Rapnar

14711 bronze badges

answered Jun 15, 2012 at 9:05

iappwebdev

5,9301 gold badge34 silver badges48 bronze badges

2 Comments

Jared Farrish Over a year ago

You don't really need the $(document).ready() with the window object, and anyhow your checkWidth() function could go inside where you setup the $(window).resize() handler. If you need to call it later out of scope, you can always $(window).resize().

Emmet Arries Over a year ago

IMHO, I think you do need $(document).ready(), because on Mobile devices, it doesn't work right on the first load. This is just my experience, so take it with a grain of salt!

Ananth · Accepted Answer · 2012-06-15 09:02:48Z

8

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

$(document).ready( function() {
    $(window).resize(resize);
    resize();
});

answered Jun 15, 2012 at 9:02

Ananth

4,4252 gold badges23 silver badges26 bronze badges

1 Comment

Emmet Arries Over a year ago

For some reason, this is the only one that worked really well for me. Thank you!

user3778154 · Accepted Answer · 2014-09-26 18:19:03Z

4

You Can also Use this Method I think its very clear to follow :

$(window).on('resize', function(){
      var win = $(this);
      if (win.width() < 514) { 

      $('html').addClass('mobile');

      }
    else
    {
        $('html').removeClass('mobile');
    }

});

Simple Method

answered Sep 26, 2014 at 18:19

user3778154

416 bronze badges

1 Comment

Nickfmc Over a year ago

Should be noted that this will only add a class on resize, not on initial page load

William Schroeder McKinley · Accepted Answer · 2014-01-10 17:09:14Z

This issue pestered me for a while, actually. I usually have multiple sizes for transitions. I wrote this an thought I'd share:

$(function() {
  var pageTransitions = [['full',1600],['mobile',800],['tiny',400],['micro',0]]; // number shows minimum size - must be from high to low
  function resize() {
    var target = 0,
        w = $(window).width(),
        h = $('html');
    $.each(pageTransitions, function(index, pageTransition) {
        if( w > pageTransition[1]) {
            target = index;
            return false;
        }
    });
    $.each(pageTransitions, function(index, pageTransition) {
        h.removeClass(pageTransition[0]);
    });
    h.addClass(pageTransitions[target][0]);
  }
  resize();
  jQuery(window).on('resize', function() {
    resize();
  });
});

http://jsfiddle.net/mckinleymedia/ERZ3q/7/

Umar Tariq · Accepted Answer · 2018-07-25 17:12:51Z

0

Try this. It works for me

function resize() {
        if ($(window).width() < 514) {}
        else {}
    }

    $(document).ready( function() {
        $(window).resize(resize);
        resize();
    });

answered Jul 25, 2018 at 17:12

Umar Tariq

1,3171 gold badge15 silver badges14 bronze badges

Collectives™ on Stack Overflow

jquery, add/remove class when window width changes

7 Answers 7

4 Comments

3 Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

3 Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related