PDA

View Full Version : 90deg rotation of carousel items on orientation change



Rampant
21 Jul 2011, 8:29 AM
I have an app I'm working on that needs a carousel, but the way the thing works it only looks right in 'landscape mode' with the images I'm using. So, if the screen is vertical I still want to show images along the long axis of the screen.

I've considered just having two carousels with the same data and different markup and just switching them out on orientation change. Is there a better approach than this?

Hertz
21 Jul 2011, 3:48 PM
Have you considered making the carousel simply not respond to orientation changes?.

phil.fuse
22 Jul 2011, 12:56 AM
i think apple let you change the entire css depending on the orientation - might have to do a little bit of googling for this but i think you can.
there are probably a load of hacky js solutions as well that iterate around the world changing properties as you flip it back and forward to show how exciting it is...
...
although i agree with Hertz - just don't allow it?

i'm pretty sure you can lock the orientation with meta tags in the HTML - you definitely can when you phonegap the app.

personally i'm not a huge fan of apps that work in both orientations as it raises different design, layout and usability issues in different planes (wasted space, elongated areas, stretched look etc).

Don't most apps just only work in one orientation or is that because i lock my phone to portrait :-)
...
all this said - it is an interesting question...
my gut feeling would be to swap out for a new carrousel rather than trying to force some css or hack something each time it changes. might just be best to replace a panel on orientation change to one that you know WILL work how you want it rather than relying on the browser changing stuff?!?

what exactly is the functionality difference with the carrousel when it changes to require this - radical markup change or could you get away with css changes?

dholth
22 Jul 2011, 9:43 AM
You can use (orientation:portrait) and (orientation:landscape) media queries to style your images at least. I'm not sure about updating the layout, but the orientation change event may only get sent to the root panel.

Rampant
25 Jul 2011, 5:49 AM
I'm not planning to phonegap the app. It actually needs to run online and only display in landscape mode. Hrmmmm...