Creating a Javascript Content Slider with jQuery
Written by: Paul Chater
Hello, I am Paul the author of Codr.Eu. I have been developing websites since 1999 and am rather proficient within languages such as HTML and CSS. I can do a little bit of PHP, I totally love CodeIgniter; I'm also a website designer and designed / coded this website by hand! My favourite text editor is InType because it rules. If you wish to join the so far, none-existing team at Codr then please do drop me a line to the following address: webmaster [at] paulchater.co.uk or reply me on twitter @PaulChater :)!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
<html> <head> <title>jQueryness</title></body> </html>jQueryness
box1 | box2 | box3Lorem 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
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
Tags: -moz-box-shadow, -webkit-box-shadow, css3, html5, Javascript, jQuery, paulchater, Screencasts
This posts latest comments
Great stuff! Just found this site, hope to see some awesome things in the future.
Thanks Kyle.
We’re currently looking for writers and screencast guys to write for us too. If you’re interested feel free to just drop me a line at webmaster[at]paulchater.co.uk
It would had been great if a demo was available alongwith. Please consider putting a demo.
Nain,
The demo is actually the download; so all the files required for the demo are in that folder hence the source code download
Hope this helps.
Regards,
Paul Chater