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.
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?
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 :
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).
I suppose you could use CSS3 transitions with jQuery. See my demo below for details.
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. :-)
Or for something more feature-rich and automated:
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
The Finest Dreamweaver Menus | Galleries | Widgets
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.