CODEWITHSUNDEEP
jquerybrowserresizerefresh
sarah3585
sarah3585

Reputation: 637

Refresh some jquery on browser window resize

I am using a third party carousel which adds in-line widths and heights styles on the fly. The site uses media queries to resize the carousel container when the browser size is reduced. My issue is that the page has to be refreshed for the media query to come in. So can I have the jQuery function refresh on resize so it re-work out its widths/heights?

Here's the jQuery:

    <script type="text/javascript">

    $(document).ready(function () {

    $("#carousel").featureCarousel({
    // include options like this:
    // (use quotes only for string values, and no trailing comma after last option)
    carouselSpeed:700,
    smallFeatureWidth:0.8, smallFeatureHeight:0.8, sidePadding:0, topPadding:0
    });
    });
    </script>

Upvotes: 1

Views: 5028

Answers (2)

Dixie Normous
Dixie Normous

Reputation: 11

Strangely enough I was searching for refreshing on window re-size for the exact same reason. I have a logo scroller in a responsive design and the images are stacking on top of each other when the window re-sizes. The best solution for this is the following: 1-place the scroller in an iframe 2-add a class to the iframe with the logo scroller on the parent page and use java to refresh the iframe on window resize.

Upvotes: 1

faino
faino

Reputation: 3224

Use the resize() function on the window object:

$(window).resize(function(){
    $("#carousel").featureCarousel({
        // include options like this:
        // (use quotes only for string values, and no trailing comma after last option)
        carouselSpeed:700,
        smallFeatureWidth:0.8, smallFeatureHeight:0.8, sidePadding:0, topPadding:0
    });
});

Then you can use $(window).height() and $(window).width() to get your new size and adjust from there.

Upvotes: 5

Related Questions