This lesson, I’ll show you how you can vertically center elements or images by using just a bit of jQuery (javascript library).

To Download this youtube video, Click Here

Text Content:

This video is to show how to vertically center an element using jQuery library.

Horizontal centering can be achieved easily by specifying margins to “auto” in CSS.

The img tag and the script tag (jQuery reference) are added to the plain HTML page. Now, the image will not be centered anyway.

To code with jQuery, first start with standard <script type=”text/javascript”> tag.

Then enter the following code within the script tag:

$(document).ready(function(){
var height = $(document).height();
var imageHeight = $(”img”).height();
console.log(imageHeight);
});

The console.log statement has been used to get the image height during debugging session.

Now, the CSS of the image is going to be edited.

Replace the console.log statement with the following:

$(”img”).css({”position” : “relative”; “top” : height/2 – imageHeight/2});

Now, the image is centered vertically in the page.

In this way, multiple values of image properties in CSS can be specified with a single $ in jQuery – (to include the properties within curly braces)

A single CSS property can be set like this:  $(”img”).css(”position” : “relative”);

This video tutorial will show beginners exactly how to get started with JQuery.

To download this video, Click Here

Text Content:

In the last episode, our aim was to display the paragraph on clicking the anchor tag.

Create a new line after $(”p#paragraph1″).hide(); statement and enter the following lines

$(”a#paragraphAnchor”).click(function()
{
$(”p#paragraph1″).show();

});

In the above code, the anchor tag with the id “paragraphAnchor” is coded. The click function of the anchor tag is accessed and a statement is written to make the paragraph visible.
The paragraph can be made visible by using the show() method.

On trying in the browser, it can be observed that the appearance of first paragraph is sudden. To make it more attractive and easy to visualize, a little bit of animation is necessary.

The show() method accepts a string argument: “slow”, “medium” and “fast” – which corresponds to how quickly the paragraph is displayed.
The show() method can also accept a numeric argument: the number of milliseconds over which the function is executed (1000 – one second, 5000 – five seconds)

Here, we use show(”slow”) to display the paragraph in an animated fashion.

Also, when observed when show(5000) is used, the display seems to be strange. This is because, the show() method is altering three different properties : height, width and opacity at the same time.

The show() method can also be replaced with a slideDown() method. This will just slide down the invisible paragraph to visibility. The slideDown() method just changes only the height property.

This video tutorial will show beginners exactly how to get started with jQuery.

To Download this video, Click Here

Text Content:

This tutorial is aimed at complete beginners. An assumption is made that you have a basic working knowledge of JavaScript syntax.

JQuery library can be downloaded at www.jquery.com. Here, we use the uncompressed version since this is for only learning purposes. The compressed version is to be used in actual website designs.

Visual Web Developer is used to develop.

First, the library is added to the solution. Add page “index.htm” to the solution. Delete the “Default.aspx” and “Web.Config” files in the solution.

Change the title to “JQuery for Absolute Beginners”. Click and drag the jQuery Library from Solution Explorer to add the script tag in the head section of the page.

Lets create a paragraph which we don’t want to display unless the user clicks a button.
Just create a paragraph with some data in it.
Create an Anchor tag to perform an operation on it. The anchor tag points to nowhere (href=”#”), has the id “paragraphAnchor” and Inner Text “Click To Read Paragraph”.
To achieve the aimed functionality, javascript code is added to the header tag.
<script type=”text/javascript”> tag is added to the head section.

The very first thing that needs to be done in jQuery is to add an abbreviation of the jQuery symbol – the DOLLAR ($) sign.
After dollar sign, type:

$(document).ready(function()  – this is same as in .NET kind-of functionality with “.”. This line tells that jQuery, when the page is ready to be manipulated, a function is going to be executed (without any parameters). A function is just lines of code that is going to instruct what to do.

Then, include a Javascript block with “{” and “}” and then close the paranthesis with “)”. – (this was opened after “ready” keyword)

Now, within the block, some code is written to hide the paragraph we created previously.

$(”p”).hide();
This code is used to get the paragraph. p can be in single or double quotes.

When this code is executed in the browser, the paragraph is invisible (i.e. hidden).

Also, when multiple paragraphs are there in the document, the code is going to hide all of them. To avoid this and target the functionality to a single paragraph, an id=”paragraph1″ is added to the required paragraph. And accordingly, in the jQuery code, the $(”p”).hide(); code is replaced with:

$(”p#paragraph1″).hide();

Note that the selector is as same as CSS syntax. This is why jQuery is so attractive.

We can make the paragraph visible in the next part of this tutorial.