CODEWITHSUNDEEP
javascriptjquery
topiman
topiman

Reputation: 511

JQuery recalculate css on window resize

On this site: http://houston.aiga.org/

Although the slider is full width / variable on browser window size, the Title of each slider item is always indented to line up with the content.

I've tried setting this up: http://jsfiddle.net/topiman/xS7vn/

$(window).resize(function() {
    $('#item').css("padding-left",$(window).width()/2);
});

The function is working but the calculation pushes the item too far in on decreasing window size and too far out on increase.

The line in the working slider example is:

$('.layout-feature .box-section-image-gallery-controls-title, .layout-feature .box-section-image-gallery-title').css('paddingLeft', 60 + extraSpace/2);

where extraSpace is the $(window).width()

Any help gratefully received - thanks in advance

Upvotes: 3

Views: 11530

Answers (1)

Luceos
Luceos

Reputation: 6720

It seems you forgot about the width after all: http://jsfiddle.net/topiman/xS7vn/5/

This is what I came up with. Stupid thing is the console.log kept giving back a +8 difference which I had to hardcode remove. Is this what you were looking for?

$(window).resize(function() {
    var ItemWidth = $(".wrapper").width();
    $('#item').width( ItemWidth );
    var WindowWidth = $(window).width();
    // cannot resize because window is smaller than the wrapper
    if( ItemWidth > WindowWidth ) {
        var PadWidth = 0;
    } else {
        var PadWidth = (WindowWidth - ItemWidth)/2 - 8;
    }
    console.log( ItemWidth + " - " + WindowWidth + " - " + PadWidth );

    $('#item').css("margin-left",PadWidth + "px");
    });

Update; also check http://jsfiddle.net/xS7vn/8/ for the latest update including resizing on page load.

Upvotes: 2

Related Questions