Tabbed navigation using jQuery

Someone asked me to show how I created the tabbed navigation thing in my blog (right column). Just to let you know, I am just using an existing template for my blog, but wish to design one myself in future.

In this tutorial, I am going to show you how to create a simple tabbed navigation using jQuery (as you know, its a javascript library).

Requirements
You will require two javascript files for doing this.
jQuery library - Download here
jQuery UI (user interface) tabs - Download here

HTML code
Suppose we have three div elements in our webpage (box-1, box-2, and box-3), and we want them in tabs.

<div id="container-1">
<ul>
<li><a href="#box-1"><span>One</span></a></li>
<li><a href="#box-2"><span>Two</span></a></li>
<li><a href="#box-3"><span>Three</span></a></li>
</ul>

<br />

<div id="box-1">
Box 1 content here
</div>

<div id="box-2">
Box 2 here...
</div>

<div id="box-3">
Do you really need Box #3?
</div>
</div>

CSS - some floats for ul and li

.ui-tabs-hide {
display: none;
}

ul {
margin: 0px;
padding: 0px;
}

ul li {
float: left;
padding-right: 10px;
list-style: none;
}

br {
clear: both;
}

a {
font-weight: bold;
text-decoration: none;
}

jQuery
Add this code at the end of your webpage (right before the closing body tag)

<script type="text/javascript">
$(window).bind('load', function() {
$('#container-1 > ul').tabs();
});
</script>

I assume you havent forgotten to add the two javascript files I mentioned earlier inside the HEAD tag. Have fun.

Switch CSS stylesheets using jQuery

CSS Stylesheet Switcher - what does it mean?
A stylesheet switcher allows your visitors to choose from a number of stylesheets they would like to view your website with. For example, you may have three pre-made stylesheets (say red, blue and green) and you want your visitors to choose and apply any one of them in your webpage without redirecting them to a new page or refreshing the page.

This tutorial will show you how to create such a client side css stylesheet switcher using jQuery javascript library.

Default Stylesheet
I assume you already have a default stylesheet implemented in your webpage

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

The list of options available to your visitors
List your available stylesheets here (follow the format)

<ul>
<li><a id="css-red" href="#red">Red</a></li>
<li><a id="css-blue" href="#blue">Blue</a></li>
<li><a id="css-green" href="#green">Green</a></li>
</ul>

Time for some JavaScript
This is the jQuery code that switches your stylesheets instantly once the visitor clicks on any of the links (listed above in ul tag)

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// red
$("#css-red").click(function() {
$("link[rel=stylesheet]").attr({href : "red.css"});
});

// blue
$("#css-blue").click(function() {
$("link[rel=stylesheet]").attr({href : "blue.css"});
});

// green
$("#css-green").click(function() {
$("link[rel=stylesheet]").attr({href : "green.css"});
});
});
</script>

Change or set HTML tag attribute using jQuery

It is sometimes necessary to change the attributes of a particular HTML tag of your webpage using javascript, especially when you are coding rich web applications. Let it be the class of an element, or the href attribute of an anchor tag.

In this tutorial, I am going to show you how to do it utilising jQuery javascript library quickly.

HTML code (inside BODY tag)
First, we will place a sample image and a link in our webpage.

<a id="clickMe" href="#">Change the image below</a>
<br />
<img id="myimage" src="current_image_file.jpg" />

Now we want the src attribute to change from current_image_file.jpg to new_image_file.jpg (a click event will be required).

jQuery code (place this JavaScript inside HEAD tag)

<script type="text/javascript" src=".jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#clickMe").click(function() {
$("#myimage").attr({src : "new_image.gif"});
});
});
</script>

Rounded corner navigation bar without images using CSS and jQuery

In this tutorial, we will create a navigation bar with rounded corners (without any image) using css and jQuery (a javascript library). If you dont have any experience with jQuery yet, I would recommend you to read these two tutorials first:
Change div content with jQuery
Toggle div element using jQuery

Requirements
jQuery library: Download here (packed version is 30kb)
jQuery Corner plugin: Download here (8kb).

This is what we will have at the end of this tutorial


Include jQuery library and the jQuery.corner plugin

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>

jQuery code
This is the important part of this tutorial. Apply corner() function on your desired element to make its corners rounded.

<script type="text/javascript">
$(document).ready(function() {
$("#nav ul").corner("8px");
});
</script>

CSS (you can change the colour values yourself)

#nav {
width: auto;
}
#nav ul, #nav ul li {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
#nav li {
background-color: #e9e9e9;
}
#nav li a {
display: block;
text-decoration: none;
font-weight: bold;
color: #919191;
padding: 10px;
}
#nav li a:hover {
text-decoration: underline;
}
#nav .active {
text-decoration: underline;
}

HTML code
Finally, its time for an unordered list (ul tag) of your menu

<div id="nav">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feed</a></li>
</ul>
</div>

Load remote content into div element using jQuery

If you are building rich web applications, then you will obviously require some ajax to give your users a smooth browsing experience. And jQuery makes it easier for you to do that without any trouble.

In my previous articles, I have shown you how to toggle a div element and also changing its content. Now I will show you how to load content from an external file into a div element.

loadContent() function
Though most of the jQuery code is placed inside head tag, I prefer that you create an additional javascript function for managing inline anchor links quickly.

function loadContent(elementSelector, sourceUrl) {
$(""+elementSelector+"").load("http://yoursite.com/"+sourceURL+"");
}

This is the main jQuery code for loading remote content inside an element
$("#content").load("http://yoursite.com/source.php");

Usage

<a href="javascript:loadContent('#content', 'source_page.php');">Link 1</a>
<div id="content">content will be loaded here</div>

Final code

<html>
<head>
<title>jQuery test page</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function loadContent(elementSelector, sourceUrl) {
$(""+elementSelector+"").load("http://yoursite.com/"+sourceURL+"");
}
</script>
</head>
<body>
<a href="javascript:loadContent('#content', 'source_page.php');">Link 1</a>
<div id="content">content will be loaded here</div>
</body>
</html>

Toggle div element using jQuery

What is Toggling?
Basically a show/hide feature for your webpage elements. For example, you may have a login box in your webpage, and you want your visitors to click on a button for showing or hiding the element.

This tutorial will show you how to implement a simple toggle effect in your webpage using jQuery.

As always, we will require some HTML content first

<a id="clickMe">Toggle my text</a>
<br />
<div id="textBox">This text will be toggled</div>

jQuery code
This is the code that makes the 'textBox' element toggle

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

But we want to toggle the element only when you click on 'Toggle my text' link. And this code will make it happen:

$(document).ready(function() {
$("#clickMe").click(function() {
$("#textBox").toggle();
});
});

Final Code:

<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#clickMe").click(function() {
$("#textBox").toggle();
});
});
</script>
</head>
<body>
<a id="clickMe">Toggle my text</a>
<br />
<div id="textBox">This text will be toggled</div>
</body>
</html>

Change div content with jQuery

This is a quick tutorial for understanding the basics of jQuery.

Create a new HTML file with this code:

<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// javascript here (jQuery)
</script>
</head>
<body>
<--- HTML content here -->
</body>
</html>

Right now, the page will just load the jQuery library.

Lets get some HTML content first

<a id="changeText">Change my text</a>
<br />
<div id="textBox">This text will be changed to something else</div>

jQuery code
Now we will add some javascript so that the content of 'textBox' element changes to something else once you click on 'Change my text' link.

$(document).ready(function() {
$("#changeText").click(function() {
$("#textBox").html("My text is changed!");
});
});

As soon as your page is loaded in your browser, a function is declared so that whenever you click on the link (with 'changeText' id), the content of the 'textBox' element will be changed to 'My text is changed!'.

Final output:

<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#changeText").click(function() {
$("#textBox").html("My text is changed!");
});
});
</script>
</head>
<body>
<a id="changeText">Change my text</a>
<br />
<div id="textBox">This text will be changed to something else</div>
</body>
</html>

Frameworks I prefer most for web applications

According to wikipedia: "web application framework is a software framework that is designed to support the development of dynamic websites, Web applications and Web services. The framework aims to alleviate the overhead associated with common activities used in Web development. For example, many frameworks provide libraries for database access, templating frameworks and session management, and often promote code reuse".

Here are some of the popular frameworks that you will find handy when developing applications.

Blueprint (CSS)
Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.

Script.aculo.us (Javascript)
script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly. But once you have jQuery, I am sure you will not use any other javascript libraries at all.

jQuery (Javascript)
jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript. Also, dont forget to have a look at jQuery UI.

CakePHP (PHP)
CakePHP is a rapid development framework for PHP that provides an extensible architecture for developing, maintaining, and deploying applications. Using commonly known design patterns like MVC and ORM within the convention over configuration paradigm, CakePHP reduces development costs and helps developers write less code.