Creating a Javascript Content Slider with jQuery

Paul Chater — Wed, 24 Jun 2009 08:15:24 +0000

So, earlier today in the CodrEu Chat Session I was sorting out my project iTask and also showing @PhilSturgeon my jQuery Content Slider on http://pchater.servehttp.com (the default). Anyway, I’ve been pondering for days on what to do my first Codr Screencast on and this is it!

The Video

Part One

Part Two

The Code / Explaination

index.php – The Code


	
		jQueryness

		
		


	

jQueryness

			
			
				box1 |
				box2 |
				box3
			
			

				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel massa massa, sit amet laoreet elit. Praesent porttitor pharetra dui,
				quis fringilla justo luctus ac. Duis convallis, dui non facilisis mollis, ipsum diam sodales nisl, vel tincidunt ipsum augue vel lacus.
				Fusce a urna eu lectus mattis placerat. Vestibulum eget urna quis sem rhoncus blandit in vel massa. Nullam in tortor eget sem rhoncus
				consequat vel nec metus. Maecenas vehicula, diam vitae dictum blandit, ante mauris faucibus orci, id ornare erat ligula ac arcu. Nulla
				facilisi. Suspendisse imperdiet feugiat eros, porta lacinia nibh consectetur at. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Suspendisse et felis lorem. Praesent vitae nulla risus, eu rhoncus quam.
			

				Praesent eget nisl sed sem cursus semper. Donec ut elit a orci feugiat vulputate. Integer posuere sagittis lobortis. Integer pulvinar dictum libero.
				Integer ac velit quam, id dapibus felis. Vestibulum tempor aliquet ligula euismod accumsan. Etiam dapibus ultricies orci, vitae consequat purus venenatis
				vel. Curabitur vestibulum massa ac nisl venenatis posuere. Curabitur dictum metus eget velit congue fermentum. Duis quis quam in urna sollicitudin egestas
				ut vel urna. Suspendisse bibendum sodales pulvinar. Sed a quam nisl, non lacinia erat. Duis pellentesque tincidunt scelerisque. In sed felis at arcu tristique
				semper nec et purus. Ut suscipit semper accumsan. Curabitur tempor sem nec sapien suscipit porta. Donec eget urna nunc, ac bibendum nunc. Quisque congue pellentesque
				arcu nec aliquet. Morbi in mi eget ipsum egestas sagittis.
			

				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel massa massa, sit amet laoreet elit. Praesent porttitor pharetra dui,
				quis fringilla justo luctus ac. Duis convallis, dui non facilisis mollis, ipsum diam sodales nisl, vel tincidunt ipsum augue vel lacus.
				Fusce a urna eu lectus mattis placerat.

index.php – The Explaination

Okay lets get down to the explaination of index. First we declared the DOCTYPE of

< !DOCTYPE HTML>

we do this so that W3C can validate your page and so that it knows automatically what version of HTML you’re rusing. This doctype is mainly for HTML5. After that we then opened up our html, head and title tags and inserted the title of jQueryness we then referenced the jquery-1.3.2.min.js from Google Code and our function.js file with

We then closed off our head then opened our body and inserted a new div with the id of wrapper, this is the element which stands out with its CSS3 Specification Drop Shadow

...

after opening the wrapper we decided to put in a heading with our main title in then opened a code tag so that we can link our content boxes with:


box1 |
box2 |
box3

then finally we created our content boxes with the classes of box1, box2, box3 with the following:


...


...


...

style.css – The Code & Explaination (in comments)

/*
 * Define the MAIN background colour, default margin, fonts
 * text colour etcetera.
 */
body {
	background-color: #efefef;
	margin: 40px auto;
	font: 10pt "Lucida Grande", "Trebuchet MS", sans-serif;
	color: #777777;
}

/*
 * Make the wrapper look pretty, center it on the page, make sure
 * that it's no thicker than 500 pixels with some padding, let it have
 * a nice subtle solid dark gray border with a drop shadow
 * 3 pixels from the right, 3 pixels from the bottom and 1 pixel in weight
 * with another subtle gray.
 */
#wrapper {
	margin: 0 auto;
	background-color: #ffffff;
	border: 1px solid #bababa;
	width: 500px;
	padding: 0 15px 10px 15px;
	-moz-box-shadow: 3px 3px 1px #dadada;
	-webkit-box-shadow: 3px 3px 1px #dadada;
}

/*
 * Set a the main font to be a fixed width font such as Monaco
 * with the background of off white, border of dark gray, and font
 * colour of black. Set the margins 14 pixels from the top and bottom
 * Provide a little bit of padding as well so the content looks nice.
 */
code {
	font: 12px Monaco, "Lucida Console", small-fonts;
	background-color: #f9f9f9;
	border: 1px solid #D0D0D0;
	color: #000000;
	display: block;
	margin: 14px 0 14px 0;
	padding: 12px 10px 12px 10px;
}

/*
 * Set the main content boxes display
 * to none so that they're hidden on
 * page load.
 */
.box1, .box2, .box3 {
	display: none;
}

function.js – The Code & Explaination (in comments)

/*
 * When the document is ready then hide box2 and 3 but show box1.
 */
$(document).ready(function() {
	$("div .box1").show();
	$("div .box2").hide();
	$("div .box3").hide();

/*
 * If the link with the id of navItem is clicked then make
 * relevent box slide down in the duration of 0.6 seconds.
 * Also ensure that the other boxes are hidden.
 */
	$("#navItem1").click(function() {
		$("div .box1").slideDown(600);
		$("div .box2").hide();
		$("div .box3").hide();
	});

	$("#navItem2").click(function() {
		$("div .box2").slideDown(600);
		$("div .box1").hide();
		$("div .box3").hide();
	});

	$("#navItem3").click(function() {
		$("div .box3").slideDown(600);
		$("div .box2").hide();
		$("div .box1").hide();
	});

});

The Download

jQueryness.zip

Final Words

Thank you for reading this tutorial and I hope that you find it quite useful, if you have any questions please don’t hesitate to leave a comment below when the comments get enabled, If they still aren’t enabled then please email webmaster [ at ] paulchater.co.uk

codr.eu » jQuery