CODEWITHSUNDEEP
jqueryiphonecssnavigationweb-applications
nalas
nalas

Reputation: 85

Implementing an iPhone-like content slider in a wep-app

Im building a web-app for smartphones. In my app I want to give the user an iOS-like-experience. I want my interface to function similar to iOS. I'm mainly thinking about the navigation here. I want my app to slides from left to right and showing dynamic content depending on which link the user clicked. Here is a video showing navigation the way I want it:

http://www.youtube.com/watch?v=KTcISVU4Nf4&feature=player_detailpage#t=2s

From what I've found this is accomplished by using CSS3 and JQuery. It's built-in in some frameworks e.g http://www.jqtouch.com/. But I find that frameworks interface to function a bit too heavy and sluggish, it doesn't give the user a smooth experience. And I've also encountered a few bugs while testing it. That's why I've excluded JQtouch as an alternative.

So what I'm asking for is advice on how to implement a sliding navigation while keeping the app neat, smooth and lightweight. Which is the best way to go? Is it possible to make with pure CSS? How? Any sample code that could help me in any way is greatly appriciated.

Upvotes: 0

Views: 2327

Answers (2)

Kane Cohen
Kane Cohen

Reputation: 1800

Let's see. jQuery touch accomplishes their functionality by using translate animation on their slides.

Very simple example (works only in webkit browser - Safari/Chrome): http://jsfiddle.net/2USAR/8/

Code explanation.

JS

In jQuery side when use clicks on a slide javascript assigns new class to several elements.

First, we assign class animate to parent holder of a slides. That class triggers css that contains details related to how we are going to animate slides.

Then we assign class "slideLeftOut" and "slideLeftIn" to #first and #second divs respectively.

These classes in css hold details on what keyframe animation to call.

And at the end of our JS there is a setTimeout which will remove classes ("animate" in our case) after animation is finished.

CSS

Most of the stuff is self explanatory. Just keep in mind ".animate" css and look at how keyframe animations are structured.

In keyframe animation we use webkit translate to move element to the left.

Upvotes: 1

Symeon Breen
Symeon Breen

Reputation: 1541

The reason frameworks are popular for this is because they take the leg work out of producing the javascript and css that will work on all smartphones.

An alternative to jqtouch could be sencha touch or jquery mobile

If I was to do this i would take a look at the source of these frameworks and see how they work and have a play with some snippets of that code. That would give you a good understanding of how the scrolling etc works with touch events. They use touchstart and touchend events to track the touch location - so look into these. Unfortunately it is mainly javascript for the functionality.

Upvotes: 3

Related Questions