Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Animating a Toolbar to nicely pop-in?

Okay, so here is my code:

    var image_toolbar = Ti.UI.createToolbar({
        items:[house_camera,fixedSpace,house_browse,flexSpace,house_close],
        color:'999',
        height:40,
        bottom:0
    });

    /* HOUSE IMAGE EVENTS */
    image_row.addEventListener('click', function(e)
    {
        win.add(image_toolbar);
    });

What I want is when you click on "image_row" is the toolbar ("image_toolbar") to nicely slide up from the bottom of the screen, as opposed to what it's doing right now which is just appearing there out of the blue when you click.

— asked September 14th 2010 by Colton Arabsky
  • animation
  • toolbar
0 Comments

4 Answers

  • Accepted Answer

    try this( not tested ):

    var image_toolbar = Ti.UI.createToolbar({
            items:[house_camera,fixedSpace,house_browse,flexSpace,house_close],
            color:'999',
            height:40,
            bottom:-40
    });
    
    
    win.add(image_toolbar);
    
    image_row.addEventListener('click', function(e)
        {
          image_toolbar.animate({bottom:0})
        });
    
    — answered September 14th 2010 by Dan Tamas
    permalink
    1 Comment
    • Works, thank you very much :) Even though "bottom: -40" still showed a tiny bit of the top of the toolbar (Which, I'm guessing, isn't included in the height and is just added onto whatever you chose, cause Apple is like that) I just did like -80 and it worked. Thank you Tamas! :)

      — commented September 14th 2010 by Colton Arabsky
  • b7.addEventListener('click', function()
    {
    var b = Ti.UI.createButton({
    backgroundImage:'../images/camera.png',
    height:33,
    width:33
    });
    var flexSpace = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
    });

    win.setToolbar([flexSpace,b,flexSpace]);
    

    });
    win.add(b7);

    check in kitchen sink examples window_toolbar.js

    i think in u r case u should add

    win.setToolbar([flexSpace,image_toolbar,flexSpace]);

    — answered September 14th 2010 by Varun Atluri
    permalink
    1 Comment
    • Nope, didn't work. Didn't even appear, just gave me an error in the console about the width of the toolbar :(

      — commented September 14th 2010 by Colton Arabsky
  • Nope, didn't work. Didn't even appear, just gave me an error in the console about the width of the toolbar :(

    — answered September 14th 2010 by Colton Arabsky
    permalink
    0 Comments
  • Works, thank you very much :) Even though "bottom: -40" still showed a tiny bit of the top of the toolbar (Which, I'm guessing, isn't included in the height and is just added onto whatever you chose, cause Apple is like that) I just did like -80 and it worked. Thank you Tamas! :)

    If anybody has a question like mine, the answer can be found below!

    — answered September 14th 2010 by Colton Arabsky
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.