JAVASCRIPT

Ajax and the JQuery JavaScript Library

Welcome to the seventh part of a series introducing the jQuery JavaScript library. Made up of eight comprehensive articles, this series provides you with the right pointers to get started using this JavaScript software so you can take advantage of its remarkable functionality.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

September 23, 2009

TABLE OF CONTENTS:

As I mentioned in the section that you just read, the jQuery library comes equipped with two simple methods, which can be used to display and hide one or more elements of a web document. The first of these methods is called “show()” and it’ll turn visible any element previously hidden with a CSS declaration.

You can see more clearly how the method works if you look at the following code sample. Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Basic example on using jQuery with show() method</title>

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: 24px bold Arial, Helvetica, sans-serif;

color:#000;

}

</style>

$(document).ready(function(){

$("p").show();

});

</script>

</head>

<body>

<h1>Basic example on using jQuery with show() method</h1>

<p style="display:none;">This paragraph was initially hidden...</p>

</body>

</html>

As you can see, the above example demonstrates how to use the “show()” method to turn visible a paragraph that was initially hidden. Regardless of the simplicity of this example, it’s clear to see that this can be a killer method for creating dynamic user interfaces, like drop-down menus, tool tips and so forth.

In addition, the “show()” method supports the specification of a “slow” parameter, which will turn the selected element visible by progressively increasing its height. A basic use of this argument can be seen in the example below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Basic example on using jQuery with show() and slow</title>

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: 24px bold Arial, Helvetica, sans-serif;

color:#000;

}

</style>

$(document).ready(function(){

$("p").show("slow");

});

</script>

</head>

<body>

<h1>Basic example on using jQuery with show and slow</h1>

<p style="display:none;">This paragraph was initially hidden...</p>

</body>

</html>

If you test the previous example on your machine, you’ll see that the pertinent paragraph will appear progressively on the web document, which can be helpful for creating smooth animations.

Okay, now that you learned how to turn visible a web page element by means of the handy “show()” method, it’s time to look at its counterpart, called “hide().” Obviously, it can be used to remove an element from a web page, and a simple implementation of it can be seen below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Basic example on using jQuery with hide()</title>

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: 24px bold Arial, Helvetica, sans-serif;

color:#000;

}

</style>

$(document).ready(function(){

$("a").click(function(){

$(this).hide();

return false;

});

</script>

</head>

<body>

<h1>Basic example on using jQuery with hide()</h1>

<a href="#">Click to hide this text...</a>

</body>

</html>

Actually, the “hide()” method doesn’t require much explanation here, since it speaks for itself. In this example, it’s utilized to hide a sample link, when clicking on it. It’s really that simple.

This method also accepts a “slow” input argument, which makes the selected element disappear progressively. Precisely, the following code sample demonstrates how to use this parameter to remove the previous hyperlink:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Basic example on using jQuery with hide() and slow</title>

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: 24px bold Arial, Helvetica, sans-serif;

color:#000;

}

</style>

$(document).ready(function(){

$("a").click(function(){

$(this).hide("slow");

return false;

});

</script>

</head>

<body>

<h1>Basic example on using jQuery with hide() and slow</h1>

<a href="#">Click to hide this text...</a>

</body>

</html>

Not too difficult to grasp, right? Of course, the most important thing to note here is that by combining the “show()” and “hide()” methods in all sorts of clever ways, it’s possible to create eye-popping visual effects, without having to develop complex DHTML applications.

Finally, feel free to use all of the code samples included in this tutorial to expand your existing skills in using the jQuery library. Fun is already guaranteed!

Final thoughts

In this seventh chapter of the series, I provided you with a quick guide to developing some basic Ajax applications with the jQuery JavaScript library. In addition, I showed you how to turn the visibility of a selected element within a web document on and off, something that can be useful for creating dynamic user interfaces.

In the last part of the series, I’ll be exploring in depth the set of animation methods provided by jQuery. You won't want to miss it!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.