<

Introduction to jQuery (Part 2)

Posted on
6,890 Points
890 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
Comment
Author:Jason Baker
0 Comments

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Join & Write a Comment

Suggested Videos

Title Views Activity
Embedded Videos in HTML5 83
Introduction to CSS (Part 2) 109
Introduction to jQuery (Part 1) 774
Introduction to PHP: Building the Form 425
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month