How to quickly implement a login form that slides down and slides up…

To download tutorial files (1.3 KB): Click Here

To Download this youtube video, Click Here

How to use the slideDown and slideToggle functions…

To download this youtube video, Click Here

The basics of Toggle function…

To download this youtube video, Click Here

Text Content:

This tutorial, a basic HTML page is created to show how Toggle function works.

A <div> is going to load and a link underneath is going to show/hide on clicking it.

To start off, create a HTML page and add reference to jQuery javascript library:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js"></script>

Add a <div> next:

<div id="content">

</div>

Create an Anchor tag:

<a href="#">Click to Toggle</a>

Add a CSS file (style2.css) and add the following content for the <div>:

#content

{

 height:200px;

 width:200px;

 background-color:#FF9933;

}

Add reference to the CSS in the HTML page:

<link href="CSS/style2.css" rel="stylesheet" type="text/css" />

Add a new javascript file (toggleDemo.js) and attach it to the HTML page:

<script src="Scripts/toggleDemo.js" type="text/javascript"></script>

Now, add the following code to the javascript file:

$(function() {

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

 $('#content').toggle();

 });

});

First line, we get the reference for the document
Second line, the click function of the anchor tag is obtained
Third Line, the toggle() functionality is added to the div with id ‘content’

Here, since we take all <a> tags, any other link on the page is going to make the <div> toggle.

A basic introduction to jQuery

To download this youtube video, Click Here

Text Content:

Basically, jQuery is a javascript code library designed to make life easier. It can be used to animate using CSS and other developments on the web page.

It can also be used with AJAX to make it very simple to work with. This is because using DOM elements in javascript is a lengthy process. Thanks to jQuery, now it is a simple process. The elements can be referred by their id.

To start of with, just create a new HTML page.

The jQuery library has to be imported in the page. Just search for “jQuery google”, copy the link location from featured downloads to the js file directly.
Now, the reference is added to the head part of the web page after title tag:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js"></script>

For testing, just add a <div id=”content”></div> tag to the page. Use CSS (File->New->CSS) to give the div content some width and background color.

#content

{

 height:200px;

 width:200px;

 background-color:#FF9900;

}

Save both HTML and CSS page after adding reference to the stylesheet in the web page.

Now, we can add a function in jQuery to make the div disappear once the page is loaded.

Inline code can also be used to program, but it is better to use external js files because the files will be having a minimized load time (because it removes all blank files) when separated.

So, just add a new Javascript file (File-> New-> Javascript). Save it and add reference to the same in the current HTML page.

The coding part of the JS file:

Just like initialize function that developers use in javascript (which is used to execute some code after the document is loaded completely), the jQuery library provides the following:

$(funciton{}{

});

Now, the jQuery code is run when the page is loaded to the browser.

The <div> which was created in the HTML page can be referred like this  —

$("#content")

(Its really that simple… no document.getElementById and other complex names… Easy, isn’t it?)

The function that is going to be used is the toggle function. It toggles the visibility of the element for which the function is written for. (just makes it appear and disappear on executing the code)

Just type in the following code:

$("#content").toggle();

So now, when the page is loaded, the div will disappear and leave a blank page, which is what we wanted!!

To download this youtube video, Click Here

Text Content:

This is a simple tutorial on fadein and fadeout functionalities in jQuery.

An extra piece of information: A Dreamweaver API extension for jQuery.
When typing in a javascript file, the code-ins in this extension are quite handy. They show up pop-ups of scroll-down lists of functions available to use, so that we need not keep all the available jQuery functions in our head.
The extension can be obtained here: http://xtnd.us/dreamweaver/jquery
There is even a small video tutorial on how the extension speeds-up jQuery coding in Dreamweaver.

There are three files associated in this tutorial: HTML file, CSS file and the javascript function file.

The following links are added to the blank HTML page:

1. The jQuery source link — <script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.2.6.js”></script>
2. The CSS file link — <link href=”css/style3.css” rel=”stylesheet” type=”text/css” />
3. The javascript function file — <script src=”js/fucntion3.js” type=”text/javascript”></script>

Note: It is important that your javascript function file tag comes after your jquery source link.

The content of the CSS:

#content

{

 height:200px;

 width:200px;

 background-color:#FF9933;

}

The HTML content:

<body>

 <div id="content"></div>

 <a href="#" id="fadeout">Fade Out</a>

 <a href="#" id="fadein">Fade In</a>

</body>

Now, the javascript function file is written as given below:

$(function() {

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

 $("#content").fadeOut(1000);

 });

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

 $("#content").fadeIn(1000);

 });

});

Here, we just get the <a> tag with id “fadeout” and assign its click function to fadeout the element with id “content” over a period of one second (1000 miliseconds).
Similarly, the fadein function is also coded.

To download this youtube video, Click Here

Text Content:

This video is going to show you  how to create a simple Accordion. This video explains some of the important concepts in jQuery, so watch this video for sure!

First, a container element is created using

<div id=”container”>    </div>

Within this, a Definition List is created. The list is structured so that each definition term <dt> contains the main headings such as Home, About, Blog and Contact. Inside the definition description <dd> is an unordered list <ul> which has a series of links as its list elements.
Altogether, the definition list looks something like this:
<dl>
<dt><a href=”#”>Home</a></dt>
<dd>
<ul>
<li><a href=”#”>Link1</a></li>
<li><a href=”#”>Link2</a></li>
<li><a href=”#”>Link3</a></li>
</ul>
</dd>
<dt><a href=”#”>About</a></dt>
<dd>
<ul>
<li><a href=”#”>Link1</a></li>
<li><a href=”#”>Link2</a></li>
<li><a href=”#”>Link3</a></li>
</ul>
</dd>
<dt><a href=”#”>Blog</a></dt>
<dd>
<ul>
<li><a href=”#”>Link1</a></li>
<li><a href=”#”>Link2</a></li>
<li><a href=”#”>Link3</a></li>
</ul>
</dd>
<dt><a href=”#”>Contact</a></dt>
<dd>
<ul>
<li><a href=”#”>Link1</a></li>
<li><a href=”#”>Link2</a></li>
<li><a href=”#”>Link3</a></li>
</ul>
</dd>

Then, the jquery.js file (by dragging from Solution Explorer) and an empty Stylesheet are imported into the current page.

The initial styling is done in CSS as follows:

dl, dt, dd, ul, li, a
{
margin:0; padding:0;
}

#container
{
margin:auto;
}

a
{
text-decoration:none;
color: #292929;
outline: none;
}

li
{
padding-left: .6em;
list-style-type: none;
}

dl
{
width:100px;
}

dt
{
background-color: #faa41a;

}

To get clear about the functionality we are going to accomplish:
First, the secondary links (in <ul>) should not be displayed at all times.
And, when the user clicks on one of the main heading (orange background), we want to close any other open definition and then expand the list that the user clicked.

The following types of code are one and the same, so you can use whichever is comfortable for you. Since type2 is shorter, it is used in this program.
Type1:
<script type=”text/javascript”>
$(document).ready(function() {

});
</script>
Type2:
<script type=”text/javascript”>
$(function() {

});
</script>

Inside the function, the first line is:
$(”dd:not(:first)”).hide();
This signifies that all the definition description be obtained from the document but not the first one and be hidden when the document is loaded.

Then, the following piece of code is inserted.
$(”dt a”).click(function() {
$(”dd”).slideUp(”fast”);
$(this).parent(”dt”).next(”dd”).slideDown(”normal”);
});

The first line —$(”dt a”).click(function() {— gets the anchor element inside the <dt> tag and assigns a function to the click event to each of them in the page.
The second line —$(”dd”).slideUp(”fast”);— makes all the definitions that are visible slideUp (i.e. hide from view)
The third line — $(this).parent(”dt”).next(”dd”).slideDown(”normal”); — gets the parent <dt> of the (here this refers to <a> tag in <dt>) <a> tag. Then it gets the next <dd> element and slides it down (to make it visible) using the slideDown method of jQuery.

The border (which is displayed in firefox) can be removed by specifying “outline: none;” in the CSS for anchor tag.

So, we can see that a lot can be achieved with only a few lines of code in jQuery.

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.