Roundabout and Responive Web Design

[WilliamVercken]

Hi,

This is not really an issue, but it seems that in older versions of the plugin, the carousel adapted to the width of the container ... but now it is no longer the case.

Can we expect a return of this feature? With the emergence of "Web Design Responve" I hoped to rely on this plugin! But now I can not ...

Thank you!

[fredleblanc]

This can be achieved by listening to the window's resize event and calling Roundabout's relayoutChildren method.

$(document).ready(function() {
    $("ul").roundabout();

    // make responsive
    $(window).resize(function() {
        $("ul").roundabout("relayoutChildren");
    });
}

[WilliamVercken]

Oh great, i'm very very sorry, I didn't see this option !

Thank you for your help and, mainly, for your great plugin !

[fredleblanc]

No problem, and you're welcome!

[fredleblanc]

Added a responsive option that will do what I mentioned above for you. As of v2.1, it's as simple as:

$(document).ready(function() {
    $("ul").roundabout({
        responsive: true
    });
});

[WilliamVercken]

Great ! Thank you for your reactivity. :-)

[WilliamVercken]

Hi,

I'm doing some test for myself and there is a little problem with the "Responsive" option. If I put a % width for the ".roundabout-moveable-item" elements, I don't resize with the whole holder when I resize my browser. It only work if I refresh my page.

I hope you will find a way to correct it !

Thanks a lot.

By the way, I don't know if you tested it yet (you don't mention it on your website), but the plugin works great on mobile with the drag & drop plugins, Roundabout is more and more essential for actual webdesign !! :)

[fredleblanc]

This is something that is a long way from being fixed. When Ronudabout initialized, it grabs the width and height in pixels so that it can do all of its calculations as things move around. Moving things, it changes the size of elements to a specific pixel height/width.

This tinkers with how Roundabout is built to work, and would require a bit of rethinking of the core that makes Roundabout work. So what I think I'm saying is: this probably won't be adjusted, or if it is, not for a while.

[interactivejunky]

On other plugins such as jQuery Cycle it's quite easy to work with responsive layouts by just destroying and re-initialising the slideshow when you detect a breakpoint. There's no destroy() function for roundabout but there's some mention on how to do it here https://github.com/fredhq/roundabout/issues/56 which hasn't really helped me much.

If there's an easy way to destroy a roundabout then let me know!

[bradgreens]

@interactivejunky where are you getting caught up? I had to customize the build in the first place to accomplish that. I have partially accomplished re-initializing after destroy but the code is not complete yet. I will submit a pull request but it's probably a week or two out.

[JasonRodman]

I am noticing the responsive feature does not resize the height of the images, only the width. Is this by design or a bug?

[bradgreens]

My belief is that Roundabout can't assume too much about the contents of each panel. You'll want to run a window resize handler, compute your desired heights and apply them on your own.

[interactivejunky]

I think the destroy and rebuild method (even though its brute force) is a pretty good way of doing it. Because it wasn't in the plugin itself (as far as I remember) I think I was doing some terrible thing like cloning the object and replacing it later.

A good destroy method helps in a lot of AJAX'y apps too!

[bradgreens]

Yea I had to do that here, http://www.buffalowildwings.com/.

The responsive aspect worked well but I needed destroy/rebuild to recalculate the layout dimensions after the user completes the resize. I also run a window resize handler to apply heights on the fly while the user is resizing.

[interactivejunky]

Nice site!

I think generally for responsive stuff a lot of jQuery plugins will have to be re-written to not rely on setting dimensions as much (jQuery Cycle I'm looking at you!) because the destroy and rebuild can be an absolute system killer on mobiles (rotation) - Roundabout is definitely not alone in that.

Then there's the giant anti-responsive developer movement (or at least they've got big voices) - so who really knows I guess - maybe cool JavaScript toys don't belong on mobile devices.

http://www.goodlifediner.com/pictures here's my go at doing Roundabout in a responsive way.

[mattstauffer]

Clever! I have been performing all kinds of ridiculous math on resize, and I'm just never satisfied. I never thought about just destroying and then bringing it back on resize bounce. Thanks for the tip!

[mattstauffer]

Also, @interactivejunky, I wrote the destroy() method for roundabout (with @bradgreens' help!) precisely for that reason: The site I'm working on shows a slideshow until you get to a certain size, and then it jumps to roundabout, just like the BWW site. I think it's the best way to go.

And yah, we've had to tweak a few other plugins to make them more responsive. The other one I remember forking was jQuery Stickem: https://github.com/mattstauffer/jQuery-Stickem

[CSnipper]

Problem is because script does not read media queries from css files. maybe this link will be helpfull: http://tylergaw.com/articles/reacting-to-media-queries-in-javascript I'm not java coder so I can't merge this method with your script :(

[rizkysyazuli]

Thx @bradgreens @interactivejunky for the tips. i too didn't really think about totally replacing/disabling roundabout on mobile. not really my initial plan. but on mobile it's just too crappy when you have lots of items.

[rizkysyazuli]

btw, @bradgreens i noticed you used Flexslider on the mobile version. does it have a 'destroy' method as well? i don't see it in their docs. thx..

[bradgreens]

On my branch, the destroy method is [lightly] documented is always available if the plugin has been activated regardless of screen size.

https://github.com/bradgreens/FlexSlider/tree/release-2-2-0#general-notes

[muniatu]

found a solution for this, maybe not the most efficient but it works, you just refresh on resize:

var windowWidth = $(window).width();

$(window).resize(function() {
if(windowWidth != $(window).width()){
location.reload();
return;
}
});

[skatewalker]

i can make that the li rotateY() - i want a effect 3D