1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    England
    Posts
    135
    Answers
    11
    Vote Rating
    7
    george.m is on a distinguished road

      0  

    Default Unanswered: Make the second carousel item show slightly

    Unanswered: Make the second carousel item show slightly


    Hello,

    I'm using a vertical carousel with two items, and I'm trying to make it clear to the user that it's a carousel they're using. Therefore, assuming that the first carousel item is currently active, I want the second card to be pushed up slightly so that you can partially see it at the bottom.

    I've tried the following. Bare in mind it isn't complete but my main thought process is there: If on the first card, it should add a class to the second card which pushes it up. It works to an extend, it applies the style and shows the second card, but then I can't remove it. Has anyone any ideas of how else to implement this?

    Any help would be greatly appreciated.

    Thanks
    George

    Sencha code:
    Code:
              
                xtype: 'carousel',
                direction: 'vertical',
                width: '100%',
                height: '140px',
                listeners: {
                    cardswitch: function(){
                        var CurrentPhotoIndex = this.getActiveIndex();
                        var CurrentPhotoItem = this.getActiveItem();
    
    
                        if(CurrentPhotoIndex == '0'){
                            Ext.getCmp('carouselitem1').addCls('raisecarouselitem')
                        } else if (CurrentPhotoIndex == '1'){
    
    
                        }
                    }
                }
    CSS code:
    Code:
    .raisecarouselitem {
        -webkit-transform: translate(0,100px) !important;
        -webkit-transition: all 0.1s ease-in-out !important;
    }
    Last edited by george.m; 25 Apr 2012 at 7:29 AM. Reason: wrong title

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,144
    Answers
    3506
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Why can't you remove the css?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Location
    England
    Posts
    135
    Answers
    11
    Vote Rating
    7
    george.m is on a distinguished road

      0  

    Default


    It seems as if the addCls() temporarily removes the item from the carousel. I think this because normally, I console log the current index, so I'd get a '0' or '1' being console.log'd as i switch cards, but after I apply the addCls, a '1' is never outputted.

    So for example, once the view loads, if I slide the carousel to the second card, it doesn't apply the class because the addCls() hasn't been called yet. Then, when I switch the card back to the first card, the class is applied correctly and does correctly push the second card slightly up. This is where things go dodgy. Whenever I switch cards from this point, the card's content stays in the same position, and the console.log(this.getActiveIndex()) only gets called for the first card so I only get '1' being outputted. It is as if the second card has been removed. A removeCls() will not work, but if I remove the css classes manually in the inspect element, the problem is fixed.

    Do you know of any other way that I could apply this feature?

Thread Participants: 1

Tags for this Thread