PDA

View Full Version : Placing an icon on the card and hiding it



volkanyilmaz
4 Aug 2010, 11:14 AM
I want to place an icon (any png files) on the carousel card and want to hide it when the screen is touched and start to swipe content. But couldn't imagine how to do that? Could you please help me.

evant
4 Aug 2010, 4:48 PM
I'm not really clear on what you're asking. You want to show an image on the card until the user switches to the next card in the carousel?

volkanyilmaz
4 Aug 2010, 9:29 PM
I just want to show the image on the card until the user touches the screen and starts to switch to the next card in carousel.

evant
4 Aug 2010, 9:51 PM
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,

onReady: function(){

var c = new Ext.Carousel({
fullscreen: true,
items: [{
html: 'some image'
},{
html: 'second'
},{
html: 'third'
}],
listeners: {
single: true,
cardswitch: function(ct, newCard, oldCard){
oldCard.update('foo');
}
}
});
}
});

nosarious
6 Aug 2010, 9:39 AM
Volkanyilmaz, did this answer your question? I need something similar and would rather not post a new post...

volkanyilmaz
6 Aug 2010, 11:22 AM
@nosarious no this code didn't answer my question. Because only thing I want to place an image on the first carousel card. That could be any image in a div. So when user touches the screen i want to hide image in the div.

nosarious
6 Aug 2010, 12:11 PM
I think if you reduce this to the primary considerations it might be easier.

1. create a div for your icon. Since it is only being used once, give it an id, not a class.
2. give it a z-index higher than anything else on your carousel card. This keeps it at the surface visually.
3. place it in the html, not in the carousel (it doesn't need to reside in the carousel necessarily) Others may indicate this is a bad idea.
4. use beforecardswitch and not cardswitch. Cardswitch means it won't happen until after the card changes. Beforecardswitch means it happens first. You don't want the card to switch and then your icon disappear.
5. use a css transition or transformation to fade the div to an opacity of zero. It will still be there but it will be invisible.

I tried this, but I don't know enough about where to place what piece of Sencha stuff to make it work. This is what I came up with trying two different things, but neither worked for me. I'm leaving them in there so someone may be able to help us with how they should work and where they should go. You'll probably want to change the duration and animation, too.

Please, if anyone knows the answer, help? I shall need this too, but activated with a doubletap.




Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {

Ext.fly('icontest').on({
beforecardswitch: function(c){
c.style.webkitTransform='-webkit-transition-property: opacity, left;-webkit-transition-duration: 2s, 4s;';
}
});

// 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'
}],
listeners: {
single: true,
beforecardswitch: function(c){
icontest.style.webkitTransform='-webkit-transition-property: opacity, left;-webkit-transition-duration: 2s, 4s;';
}
});

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

evant
8 Aug 2010, 8:51 PM
Sounds like you want an overlay instead...

volkanyilmaz
9 Aug 2010, 12:53 AM
Yes I want an overlayed div covering the first carousel card with the img inside. When user touches this img/div I want it to be hidden and user should be able to start to switch to next card by swiping.