Introduction to jQuery (Part 2)

1. Reference your jQuery libraries

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Select all Open in new window

2. Include your new external js/jQuery file

<script src="js/mediasage.js"></script>

Select all Open in new window

3. Write your first lines of code to setup your site for jQuery.

jQuery(document).ready(function($){
});

Select all Open in new window

4. Setup your first on click event

$(document).on('click', '.myvid', function(){
});

Select all Open in new window

5. Type in what is to happen on the click

 $(".mybutton").show();
  $("#intro").toggle("fold", 1000);
 // $("#vid1").toggle("fold", 1000);

Select all Open in new window

 So the total block will look like this.

 $(document).on('click', '.myvid', function(){
	$(".mybutton").show();
    $("#intro").toggle("fold", 1000);
 // $("#vid1").toggle("fold", 1000);
});

Select all Open in new window

6. Set up your second on click event.

$(document).on('click', '.mybutton', function(){
});

Select all Open in new window

7. Add in the code to hide the video.

$("#vid1").hide();

Select all Open in new window

So the total block of code will look like this.

$(document).on('click', '.mybutton', function(){
$("#vid1").hide();
});

Select all Open in new window

8. In your html file add the class into the home link as such.

Edit <li><a href="#">Home</a></li> so it looks like below.

<li><a href="#" class="myvid">Home</a></li>

Select all Open in new window

9. Create the html for your button

Make sure it looks like this:

<button class="mybutton">Hide video</button>

Select all Open in new window

10. In the audio tag edit it to look like below.

Make sure to add in id="intro" this is what jQuery will be looking for.

<audio id="intro" controls="controls">

Select all Open in new window

11. In the video tag edit it to look like below.

Make sure to add id="vid1" as this is what jQuery will be looking for.

<video id="vid1" controls="controls" width="640" height="480">

Select all Open in new window