How-to

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!

• Understand demo of jQuery Slider
• Current full version demo without jQuery Plugin or UI

Grey out screen is done previous in JavaScript. But jQuery has became so powerful in reducing the number of codes required that makes me wanted to try how well this can be done using it. Personally, i wanted to check out how easy it is to create a grey out screen with a pop out box at the center of the screen. This is purely for the sake of exploring and experiencing how simple can a grey out screen be done in jQuery.

The Objective

The objective of this article is to produce a simple grey out screen effect in jQuery with the minimum amount of code required. Of course, this is just the goal. But let's see how simple and easy this can be done with minimum amount of codes and maximum completeness.

The Requirement

Here are the following requirement for this simple tutorial

• Basic CSS, HTML, jQuery Knowledge
• Read what is written!

Although it is obvious, but usually people tend to skip the second requirement.

The Concept

Let's imagine the body tag (also known as <body>) is the curtain and the box is the person who will appear when the curtain is closed. If the box is in the body when the curtain is closed, we won't be able to see the box!(you will see no person out on the front when the curtain closed). Furthermore, if we grey out the body tag the background of the page will change to black instead of grey which is not what we want. Therefore, the grey out screen should be placed as a standalone curtain just below the body tag (children of <body>). Normally, we will usually assume when the screen is grey out, all the child within the screen will also be grey out and those that are outside are unaffected. Unfortunately, this is not the case. It may surprise you but any element in the screen will be display instead! eg. anchor or hyperlink. Thus, if you want your element to be untouchable after grey out effect, it is best to placed grey out screen as standalone!

The Code

The code will be split into three part, HTML, CSS and jQuery. There will be more explanation than codes since we will want to understand what is going on in the code and the code is suppose to be MINIMUM

HTML

We will need three things in this article. They are 'box', 'screen' and 'button'.

	<input type='button' value='grey out me!' id='button'/>
	
	<div id='box'>
	</div>
	
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	
	<div id='screen'>
	</div>

And finally a lot of break to make the page long enough to detect a problem later on. The elements are describe below,

• box: the pop out box after screen grey out
• button: the button that will initialize screen grey out
• screen: the screen that will cover the whole page grey!

CSS

Well, on the CSS part we will style the 'box' and 'screen' only!

#box
{
	width: 150px;
	height: 150px;
	background: #FFF;
	border: red dotted 5px;
	text-align: center;
	position: absolute;
	margin-left: -75px;
	margin-top: -75px;
	left: 50%;
	top: 50%;
	z-index: 20;
	display: none;
}

#screen
{
	position: absolute;
	left: 0;
	top: 0;
	background: #000;
}

These can be placed in jQuery code instead but since we want it to render faster, placing them in CSS will be a much better option(It really depend on you). Let me explain the 'box' CSS first.

1. Give 'box' a width, height, background color and border so that it is visible on the screen
2. align 'box' to center
3. position it as absolute and make it visible(z-index) even when the screen is grey out
4. margin-left/top,top,left are to align it on the center of the screen (cross browser) but in a fixed way
5. we hide it (the display)

The 'screen' CSS is fairly easy to understand. We have to position it as absolute and align it at the top left hand corner so that it will cover the entire screen!

jQuery

Above section should be quite clear and simple. But, the jQuery code is even easier to understand.

$(function(){
var pop = function(){
	$('#screen').css({ opacity: 0.7, 'width':$(document).width(),'height':$(document).height()});
	$('body').css({'overflow':'hidden'});
	$('#box').css({'display': 'block'});
}
$('#button').click(pop);
});

The above should be quite basic. But the explanation are listed below,

1. 'var pop = function(){..' wait until jQuery is ready!
2. 'var pop = function(){..' create a function name 'pop'
3. '$('#button').click(pop);..' attach an event handler, click onto the button
4. '$('#screen').css({ opacity: 0.7, "w....' function activate we grey out the screen by providing the 'html' or 'page' width and height (instead of box size). This will cover the whole screen.
5. '$('body').css({"overflow":"hidden"});' this is to fix the problem of using a 'fixed' center align CSS declaration
6. '$('#box').css({"display": "block"});' this is to make the box appear!

It is really that easy! But going into grey out mode is simple, how about returning back to normal? Definitely, an extra event handler is required on the 'box' to reverse back the procedure!

$(function(){
var pop = function(){
	$('#screen').css({'display': 'block', opacity: 0.7, 'width':$(document).width(),'height':$(document).height()});
	$('body').css({'overflow':'hidden'});
	$('#box').css({'display': 'block'}).click(function(){$(this).css('display', 'none');$('#screen').css('display', 'none')});
}
$('#button').click(pop);
});

I have just added two things above, can you identify them?

The Demo

The above demo and files can be viewed from the following link.

• Grey-out screen demo
• Grey-out screen files

Wait!

I'm not done (nagging)! If you notice, i made a cheat on top to simplify the overall complexity. And the cheat is 'overflow: hidden' on the jQuery code. But not all browser support this! How about those that doesn't?! This is where i add in additional component so that we do not have to even rely on 'overflow:hidden'!

The Problem And Solution

The problem with the above grey out screen effect was due to the 'box' (the cheat was for 'box' too). remained at the same position when we are scrolling which is a big NO NO. Therefore, we can either make the box to align fixed at the center or move along while the user scroll (persistence box). We have illustrated the cheat for screen grey out effect using jQuery. Now we will do the second one, the persistence box.

The Persistence Box

The answer to persistence box is located at Align center of the screen while scrolling with css What we have to do here is to change the CSS 'box' position: absolute to position: fixed. Of course, we will have to remove the overflow: hidden on the jQuery statement. This will make it chase after your scroller and urge your users to take action on the 'box'. The final CSS code will look like this,

#box
{
	width: 150px;
	height: 150px;
	background: #FFF;
	border: red dotted 5px;
	text-align: center;
	position: fixed;
	margin-left: -75px;
	margin-top: -75px;
	left: 50%;
	top: 50%;
	z-index: 20;
	display: none;
}

And we will remove overflow: hidden in jQuery and the final code will look like this,

$(function(){
var pop = function(){
	$('#screen').css({ opacity: 0.7, 'width':$(document).width(),'height':$(document).height()});
	$('#box').css({'display': 'block'});
}
$('#button').click(pop);
});

This look even shorter than the previous one! Finally, we get a complete screen grey out effect in it simplest form.

Update 25 September 2009****
Matt asked a very good question below, this method will caused the grey out box stuck due to the css being set to 'fixed'. Hence, minimize to maximum in window browser will caused the grey out to stuck at the minimize size. Here is one of the solution you can live with.

$(function(){
var pop = function(){
	$('#screen').css({	"display": "block", opacity: 0.7, "width":$(document).width(),"height":$(document).height()});
	$('#box').css({"display": "block"}).click(function(){$(this).css("display", "none");$('#screen').css("display", "none")});
}
$('#button').click(pop);
$(window).resize(function(){
	$('#box').css("display") == 'block'?pop.call($('#button')):"";
});
});

I added an event handler during resize, check whether the box is displayed and it was displaying during resize we overwrite the pop out box again. The demo page was also updated for this update.

Demo for persistence box

The demo can be viewed on the following link!

• Persistence grey out screen effect