Tutorial: Another way to create your own jQuery Slider. In my previous tutorial on how to create a Slider with jQuery, i illustrated the concept to build up an jQuery Slider easily with a few line of jQuery code and an explanation on how it is being done. But in my previous article, it doesn’t work as perfectly as this one since our objective is to provide an understanding on how it work. In this article, i will bring out the fully workable version of my previous article. Short to say, this article will contains more information on why the previous one doesn’t work as well as what has been found and solved. Requirement Before i start this short article (hopefully) there is some requirement that i wish you could follow before proceeding to read further.
Read the previous tutorial on Slider with jQuery because in this article i won’t repeat much on the concept and how it is being done! The Problem There are a few things i came across when working on a jQuery Slider from my previous article. The Solution The CSS and HTML are perfectly the same! Iphone's safari touchmove event not working. Xavi - Trouble with touch events in jQuery. July 25, 2010 Yesterday I became a proud own of a new 3G iPad and like any good web developer, I decided to upgrade my webapps to be touch enabled. Thanks to a friend's touch presentation, I had a fairly good understanding of what to do.
Basically I needed to bind all my mousedown, mousemove, and mouseup events to their corresponding touch events. (See below) Note: The iPad, iPhone, and iPod also support a set of gesture events. I was able to make most of my apps touch compatible by simply binding to the events listed above and by adding this snippet to the top of my mouse handlers: if(e.touches && e.touches.length) { e = e.touches[0]; } else if(e.changedTouches && e.changedTouches.length) { e = e.changedTouches[0]; } Since users are allowed to touch webpages at several points simultaneously, browsers always return events arrays (via e.touches and e.changedTouches [see reference]) for touch events. However, everything went nutty when I started working on my pictionary app. Tutorial: How to make your own simple and nice slider with jQuery.
Well, this is not new and can be easily found on jQuery UI but you will have to download jQuery UI and use it as if it is a plugin. But for my case, i wanted to find out and construct an easy and nice slider for myself. Many will skip this step and use jQuery UI instead. But when it come to customization for vertical slider, it may come to a good use for developers or even designers to know how this is being made (you can look into the code of a plugin but it will definitely take more time).
The Problem I am currently building a gallery similar to the current Slider Gallery plugin. The Solution I can use the existing jQuery plugin or study them to construct a jQuery slider easily. The Concept Before we go into the actual coding, i like to write a small concept out for myself to understand this in the future. In order to move it accordingly, we will move the variable ‘left’ since the scroller is positioned absolute and use variable ‘top’ if we are moving vertically.
The Code jQuery The Demo.