Simon Battersby

I wanted a simple jQuery crossfade effect for an image cycler last week, and surprisingly couldn’t find anything suitable. So I ended up writing my own, and here it is. Tested in IE6/7/8, Firefox 3, Chrome, Opera 9/10, Safari 4, all on Windows XP, IE8/9, Firefox, Chrome and Safari 5 on Win 7, Safari 5 on Mac OS X/Snow Leopard, and Android Browser and Dolphin on Android.

The demo

This basic demo page will show you exactly what’s needed.

The code

You need the following basic html:

<div id="cycler">
<img class="active" src="image1.jpg" alt="My image" />
<img src="image2.jpg" alt="My image" />	
<img src="image3.jpg" alt="My image" />	
<img src="image4.jpg" alt="My image" />		
</div>

Here’s the necessary css – just to show the z-index and positioning – you’ll need to add some more to position as required. Depending on your layout you may also need to set the height and width on #cycler to match your images:

#cycler{position:relative;}
#cycler img{position:absolute;z-index:1}
#cycler img.active{z-index:3}

And here’s the javascript:

function cycleImages(){
      var $active = $('#cycler .active');
      var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
      $next.css('z-index',2);//move the next image up the pile
      $active.fadeOut(1500,function(){//fade out the top image
	  $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
          $next.css('z-index',3).addClass('active');//make the next image the top one
      });
    }

$(document).ready(function(){
// run every 7s
setInterval('cycleImages()', 7000);
})

The logic

All the images are loaded with the page and positioned absolutely on top of each other, all with z-index=1. One image is initially set with a class of “active”, which is positioned on the top of the stack with z-index = 3.

Then, using jQuery, I’m identifying the active image, and then the next image down. I’m doing this via the jQuery .next() method. If there isn’t a next image – if we’re at the end of the images – I’m selecting the first image instead using .first().

Now, once I’ve identified the next image, I’m assigning z-index=2 to this so it’s the second image down in the pile – and hence is visible when the top image fades out.

Then, I’m fading out the active image. When this completes there’s a few things to do. First, I’m setting the z-index of the active image (now faded out) back to z-index=1. Then, I’m reversing the fade by using the show() method. It won’t be visible now because of the z-index. Finally, I’m removing the active class. Effectively, I’m putting this image back into the bottom pile.

Nearly there. Then, with the next image, which is now on top anyway, I’m assigning z-index=3, and then adding the active class to this image.

Finally, all of this code is sitting in a function which I’m calling every seven seconds via setInterval().

Responsive version

Making this responsive (without media queries, which is what this page uses) is pretty striaghtforward. The trick is to use a ‘base’ image which is not absolutely positioned to set the dimensions of the cycler and then apply a max-width to #cycler. The base image is then cloned and the cloned version is faded in and out. Have a look at the responsive demo here.

Help! It doesn’t work

If you hit problems, start off by looking at my beginners’ guide to debugging jquery. Most of the problems encountered by users are listed here.

Can I use this on my site?

Probably. See my policies on using code from this site.

Variations on the basic crossfade

Here are a few variations, mostly built in response to questions or comments on the basic code. View the source to see how they’re done.

Cycle through images once and then stop

Multiple cyclers on a page (with a common periodicity)

Multiple cyclers on a page (with different periodicity)

Multiple cyclers with slideshow controls

Cycler with variable timings

Cycle divs instead of images

Superimpose text on the cycler

Cycler with fadeout transition

Crossfade images, no slideshow

Gallery with thumbnails

This article was originally written in 2011 in response to queries about a plugin hosted on the jQuery site, originally written by Raymond Julin. The plugin has subsequently been removed from jQuery and the source code has not been updated since 2010. This article provides an explanation on its usage, and has applied a number of fixes to the original code.

Let’s start with the form – I’m using php to retrieve data from a database and display it in a form for editing. To make the demo worthwhile I’ve added various input elements:

<form action="autosave7.php" method="post">
<fieldset>
<label for="name">Name:<input type="text" name="name" id="name" value="<?php echo $row['name'] ?>"/></label>
<label for="email">Email:<input type="text" name="email" id="email" value="<?php echo $row['email'] ?>" /></label>
<label for="textboxarea">Text:<textarea id="textboxarea" name="textboxarea" rows="2" cols="20"><?php echo $row['textarea'] ?></textarea></label>
<label for="selectfield">Select:<select id="selectfield" name="selectfield">
<option>Option 1</option>
<option>Option 2</option>
</select></label>
<label for="radio1">Radio 1:<input type="radio" name="radios" id="radio1" value="radio1" <?php if ($row['radio']=="radio1") echo "checked='checked'"; ?> /></label>
<label for="radio2">Radio 2:<input type="radio" name="radios" id="radio2" value="radio2" <?php if ($row['radio']=="radio2") echo "checked='checked'"; ?> /></label>
<label for="checkvalue">Check with value attribute:<input type="checkbox" name="checkvalue" id="checkvalue" value="sbtest" <?php if ($row['checkboxvalue'] ) echo "checked='checked'"; ?>/></label>
<label for="check">Check with no value attribute:<input type="checkbox" name="check" id="check" <?php if ($row['checkbox']==1 || $row['checkbox']=='on') echo "checked='checked'"; ?>/></label>
<input type="hidden" name="id" value="<?php echo $row['id'] ?>" />
<input type="submit" value="Save changes" />
</fieldset>
</form>
<p id="message"></p>

I’m including an empty element for the message, just to keep the javascript simple – a more sophisticated solution would append this when required. Now, to add the autosave functionality I need to include this javascript:

$("input,select,textarea").autosave({
			url: "autosave7.php",//set the php file that updates the database
			method: "post",
			grouped: true,//send data for all fields with the autosave
    		       success: function(data) {//on a successful update...
        		$("#message").html("Data updated successfully").show();//...show a message...
				setTimeout('fadeMessage()',1500);//...and then fade it out after an interval
    		},
			send: function(){//on a save...
        		$("#message").html("Sending data....");//..show a message
			},
    		dataType: "html"
		});		
	
       function fadeMessage(){
		$('#message').fadeOut('slow');//just a function to fade out the message
	}

All this just leaves the php to update the database, which is:

if ($_POST['checkvalue']!='false') $checkvalue = $_POST['checkvalue']; 
else $checkvalue = 0;//checkbox with a value attribute
if ($_POST['check']=="true" || $_POST['check']=="on" || $_POST['check']=="checked"  ) $check = 1; 
else $check = 0;//and one without

$qstring="UPDATE test_autosave SET name = '".$_POST["name"]."' ,";
$qstring .= " email = '".$_POST["email"]."',";
$qstring .= " textarea = '".$_POST["textboxarea"]."',";
$qstring .= " selectfield = '".$_POST["selectfield"]."',";
$qstring .= " checkbox = ".$check.",";
$qstring .= " radio = '".$_POST["radios"]."',";
$qstring .= " checkbox = '".$check."',";
$qstring .= " checkboxvalue = '".$checkvalue."'";
$qstring .= " WHERE id =".$_POST['id']."";

mysql_query($qstring);

Because jQuery 1.6 changed the way form elements are posted by the autosave plugins, the autosave plugin itself will not work correctly with this and later versions of jQuery where radio buttons are used. A small change is needed to the plugin to cope with this – you can download the amended version here: jQuery autosave plugin

Inevitably, there’s a working demo here – just to make it more obvious the demo includes a snapshot of the database itself to show the updates.

A few people have asked for copies of the php files used in the demo – so here they are as text files:

• Demo page code: autosave_demo5.php
• Database update code: autosave7.php
• Code that updates the page via ajax: autosave6.php

Updated 07/05/2014 to cope with value attributes on checkbox fields

I had a question last week about whether my crossfade cycler could instead cycle a background image. Now, cycling the background image on an element I think would be very messy indeed, among other reasons because only one background image is widely supported.

However, by setting up a div to act as a background, and cycling the images within that div, I found the effect of cycling the background can be achieved quite simply. The code is virtually the same as the crossfade cycler.

I’m hiding the background div as soon as it’s created, and then fading it back in once all the images are loaded to avoid any jerky transitions. If the user has javascript disabled then just the initial image is displayed as a background – which is a “graceful degradation” I think.

I started my html by including the background div:

<body>

<div id="background_cycler" >

<script type="text/javascript">
$('#background_cycler').hide();//hide the background while the images load, ready to fade in later
</script>

<img class="active" src="/images/misc/backgrounds/background_1.jpg" alt=""/>
<img src="/images/misc/backgrounds/background_2.jpg" alt=""   />
<img src="/images/misc/backgrounds/background_3.jpg" alt=""  />
<img src="/images/misc/backgrounds/background_4.jpg" alt=""/>		
<img src="/images/misc/backgrounds/background_5.jpg" alt=""  />
</div>

rest of html...

Here’s the required css:

#background_cycler{padding:0;margin:0;width:100%;position:absolute;top:0;left:0;z-index:-1}
#background_cycler img{position:absolute;left:0;top:0;width:100%;z-index:1}
#background_cycler img.active{z-index:3}

Setting width:100% for the background div ensures it’ll take up the width of the page – but you could position it differently if needed. Here’s the javascript:

function cycleImages(){
      var $active = $('#background_cycler .active');
      var $next = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler img:first');
      $next.css('z-index',2);//move the next image up the pile
	  $active.fadeOut(1500,function(){//fade out the top image
	  $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
      $next.css('z-index',3).addClass('active');//make the next image the top one
      });
    }

    $(window).load(function(){
		$('#background_cycler').fadeIn(1500);//fade the background back in once all the images are loaded
		  // run every 7s
		  setInterval('cycleImages()', 7000);
    })

And that’s it really – you can see a demo here. I’ve tested in IE6, IE7, IE8, FF3, Safari 5, Opera 11 and Chrome, all on Windows 7.

How do I make this work on a responsive design?

This is fairly straightforward. If we set the images as div background, and then cycle the divs, we can use background-size:cover to ensure the image fits as best as possible. This works fine in IE9+. Have a look at this demo to see it working.

Can I use this on my site?

Probably. See my policies on using code from this site.

Also available as a jQuery plugin.

Here’s my attempt at using jQuery UI Slider as a vertical scrollbar. I began this in 2010 by adapting the code on the jQuery UI site for a horizontal slider. This worked, but seemed unnecessarily complex, so I had another go, starting from the vertical slider code. Since then I’ve had numerous requests for different variations on the basic scrollbar, and these are all now incorporated into a single piece of code.

The code assumes a div with fixed height (#scroll-pane or .scroll-pane in my examples) which contains the content for scrolling. The script wraps the contents of the div to be scrolled in another div (.scroll-content) which is used positioned absolutely, and then the top value of #scroll-content is changed via the slider to make the content scroll up and down. The scrollbar itself is positioned within #scroll-pane, using absolute positioning on the right hand side, but it can go anywhere you like.

There’s a fundamental aspect of the way the vertical slider works which took me a little time to get my head round, and that’s that the slider as a default starts from zero at the bottom and increases upwards – which is the wrong way round for a vertical scroller, hence the need for a bit of extra calculation.

So, here’s the css:

#scroll-pane,.scroll-pane{position:relative}
.scroll-content {position:absolute;top:0;left:0}
.slider-wrap{position:absolute;right:0;top:0;background-color:lightgrey;width:20px;border-left:1px solid gray;}
.slider-vertical{position:relative;height:100%}
.ui-slider-handle{width:20px;height:10px;margin:0 auto;background-color:darkgray;display:block;position:absolute}
.ui-slider-handle img{border:none}
.scrollbar-top{position:absolute;top:0;}
.scrollbar-bottom{position:absolute;bottom:0;}
.scrollbar-grip{position:absolute;top:50%;margin-top:-6px;}
.ui-slider-range{position:absolute;width:100%;background-color:lightgrey}

and here’s the javascript. For convenience I’ve wrapped all the code needed for all the different variations below into one function called setSlider().

function setSlider($scrollpane){//$scrollpane is the div to be scrolled
	
	//set options for handle image - amend this to true or false as required
	var handleImage = false;
	
	//change the main div to overflow-hidden as we can use the slider now
	$scrollpane.css('overflow','hidden');
	
	//if it's not already there, wrap an extra div around the scrollpane so we can use the mousewheel later
	if ($scrollpane.parent('.scroll-container').length==0) $scrollpane.wrap('<\div class="scroll-container"> /');
	//and again, if it's not there, wrap a div around the contents of the scrollpane to allow the scrolling
	if ($scrollpane.find('.scroll-content').length==0) $scrollpane.children().wrapAll('<\div class="scroll-content"> /');
	
	//compare the height of the scroll content to the scroll pane to see if we need a scrollbar
	var difference = $scrollpane.find('.scroll-content').height()-$scrollpane.height();//eg it's 200px longer 
	$scrollpane.data('difference',difference); 
	
	if(difference<=0 && $scrollpane.find('.slider-wrap').length>0)//scrollbar exists but is no longer required
	{
		$scrollpane.find('.slider-wrap').remove();//remove the scrollbar
		$scrollpane.find('.scroll-content').css({top:0});//and reset the top position
	}
	
	if(difference>0)//if the scrollbar is needed, set it up...
	{
		var proportion = difference / $scrollpane.find('.scroll-content').height();//eg 200px/500px
		
		var handleHeight = Math.round((1-proportion)*$scrollpane.height());//set the proportional height - round it to make sure everything adds up correctly later on
		handleHeight -= handleHeight%2; 
		
		//if the slider has already been set up and this function is called again, we may need to set the position of the slider handle
		var contentposition = $scrollpane.find('.scroll-content').position();	
		var sliderInitial = 100*(1-Math.abs(contentposition.top)/difference);
		
		if($scrollpane.find('.slider-wrap').length==0)//if the slider-wrap doesn't exist, insert it and set the initial value
		{
			$scrollpane.append('<\div class="slider-wrap"><\div class="slider-vertical"><\/div><\/div>');//append the necessary divs so they're only there if needed
                        sliderInitial = 100;
		}
		
		$scrollpane.find('.slider-wrap').height($scrollpane.height());//set the height of the slider bar to that of the scroll pane
		
		//set up the slider 
		$scrollpane.find('.slider-vertical').slider({
			orientation: 'vertical',
			min: 0,
			max: 100,
			range:'min',
			value: sliderInitial,
			slide: function(event, ui) {
				var topValue = -((100-ui.value)*difference/100);
				$scrollpane.find('.scroll-content').css({top:topValue});//move the top up (negative value) by the percentage the slider has been moved times the difference in height
				$('ui-slider-range').height(ui.value+'%');//set the height of the range element
			},
			change: function(event, ui) {
				var topValue = -((100-ui.value)*($scrollpane.find('.scroll-content').height()-$scrollpane.height())/100);//recalculate the difference on change
				$scrollpane.find('.scroll-content').css({top:topValue});//move the top up (negative value) by the percentage the slider has been moved times the difference in height
				$('ui-slider-range').height(ui.value+'%');
		  }	  
		});
		
		//set the handle height and bottom margin so the middle of the handle is in line with the slider
		$scrollpane.find(".ui-slider-handle").css({height:handleHeight,'margin-bottom':-0.5*handleHeight});
		var origSliderHeight = $scrollpane.height();//read the original slider height
		var sliderHeight = origSliderHeight - handleHeight ;//the height through which the handle can move needs to be the original height minus the handle height
		var sliderMargin =  (origSliderHeight - sliderHeight)*0.5;//so the slider needs to have both top and bottom margins equal to half the difference
		$scrollpane.find(".ui-slider").css({height:sliderHeight,'margin-top':sliderMargin});//set the slider height and margins
		$scrollpane.find(".ui-slider-range").css({bottom:-sliderMargin});//position the slider-range div at the top of the slider container
		
		//if required create elements to hold the images for the scrollbar handle
		if (handleImage){
			$(".ui-slider-handle").append('<img class="scrollbar-top" src="/images/misc/scrollbar-handle-top.png"/>');
			$(".ui-slider-handle").append('<img class="scrollbar-bottom" src="/images/misc/scrollbar-handle-bottom.png"/>');
			$(".ui-slider-handle").append('<img class="scrollbar-grip" src="/images/misc/scrollbar-handle-grip.png"/>');
		}
	}//end if
		 
	//code for clicks on the scrollbar outside the slider
	$(".ui-slider").click(function(event){//stop any clicks on the slider propagating through to the code below
		event.stopPropagation();
	});
	   
	$(".slider-wrap").click(function(event){//clicks on the wrap outside the slider range
		var offsetTop = $(this).offset().top;//read the offset of the scroll pane
		var clickValue = (event.pageY-offsetTop)*100/$(this).height();//find the click point, subtract the offset, and calculate percentage of the slider clicked
		$(this).find(".slider-vertical").slider("value", 100-clickValue);//set the new value of the slider
	}); 
	
		 
	//additional code for mousewheel
	if($.fn.mousewheel){		
	
		$scrollpane.parent().unmousewheel();//remove any previously attached mousewheel events
		$scrollpane.parent().mousewheel(function(event, delta){
			
			var speed = Math.round(5000/$scrollpane.data('difference'));
			if (speed <1) speed = 1;
			if (speed >100) speed = 100;
	
			var sliderVal = $(this).find(".slider-vertical").slider("value");//read current value of the slider
			
			sliderVal += (delta*speed);//increment the current value
	 
			$(this).find(".slider-vertical").slider("value", sliderVal);//and set the new value of the slider
			
			event.preventDefault();//stop any default behaviour
		});
		
	}
	
}

I’ve tested this on: IE6, IE7, IE8, FF3.6, Safari 4, Chrome and Opera9/10/11 on Win/XP; IE8, IE9, FF9/10, Opera 11, Safari 5 and Chrome on W7; FF7, Epiphany and Chromium on Ubuntu; and Safari 5 on Mac OS X/Snow Leopard. See the demos below for various applications and uses.

Can I use this on my site?

Probably. See my policies on using code from this site.

Please don’t link directly to the javascript on my site. Due to the number of hits on my bandwidth because people were doing this I’ve had to deny direct access to javascript files. Use a CDN like Google’s instead.

Touch screens: As it stands, this will not work with touch screens as jQuery UI does not itself support touch events. I have done only limited testing, but TouchPunch seems to work on an iPad and iPhone, but not on earlier Android devices. See here for some limited testing results – please let me know of anything you have to add to this.

Help! It doesn’t work

If you hit problems, start off by looking at my beginners’ guide to debugging jquery. Most of the problems encountered by users are listed here.

setSlider($('#myElement'));

$('.myElementClass').each(function(){
	setSlider($(this));
});

setSlider($('#myElement'));

function changeContent{//do whatever you want....
...code to change content....
setSlider($('#myElement'));//call the function again to reset the slider for the new content
}

setSlider($('#myElement'));

$(window).resize(function() {
	setSlider($('#myElement'));
});

$('#myElement').show();//or whatever you want, then...
setSlider($('#myElement'));//...call the function again to reset the slider for the new content
}
});

setSlider($('#myElement'));

//code to set an initial scrolled position
var position = $("#targetElement").position();//find the position of the required item
var topValue = position.top;//extract the top value
var sliderValue = 100-(100*topValue/($(".scroll-content").height()-$("#scroll-pane").height()));//calculate the percentage of the top of the required item
$(".slider-vertical").slider("value", sliderValue);//and set the new value of the slider

setSlider($('#myElement'));
//autocomplete
var difference = $(".scroll-content").height()-$("myElement").height(); 
$("#quickfind").autocomplete({
	source: "get_descriptions.php",
	minLength: 2,//search after two characters
	select: function(event,ui){
		position = $(".scroll-content-item:contains("+ui.item.value+")").position();//search for a div containing the selected description and read its position
		
		var topValue = -(position.top);//content top is just the negative of the top position
		
		if (topValue>0) topValue = 0;//stop the content scrolling down too much
		if (Math.abs(topValue)>difference) topValue = (-1)*difference;//stop the content scrolling up too much
	
		sliderVal = (100+(topValue*100/difference));//calculate the slider position from the content position
		$(".slider-vertical").slider("value", sliderVal);//set the slider position
		}
});

setSlider($('#myElement'));

var scrollId = setInterval('scrollDown()', 60);// start the autoscroll via a function

$(".ui-slider-handle").mouseover(function(){//stop the autoscroll if the handle is hovered
    clearInterval(scrollId);
});

function scrollDown(){
	if ($(".slider-vertical").slider("value")>0){//if it's not at the bottom, scroll down
		$(".slider-vertical").slider("value",$(".slider-vertical").slider("value")-1);
	}
}

setSlider($('#myElement'));

$('#arrow_up').mousedown(function(event) {
	if(event.preventDefault) event.preventDefault();
    intervalId = setInterval('scrollUp()', 30);
	$(this).bind('mouseup mouseleave', function() {
		clearInterval(intervalId);
	});
});
$('#arrow_down').mousedown(function(event) {
	if(event.preventDefault) event.preventDefault();
    intervalId = setInterval('scrollDown()', 30);
	$(this).bind('mouseup mouseleave', function() {
		clearInterval(intervalId);
	});
});

function scrollUp(){
	if ($(".slider-vertical").slider("value")<100){//if it's not at the top, scroll up
		$(".slider-vertical").slider("value",$(".slider-vertical").slider("value")+1);
	}
}
function scrollDown(){
	if ($(".slider-vertical").slider("value")>0){//if it's not at the bottom, scroll down
		$(".slider-vertical").slider("value",$(".slider-vertical").slider("value")-1);
	}
}

setSlider($('#scroll-pane'));

$('#anchors a').click(function(){

	var difference = $('.scroll-content').height()-$('#scroll-pane').height();//calculate the difference - not needed if within the main slider code
	
	var targetclass = ($(this).attr('class'));//read the class of the clicked anchor
    
	var position = $(".scroll-content ."+targetclass).position();//search for a div with matching class and read its position
    var topValue = -(position.top);//content top is just the negative of the top position
		
	if (topValue>0) topValue = 0;//stop the content scrolling down too much
	if (Math.abs(topValue)>difference) topValue = (-1)*difference;//stop the content scrolling up too much

	sliderVal = (100+(topValue*100/difference));//calculate the slider position from the content position
	$(".slider-vertical").slider("value", sliderVal);//set the slider position
	
	return false;
});

   //set up the slider 
   $scrollpane.find('.slider-vertical').slider({
      orientation: 'vertical',
      min: 0,
      max: 100,
	  range:'min',
      value: sliderInitial,
      change: function(event, ui) {
			 var topValue = -((100-ui.value)*difference/100);
			 $scrollpane.find('.scroll-content').animate({top:topValue},animateSpeed,easingMethod);//move the top up (negative value) by the percentage the slider has been moved times the difference in height
			 $('ui-slider-range').height(ui.value+'%');
	  }	  
   });

setSlider($('#myElement'));
$('.item').draggable({appendTo:'body',helper:'clone'});
$('#droppable').droppable({
	drop:function(event,ui){
		$( this ).find( "#placeholder" ).remove();
		var description = ui.draggable.find('p').text();
		$( "<\li><\/li>" ).text(description).appendTo( $('#droppable ul') );
	}
});

setSlider($('#myElement'));
$(".slider-wrap").hide();
$("#myElement").hover(function(){
	$(".slider-wrap").show();
	},
	function(){
	$(".slider-wrap").hide();
});

setSlider($('#myElement'));

function setSlider($scrollpane){//$scrollpane is the div to be scrolled
	
	//set options for handle image - amend this to true or false as required
	var handleImage = true;
         
        ...

	if (handleImage){//change the image paths as required for your images - delete any that are not required if you want
		$(".ui-slider-handle").append('<img class="scrollbar-top" src="/images/misc/scrollbar-handle-top.png"/>');			
                $(".ui-slider-handle").append('<img class="scrollbar-bottom" src="/images/misc/scrollbar-handle-bottom.png"/>');
		$(".ui-slider-handle").append('<img class="scrollbar-grip" src="/images/misc/scrollbar-handle-grip.png"/>');
	}

        ...

.ui-slider-handle{background:transparent url(/images/misc/scrollbar-handle-middle.png) repeat-y top left;}

.slider-wrap{background-color:#EA9531;}

.ui-slider-range{position:absolute;width:100%}

//position the slider range div at the top of the slider wrap - this ensures clicks above the area through which the handle moves are OK
$(".ui-slider-range").css({top:-sliderMargin});

//add a click function to ensure clicks below the area through which the handle moves are OK
$("#slider-wrap").click(function(){//this means the bottom of the slider beyond the slider range is clicked, so move the slider right down
   $("#slider-vertical").slider("value", 0);
   $('#scroll-content').css({top:-difference});   
})

$("document").mousewheel(function(event, delta){

     var speed = 5;//set the speed of the scroll
     var sliderVal = $("#slider-vertical").slider("value");//read current value of the slider
		
     sliderVal += (delta*speed);//increment the current value
 
     $("#slider-vertical").slider("value", sliderVal);//and set the new value of the slider
		
     var topValue = -((100-sliderVal)*difference/100);//calculate the content top from the slider position
		
     if (topValue>0) topValue = 0;//stop the content scrolling down too much
     if (Math.abs(topValue)>difference) topValue = (-1)*difference;//stop the content scrolling up too much
		
     $("#scroll-content").css({top:topValue});//move the content to the new position

     event.preventDefault();//stop any default behaviour

});

$("#scroll-pane,#slider-wrap").mousewheel(function(event, delta){...etc

I get quite a lot of questions from users of this site who are trying to implement some jQuery on their pages, and encountering problems in doing so. I’ll start off by listing the things to check first, and then explain how you to use the browser console to help you. If you’re already seeing error messages in your console, start here.

Nothing happens/jQuery doesn’t work – help!

Go through this checklist in order to rule out the most likely issues:

• Have you included jQuery on your page?

  You need to include a link to jQuery on your page. This is normally (but doesn’t have to be) included in the document head, and will look something like this:

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

  If you don’t include jQuery, nothing will work.

• Have you included jQuery just the once

  Check you’ve only got jQuery loaded once. It’s not uncommon to see it loaded more than once, particularly if you’re trying to use a couple of different plugins. Multiple versions usually, but not always, cause everything to fail.

• Are you calling the scripts in the right order?

  You need to call scripts (as in load them on your page) in the order that you need them. This should be: jQuery, jQuery UI (if you’re using it), and then any code that needs jQuery. If a script that needs jQuery runs before jQuery is loaded, it won’t work.

• Does your page use .noConflict()

  Err, what….? You’ll probably be aware that jQuery uses the dollar sign as a shorthand – you’ll have seen code like this:

  $('#myselector').fadeOut('slow');

  Now, it’s possible to disable the use of the $ shorthand by using .noConflict(). This is done in case other javascript libraries need to use the $ variable themselves. WordPress applies .noConflict() by default. The result will probably manifest in the same way as not loading jQuery. To fix this, you’ll need to amend your code to look like this throughout:

  jQuery('#myselector').fadeOut('slow');

  Check out the .noConflict documentation for more information on how to use, and work around this.

• Are you using another javascript library as well as jQuery?

  If you are, the first thing to consider is ‘Why?’. It’s not impossible to do, but you’ll be making things more complex than they need to be, and life harder for yourself. You’ll need to look at .noConflict again.

• Is your code correct?

  If you’ve mistyped your code or otherwise made an error, then that can cause all the javascript on your page to stop working. If this is the cause, then it’ll usually show as a console error – see below.

• Is anything else interfering with your code?

  Sometimes, if you have multiple plugins loaded, either in WordPress, or just lots of scripts loaded, they interfere with each other. If this is a possibility, remove the other scripts and see if that solves your problem. If it does, add scripts back one by one until you isolate the cause.

• It’s none of these….

  Well, at least you’ve ruled out the obvious things. If you’ve got this far, you need to look more closely at your code, see if there are any error messages generated (see below), and take it from there.

Accessing the browser console

Most browsers have a helpful console where any javascript error messages are displayed. These can often give a clue to the problem. Accessing the console varies from browser to browser.

• Firefox: If you’re using Firebug click the icon to launch Firebug and access the Console tab. You’ll need to load the page after launching Firebug.
• IE9: Access Developer tools via F12, and then click the Console menu item. You’ll need to reload the page after launching tools.
• Chrome: Developer tools are Ctrl+Shift+I, then Console tab.
• Safari: Develop > Start Debugging Javascript
• Opera: Ctrl+Shift+I to launch Dragonfly, then the Scripts tab (not the Console tab)

Console errors in 15 seconds

Any of the first four issues in the checklist at the top of the page will generate this (or a very similar) error ($ is not defined) – for example (from Chrome):

If your javascript/jQuery has a syntax error, then the console will tell you where it is, and what it thinks is wrong. For example (from Firebug):

It’s obviously not feasible to list every possible console error here. If you see something in the console that doesn’t make sense to you, the best bet is to copy the message and Google it. Here’s some more information on using the console to debug.