<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Introduction to jQuery (Part 2)

Posted on
6,894 Points
894 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

OWASP: Threats Fundamentals

Learn the top ten threats that are present in modern web-application development and how to protect your business from them.

Join & Write a Comment

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month