Final Project jQuery Tutorials

Demo 1: Simple Menu Slider

The following is a jQuery Plug-in for a simple menu slider that will create a slider over the menu items seen below. You can download the Plug-in at the jQuery Site.

Step One:

First wrap your navigation menu in a container as shown below.

<div id="slideContainer">
	<ul>
		<li class="selectedMenuItem">One</li>
		<li>Two</li>
		<li>Three</li>
		<li>Four</li>
	</ul>
</div>

Step Two:

Now call the nenuSlider on the container as follows ({border thickness, border style, border color, sides of border, background color, background corner radius, transition speed, transition type}). Place the following code just below the closing footer tag in your HTML.

<script>
$("#slideContainer").menuSlider({thickness:"2px",borderStyle:"solid",borderColor:"blue",
				borderSides:"border-bottom", bgColor:"rgba(0,0,150,0.4)",
				bgRadius:"10px", speed:0.4, tStyle:"linear"});
</script>

Thirdly you'll need to place the following just below the closing footer tag making sure that the jQuery script link is first in line.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.menuSlider.js"></script>

Step Three:

Lastly for a little bit of styling I have supplied the css for this demo. This will give you a starting point. Please feel free to mark this up as you desire.

#slideContainer, #slideContainer2, #slideContainer3, #slideContainer4  {
	width: 65%;
	height: 25px;
	margin: auto;
	position: relative;
}
#slideContainer {
	background-color: #008C72;
	margin:10px auto;
}
#slideContainer2 {
	margin: 10px auto ;
	background-color: #008C72;
}
#slideContainer3 {
	margin: 10px auto ;
}
#slideContainer4 {
	margin: 10px auto;
}
ul {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	margin: auto;
	list-style-type: none;
	padding: 0;
	font-size: 0;
	text-align: center;
}
ul li {
	display: block;
	float: left;
	width: 25%;
	margin: 0;
	font-size: 17.6px;
	font-size: 1rem;
	text-align: center;
	cursor: pointer;
	height:100%;
}

Note:

The li item the slider returns to has an class of "selectedMenuItem". To switch which li item is the current item on each page, change which li item has the selectedMenuItem class.

Top

Demo 2: Accordion Panes

The following tutorial will allow you to easily create an accordion slider complete with a toggle to open and close the slider.

Step One:

The first thing we will do is create a new document in your code editor of choice and paste the following code into it. Lets now save the file as index.html.

<div class="accordion">
	<h3>Oh My!</h3>
      <div>
        <img src="images/dave01.jpg" width="400" height="267" alt="Crazy Dave!" />

      </div>

      <h3>He's Nuts!</h3>
      <div>
        <img src="images/dave02.jpg" width="400" height="267" alt="Crazy Dave" />

   </div>

      <h3>Crazy Man!</h3>
      <div>
        <img src="images/dave03.jpg" width="400" height="267" alt="Crazy Dave" />

      </div>

    </div><

Step Two:

Lets create another file and paste the jquery script below into it. Now save that file as jq-accordion.js and place it into your scripts folder. Remember to place the following <script src="scripts/jq-accordion.js"></script> below your closing footer tag to call the action.


  $('.accordion > div').hide();

  // uncomment the next line if you'd like the first pane to be visible by default
  // $('#bio > div:first').show();

  // Store the h3 elements so that jQuery does not have to keep selecting them
  // everytime the h3 tag is clicked
  var bio02Reveal = $('.accordion h3');

  bio02Reveal.click(function() {

	var thisPane = $(this).next();

	if(thisPane.is(':visible')){
		thisPane.animate({
			'height':'toggle'
    	}, '300');
	}else{

		$('.accordion > div:visible').animate({
			'height':'toggle'
    	}, '300');

		$(this).next().animate({
      		'height':'toggle'
    	}, '300');

	};

 	});

Step Three:

Now its time for a little styling. The css below should give you a leg up on completing your project. Feel free to style it as you like.


.accordion {
  margin: 0 0 70px 10px;
  width: 600px;
}

.accordion h3 {
  margin:0;
  padding:5px 0 5px 10px;
  background-color:#005A5B;
  border-bottom:1px solid #007369;
  color: #02A676;
  font-weight:normal;
  cursor: pointer;
}

.accordion div {
  height:300px;
  background-color: #F4F4EE;
  border-bottom:1px solid #fff;
  position: relative;
}

.accordion img {
  margin:10px;
  background-color: #F4F4EE;
}

.accordion p {
  position: absolute;
  left: 120px;
  top: 10px;
  margin: 0 10px 0 0;
  padding: 0;
}

Demo 3: javaScript Random Picture

In this demo we will learn how to create a random picture of kitty's using javaScript and a click-able button

Step One:

Lets get started by creating our html page with the following markup. Always remember that with any project you should always start with you html first as this forms the base for all your css and javaScript to follow.

Lets copy the following into a blank document in the development environment of your choosing. For this demo I used Sublime Text.

	
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>25 - javaScript - Random Picture</title>
<link rel="stylesheet" type="text/css" href="styles/styles_day_03_part_01/styles.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body class="f_25">

<div class="wrapper">

<div class="box_main">

<header>
  <h1>javaScript - Random Picture</h1>
</header>
<section>
  <article>
  
  <img id="slide" src="images/kittens_01.jpg" width="400" height="265" alt="kitten" />

<p id="image_description">An orange kitten</p>

<button id="btn_02" class="button secondary">Click to change the picture and the pictures description</button>  
    
    
  </article>  
</section>

</div><!-- end box_main -->

</div><!-- end wrapper -->
<script src="scripts/picture_random.js"></script>
</body>
</html>

Step Two:

The next step is to style our page with some css. You can either copy the following into a new document, naming it styles.css, and place it into your css folder or you can create your own.

.kitty{
text-align: center;
}
.ranbutton{
margin: 10px 0;
padding:5px 5px;
background-color:  #005A5B;
text-decoration: none;
border: none;
color: #cccccc;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
transition: all cubic-bezier(.25, .1, .25, 1) 0.5s;

}
button:hover{
  background-color: #003840;
}

#slide{
border: 5px solid #fff;
-webkit-box-shadow: 2px 2px 10px #000;
-moz-box-shadow: 2px 2px 10px #000;
box-shadow: 2px 2px 10px #000;

}

Step Three:

The last step in this demo is to create our javaScript file. Lets create a new page, call it picture_random.js and save it to our scripts js folder. I have included an explanation of the javaScript at the beginning of each line for your convenience.

// JavaScript Document

// store the element with an id of "slide" in the variable "mainSlide". 		
var mainSlide = document.getElementById('slide');

// store the element with an id of "image_description"
// in the variable "kittenImageDescriptionText".
var kittenImageDescriptionText = document.getElementById('image_description');

// store the element with an id of "btn02"
// in the variable "btn02"
var btn02 = document.getElementById('btn_02');

// create a new array called kittenImages
var kittenImages = [];

// declare values of the kittenImages array
kittenImages[0] = "images/kittens_01.jpg";
kittenImages[1] = "images/kittens_02.jpg";
kittenImages[2] = "images/kittens_03.jpg";
kittenImages[3] = "images/kittens_04.jpg";
kittenImages[4] = "images/kittens_05.jpg";
kittenImages[5] = "images/kittens_06.jpg";
kittenImages[6] = "images/kittens_07.jpg";

// get length of kittenImages array 
var kittenImagesArrayLength = (kittenImages.length);

// create a new array called kittenImageDescriptions
var kittenImageDescriptions = [];

// declare values of the kittenImageDescriptions array
kittenImageDescriptions[0] = "An orange kitten";
kittenImageDescriptions[1] = "A brown and black striped kitten";
kittenImageDescriptions[2] = "Three kittens";
kittenImageDescriptions[3] = "An orange kitten laying in the grass";
kittenImageDescriptions[4] = "A white kitten laying on a blanket";
kittenImageDescriptions[5] = "Four kittens on a lawn";
kittenImageDescriptions[6] = "A brown and black striped kitten on a purple blanket";

// attach onclick event to btn02 and run
// changePictureAndDescription function
btn02.onclick = changePictureAndDescription;


// function to change the picture and it's description 
// to a different picture and description.
function changePictureAndDescription(){

// generate a random number between "0" and the length of the kitten array.
var randomValue = Math.floor( Math.random() * kittenImagesArrayLength);
		
// set the "src" attribute of the variable "mainSlide" to the value
// stored in the kittenImages[randomValue] location.
mainSlide.setAttribute('src', kittenImages[randomValue]);
	
// replace the text in "kittenImageDescriptionText" with the text stored in
// the "kittenImageDescriptions[randomValue]" array item.
kittenImageDescriptionText.innerHTML = kittenImageDescriptions[randomValue];
	
};

Top

Now lets give it a try. click on the large button and watch the random kitty images. Enjoy

Welcome to the Bakery

Demo 1: Simple Menu Slider

Step One:

Step Two:

Step Three:

Note:

Demo 2: Accordion Panes

Step One:

Step Two:

Step Three:

Oh My!

He's Nuts!

Crazy Man!

Demo 3: javaScript Random Picture

Step One:

Step Two:

Step Three:

An orange kitten