Tutorial: How to make your own simple and nice Slider with jQuery Part 2

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.

  1. 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!
  2. Have basic knowledge of HTML, jQuery and CSS
  3. Wish to construct a workable jQuery Slider on your own instead of just understanding how it work

The Problem

There are a few things i came across when working on a jQuery Slider from my previous article.

  1. The scroller doesn't stop when the user mouse up sometimes
  2. jQuery doesn't support sequence event trigger: means it cannot prioritize which event should trigger when an element has multiple events
  3. The mouse will always pull to the starting line of the scroller

This is as far as i remember for what happen between the current and the later version differences. Although both work quite well.

The Solution

The CSS and HTML are perfectly the same! The only differences occurred on the jQuery codes and below listed what has been done to eliminate the above issues and the final code in jQuery.

  1. The mouseup event handler was embedded within mousemove event handler. This means that mousemove must first initialize before mouseup will be triggered which is not always the case. Thus, the two event handler were seperated.
  2. Since jQuery doesn't support priority event triggering, i used a boolean variable to stop the movement and wait for mousedown event to complete before it can start the other instruction within the mousemove event. This will solve the problem where mousemove initialize first before the distance between the scroller and starting point being calculated in mousedown event.
  3. The reason why it always pull to the starting line was because it was instructed to do so. I did not calculate the disance between the scroller and starting point which is required to tell the program to start at any point occurs within the scroll bar!

The above explanation might not help you understand a single bit at all! But the below code will definitely assist you in relating the explanation above.

$(function(){
	var myoffset = $('#scroller').offset();
	var myxpos = parseInt(myoffset.left); 
	var width = parseInt($('#scrollbar').css('width')) - 196;
	var action = false;
	var startpos = 0;
	var move = 0;
	var scroller = 0;
	
	$().mousemove(function(e){
		move = parseInt(e.pageX-myxpos);
		$('#scroller').mousedown(function(){	
			action = true;
			scroller = parseInt($('#scroller').offset().left);
			startpos = move - (scroller - myxpos);
		})
		if(action)
		{
			move = move - startpos;
			if(move < = 0)
				move =0;
			if(move >= width)
				move = width;
			if(action)
				$('#scroller').css('left', (move)+'px');
		}
	})
		$('*').mouseup(function(){
			action = false;
		});

});

Let's see how do i explain this. Let's do it in point form similar to the problem we have.

  1. Notice '$('*').mouseup(function(){...' was placed outside instead
  2. Notice 'if(action)......' was there to stop all instruction from initializing before '$('#scroller').mousedown(function(){..' completed'
  3. Notice '$('#scroller').mousedown(function(){ ....' contains variables 'scroller' and 'startpos'

I think this will clear out what my messy explanation has just caused. After these three has placed up, you will have a full and nice version of jQuery Slider from my previous article.

The Demo

It will be pretty confusing whether there is really a full version of jQuery Slider without using a jQuery Plugin. Thus, i have prepare two demo for you. The first one is the understanding demo and the other one is the current full version demo!

No related posts.