Skip navigation
jyeager11
jyeager11
Currently Being Moderated

How do I imitate a mobile app's sliding mechanism?

Aug 2, 2012 8:33 AM

Tags: #jquery #css #html5

I don't even need it to respond to click/drag/sliding. My needs are more basic than that.

 

I need to build an app demo that only requires that various divs slide in and out of view. The trigger for the slide can be either a link in the div itself, or a button in the fixed-position, always-present navigation menu positioned on top of it. I'm assuming jQuery would come in handy here, but I don't know enough to make that call.

 

I've Googled and Googled this subject to death, and cannot find this simple functionality (everything I found does more, too much more, for my needs).

 

Thanks to anyone who can lend a hand.

 

PS: I already build the basic architecture, with a fixed-size, overflow-hidden container. I also have the navigation menu perfectly placed, and the various divs that need to slide in and out as well. All I'm missing is the code to make these elements interact with each other.

595 Views   9 Replies   Latest reply: Al Sparber, Aug 2, 2012 12:01 PM
 
Replies
  • MurraySummers
    Currently Being Moderated
    1. MurraySummers,
    Aug 2, 2012 10:17 AM   in reply to jyeager11
    Report

    I guess lots of us are puzzled by what it is you want to do.  A good place to start would be to show us the code you have, and try to explain what you want to happen when the page loads?  Or are you not building the page as a web page but a stand-alone app?

     
    |
    Mark as:
  • jyeager11
    Currently Being Moderated
    2. jyeager11,
    Aug 2, 2012 10:28 AM   in reply to MurraySummers
    Report

    It's all local right now, unfortunately.

     

    Thanks for replying and asking for specification, I'll try to be as clear as I can.

     

    Let's use this as an example :
    http://campl.us/

     

    I am building something similar, except instead of a video in the iPhone, it's going to be a little more interactive. There will be 5 or 6 "pages" in all (meaning, 5 or 6 divs filling up the iPhone viewport). Additionally, there will be a horizontal menu at the bottom of the same iPhone viewport. This menu will have 5 or 6 buttons representing the 5 or 6 divs that need to be shown and hidden.

     

    Clicking button 1 displays div 1. Button 2 hides div 1 and displays div 2. Button 3 hides div 2 and displays div 3. And so on...

     

    There will be no specific order to the revealing. So perhaps "hide all / reveal X" would be the more appropriate language.

     

    Now the hard part : these divs need to slide in from the right to the left to mimic the iPhone app's sliding behavior.

     

    As mentioned, I already have all the elements cut out and in position, including the fixed-position container with overflow:hidden (so the divs that slide out don't slide right off the iPhone image while remaining in view).

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    3. Nancy O.,
    Aug 2, 2012 10:50 AM   in reply to jyeager11
    Report

    I suppose you could use CSS3 transitions with jQuery.   See my demo below for details.

    http://alt-web.com/DEMOS/CSS-Animated-Panels.shtml

     

     

     

    Nancy O.

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    4. MurraySummers,
    Aug 2, 2012 10:51 AM   in reply to jyeager11
    Report

    So, this is a stand-alone app for the iPhone?  If so, I will let someone else take over.  I have no experience in this arena.

     
    |
    Mark as:
  • jyeager11
    Currently Being Moderated
    5. jyeager11,
    Aug 2, 2012 11:01 AM   in reply to MurraySummers
    Report

    No, no... it does not require any iPhone knowledge at all. Forget I mentioned iPhone.

     

    ______
    |            |
    |     A     |
    |            |
    -----------
    |     B     |
    -----------

     

    A = One of 6 divs.
    B = Static menu with 6 buttons.

     

    Div 1 is default div.
    Clicking Button 2 slides Div 1 out of view to the left, while sliding Div 2 in from the right.

     

    That's all! That's all I'm trying to do. :-)

     
    |
    Mark as:
  • Al Sparber
    Currently Being Moderated
    6. Al Sparber,
    Aug 2, 2012 11:27 AM   in reply to Nancy O.
    Report

    Or for something more feature-rich and automated:

    http://www.projectseven.com/products/tools/tpm2/demos/letterbox.htm

     

    By the way, I could not tell at first that your jQuery widget was

    working as the triggers were returning true and the page scrolling down.

     

    Or perhaps the original poster was looking for something like "iSwipe"?

    It is very difficult to deploy in a usable and accessible way, but that

    might be what he is looking for.

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    7. Nancy O.,
    Aug 2, 2012 11:32 AM   in reply to Al Sparber
    Report
    By the way, I could not tell at first that your jQuery widget was

    working as the triggers were returning true and the page scrolling down.

     

    Which browser, Al?

     

    N

     
    |
    Mark as:
  • jyeager11
    Currently Being Moderated
    8. jyeager11,
    Aug 2, 2012 11:34 AM   in reply to Al Sparber
    Report

    That is very close to what I'm looking for, except that the way you currently have it, when jumping from page 1 to page 3, you must slide over page 2 (because all your divs are lined up sequentially). Ideally, if I'm on Page 1 and click Page 3, then Page 3 would slide in immediately (with no glimpse whatsoever of Page 2).

     

    The $100 price tag is also a bit hefty since I don't need any of the other added functionality, just the sliding.

     
    |
    Mark as:
  • Al Sparber
    Currently Being Moderated
    9. Al Sparber,
    Aug 2, 2012 12:01 PM   in reply to Nancy O.
    Report

    IE9

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    Dreamweaver Menus | Galleries | Widgets

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points