jQuery Web Page Design Tutorials

jQuery Learn Beginner Tutorial (Part 2)

Part 1 of jQuery Learn Beginner Tutorial

This is the second part of jQuery Beginner Tutorial. This part of tutorial shows how to get the dimension of an image on a web page and how to hide elements on a web page.

jQuery Get Dimension of Image

Sometimes we need to get the dimension (e.g. height and width) of elements on a web page. This jQuery example shows how to select the boat image, enclosed it with border line, and then display the height of the boat on an alert message box.

Example:
The following 1st line of code assign the boat image element to a variable with the name selectedElement. The 2nd line enclose the boat image with 4 pixels solid red border. The 3rd line of code display the height of the boat on an alert message box.

// Declare a variable
var selectedElement = $("#boat");
selectedElement.css ( { "border": "4px solid #f00" } );
alert("The height of selected element is: "+ selectedElement.height());

Result:
When executing the above jQuery codes, the result is shown in the following diagram:

jQuery element height

Tip:
The width of boat can be got with the jQuery width():

alert("The width of selected element is: "+ selectedElement.width());

jQuery Hide Element

This jQuery tutorial shows how easy to hide elements on a web page with jQuery codes.

Example:
The following jQuery codes will hide the cloud image.

// Hide an element
$("#cloud").hide();

Result:
When executing the above jQuery codes, the cloud is hidden and the expose the sun image as shown in the following diagram:

jQuery hide

This is the end of jQuery learn beginner tutorial.