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' );
        };
    };
};

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' );
        };
    };
};

• javascript
• jquery

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

2 Answers 2

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);
}

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;
        }
    }
});