PDA

View Full Version : Rotate carousel to landscape mode



MADAHMANI
20 Jul 2010, 8:42 AM
I have this example here : http://extranet.dpdh.net/iphone/ex2/ (please give it a try with an iphone/ipod)
when we open the website on iphone/ipod touch on portrait mode, everything is fine but I would like to be able to rotate the iphone/ipod touch and load a new carousel or the same BUT with the images adapted to the screen resolution in fullscreen. (or maybe a new set of images)

Is this possible ? and please how to do it ?

Thanks.

evant
20 Jul 2010, 6:07 PM
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items
var carousel = new Ext.Carousel({
items: [{

}]
});

new Ext.Panel({
fullscreen: true,
layout: 'fit',
items: carousel,
listeners: {
orientationchange: function(p, type){
carousel.removeAll();
if(type == 'landscape'){
carousel.add([{
html: 'Land1'
},{
html: 'Land2'
}]);
}else{
carousel.add([{
html: 'Port1'
},{
html: 'Port2'
}]);
}
carousel.setCard(0);
carousel.doLayout();
}
}
});
}
});

MADAHMANI
21 Jul 2010, 3:20 AM
Thank you for the prompt response evant ! I am going to try it now

MADAHMANI
21 Jul 2010, 5:19 AM
Well, the example is working fine but I have one more question please.

In my example I am using Divisions to add images like this : <div id="c1"><img src="http://extranet.dpdh.net/iphone/ex2/catalogue/page-1.jpg" width="320" height="480"></div>... for all the images.

Then I call them respectively:
items: [{
contentEl: 'c1'
},
{
contentEl: 'c2'
},...

Do I use the same way with the new method to add the images for the landscape version ?

evant
21 Jul 2010, 5:25 AM
If that's how you want to do it, sure. Note that when you use contentEl it moves the element into the container, so you might want to clone the node first.

MADAHMANI
21 Jul 2010, 5:43 AM
ok, I am going to try it and tell you about it.

MADAHMANI
21 Jul 2010, 5:44 AM
you said : "so you might want to clone the node first" do you mean close the node ?

evant
21 Jul 2010, 5:51 AM
No, clone, as in make a copy of.

MADAHMANI
21 Jul 2010, 5:53 AM
understood, that's what I actually did ! :)

MADAHMANI
21 Jul 2010, 6:03 AM
how do I clone that node ? I got lost sorry.

evant
21 Jul 2010, 6:05 AM
http://www.quirksmode.org/dom/w3c_core.html

cloneNode

MADAHMANI
21 Jul 2010, 6:38 AM
thanks evant !

MADAHMANI
21 Jul 2010, 7:39 AM
Hi again,

Here is the example http://extranet.dpdh.net/iphone/ex3/ to see it in action. It is playing smoothly but when I add a shortcut icon on the desktop the landscape mode is corrupted, can you help me with this ?

Thank you !

MADAHMANI
21 Jul 2010, 11:03 PM
is there any way ti fix this ?

evant
21 Jul 2010, 11:23 PM
I don't know what the cause of that would be.

nosarious
22 Jul 2010, 9:41 AM
I had odd behaviour with the landscape/portrait modes if I had 'debug' turned on for mobile safari. If you have it on, try turning it off and revisiting your site.

took me forever to find that problem. debug makes 'onorientationchange' stop responding (even presents it as an error) even though it works fine with debug turned off.

MADAHMANI
23 Jul 2010, 12:01 AM
Hi nosarius,

Thank you for this test and advice. The "debug" mode is always turned off on my ipod touch and the website turns smoothly on safari but the problem comes out only when I add a shortcut of the website on the desktop.

When I start the website from the desktop icon, the portrait modes runs nice and smooth but when I turn the device to the landscape mode the website goes corrupted.

I attached both html and js files if someone can please help me.

Thank you

evant
23 Jul 2010, 12:05 AM
I don't have to look at it, but please use a loop (untested)!



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
// Create a Carousel of Items

function createItems(append){
var arr = [];
for(var i = i; i <= 16; ++i){
arr.push({
html: String.format('<img src="http://extranet.dpdh.net/iphone/ex3/catalogue{0}/page-{1}.jpg" />', append, i)
});
}
return arr;
}

var carousel = new Ext.Carousel({
items: [{}]
});

new Ext.Panel({
fullscreen: true,
layout: 'fit',
items: carousel,
listeners: {
orientationchange: function(p, type){
carousel.removeAll();
carousel.add(createItems(type == 'landscape' ? '2' : ''));
carousel.setCard(0);
carousel.doLayout();
}
}
});
}
});


Isn't that much nicer?

MADAHMANI
23 Jul 2010, 1:17 AM
i am going to try this thank you again !

MADAHMANI
23 Jul 2010, 2:25 AM
the idea is very interesting but nothing is showing !
Mea culpa, i am certainly missing something here.

nosarious
23 Jul 2010, 8:47 AM
Turn on debug with your desktop (not iphone) safari and see if there are errors. That's always the first step in debugging.

Evant's example is only counting through the portrait version of the images and displaying it in landscape. If you look at it in portrait you may not see anything. His example is reading through the portrait images (catalogue versus catalogue2) You may want to add a 2 to the end of catalogue in the for loop to see landscape images in landscape mode. You will need another loop or a nested loop to count both sets of images. (a nested loop would require having 'catalogue1' and 'catalogue2')

For simplicities sake with the reverse side of the images, you may also want to consider keeping the images/jewellery consistent. Right now these two images have different jewellery:
http://extranet.dpdh.net/iphone/ex3/catalogue/page-14.jpg
http://extranet.dpdh.net/iphone/ex3/catalogue2/page-14.jpg

Not sure, but that may make things easier in the next step. (linking the image with the info for each region on each card)

MADAHMANI
23 Jul 2010, 8:59 AM
I see, yes that makes sense.
I will rectify the images.

Could you just help me with the nested loop ? an example maybe ? (am still a noob in sencha touch)

Thanx !