Question

I’m working on a new project which involves jQuery Roundabout. I’ve got everything mostly styled to how I want (I’m going to add different borders and padding, but that’s not the issue), but the target market resizes pages often (don’t ask, I’m not really sure why either).

So that brings me to my issue, when going to my project site: http://cirkut.net/sub/proven/landing/ It loads and the roundabout works nicely, but on resize, I want it to ‘redraw’ and re-center the roundabout. When you resize, click on one of the items and it will ‘redraw’ and be centered again.

This is my roundabout call:

$('#slides').roundabout({
    easing: 'easeInOutQuart',
    responsive: true
});

And this is what I’ve tried to avoid the issue:

$(window).bind("resize", function() {
    $('#slides').roundabout("relayoutChildren");
});

However, what happens is it’s relaying out the new <li>‘s and re-roundabout-ing them, which shrinks the images.

Can anyone provide any insight on this? Thanks!

Answer 1

After fiddling with multiple options, I found one that works.

Instead of the above "resize" bind, I use the below, and it refreshes great.

$(window).bind("resize", function() {
    $('#slides .slide').removeAttr("style");
    $('#slides').roundabout({
        easing: 'easeInOutQuart',
        responsive: true
    });
});

I found that the inline CSS is what positions it, and if I re-roundabout, it changes the size based on the current size, which causes the infinite ‘resizing’ loop on resize. So if I remove the inline style and then immediately put #slides back into a roundabout, it positions it correctly and re-adds the inline styles.