PDA

View Full Version : Carousel - starting from a middle item



SpikeWeb
6 Jul 2010, 6:31 PM
Hi,

I am creating a web app whereby the client wishes all the navigation to be done by swiping left/right and up/down. I am using the carousel component and it is working well. However, I would like to be able to start the carousel so it shows one of the middle items in my list thus enabling the user to swipe in either direction. An example is if I had a list of 5 items (1,2,3,4,5) and I wanted the carousel to start at item 3 thus allowing user to swipe one way to get to item 2 or the other way to get to item 4. Currently the default starts at item 1 meaning that the user can only swipe one way initially.

I have been trying the activeItem config option but have not had any luck.

Any help or advice would be greatly appreciated. I had this app running in jqtouch but was running into some errors, which seemed to simply be a limitation of jqtouch, and had David Kaneda recommend the Carousel component. I'm glad he did because it's terrific!

evant
6 Jul 2010, 10:30 PM
Set the activeItem property on the carousel:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items
var carousel1 = new Ext.Carousel({
defaults: { cls: 'card' },
items: [{
html: '<h1>Carousel</h1><p>Navigate the two carousels on this page by swiping left/right or clicking on one side of the circle indicators below.</p>'
}, {
title: 'Tab 2',
html: '2'
}, {
title: 'Tab 3',
html: '3'
}]
});

var carousel2 = new Ext.Carousel({
ui: 'light',
defaults: { cls: 'card' },
activeItem: 1,
items: [{
title: 'Tab 1',
html: '<h1>ui="light"</h1>'
}, {
title: 'Tab 2',
html: '2'
}, {
title: 'Tab 3',
html: '3'
}]
});

new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel1, carousel2]
});
}
});

SpikeWeb
6 Jul 2010, 11:56 PM
Hi Evant,

Thanks for responding so quickly. However that code does not seem to do anything. I used your exact code in the carousel example and it didn't make any different. Could I possibly be using an outdated version of the library? I downloaded it yesterday so I would have thought it was up to date.

Does the code you supplied work for you? I have been testing locally, not online, I wouldn't think that would matter though.

evant
7 Jul 2010, 1:39 AM
Yes, it does. When I open the page, the bottom carousel has "2" displaying, as opposed to the first item.

SpikeWeb
7 Jul 2010, 2:59 PM
Hi Evant,

I thought it might be a problem with my localhost so I uploaded the code online. It is essentially the carousel from the example folder but with the addition of your code above. The location of the file is at http://www.spikewebdesign.com.au/sencha/examples/carousel/.

What is happening is the the indicater is recognising the activeItem call but the actual carousel is not. It should be showing 2 as in your example but is showing the first slide, but you can see the indicator is showing the navigation to be on the second slide. I am testing in Safari v5.0 with the user agent set to Mobile Safari - iPad 3.2

This is really strange. I have no idea what would be happening here as I'm sure i have the latest code.

quarkus
8 Jul 2010, 2:52 AM
... got exactly te same problem ... weird.

would be glad if their is a solution.

SpikeWeb
8 Jul 2010, 2:53 PM
Its got to be something simple like a new version of the code we're missing, or a new version not working the way it should. I wouldn't have thought it could be something as simple as the latest version of Safari playing up

evant
8 Jul 2010, 5:25 PM
It appears I was mistaken, currently this isn't supported by doing it directly with configs. I'll look into this further and get back to you.

SpikeWeb
8 Jul 2010, 9:02 PM
Thanks Evan, that would be great. This would be a really great item to have working and one that I could really do with.

Thanks.

TommyMaintz
13 Jul 2010, 10:34 AM
We will make sure this is fixed in the next release.

TommyMaintz
13 Jul 2010, 11:28 AM
This has just been added (fixed).

SpikeWeb
13 Jul 2010, 2:58 PM
Thanks for the update Tommy. I'm still pretty new to Sencha so sorry if this question is obvious, but when is the planned date for the next release and if I get a support subscription do I get access to the release sooner?

TommyMaintz
14 Jul 2010, 12:55 PM
Weare aiming to release this by the end of this week.

garlantinapple
14 Jul 2010, 11:22 PM
I have been trying the activeItem config option but have not had any luck.

ediew
21 Jul 2010, 10:56 PM
Is the active item working already? if not, how long it takes to get the update?:-/

uxdan
22 Jul 2010, 7:57 AM
Is there any way you can give us the code for a hotfix with a note attached saying it will be changed next release?

I'm hoping to get this code working.

SpikeWeb
26 Jul 2010, 9:15 PM
I'll second that! Really keen for an update so I can get it working. Everything else is great :)

SpikeWeb
8 Aug 2010, 3:23 PM
Hi Guys, I noticed BETA .93 is out. Has this issue been addressed in this release? It would be great to know either way.

Thanks

evant
8 Aug 2010, 8:07 PM
Yes:





Ext.setup({
onReady: function(){
new Ext.Carousel({
activeItem: 1,
fullscreen: true,
items: [{
html: 'a'
},{
html: 'b'
},{
html: 'c'
}]
});
}
});

SpikeWeb
23 Aug 2010, 11:44 PM
Hi guys,

I have a number of caoursels which scoll vertically contained within a horizontal scrolling carousel. I have used the above code to ensure each of the vertical scrolling carousels start on the item I want. However, if you scroll up or down on one of the vertical carousels, then scroll horizontally to the next vertical carousel, then horizontally back to the previous vertical carousel, the last item you were on is still there instead of the designated activeItem.

Is there a way to reset the the items so that when you go back the carousel resets/reverts to the 'activeItem'.

Thanks.

evant
23 Aug 2010, 11:54 PM
That's the default behaviour, since you didn't tell it to change, it won't.

If you want to manually set the card, use the setCard method.

SpikeWeb
24 Aug 2010, 3:23 PM
Ah ok, cool. Noob question next. Can you really control the item displayed in one carousel by swiping on an item in a different carousel? Would you need some kind of listener that listened for a swipe in a certain direction which would then trigger the setCard method?

By the way, I should have posted the link for the project I am working on, http://www.spikewebdesign.com.au/mrppp/Portfolio2/

evant
24 Aug 2010, 3:39 PM
Yes, listen to the cardswitch event on the carousel. Check if the index of the new card is greater or less than the new card then act accordingly.

blessan
24 Aug 2010, 8:25 PM
tommy when is 0.94 coming out? Will it be out this week? Really waiting for the new nested list.

evant
24 Aug 2010, 11:04 PM
The new NestedList won't be in the next release. Please stop posting this same question everywhere, Jamie answered you that we're hoping to have it out this week, but we may push it back to next.

imsCol
1 Jun 2011, 5:39 AM
As far as I'm concerned, activeItem still does not work. Is there an alternate way to setting this property?

miroamarillo
1 Jun 2011, 2:12 PM
Did work fine for me. You. Check the file. Last tested was working starting at the middle of both panels.

Hope it works for you,

J.

miroamarillo
1 Jun 2011, 2:14 PM
26384