Responsive tutorial

[lamer40]

Hello,

I really like your script. I'm using it on one of my websites: http://www.goblenko.com

I want to make a responsive design and I've read all the documentation and I found out that I just needed to add:

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

But unfortunately this doesn't solve the issue. I'm trying to do this on a separate file with the latest version of your library but still with no success.

I'll really appreciate if you create an example with responsive design enabled with images or something else that could show how to make the slider responsive.

Best Regards, Dimitar M.

[mattstauffer]

There's a lot you have to manage, but for starters, @bradgreens and I worked on a pull request (see the conversation here: https://github.com/fredhq/roundabout/issues/56#issuecomment-9463306 ) to allow you to destroy roundabout.. essentially, you need to use the forked version here: https://github.com/mattstauffer/roundabout (It hasn't been merged downstream recently so let me know if there are any missing features there).. then you debounce on Javascript resize ( which means it only destroys once they're done resizing instead of every couple frames during the resize; something like this: http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/ ), and then destroy and re-create the Roundabout at the end of each resize. Currently it's the only way for Roundabout to really maintain its perspective appropriately.

I can explain more if you need help; I know this is a bit of a rushed answer.

[lamer40]

I've followed the instructions provided in the threads, but unfortunately I wasn't able to make the gallery responsive.

I thought that this should be only an option which should be enabled/disabled but it looks like it is not.

I'll be more than glad if you provide me complete step by step instructions or an archive with a working responsive version of the gallery.

Best Regards, Dimitar M.

[mattstauffer]

Hi Dimitar, I can't give you a complete step-by-step, but here are fuller instructions:

1. Make your roundabout parent container width percentage-based, so that prior to adding Roundabout the container flexes in size when you resize the window. Doing this should make the roundabout relatively flexible already, but it'll get awkward-looking once you resize to a certain amount.
2. Use the forked version of the roundabout code I linked above instead of the master/head roundabout code
3. Apply roundabout to your containers like normal
4. Add a javascript window.resize listener using debounce: http://benalman.com/code/projects/jquery-throttle-debounce/docs/files/jquery-ba-throttle-debounce-js.html On window.resize (debounced), destroy your roundabout (using the new destroy method from my fork) and then re-initialize it

I hope this helps a little more!

-matt

[bsubba]

Hi matt, I am also trying to use roundabout in my website. And i followed the step that you've mentioned above to make it responsive.But i got no success in it.May be my fourth step is wrong.Can you have a look and tell me if there is some problem:

Please help me or give me some more example on how to make it work

[mattstauffer]

Hey guys, sorry, but I just don't have the free time to be able to proofread/troubleshoot your work. Sorry! Good luck!

[bradgreens]

@bsubba, please make a demo such as JSFiddle or JSBin if you seek troubleshooting assistance.

[a246530]

Hey bsubba, I think the bradgreens and mattstauffer's modified js file with the destory works fine. http://rogue.bucks.edu/~carsonm16940/test/
I got it to resize without any issue even when starting from a smaller screen size and getting bigger.

I am new to web design, and im sure this isnt very pretty, but it does work out.