Hello there, welcome to JS/jQ tutorial. Are you ready to learn some jQuery magic? Click an arrow or scroll down. LET'S START!

Tutorial 01 : Typewriter animation

1. Download jQuery Typewriter Plugin from HERE.

2. Include jQuery Library and typer.js in your HTML document

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="jquery.typer.js"></script>

3. Create an element that you want to show your animation inside.

<div class="typer"></div>

4. Set up the size of the element and give some style.
.typer{
    width: 960px;
	height: 500px;
	border: 2px dotted black;
	background-color: white;
    color: black;
}

5. Almost there! Just call the plug in and it's done!

<script>
$('#typer').typer(["Ooh~ typewriter animation!",
                    "Pretty cool, right?",
                    "Let me show you how to do it."]);
</script>




Marilyn Monroe umbrella bus

Tutorial 02 : Image Slider

1. Download Cycle 2 jQuery Plugin from HERE.

2. Include jQuery Library and typer.js in your HTML document

<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src='jquery.cycle2.min.js'></script>

3. Initialize Cycle 2 by adding the classname "cycle-slideshow" to your slideshow container element.

<div class="cycle-slideshow"></div>

4. Inside the container element, add images for the slide.

<div class="cycle-slideshow">
      Marilyn Monroe
	  umbrella
      bus
</div>

4. You can add prev and next controls by including two elements in your slideshow container, one with the class "cycle-prev" and one with the class "cycle-next".
<div class="cycle-prev"></div>
<div class="cycle-next"></div>

5. Let's style up the buttons.

.btn_prev {float: left; border-top: 23px solid transparent; border-right: 23px solid #c49d75; border-bottom: 23px solid transparent;}
.btn_next {float: right; border-top: 23px solid transparent; border-left: 23px solid #c49d75; border-bottom: 23px solid transparent;}



Marilyn Monroe umbrella bus

Choose color with the color slider below and click play button to start the slideshow!

Tutorial 03 : Color Slider

1. Download custom jQuery UI from HERE. Make sure the slider checkbox is checked.

2. Include jQuery Library and downloaded files in your HTML document

<head><link rel="stylesheet" type="text/css" href="style/jquery-ui-1.10.3.custom.css"></head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="jquery-ui-1.10.3.custom.min.js"></script>

3. Create a slider element, and add class name to the target elements that you want to change color.

<div class="slider"></div>
<div class="target"></div>

4. Assign colors in slider's value. Default range of slider's value is 0 - 100. You can add as many colors as you want.

$( "#slider" ).slider({
	slide:function(event,ui){
		if(ui.value === 0){ $('.target').css('background-color','red');}
		if(ui.value > 25){ $('.target').css('background-color','yellow');}
		if(ui.value > 50){ $('.target').css('background-color','green');}
		if(ui.value > 75){ $('.target').css('background-color','blue');}
	}

5. Let's set up the width of the slider, and it's done!

.slider{
width: 700px;
}