search

richardscarrott / jquery-ui-carousel

jQuery RS Carousel is a responsive and touch-enabled carousel written on top of jQuery and the jQuery UI Widget Factory providing a full and familiar API in less than 2.6kB minified and gzipped.
http://richardscarrott.github.io/jquery-ui-carousel/
192 stars 56 forks source link

Changing Orientation creating multiple rows #19

Closed antisquark closed 12 years ago

antisquark commented 12 years ago

Initial settings { startAt: null,
itemsPerPage: 4, itemsPerTransition: 'auto', noOfRows: 1, speed: 'normal', easing: 'swing', pagination:false, orientation:'horizontal', nextPrevLinks: true }

Mask Width is manually set using Javascript to access CSS, wide enough for 4 items (312px).

Re-orienting all carousels on page with: $('.rs-carousel').carousel('option', 'orientation', 'vertical'); Mask height is manually set using Javascript to access CSS, wide enough for 4 items (312px).

This results in a vertical scroller that has 4 columns, and the next/prev links scroll up one 'row' at a time (4 items at a time, still).

After this, $('.itemCategory.rs-carousel').carousel('option', 'orientation', 'horizontal'); results in a horizontal scroller with multiple rows..

richardscarrott commented 12 years ago

I'd be able to help a little better if you can provide a link to an example but from reading the above it sounds although you're setting the height of the carousel with JS manually? That would therefore mean you'd have to clean up after yourself and remove the height when changing orientation.

It would make more sense if you set the height of the mask with CSS based on the .rs-carousel-vertical class, that way it won't be applied when changing orientation because the class is removed....

antisquark commented 12 years ago

Ah, that's an excellent css suggestion (I'll add that immediately), but I'm also worried about the overall structure of the carousel not reorienting correctly.

I'm definitely setting the height of the mask, not the carousel itself. Both the rs-carousel-runner and the rs-carousel have no assigned height in the active page, despite multiple re-orients.

I think the appearance of multiple rows/columns is what's breaking the return to horizontal. I should note that ALL carousels with the selected-for classes are oriented to vertical, but when I attempt to change them back to horizontal, only the currently selected/visible carousel is correctly returned to horizontal state (one row). The rest have multiple rows and columns, though next/prev movement is horizontal again.

Perhaps the width of the runner isn't being set properly in the other carousels for some reason?

antisquark commented 12 years ago

Ah ha--most of the carousels are in a non-displayed state, and for them, self._getItemDim() returns 10, rather than 78 (which is the value returned for the visible carousel.

antisquark commented 12 years ago

Yep, that's the issue--if I briefly put them back in displayed state while reorienting, it's done correctly. So, switching the display state of the rs-carousel to 'none' prevents the code from grabbing the dimensions properly.

antisquark commented 12 years ago

Still not certain as to the cause of the multiple columns on vertical orient.

richardscarrott commented 12 years ago

I'm still not completely following your issue, if you can provide a link I'd be able to work out what is going on.

As for _getItemDim returning the wrong dimension when hidden - it's an issue I've just become aware of today so will be looking to fix with this: https://github.com/richardscarrott/jquery-ui-carousel/issues/18, thanks for pointing it out.

antisquark commented 12 years ago

Hmmm, if I change the width of the mask appropriately, I get a single column vertical carousel again.

richardscarrott commented 12 years ago

Yeah, the JS doesn't handle any of the styling for you so you'll have to set the mask dimensions based on the appropriate classes in CSS - you can look at the demo to see how the CSS works.