The use of JavaScript can be listed like this

1. Checking and correcting the form data in the user side
2. Dynamically change the web page without reload it.
3. Create applications like calculator, simple applications and games.
4. Add effects to a web page which will attract more visitors

These are the important use of JavaScript. Some of them are very important, some of them not that much. Here I am showcasing some important JavaScript tools which commonly using in website.

JavaScript form validation

The most important and common functionality of a JavaScript is form validation. Most of the people using different JavaScript libraries such as Jquery, Moo tools, etc etc. As I am a fan of Jquery, I personally use bassistance JavaScript validation. It is simple to use and giving lot of options

Showcase image / video gallery

There are a lot of JavaScript libraries are available for showcasing images and videos even web pages. Here is the very popular JavaScript which used to overlay images / video / web page.

Lighbox

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

Thickbox

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Greybox

GreyBox can be used to display websites, images and other content in a beautiful way.

shadow box

Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats.

Highslide

Highslide JS is an open source image, media and gallery viewer written in JavaScript.

jcarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

SWFobject

SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file

Miscellaneous scripts

• Drop down menus
• Tab styles
• Pushup JavaScript

For integrating all these scripts, person requires only knowledge of basic html and JavaScript. If you are using some other tools please share with me through the comment form.

Today I am going to discuss about collapsing and expanding footers. Most of the site doesn’t have collapsing and expanding footer. But It would be nice if you have one like that. Because it is easy for the user. If he wants to see that he can otherwise not. It avoids the unnecessary scroll.

Demo

Source

Here is some code snippet that you can try for your site. It uses Jquery as javascript framework. Download jquery from here. It is very easy to integrate.

First I am creating one HTML file. I showed here between to tag only.

Toggle footer


links are going here

In the main footer div I added a link named toggle button. This is our action link.

Now we need to include jquery in the header.

You can simply include like this inside the of your html

If you have doubt please check different ways to include Jquery?

Now our simple javascript to do the functionality. Just paste this after the inclusion of jquery

You can include jQuery in different ways. 

1.Download it from jQuery site and include it into your webpage

2.Include it from Google server

or

3.Include it from Jquery’s site 

These are the different methods to include jQuery. Each of them have there own advantages and disadvantages.

First one has better control. Because this is your server and if u needs to modify the code, you can. Other method depends on other server, so, it may break the connection if that server is down.

Second method is, including it from Googles server. In that first one supports https connection. Second one supports normal http connection. You can pass the jquery version depends upon your choice. If you want to update you need to include appropriate jquery versions.

Third method is including it directly from jQuery server. And it is linking directly to latest jQuery. So you need not bother about the jQuery updation.

Hope I have covered different methods include jQuery. What do you think? Is there any other method to include jQuery?

If you have any questions or alternate solutions please let me know.

The code:

123
1234
123456789
12345

Download the source

First of all I have placed 6 buttons on the header portion of this blog for the visitors to select their choice. viz
1. SeaGreen, 2. Brown, 3.Blue, 4. Orange, 5. Green, 6. Pink.

So the html will look like this.

SeaGreen
Brown
Blue
Orange
Green
Pink

2nd Step
We need to make the changes on CSS file. I have added skin.css to my main css via import statement like @import url(“skin.css”);

In the skin.css I have added the colors where ever I need to change the background color, font color or border.

3rd step
Now come the javascript part. I am using the JQuery frame work. I like Jquery very much. So we need to include the jquery framework to our page and we need to write custom javascript code for its working. For that I added script.js to my page.

In the script.js I added the following code in the document.ready function.
$("#skin-select a").click(function(){
if($("body").attr("class")){
$("body").removeClass($("body").attr("class"));
}$("body").addClass($(this).attr("class"));
});

What this code will do?

When clicking each button it will add a class to body. If the body already has a class, it will remove the existing class and add a new class with new color name.

If your css is right it will work fine on each click.

What is next?

If you close the browser and open the it again with the same url, you can see the default colour scheme only. But I would like to see the colour scheme which I have recently opted.

For that we need to save this information in your computer. I have added a Jquery plugin for saving this colour scheme to the computer. A cookie is information that a Web site puts on your hard disk so that it can remember something about you at a later time. So I have added a jquery plugin for saving cookie.

Now we can save the latest color scheme to our visitor’s machine. So next time when he opens the site he can see the latest colour which he has selected in the last.

So the final code will look like this.
$(document).ready(function() {
if($.cookie('theme_color')!= null)
{
var coockiecolor = $.cookie('theme_color');
$("body").addClass(coockiecolor);
}
$("#skin-select a").click(function(){
if($("body").attr("class")){
$("body").removeClass($("body").attr("class"));
}
$("body").addClass($(this).attr("class"));
var colorname = $(this).attr("class");
$.cookie('theme_color', colorname, { path: '/', expires: 10 });return false;});
});

Inside the document.ready function first it will check whether any cookie saved for theme or not. If it is available it will take the theme information from the cookie. You can check the documentation about jQuery cookie in detail can be find here.

What do you think now? Is it easy? Waiting for your valuable feedback.

It is easy to install and customisable

Upload the pushup package in to your server
Include the pushup.css and pushup.js in to your page header.

If you want to upload this package other than the js directory, change your css background image path accordingly. More information available here (http://www.pushuptheweb.com/)

Download latest pushup can be download from here (http://github.com/staaky/pushup/tree/master)

Currently pushup can be integrated with the following frame work

• Dojo Details are available here
   (http://psychcf.dojotoolkit.org/pushup/)
• JQuery
  JQuery Pushup http://stuartloxton.com/jquery-pushup/
• MooTools
  MooTools pushup http://moopushup.timwebdesign.nl/

For that either you need to download the jquery and add it your page, or you can link directly load the framework using Google code

How we can include JQuery using Google code
Check out this link
http://code.google.com/apis/ajaxlibs/documentation/index.html

Benefits of including JQuery from Google code

1. It saves on bandwidth
2. It will load quickly from Google’s CDN.
3. It will already be cached if the user has visited a site which delivers it from Google code.

Ohh.. I am going out of the subject. Ok, After including Jquery you need to write the below code either in your separate Javascript file or your in the html page.
$(document).ready(function() {
$("a[@href^=http]").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
}})
});
If you want to add a class on external links for styling differently or add a background to it? It is easy. Just add this code. It will add a class to your external links.
$(document).ready(function() {
$("a[@href^=http]").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
$(this).addClass(‘external’);
}})
});

I am using this code in my blog. It works well. If you find any bug on it, Please let me know.

[update]

Today I added $(this).attr('rel', 'external nofollow');

So Google may not follow any external link. Now the script should look like this


$(document).ready(function() {
$("a[@href^=http]").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
$(this).attr('rel', 'external nofollow');
}}
)});