jQuery on resize only update variable depending on browser width

Question

I've had a good look but couldn't find exactly what I was looking for.

I have a starting var of var dsize = 6 and would like this value to change between various browser widths on resize. For all that responsive stuff you know.

The problem I face is that I only want to update the var and not the whole chunk of code that follows for performance.

$(window).on('load resize',function (){
var dsize = 6;
var wrapper = $('.clients-spec');
var ul;
if ($(window).width() >= 1200) {
    var dsize = 6;
}
if ($(window).width() < 1200) {
    var dsize = 5;
}
if ($(window).width() < 1000) {
    var dsize = 4;
}
if ($(window).width() < 800) {
    var dsize = 3;
}
if ($(window).width() < 600) {
    var dsize = 2;
}...code...});

http://jsfiddle.net/k7Wrn/

My deepest apologies if this is much simpler than I am making it, or has been asked multiple times and please point me in the right direction.

Cheers.

the code snippet you have here seems to work. what exactly is the problem? — Bobby5193
– Bobby5193, Commented Jan 29, 2014 at 10:07
Also use if/else if/else not only if. And when you talk about Performance: don't use $(window).width() several times for a comparison. Better: use it once and store the result in variable that you can compare afterwards as often as you want. Remember the difference between querying a variable and the execution of a function. And in this case you even call two functions $() and width(). Just a suggestion... — Paul Facklam
– Paul Facklam, Commented Jan 29, 2014 at 10:21

Aditya · Accepted Answer · 2014-01-29 10:25:44Z

1

You can simply use a function that return dsize on resize according to browser width

$(function (){

    function get_dsize(elem)
    {
         var dsize=0;

         if (elem.width() >= 1200) dsize = "6";           
         if (elem.width() < 1200)  dsize = "5";          
         if (elem.width() < 1000)  dsize = "4";
         if (elem.width() < 800)   dsize = "3";
         if (elem.width() < 600)   dsize = "2";

        return dsize;
   }

     $(window).on("resize", function() {
       var size = get_dsize($(this));
        $('p').html(size);
    });

});

If you are looking for Responsiveness , that can be achieved through CSS media-queries: Eg:

@media screen and (max-width: max_width) and (min-width: min_width)
    {
        .yourclassname{
            //css
        }

    }

edited Jan 29, 2014 at 10:25

answered Jan 29, 2014 at 10:14

Aditya

4,4733 gold badges30 silver badges40 bronze badges

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

Comments

gpgekko · Accepted Answer · 2014-01-29 10:09:31Z

0

To fix your code, register an resize event handler. Also, you only need to specify dsize as variable once at the top, you can leave the var keyword after that.

Anyway, here is a fixed fiddle: http://jsfiddle.net/k7Wrn/1/

Code:

$(function (){
    var dsize = "6";
    $(window).on("resize", function() {
        if ($(this).width() >= 1200) {
            dsize = "6";
        }
        if ($(this).width() < 1200) {
            dsize = "5";
        }
        if ($(this).width() < 1000) {
            dsize = "4";
        }
        if ($(this).width() < 800) {
            dsize = "3";
        }
        if ($(this).width() < 600) {
            dsize = "2";
        }
        $('p').html(dsize);
    });
    $('p').html(dsize);
});

Generally speaking the "responsive stuff" is done through css with media queries though.

answered Jan 29, 2014 at 10:09

gpgekko

3,6563 gold badges35 silver badges36 bronze badges

1 Comment

TidyWorks Over a year ago

Cheers for the response

Jai · Accepted Answer · 2014-01-29 10:11:42Z

0

Try this:

$(function () {
  var dsize = "6";
  $(window).on('resize', function () {
    if ($(window).width() >= 1200) {
        var dsize = "6";
    }
    if ($(window).width() < 1200) {
        var dsize = "5";
    }
    if ($(window).width() < 1000) {
        var dsize = "4";
    }
    if ($(window).width() < 800) {
        var dsize = "3";
    }
    if ($(window).width() < 600) {
        var dsize = "2";
    }
    $('p').html(dsize);
  }).resize();  //<---------add this to calculate on page load itself
});

Demo @ Fiddle

answered Jan 29, 2014 at 10:11

Jai

74.8k12 gold badges77 silver badges104 bronze badges

1 Comment

TidyWorks Over a year ago

Thanks for the response Jai.

Collectives™ on Stack Overflow

jQuery on resize only update variable depending on browser width

3 Answers 3

Comments

1 Comment

Demo @ Fiddle

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related