JS if inside for loop

Question

I'm trying to rewrite this as a for loop; my attempt below failed. Any ideas?

jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);
function resizeFrame()
    if ($(window).width() < 232){
        $("#grid-content").css( 'width', '232px' );
    }else if ($(window).width() < 458){
        $("#grid-content").css( 'width', '232px' );
    }else if ($(window).width() < 684){
        $("#grid-content").css( 'width', '458px' );
    }else if ($(window).width() < 910){
        $("#grid-content").css( 'width', '684px' );
    }else if ($(window).width() < 1136){
        $("#grid-content").css( 'width', '910px' );
    };
};

The result is the div (#grid-content) is really wide around 3000px, regardless of window size.

jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);
function resizeFrame()
    for (var x=232;x<=3000;x=x+226){
        if ($(window).width() < x ){
            $("#grid-content").css( 'width', x +'px' );
        };
    };
};

Is the missing { from function resizeFrame() a typo in your question? — BoltClock
– BoltClock, Commented Oct 14, 2010 at 1:05
use var for declaring x inside your for loop or it will become a global variable otherwise. — gblazex
– gblazex, Commented Oct 16, 2010 at 22:35

bobince · Accepted Answer · 2010-10-14 02:03:05Z

9

+500

You don't need a loop to round-down-to-discrete-steps, it's simple arithmetic.

function resizeFrame() {
    var w= $(window).width();
    w-= (w-6) % 226;
    if (w<232) w= 232;
    $('#grid-content').width(w);
}

edited Oct 14, 2010 at 2:03

answered Oct 14, 2010 at 1:20

bobince

538k111 gold badges675 silver badges846 bronze badges

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

4 Comments

user113716 Over a year ago

Is it me, or does the expected result from OP's if() statement(s) seem out of sync with the expected result from the for() loop?

bobince Over a year ago

@patrick: oh, good point, I hadn't spotted that! The round-down behaviour in the if does seem much more likely to be useful than rounding up. Changed answer to round down instead of up. (Also discarded the 3000 check since my guess is this and the 1136 limit in the if case are merely arbitrary upper bounds.)

ThomasReggi Over a year ago

thanks. if you have the time could you explain this a little?

bobince Over a year ago

n-= n%chunk is an idiom to round down to the nearest multiple of chunk. It uses the % operator to divide by chunk and take the remainder; subtracting the remainder from the original value leaves the rounded-down multiple. (The -6 is needed to align the chunks so that they're at 6, 232, ... instead of 0, 226, ....)

Nick Craver · Accepted Answer · 2010-10-14 01:05:09Z

2

You need to exit the loop on the first match so it doesn't continue until the end, like this:

jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);
function resizeFrame() {
    for (x=232;x<=3000;x=x+226){
        if ($(window).width() < x ){
            $("#grid-content").css( 'width', x +'px' );
            break; //add this
        }
    }
}

You can optimize a bit though, like this:

jQuery(window).bind("load resize", function () {
    var w = $(window).width();
    for (var x=232;x<=3000;x+=226) {
        if (w < x ) {
            $("#grid-content").width(x);
            break;
        }
    }
});

answered Oct 14, 2010 at 1:05

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

1 Comment

gblazex Over a year ago

+1 while @bobince showed a simpler solution, you correctly pointed out why his for loop fails.

Collectives™ on Stack Overflow

JS if inside for loop

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related