PDA

View Full Version : ahref to choose next carousel card.



nosarious
16 Jul 2010, 11:46 AM
Good morning,

I have a list of items which is shown on a carousel card at the front of my project. I would like a person to be able to click on one of those links to go to a specific carousel card.

Is there a way to do this? Could someone direct me to where I can get this information? I keep looking at the examples, but my eyes are glazing over, so it must be an uber-disguised simple thing to do, hiding in plain site.

Oh, and how does one go about turning off the little dots at the bottom of carousel cards? It makes the text hard to read.

evant
18 Jul 2010, 8:52 PM
Turn off the indicator by specifying indicator: false.



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({
indicator: false,
listeners: {
afterrender: function(c){
c.body.on('click', function(e, t){
if(Ext.fly(t).hasClass('last')){
c.setCard(2);
}else{
c.setCard(0);
}
}, c, {delegate: 'a.move'});
}
},
defaults: {
cls: 'card'
},
items: [{
html: '<a class="move last" href="#">Go to last</a>'
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '<a class="move first" href="#">Go to first</a>'
}]
});

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

nosarious
18 Jul 2010, 9:32 PM
Thank you Even. I'm working on it utilizing it right now.

Can you suggest a way to incorporate a scrolling div in a carousel? I was hoping to use an overlay, but my research today hints that a panel can contain a carousel, but a carousel cannot contain a panel, which the overlay is...

I am hoping to mimic the way the icons slide across the the ipad, which looks similar to the overlay (they have a nice shadow). Incorporating an overlay panel in a carousel would allow this... Sadly I haven't been able to incorporate the 'slide down' animation of the lower part of an overlay when you click on the title...

it's a challenge, but a bit awkward to get there.

evant
18 Jul 2010, 10:05 PM
You can, Carousel extends panel, which extends Container, so it can have child items.



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

var data = [];
for(var i = 0; i < 100; ++i){
data.push('Line ' + i);
}

var carousel = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [{
layout: 'fit',
items: {
scroll: 'vertical',
html: data.join('<br />')
}
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '3'
}]
});

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

nosarious
18 Jul 2010, 10:42 PM
Thank you. I got the indicators out of the way, but the clicki-to-scroll-to-carousel card is having issues. Or I am. I suspect it is me.

I'm hardwiring everything right now, so the initial list of carousel cards can have a specific number to scroll to. I'll be checking on that shortly.