<

Introduction to jQuery (Part 2)

Posted on
6,895 Points
895 Views
Last Modified:
Experience Level: Beginner
4:17
The viewer will learn the basics of jQuery including how to code hide show and toggles.

Video Steps

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>

Open in new window

2. Include your new external js/jQuery file


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

Open in new window

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

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

Open in new window

4. Setup your first on click event


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

Open in new window

5. Type in what is to happen on the click


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

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);
});

Open in new window


6. Set up your second on click event.

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

Open in new window

7. Add in the code to hide the video.


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

Open in new window


So the total block of code will look like this.

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

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>

Open in new window

9. Create the html for your button

Make sure it looks like this:
<button class="mybutton">Hide video</button>

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">

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">

Open in new window

0
Author:Jason Baker
0 Comments

Featured Post

PMI ACP® Project Management

Prepare for the PMI Agile Certified Practitioner (PMI-ACP)® exam, which formally recognizes your knowledge of agile principles and your skill with agile techniques.

Suggested Videos

Title Views Activity
Embedded Flash in HTML5 102
Introduction to CSS (Part 2) 112
Introduction to jQuery (Part 1) 797
Flexible Layouts 69
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month