Design Chemical - jQuery, Wordpress, Tutorials & Plugins» Website Coding

jQuery Tutorial – Create a Flexible Data Heat Map

Lee — Wed, 19 Oct 2011 03:01:52 +0000

Add more excitement to data tables using jQuery and conditional formatting to generate flexible data “heat maps”.

Long tables of numbers are never fun to look at and when presenting this kind of data on the web, where attention spans are already at their limits, you need to be able to present the highlights as quickly as possible.

Data heat maps provide the perfect way of taking ordinary data and creating something more visually appealing and informative.

jQuery Data Heat Map Demo

Download tutorial source files

Tutorial Objectives

To create our heat map in a way that is flexible enough to cover any range of values, there are several key components to our jQuery code that we need to consider:

Capture and statistically analyze all data points
Have a method of then grouping the data and being able to identify what formatting should be applied
Dynamically generate the CSS to be used for each group to create a heat map style effect
Apply the correct CSS to each data point

For this tutorial we will be using a random table of numbers and the formatting will be applied based on each value as a % of the largest value.

The Basic HTML

The complete table can be found on the demo page. The HTML below gives the basic table structure, showing one row of data and the CSS classes we will be using:


    
        
		    Title
			data 1
			data 2
			data 3
			data 4
			data 5
			data 6
		
    
	
	    
		    Wanda
			25
			55
			26
			19
			39
			21

Title	data 1	data 2	data 3	data 4	data 5	data 6
Wanda	25	55	26	19	39	21

The jQuery Code

1. Capture and analyze the data

The first thing we need to do is find out the largest value within the data range. To do this we use fairly simple but useful code to create an array of all data points and then return the maximum value:

2. Group data points

For this tutorial we have already decided that we will use % of each value from max value. We do this so that we can find exactly where the data point is positioned on a scale of 1 – 100. This is the critical part in creating the heat map as we will then use this scale to dynamically generate the CSS styles

100 is probably a little excessive but is an easy number to work with for the tutorial. You can obviously adjust this number to suit your data and style of heat map.

We only want to use integers so we also include some additional rounding of the results


n = 100; // Declare the number of groups

// Loop through each data point and calculate its % value
$('.heat-map tbody td').not('.stats-title').each(function(){
	var val = parseInt($(this).text());
	var pos = parseInt((Math.round((val/max)*100)).toFixed(0));
});

The above code is not yet complete since we will add the actual formatting into the same loop but have broken it down to explain how we create each step.

3. Dynamically generating the heat map styles

To create the heat map effect we are basically going to use background colour.

Technically there is no restriction on how you apply the styles and background colour is only one option. The code is fairly flexible and with some minor adjustments can be applied to font size, container size, background image, etc.

Colour is easy because we can directly calculate each colour value between 2 defined colours – our start point and the end point, which across 100 points should create a gradient style effect.

To calculate colour we need to use the RGB values, which are 0 to 255 for Red, Blue and Green.


// Define the ending colour, which is white
   xr = 255; // Red value
   xg = 255; // Green value
   xb = 255; // Blue value

// Define the starting colour #f32075
   yr = 243; // Red value
   yg = 32; // Green value
   yb = 117; // Blue value

// Calculate a specific colour point
// pos - calculated in the earlier code identifies where on the scale the data point is

red = parseInt((xr + (( pos * (yr - xr)) / (n-1))).toFixed(0));
green = parseInt((xg + (( pos * (yg - xg)) / (n-1))).toFixed(0));
blue = parseInt((xb + (( pos * (yb - xb)) / (n-1))).toFixed(0));

// Once we have our RGB values we combine them to create our CSS code
clr = 'rgb('+red+','+green+','+blue+')';

4. Apply the heat map styles to each data point

Finally we apply the new RGB value by setting the background colour of the table cell.


$(this).css({backgroundColor:clr});

We combine steps 2, 3 & 4 so that this is all being carried out within the same loop.

The Complete jQuery Code

The code below shows all 4 steps combined to create the complete heat map function:

To completely change the look of the heat map all it requires is to change the start colour and end colour RGB values!

Check out the demo page for more examples – jQuery Data Heat Map Demo or Download the tutorial source files

jQuery Tutorial – Create a jQuery Menu Slider

Lee — Mon, 08 Aug 2011 05:32:46 +0000

In the following tutorial we are going to go through how to create a jQuery menu slider similar to the one used in our own website’s mega menu navigation (see “WordPress Plugins” menu item).

View Demo Download Source Code

The HTML

The HTML is very simple and basically includes:

A wrapper (“#menu-slider”) – only used for styling the jquery menu slider
An unordered list of text links (“#list-links”), which will make up the menu section
A list of images (“#list-images”) including captions, which will be used to create the slider


    
        Mega Menu
        Vertical Mega Menu
        Vertical Accordion Menu
        jQuery Drill Down iPod Menu
        jQuery Slick Menu
        Floating Menu
        Floating Tweets
        Slick Contact Forms
        Slick Social Share Buttons
    

    
        
            
            jQuery Horizontal Mega Menu
        
        
            
            jQuery Vertical Mega Menu
        
        
            
            jQuery Vertical Accordion Menu
        
        
            
            jQuery Drill Down iPod Menu
        
        
            
            jQuery Slick Menu
        
        
            
            Floating Menu Widget
        
        
            
            Floating Tweets Widget
        
        
            
            Slick Contact Forms
        
        
            
            Slick Social Share Buttons

On the first link we have added the class “hover” to show the active state for the slider when the page loads.

The Slider jQuery Code

The jQuery is surprisingly simple for the menu slider. Basically it involves 2 parts – creating the slider structure and then the function to handle the hover event when hovering over the list of links:

$(document).ready(function() {

    // Declare variables
    var width = 400; // width of slide - required for animation calculation
    var slides = $('#list-images li');
    var numSlides = slides.length;

    // Wrap the slides & set the wrap width - this will be used to animate the slider left/right
    slides.wrapAll('').css({'float' : 'left','width' : width});
    $('#slide-wrap').css({width: width * numSlides});

    // Hover function - animate the slides based on index of active link
    $('#list-links li a').hover(function(){
        $('#list-links li').removeClass('hover');
        var i = $(this).index('#list-links li a');
        $(this).parent().addClass('hover');
        $('#slide-wrap').stop().animate({'marginLeft' : width*(-i)});
    });
});

In the above code we wrap the sliders in a div tag (“#slide-wrap”) – this is what is actually animated to give the sliding effect when hovering over a menu item.

The hover function on the list of links calculates how far to animate the slide-wrap based on the width of the slide and the index number of the active link. The function also adds class “hover” to the active li tag, which we can use to style the menu to indicate the active menu item.

The Menu Slider CSS

Finally some CSS styles to create the required design:

#menu-slider {
background: url(images/bg_menu_slider.png) no-repeat 0 0;
padding: 15px;
margin-bottom: 20px;
}

/* Required */
#list-images, #list-images li {
height: 292px;
width: 400px;
display: block;
}
#list-images {
float: right;
overflow: hidden; /* Required to hide the inactive slides */
border: 1px solid #ccc;
}
#list-images li {
position: relative;
}

#list-images li img {
background: #fff;
position: absolute;
top: 0;
left: 0;
}

/* Image captions */
#list-images li span {
background: url(images/grid1.png) repeat 0 0;
position: absolute;
bottom: 0;
left: 0;
width: 362px;
display: block;
padding: 14px 20px;
font: bold 20px Arial, sans-serif;
color: #fff;
height: 20px;
line-height: 20px;
}

/* Menu text links */
#list-links {
width: 220px;
float: left;
}
#list-links li {
padding: 0 15px 0 0;
}
#list-links li a {
font: normal 12px Arial, sans-serif;
color: #222;
padding: 8px 5px 8px 8px;
border-bottom: 1px solid #ccc;
font-weight: bold;
font-size: 13px;
display: block;
}
#list-links li.hover {
background: url(images/tab_current.png) no-repeat 100% center;
}
#list-links li.hover a, #list-links li.hover a:hover {
color: #fff;
background: none;
border-bottom: none;
padding-bottom: 9px;
}
#list-links li.last a {
border-bottom: none;
}

View Demo Download Source Code

Adding Vertical Slider Animation

Check out our follow up post – jQuery Tutorial – Adding Vertical Animation to the Slider Menu.

Create An Automatic Content Filter Using jQuery & CSS Classes

Lee — Sun, 05 Jun 2011 12:08:32 +0000

The objective of today’s jQuery tutorial is to automatically generate a list of “category” links from CSS class names and use these links to filter our HTML content.

For the tutorial demo we are going to use a list of links for our jQuery tutorials, which we would like to filter by subject/category. This technique however is useful for any kind of HTML elements including; images, creating dependant select lists, unordered/ordered lists, etc and is ideal for content that needs to be listed under multiple categories or creating portfolios.

Since the actual filter list is generated dynamically we can quickly and easily add/edit/delete items that we would like to filter as well as change the categories.

View Demo Download Source Files

HTML List

First we create our list of items to be filtered. For the purpose of the tutorial we wont include all of the list items show in the demo. On the few samples though note the class names added to each item – these are our categories/tags that we would like to use for filtering:


  
    Lightweight Slider
  
  
    Simple Horizontal Accordion
  
  
    jQuery Mega Drop Down Menu Plugin
  
  
    Animated Error Messages & Form Validation
  
  
    Ultimate Image Swap Gallery with 3 Lines of Code
  
  
    jQuery Fading Image Captions

The jQuery Code

There are basically 2 main parts to the jQuery:

Create The Filter Links – this involves retrieving all of the item classes and create a list of filter links based on the class names

A function to filter the demo list using the above links

1. Create The Filter Links

$(document).ready(function() {

// map the classes for each item into a new array
classes = $("#demo-list li a").map(function(){
    return $(this).attr("class").split(' ');
});

// create list of distinct items only
var classList = distinctList(classes);

// generate the list of filter links
var tagList = '';
tagItem = 'all';

// loop through the list of classes & add link
$.each(classList, function(index,value){
    var value = value.replace("-", " ");
    tagItem += ''+value+'';
});

// add the filter links before the list of items
$("#demo-list").before($(tagList).append(tagItem));

});

// Function to create a distinct list from array
function distinctList(inputArray){
	var i;
	var length = inputArray.length;
	var outputArray = [];
	var temp = {};
	for (i = 0; i < length; i++) {
		temp[inputArray[i]] = 0;
    }
    for (i in temp) {
        outputArray.push(i);
	}
	return outputArray;
}

In the above code we first retrieve all of the class names from our list of demo links using jQuery’s map function.

This will create an array of containing all class names. In order to convert it to an array containing a distinct list of class names we pass our array to the function at the end – distinctList().

With the cleaned up output from our distinctList() function we then loop through the array and create a filter link for each item. Note that we create the complete filter links list before we insert the HTML – this will help improve performance since we only need to manipulate the DOM once.

We have also included an “all” link, which will allow us to reset the demo list filter and show all items.b

2. Filtering the Demo List

// filter the demo list when the filter links are clicked
$('#tag-list li a').live('click',function(e){

    // allows filter categories using multiple words
    var getText = $(this).text().replace(" ", "-");
    if(getText == 'all'){
        $("#demo-list li a").fadeIn();
    } else {
        $("#demo-list li a").fadeOut();
        $("#demo-list li a."+getText).fadeIn();
    }

    // add class "active" to current filter item
    $('#tag-list li a').removeClass('active');
    $(this).addClass('active');

    // prevent the page scrolling to the top of the screen
    e.preventDefault();
});

The demo list items will be filtered when the filter links are clicked. Since we create the filter links on the fly we need to use the “live” function to bind the categories.

The function allows us to use multiple words for category names by adding them as class names with hyphens – e.g. horizontal-menus would appear in the filter links as “horizontal menus”.

For this demo we will use fadeIn and fadeOut to show/hide the demo links. This can easily be substituted by any of the animation styles to suit your own tastes.

Finally at the end of our click function we add code to give the current filter item the class “active” and use e.preventDefault() to stop the browser scrolling to the top of the screen when the filter links are clicked.

The Complete jQuery Code

The complete jQuery code for our automatic content filter is:

$(document).ready(function() {

// map the classes for each item into a new array
classes = $("#demo-list li a").map(function(){
    return $(this).attr("class").split(' ');
});

// create list of distinct items only
var classList = distinctList(classes);

// generate the list of filter links
var tagList = '';
tagItem = 'all';

// loop through the list of classes & add link
$.each(classList, function(index,value){
    var value = value.replace("-", " ");
    tagItem += ''+value+'';
});

// add the filter links before the list of items
$("#demo-list").before($(tagList).append(tagItem));

// filter the demo list when the filter links are clicked
$('#tag-list li a').live('click',function(e){

    // allows filter categories using multiple words
    var getText = $(this).text().replace(" ", "-");
    if(getText == 'all'){
        $("#demo-list li a").fadeIn();
    } else {
        $("#demo-list li a").fadeOut();
        $("#demo-list li a."+getText).fadeIn();
    }

    // add class "active" to current filter item
    $('#tag-list li a').removeClass('active');
    $(this).addClass('active');

    // prevent the page scrolling to the top of the screen
    e.preventDefault();
});
});

// Function to create a distinct list from array
function distinctList(inputArray){
	var i;
	var length = inputArray.length;
	var outputArray = [];
	var temp = {};
	for (i = 0; i < length; i++) {
		temp[inputArray[i]] = 0;
    }
    for (i in temp) {
        outputArray.push(i);
	}
	return outputArray;
}

View Demo Download Source Files

Adding a WordPress Menu To a Non-WordPress Page

Lee — Sat, 14 May 2011 23:25:04 +0000

If you are developing a site that uses WordPress as a CMS for part of the website and custom php pages for other sections it can be useful to utilise the functions built into WordPress on non-Wordpress pages.

One useful example is to use the WordPress menu system to manage the site’s menus. With its ability to add custom links, this offers a powerful solution to handling the complete website’s navigation.

Adding The WordPress Functions

Setting this up is actually very simple and just requires a few lines of code in the head of the page to add the necessary WordPress functions:

require('blog/wp-config.php');
$wp->init();
$wp->parse_request();
$wp->query_posts();
$wp->register_globals();

Obviously you need to change the path to the wp-config file to be the same as the directory for your WordPress installlation.

The WordPress Menu Function

To add a WordPress menu to our page we then just use the wp_nav_menu() function as we would do in our WordPress theme files. The function accepts all of the same parameters, which allows you to customise various aspects.

For our tutorial demo we are going to add the mega menu, which is set up for the WordPress mega menu plugin demo page. To identify the menu we use the “menu” parameter in the wp_nav_menu function, which accepts the menu slug name – based on the name you gave your menu in the WordPress admin system – in our case it is “mega-menu”

 'mega-menu' ) );
?>

And that’s all there is to it – just add the function in the page where you want the menu to appear.

See WordPress Menu Demo

Demo of WordPress menu in a non-wordpress page

Form Validation Using jQuery and Regular Expressions

Lee — Mon, 18 Apr 2011 02:00:09 +0000

Updated 18th April 2011

Regular expressions offer an extremely flexible and powerful way of adding validation to your website forms. Combined with jQuery, it allows you to ensure that data sent to the server matches all of your requirements.

In this post I have included several example regular expressions that we have used in our web design projects for validating form input.

For this tutorial we assume you know how to create the HTML form and add jQuery to your site. For samples you can refer to previous posts – check passwords using jQuery, email validation using jQuery or view the demo form.

View Demo

For each example we have created a css class, which can then be assigned to the relevant form element. If you are creating your own validation code/plugin there are obviously more efficient ways of creating a complete validation system but for the tutorial we have kept each regular expression sample separate and also use the “keyup” event.

jQuery To Handle the Submit Button

In order to use these validation functions in a form we need to add jQuery that will check for the presence of any span elements with the class “error”. We do this by using the length property. If the length is > 0 the form submit can be stopped and the user alerted:

$('#btn-submit').click(function() {
  if($('span.error').length > 0){
    alert('Errors!');
    return false;
  } else {
    $('#btn-submit').after('Form Accepted.');
    return false;
  }
});

Now that we have this code to check for errors, we can add any of the examples below to the form.

Example 1 – Validates Numeric Characters Only

Accepts only 0 – 9

$('.keyup-numeric').keyup(function() {
    $('span.error-keyup-1').hide();
    var inputVal = $(this).val();
    var numericReg = /^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
    if(!numericReg.test(inputVal)) {
        $(this).after('Numeric characters only.');
    }
});

Example 2 – No Special Characters

Allows only letters, numbers and spaces. All other characters will return an error.

$('.keyup-characters').keyup(function() {
    $('span.error-keyup-2').remove();
    var inputVal = $(this).val();
    var characterReg = /^\s*[a-zA-Z0-9,\s]+\s*$/;
    if(!characterReg.test(inputVal)) {
        $(this).after('No special characters allowed.');
    }
});

Example 3 – Maximum of 8 Characters

Allows all characters up to a maximum of 8. Useful for passwords, etc. The value can easily be increased/descreased by changing the {0,8}

$('.keyup-limit-8').keyup(function() {
    $('span.error-keyup-3').remove();
    var inputVal = $(this).val();
    var characterReg = /^([a-zA-Z0-9]{0,8})$/;
    if(!characterReg.test(inputVal)) {
        $(this).after('Maximum 8 characters.');
    }
});

Example 4 – US Phone Number

Allows numbers 2-9 for the first and second group of 3 followed by 0-9 for the last 4 with the groups separated by “-” e.g:

234-234-1234 = OK
134-234-1234 = Error
234-134-1234 = Error

$('.keyup-phone').keyup(function() {
    $('span.error-keyup-4').remove();
    var inputVal = $(this).val();
    var characterReg = /^[2-9]\d{2}-\d{3}-\d{4}$/;
    if(!characterReg.test(inputVal)) {
        $(this).after('Format xxx-xxx-xxxx');
    }
});

Example 5 – Validate Date Format

Allows date format – mm/dd/yyyy – including “/”. All other combinations will return errors e.g:

01/31/2001 = OK
31/01/2001 = Error
1/01/2001 = Error

$('.keyup-date').keyup(function() {
    $('span.error-keyup-5').remove();
    var inputVal = $(this).val();
    var dateReg = /^[0,1]?\d{1}\/(([0-2]?\d{1})|([3][0,1]{1}))\/(([1]{1}[9]{1}[9]{1}\d{1})|([2-9]{1}\d{3}))$/;
    if(!dateReg.test(inputVal)) {
        $(this).after('Invalid date format.');
    }
});

Example 6 – Check For Possible Fake Text

This is an interesting example, which checks for possible fake text being entered into your form. The regex looks for groups of the same letters occuring in groups of 3 or more e.g:

foo = OK
fff = Error

$('.keyup-fake').keyup(function() {
    $('span.error-keyup-6').remove();
    var inputVal = $(this).val();
    var fakeReg = /(.)\1{2,}/;
    if(fakeReg.test(inputVal)) {
        $(this).after('Invalid text.');
    }
});

Example 7 – Check Email Address Format

This is a standard regular expression, which is used to validate email addresses to ensure they follow the standard format:

email@email.com = OK
email.email.com = Error

$('.keyup-email').keyup(function() {
    $('span.error-keyup-7').remove();
    var inputVal = $(this).val();
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    if(!emailReg.test(inputVal)) {
        $(this).after('Invalid Email Format.');
    }
});

Example 8 – No Free Email Addresses

Another useful email validation regular expression checks for email addresses using free emails – in the example below we check for yahoo, gmail and hotmail:

email@yahoo.com = Error
email@email.com = OK

$('.keyup-email-2').keyup(function() {
    $('span.error-keyup-8').remove();
    var inputVal = $(this).val();
    var emailFreeReg= /^([\w-\.]+@(?!gmail.com)(?!yahoo.com)(?!hotmail.com)(?!aol.com)([\w-]+\.)+[\w-]{2,4})?$/;
    if(!emailFreeReg.test(inputVal)) {
        $(this).after('No Free Email Addresses.');
    }
});

Example 9 – Visa Card Number Format

For an example of validating a credit card we can use the following regular expression, which checks the input against the standard format for Visa credit cards – All card numbers must start with a 4 & cards may either have 16 digits or 13 digits for older cards:

4166000000000000 = OK
4166000000000 = OK
41660000000000001 = Error
2166000000000000 = Error

$('.keyup-cc').keyup(function() {
    $('span.error-keyup-9').remove();
    var inputVal = $(this).val();
    var ccReg = /^4[0-9]{12}(?:[0-9]{3})?$/;
    if(!ccReg.test(inputVal)) {
        $(this).after('Invalid visa card number');
    }
});

Hopefully some of the above examples will be useful for your forms and also help demonstrate how powerful regular expressions can be.

View Demo

Open External Links In New Browser Window Using jQuery

Lee — Wed, 06 Apr 2011 03:16:29 +0000

Since one of our earlier posts – How To Open Links In a New Browser Window we have had requests at how this can be automated so that only external links are opened in a new window without having to add class “external” to every link.

This can be done in a couple of ways depending on how your links are structured. As well as giving the code for external links, this tutorial also shows a good example of how to combine and use jQuery selectors to filter:

Method 1 – Links With Complete URLs

If your site uses complete URLs, including the domain name, for all links we can identify the external links by selecting those that do not contain your domain name. For this we use a combination of both the not() and :contains() selectors:

$(document).ready(function($){
    $('a').not(':contains(http://www.designchemical.com)').click(function(){
        this.target = "_blank";
    });
});

The above code will therefore identify any link that does not contain http://www.designchemical.com and open this in a new browser window.

View Demo 1

Method 2 – Only External Links Use Complete URLs

If only external links use complete URLs we can just use contains() selector to identify those links with http or https:

$(document).ready(function($){
    $('a:contains(http)').click(function(){
        this.target = "_blank";
    });
});

View Demo 2

jQuery Image Swap Gallery with Just 3 Lines of Code!

Lee — Sat, 26 Mar 2011 08:34:10 +0000

Our earlier post, Quick and Easy jQuery Image Swap has always been popular, so today we are going to use this code to create the ultimate jQuery image swap gallery with just 3 lines of code and 2 lines of CSS.

And here is the jQuery code:

$("#gallery li img").hover(function(){
	$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});

View The Demo Download Source Files

A great example of how jQuery can be extremely simple and effective.

The Gallery HTML

All we need for the gallery is the initial, main image and an unordered list holding the image thumbnails.

Our thumbnail images have the same file name as the larger versions and these are put into a folder called “thumb”, which is in the same directory as the main images – this is important for our gallery code to work as the image URL is obtained by getting the thumbnail URL and removing the “/thumb”.

Styling The Gallery

Definitely not rocket science here – a total of 2 CSS rules:

#gallery li {
display: inline;
margin-right: 3px;
}
#gallery #main-img {
background: url(images/bg_img.png) no-repeat 0 0;
padding: 26px;
}

Adding Image Preload Function

Although the 3 lines of jQuery will work, we can make the gallery far better if we use our image preload function, from our previous tutorial.

The complete jQuery for the gallery plus preload:

$(document).ready(function() {
	// Image swap on hover
	$("#gallery li img").hover(function(){
		$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
	});
	// Image preload
	var imgSwap = [];
	 $("#gallery li img").each(function(){
		imgUrl = this.src.replace('thumb/', '');
		imgSwap.push(imgUrl);
	});
	$(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('')[0].src = this;
    });
}

And that’s basically all there is to it.

Although it may not have fancy fade/zoom/slide/etc effects and look particularly slick, it is a nice and easy example of how to apply the jQuery image swap on hover function.

You can obviously improve on the features but if you are looking for a simple solution without having to understand setting up and styling a complicated gallery plugin (and lets face it some of them are complicated!), then this is about as simple as it gets!

View The Demo Download Source Files

WordPress Tutorial – Create Your own Custom Vertical Mega Menu

Lee — Fri, 25 Mar 2011 17:21:39 +0000

In our last menu tutorial we looked at creating a custom style sheet for the mega drop down menu plugin. Today we are going to go through the jQuery Vertical Mega Menu Plugin and how we can use the plugin’s built in CSS classes combined with the inherent WordPress menu classes to create a completely customised menu.

The sample CSS file in the demo can also be used as a template for your own WordPress vertical mega menu styles:

View Final Menu Demo Download source code

This tutorial assumes that you understand at least the basics of CSS and HTML, know how to create a custom menu using the admin system in WordPress 3.0 and, of course, use our Vertical Mega menu plugin as some of the CSS selectors are specific to this plugin.

The Objectives

For the tutorial we will create a mega menu for a store selling sports clothing/equipment. In addition to the basic minimum styles required to create the vertical mega menu we will add a drop-shadow to the menu container and also customise all 3 of the sub-menus.

Footwear Custom Menu

For this menu we will customise each row to add labels showing Mens/Ladies as well as add background images for each of the product groups.

Jackets Sub-Menu

Usually the mega menu works best with 3 levels of navigation. The jackets sub-menu gives an example of how you can still customise the mega menu with only 2 menu levels.

Sports Bags Sub-Menu

Add background images to each sub-menu.

Creating The Vertical Mega Menu

The Basic Mega Menu CSS

The following CSS code gives the minimum styling required to create the standard mega menu structure without any specifc styles for the menu options. Using this code our menu looks like this:

View Basic Mega Menu Demo

Still mega but definitely not as pretty!

The CSS contains notes on any essential styles

/* Main menu styling */
.dcjq-vertical-mega-menu .menu li a {
display: block;
color: #000;
padding: 11px 38px 11px 25px;
text-shadow: 1px 1px 1px #fff;
text-decoration: none;
border-bottom: 1px solid #999;
background: url(images/bg_nav.png) repeat-x 0 0;
}
.dcjq-vertical-mega-menu .menu li a:hover, .dcjq-vertical-mega-menu .menu li.mega-hover a {
background-position: 0 -40px;
color: #fff;
text-shadow: 1px 1px 1px #000;
}

/* Add arrow icon to parent links */
.dcjq-vertical-mega-menu .menu li a.dc-mega {
position: relative; /* Required since icons are positioned absolutely */
}
.dcjq-vertical-mega-menu .menu li a .dc-mega-icon {
display: block;
position: absolute;
top: 14px;
right: 15px;
width: 6px;
height: 8px;
background: url(images/arrow_right.png) no-repeat -6px 0;
}
.dcjq-vertical-mega-menu .menu li a:hover .dc-mega-icon, .dcjq-vertical-mega-menu .menu li.mega-hover a .dc-mega-icon {
background-position: 0 0;
}

/* Mega menu container */
.dcjq-vertical-mega-menu .menu li .sub-container {
position: absolute; /* Required */
overflow: hidden;
background: url(images/bg_menu.png) no-repeat 100% 100%; /* Add the drop shadow image */
padding: 0 13px 17px 0; /* Padding for drop shadow */
}
.dcjq-vertical-mega-menu .menu li .sub-container .sub {
border: none;
padding: 15px 15px 5px 15px;
background: #fff url(images/bg_grad_top.png) repeat-x 0 0;
border-top: 1px solid #ccc;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
border-left: 1px solid #ccc;
}
.dcjq-vertical-mega-menu .menu li .sub .row {
width: 100%; overflow: hidden; /* Required to clear floats for each row */
}
.dcjq-vertical-mega-menu .menu li .sub li {
float: none;
width: 160px; /* Set sub-menu width */
font-weight: normal;
}
.dcjq-vertical-mega-menu .menu li .sub li.mega-hdr {
float: left; /* Required */
margin: 0 5px 10px 5px;
}
.dcjq-vertical-mega-menu .menu li .sub a, .dcjq-vertical-mega-menu .menu.left li .sub a {
background: none;
border: none;
text-shadow: none;
float: none;
color: #000;
display: block;
text-decoration: none;
font-size: 0.9em;
margin-bottom: 0;
}
.dcjq-vertical-mega-menu .menu li .sub li.mega-hdr a.mega-hdr-a { /* Sub-menu headings */
background: url(images/bg_nav.png) repeat-x 0 -40px;
padding: 5px;
margin-bottom: 5px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px #000;
text-align: center;
}
.dcjq-vertical-mega-menu .menu li .sub li.mega-hdr a.mega-hdr-a:hover {
color: #000;
text-shadow: none;
}
.dcjq-vertical-mega-menu .menu .sub li.mega-hdr li {
margin-bottom: 3px;
}
.dcjq-vertical-mega-menu .menu .sub li a {
padding: 3px 3px 3px 15px;
background: url(images/bullet.png) no-repeat 3px 8px;
font-weight: normal;
text-transform: capitalize; font-size: 12px;
}
.dcjq-vertical-mega-menu .menu .sub li a:hover {
color: #fff;
background: #000 url(images/bullet_white.png) no-repeat 5px 8px;
}
.dcjq-vertical-mega-menu .menu .sub ul li {
padding-right: 0;
}

/* Styling for menu items with only 2 levels */
.dcjq-vertical-mega-menu .menu li .sub-container.non-mega .sub {
padding: 10px;
background: #fff;
}
.dcjq-vertical-mega-menu .menu li .sub-container.non-mega li {
padding: 0;
margin: 0;
width: 150px;
float: none;
}

Custom Styling

In order to customise the menu you will need the menu item ID’s that WordPress automatically assigns to the HTML list items. To get these you can view the source code for the menu in your own site. The ID follows the format “menu-item-#”, where # is a unique number assigned by WordPress.

It can get a little confusing wading through the source code so it’s best to work out first which items need to have additional CSS rules. The list items that will be customised and their ID’s in our demo are:

Footwear (ID menu-item-1) – For adding the “Mens” & “Ladies” labels to the rows
Nike Mens (ID menu-item-4)
Adidas Mens (ID menu-item-6)
Gola Mens (ID menu-item-7)
Nike Ladies (ID menu-item-8)
Adidas Ladies (ID menu-item-10)
Gola Ladies (ID menu-item-11)

Jackets (ID menu-item-2) – Overide the standard styling for only 2 levels of navigation
Jacket 1 (ID menu-item-12)
Jacket 2 (ID menu-item-13)
Jacket 3 (ID menu-item-14)

Sports Bags (ID menu-item-3) – Add padding to top of all bag sub-menus
Golf Bags (ID menu-item-15)
Sports Bags (ID menu-item-17)
Tennis Bags (ID menu-item-18)

Custom CSS For Footwear

/* Footwear */
.dcjq-vertical-mega-menu .menu li#menu-item-1 .sub .row {
padding: 10px 10px 0 40px; /* Pad the rows to add the background labels */
margin-bottom: 10px;
border: 1px solid #ccc;
background: url(images/mens.png) no-repeat 0 center; /* Mens row background image */
}
.dcjq-vertical-mega-menu .menu li#menu-item-1 .sub .row.last {
background-image: url(images/ladies.png); /* Ladies row background image */
}
.dcjq-vertical-mega-menu .menu li#menu-item-1 .sub li.mega-hdr {
padding: 75px 0 0; /* Padding for top of each sub-menu for background images */
}

/* Add the background images */
li#menu-item-4.mega-hdr {background: url(images/nike.png) no-repeat center 0;}
li#menu-item-6.mega-hdr {background: url(images/adidas_1.jpg) no-repeat center 0;}
li#menu-item-7.mega-hdr {background: url(images/gola_1.jpg) no-repeat center 0;}
li#menu-item-8.mega-hdr {background: url(images/nike_2.jpg) no-repeat center 0;}
li#menu-item-10.mega-hdr {background: url(images/adidas_2.jpg) no-repeat center 0;}
li#menu-item-11.mega-hdr {background: url(images/gola_2.jpg) no-repeat center 0;}

Custom CSS For Jackets

The jackets are slightly different to the other 2 since the menu only have 2 levels of navigation. The CSS below will float each item and create a larger menu container.

/* Jackets */
.dcjq-vertical-mega-menu .menu li#menu-item-2 .sub-container.non-mega .sub {
width: 480px; /* Required to overide styling for 2-levels */
height: 180px; /* Required */
padding: 20px 10px 10px;
}
.dcjq-vertical-mega-menu .menu li#menu-item-2 .sub-container.non-mega li {
float: left;
}
li#menu-item-12, li#menu-item-13, li#menu-item-14{
padding: 150px 0 0; /* Padding for top of each sub-menu for background images */
margin-right: 10px;
}

/* Add the background images */
li#menu-item-12 {background: url(images/jacket_1.jpg) no-repeat center 0;}
li#menu-item-13 {background: url(images/jacket_2.jpg) no-repeat center 0;}
li#menu-item-14 {background: url(images/jacket_3.jpg) no-repeat center 0;}

Custom CSS For Sports Bags

/* Sports Bags */
li#menu-item-3 li.mega-hdr {
padding: 120px 0 0; /* Padding for top of each sub-menu for background images */
}

/* Add the background images */
li#menu-item-15.mega-hdr {background: url(images/bag_1.jpg) no-repeat center 0;}
li#menu-item-17.mega-hdr {background: url(images/bag_3.jpg) no-repeat center 0;}
li#menu-item-18.mega-hdr {background: url(images/bag_4.jpg) no-repeat center 0;}

That’s basically it! Using the above techniques you can pretty much customise the menu to suite most requirements.

Download the source code below for a complete working copies of both the basic and customised menus.

View Final Menu Demo Download source code

Live Text Search Function Using jQuery

Lee — Mon, 14 Mar 2011 12:34:13 +0000

Today we are going to look at using jQuery to create a “live search” feature for your website. With just a few lines of code and a single text input box you can add a text filter to any site content.

For the tutorial we will create a search feature for our blog comments, although the same function can easily be applied to any elements by changing the selector.

The Search Box HTML

To capture the search text all we need is a simple input text field. To make the feature a little more exciting we are also going to show the number of results underneath the text input. For this we need to add a div tag with the ID – “filter-count”

Give the input field a unique ID since we will need this to capture the users text.

The Comments List

Our comments list is structured using an ordered list – e.g.


  Comment #1
  Comment #2

The jQuery Code

The jQuery for this feature is relatively easy and all we are doing is basically getting the input text value, checking this against our list of comments and hiding those that do not contain the text phrase. The count of the number of positive results is then displayed in our “filter-count” span tag.

Since this is a “live” search we will use the “keyup” event to initiate the function – the filtered comment list will therefore update with each character entered.

$(document).ready(function(){
	$("#filter").keyup(function(){

		// Retrieve the input field text and reset the count to zero
		var filter = $(this).val(), count = 0;

		// Loop through the comment list
		$(".commentlist li").each(function(){

			// If the list item does not contain the text phrase fade it out
			if ($(this).text().search(new RegExp(filter, "i")) < 0) {
				$(this).fadeOut();

			// Show the list item if the phrase matches and increase the count by 1
			} else {
				$(this).show();
				count++;
			}
		});

		// Update the count
		var numberItems = count;
		$("#filter-count").text("Number of Comments = "+count);
	});
});

This jQuery live search can be applied to any elements by changing the “.commentlist li” selector.

View jQuery Demo

The live text search is also used on all of our blog comments.

New jQuery Plugin – Vertical Mega Menu Plugin

Lee — Wed, 09 Mar 2011 14:10:55 +0000

To compliment the previous plugin for creating horizontal mega menus we have now launched the jQuery vertical mega menu plugin. This now allows you to have all of the benefits of drop down mega menus using menus in the page side columns with the mega menu flying out to the side.

Vertical mega menus offer better useability over standard flyout style menus with multiple levels.

Using this jQuery plugin you can create vertical mega menus from any standard nested HTML lists. The plugin includes several options, which can be configured for customising the menu:

Multiple menus per page
3 animation effects for displaying the flyout menu – show/hide, fade in or slide out
Set speed of animation
Set number of sub menus per row
Set the flyout menu to display on the right or left depending on the position of the menu

See the jQuery vertical mega menu plugin project pages for complete instructions, demos and to download the plugin including sample code.

New jQuery Plugin Released – jQuery Accordion Menu

Lee — Sat, 05 Mar 2011 03:49:35 +0000

We have now launched the jQuery accordion menu plugin used to create the WordPress accordion menu widget plugin.

The jquery plugin has several features, which make it very easy to create fully functional vertical accordion menus from standard HTML nested lists. Options built into the plugin include:

Option to use either hover or click to activate menu
Menu state can be saved between pages using cookies
No limit on the number of nested levels
Auto close the menu on mouseout for the hover option
Select option to limit open sub-menus to only one at a time or allow the menu to fully expand
And a new feature – ability to add a count of the number of child links to each parent menu item – offering users more information on the menu options available.

See the jQuery vertical accordion menu plugin project pages for complete instructions, demos and to download the plugin including sample code and skins.

Random Password Generator Using jQuery

Lee — Wed, 02 Mar 2011 16:12:08 +0000

Today’s jQuery post is a useful piece of code that you can add onto your registration forms for creating random passwords using only jQuery. The benefit of providing this system is that it generates stronger passwords than most people would create for themselves so offers extra security for critical applications.

See Random Password Demo Download the source code

To actually generate the random password we are going to use a nice little function from jQuery HowTo Blog – jQuery Password Generator.

The great thing about this function is that it allows us to set both the password length as well as the option to use special characters.

To use this function then we are going to create a form, add a “generate password” link, which will get the random password from the function and insert it into the form and add a second link, which the user clicks if they would like to use the password. If confirmed, we then insert the random password into the password field.

1. The HTML Form

Very simple form with just a user name and password field:


    
        
            
                User Name:
                
            
            
                Password:
                
                Use Password
                Generate Password

As usual I have used an ordered list for the form structure but obviously you can use whatever style you prefer since its not critical for the password generator. Make sure though that the form has a tag with an id “random”, which we are going to use to display the password.

Give both links the same class name as we will use the same click function for both links. The “confirm” link can be hidden though since we only require this if the “generate” link is clicked. We can do this using CSS as opposed to jQuery:

#confirm {display: none;}

2. jQuery Random Password Function

Next we add the password generator function jquery code:

$.extend({
  password: function (length, special) {
    var iteration = 0;
    var password = "";
    var randomNumber;
    if(special == undefined){
        var special = false;
    }
    while(iteration < length){
        randomNumber = (Math.floor((Math.random() * 100)) % 94) + 33;
        if(!special){
            if ((randomNumber >=33) && (randomNumber <=47)) { continue; }
            if ((randomNumber >=58) && (randomNumber <=64)) { continue; }
            if ((randomNumber >=91) && (randomNumber <=96)) { continue; }
            if ((randomNumber >=123) && (randomNumber <=126)) { continue; }
        }
        iteration++;
        password += String.fromCharCode(randomNumber);
    }
    return password;
  }
});

For full details refer back to the authors post.

Now we add the jQuery code that will use the above function to generate and insert the new password:

$(document).ready(function() {

    $('.link-password').click(function(e){

        // First check which link was clicked
        linkId = $(this).attr('id');
        if (linkId == 'generate'){

            // If the generate link then create the password variable from the generator function
            password = $.password(12,true);

            // Empty the random tag then append the password and fade In
            $('#random').hide().append(password).fadeIn('slow');

            // Also fade in the confirm link
            $('#confirm').fadeIn('slow');
        } else {
            // If the confirm link is clicked then input the password into our form field
            $('#input-password').val(password);
            // remove password from the random tag
            $('#random').empty();
            // Hide the confirm link again
            $(this).hide();
        }
        e.preventDefault();
    });
});

The function is fairly simple. The hide() and fadeIn() isnt essential – you can just append the new password to the #random selector but we added the fadeIn to make it a little more ‘exciting’!

The final e.preventDefault() stops the browser jumping to the top of the screen when the generate and confirm links are clicked.

To change the password length set the first option in the password function to the required number of characters. The second option takes a boolean value and sets whether special characters are to be used in the password.

See Random Password Demo Download the source code

jQuery Plugin – Drill Down Menu

Lee — Mon, 28 Feb 2011 14:36:58 +0000

Following the release of our new WordPress plugin – jQuery Drill Down iPod Menu Widget we have now also set up the jQuery plugin code that was used to create the WordPress widget.

Drill down menus are perfect for arranging and managing complex nested menus in compact and fixed sized areas and provide excellent useability where standard drop down menus may be too awkward.

The plugin converts standard hierarchical nested HTML into drill down (iPod style) menus. Features of the drill down menu plugin include – saved state using cookies, add count of total number of child links to each menu option and offers 3 different ways to navigate the menu

Check out our jQuery Drill Down Menu project pages for more information, drill down menu examples and to download the plugin.

WordPress Tutorial – Adding A Widget Area To Your Theme Files

Lee — Wed, 23 Feb 2011 09:55:34 +0000

Following up to the 2 recent WordPress menu plugins we launched we thought we should do a quick tutorial on how to add a widget area to your WordPress theme.

Both of the plugins, the jQuery Mega Menu and the jQuery Vertical Accordion Menu use widget areas as a quick and easy way to add custom menus to your WordPress site. If your theme does not have widget areas already set up in the locations where you need the menu then you need to create a new one in your theme files.

Its a fairly simple process, which involves 2 steps:

1. Register The Widget

To register the new widget you need to open the functions.php file in your WordPress themes editor.

Add the following code to the functions file, making sure you place it in between php tags:

if ( function_exists('register_sidebar') ){
    register_sidebar(array(
        'name' => 'my_mega_menu',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '',
        'after_title' => '',
));
}

Give the widget area a name – e.g. my_mega_menu and in the before/after options you can place code which you wish to appear wrapped around either the widget itself or the title.

Since we are wanting to use one of the menu widget themes, which come with plugins we dont want to wrap it in the standard widget tags, which may interfere with the CSS.

For this example we have just wrapped it in a div tag with the id – my-mega-menu-widget.

2. Add The Widget Code To Your Theme

Now we can add the code that will call the widget to the correct location in our theme files. Since we are creating a horizontal mega menu we obviously want to display this in the header.

In your WordPress themes editor open the header.php file.

Find the location where you want to place the menu and add the following code to the header.php file:

Make sure that you change the “my_mega_menu” text to be the same as the name you gave to your widget area in the functions file.

Save the changes to the header.php file

If you now go to the widget area in WordPress admin you should see a new widget area in the right hand column with the name of your widget.

You can now add your mega menu, accordion menu or any other widget to this area.

Create An Image Preloader For Image Swap Using jQuery

Lee — Tue, 15 Feb 2011 14:42:53 +0000

The following tutorial takes one of our earlier code snippets and improves it by adding a function to preload images.

The Quick and Easy jQuery Image Swap function offers a very simple way of implementing image change on hover for buttons, links, etc (see earlier post for more info). One problem however is that the first time the active image is called for a page there tends to be a delay as the new image loads.

One way to overcome this problem and ensure that the image swaps are more responsive is to preload all active versions of the images when the page downloads.

There are 2 parts to our jQuery code:

First we create our preload function, which will take an array of image file names and preload them when the page loads.
Then we create a function to create the image array by selecting all relevant images – i.e. the ones to be used in our image swap function. After selecting the images we then change the file names to those of the active images – i.e. swap “_off” for “_on” and store them in the array. This array can then be passed to the preload function.

1. jQuery Code – Preload Function

$.fn.preload = function() {
    this.each(function(){
        $('')[0].src = this;
    });
}

2. jQuery Code To Create The Image Array

$(document).ready(function() {
    // Declare the array variable
    var imgSwap = [];
    // Select all images used in the image swap function - in our case class "img-swap"
    $(".img-swap").each(function(){
        // Loop through all images which are used in our image swap function
        // Get the file name of the active images to be loaded by replacing _off with _on
        imgUrl = this.src.replace("_off","_on");
        // Store the file name in our array
        imgSwap.push(imgUrl);
    });
    // Pass the array to our preload function
    $(imgSwap).preload();
});

That’s basically it … a few lines of code, which will greatly enhance the performance of the image swap fuction.

In the following demo you can see the difference between a set of buttons using preload vs ones loading on hover:

Check Out The Preload Demo Download Source Code

Create Your Own jQuery AJAX Form Submit With Validation

Lee — Thu, 03 Feb 2011 23:42:04 +0000

For today’s tutorial we are going to do something a little more interesting and take several jQuery functions, which have been covered in our previous posts and combine them to create our own form submit process, which will be able to handle all of the forms in our projects.

This is a good exercise to see how various components/snippets can be combined to create a complete function.

The tutorial assumes you have the basic understanding of the HTML and CSS for the form.

View Demo Download Source Files

The Basic Components

So, in order to create our process we are going to use the following components:

A general HTML form format
Our standard CSS rules for styling the form
Add default text for our input fields, including a function to remove the default text when the form is submitted – see earlier blog post – Add Default Text To Form Fields Using jQuery
jQuery validation rules, which are applied when a form is submitted
jQuery code for processing the form and submitting the contents via AJAX

1. HTML Form Format

Obviously everyone has their own preferences when it comes to how you code your form. After experimenting with several different formats I found that using an ordered list to handle the layout, which each form input field and associated label being one list item, has been easiest to use and so far has been robust enough to take most standard form requirements.

For the tutorial we will create a standard contact form with a name field, email, telephone and text area for comments:


		    
			  Contact Form
			  
			    
				  Email:
				  
				
				
				  Name:
				  
				
				
				  Phone:
				  
				
				
				  Comments:

As usual our jQuery will use css classes and IDs for the selectors. The key ones we need to include are:

Class “btn-submit” on the form submit button – used to trigger the function.
Class “required” on any input fields to be validated.
Class “email” as an additional class on those input fields to be tested against our regular expression for correctly formatted email addressed.

2. The Form CSS

The CSS I use as the basis for this format is as follows:

.styled {
font-family: Arial, sans-serif;
}
.styled fieldset {
border: 1px solid #ccc; padding: 10px;
}
.styled fieldset legend {
font-size: 16px; font-weight: bold; color: #000; text-transform: capitalize; padding: 5px; background: #fff; display: block; margin-bottom: 0; border: 1px solid #ccc;
}
.styled fieldset ol, .styled fieldset ol li {
list-style: none;
}
.styled fieldset li.form-row {
margin-bottom: 3px; padding: 2px 0; width: 100%; overflow: hidden; position: relative;
}
.styled label {
font-size: 12px; display: block; font-weight: bold; float: left; width: 100px; margin-left: 5px; line-height: 24px;
}
.styled input.text-input, .styled .text-area {
background: #fefefe; border-top: 1px solid #909090; border-right: 1px solid #cecece; border-bottom: 1px solid #e1e1e1; border-left: 1px solid #bbb; padding: 3px; width: 220px; font-size: 12px;
}
.styled input.text-input.default.active, .styled .text-area.default.active {
color: #666; font-style: italic;
}
.styled fieldset li.button-row {
margin-bottom: 0; padding: 2px 5px;
}
form input.btn-submit {
padding: 3px 7px; border: 1px solid #fff; background: #066CAA; font-size: 12px;
}

This is pretty much the minimum styling we need to add to get the labels and input fields aligned and pad/border the form. This can then be applied to your forms by adding the class “styled”. You can build on the above CSS to make your forms a little more exciting!

Any specific rules you may want to add for each form can be done using it’s id. For our contact form #form-contact, we want to set the width to 320px and center on the page.

Validation CSS

In addition to the form layout we also need a few additional CSS rules, which will handle the styling of the validation results:

.styled span.error {
font-size: 11px; position: absolute; top: 0; right: 0; display: block; padding: 2px;
}
.styled fieldset li.error {
color: #D8000C; background: #fff0f0 url(../media/images/checkers.png) repeat; border: 1px solid #f9c7c7; padding: 5px 0;
}
.styled fieldset li.error label {
text-align: left;
}

3. The jQuery Code – Default Text Function

Before we tackle the form submission and validation lets add the jQuery code to handle the default text for the input fields – See earlier post for explanation.

$(".default").each(function(){
  var defaultVal = $(this).attr('title');
  $(this).focus(function(){
    if ($(this).val() == defaultVal){
      $(this).removeClass('active').val('');
    }
  });
  $(this).blur(function() {
    if ($(this).val() == ''){
      $(this).addClass('active').val(defaultVal);
    }
  })
  .blur().addClass('active');
});

We can now add default text to any of our form fields by simply adding the class “default” and using the title attribute to hold the default text. In our contact form example we have decided to add default text to both the email fields and the name field, which are both required.

Since we dont want the default text to be submitted with the form for any empty fields we add a jQuery function, which will automatically check all input fields with class “default” and remove the text if the value is the same as the title attribute:

function defaulttextRemove(){
  $('.default').each(function(){
    var defaultVal = $(this).attr('title');
    if ($(this).val() == defaultVal){
      $(this).val('');
    }
  });
}

Now for our main function, handling the form submit. There are a few parts to this process:

Check the form details – i.e. exactly which submit button has been pressed and the action URL for the data, since we are creating a generic function, which can be used by any forms, including multiple instances on one page.
Run the relevant validation on all required input fields – for our example we have both standard required text field and email validation using regular expressions to check for a correct email format.
Assuming no errors, we serialize the form data and using AJAX, post the contents to the form URL and return a result.

4. Form Validation and AJAX Form Submit jQuery Code

// Declare the loading gif as a variable, which will be used later
var $loading = $('');

// Form validation and submit when button is clicked
$('.btn-submit').click(function(e){

  // Declare the function variables - parent form, form URL and the regex for checking the email
     var $formId = $(this).parents('form');
     var formAction = $formId.attr('action');
     var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

  // In preparation for validating the form - Remove any active default text and previous errors
      defaulttextRemove();
      $('li',$formId).removeClass('error');
      $('span.error').remove();

  // Start validation by selecting all inputs with the class "required"
      $('.required',$formId).each(function(){
          var inputVal = $(this).val();
          var $parentTag = $(this).parent();
          if(inputVal == ''){
              $parentTag.addClass('error').append('Required field');
          }

      // Run the email validation using the regex for those input items also having class "email"
	  if($(this).hasClass('email') == true){
              if(!emailReg.test(inputVal)){
                  $parentTag.addClass('error').append('Enter a valid email address.');
              }
          }
    });

    // All validation complete - check whether any errors exist - if not submit form
       if ($('span.error').length == "0") {
           $formId.append($loading.clone());
           $('fieldset',$formId).hide();
           $.post(formAction, $formId.serialize(),function(data){
               $('.loading').remove();
               $formId.append(data).fadeIn();
           });
      }
    // Use the following to prevent the form being submitted the standard way
      e.preventDefault();
});

When the submit button is clicked all input fields with the class “required” are checked to see if they have a value. If not an error class is applied to the parent list tag (allows us to highlight the complete form row) as well as an error text message inserted after the input field.

If the input field also has the class “email” a further validation check is made using a standard regular expression to see if the text pattern matches that of an email format.

If any of the validation checks return an error then the form submit is stopped. Here we use an extremely easy and effective way of seeing if there are any errors by using $(‘span.error’).length. If length is not “0″ then there are error messages still active.

If all validation is clear we then use the $.post function to submit the form data. At the same time we hide the form contents and replace with a loading gif.

When the data is returned from the AJAX post we then hide the loading gif and replace the form contents with the data itself – usually this would be something like a status message for the user.

The Complete jQuery Code

jQuery(document).ready(function($) {
	var $loading = $('');
	$(".default").each(function(){
		var defaultVal = $(this).attr('title');
		$(this).focus(function(){
			if ($(this).val() == defaultVal){
				$(this).removeClass('active').val('');
			}
		});
		$(this).blur(function() {
			if ($(this).val() == ''){
				$(this).addClass('active').val(defaultVal);
			}
		})
		.blur().addClass('active');
	});
	$('.btn-submit').click(function(e){
		var $formId = $(this).parents('form');
		var formAction = $formId.attr('action');
		defaulttextRemove();
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
		$('li',$formId).removeClass('error');
		$('span.error').remove();
		$('.required',$formId).each(function(){
			var inputVal = $(this).val();
			var $parentTag = $(this).parent();
			if(inputVal == ''){
				$parentTag.addClass('error').append('Required field');
			}
			if($(this).hasClass('email') == true){
				if(!emailReg.test(inputVal)){
					$parentTag.addClass('error').append('Enter a valid email address.');
				}
			}
		});
		if ($('span.error').length == "0") {
			$formId.append($loading.clone());
			$('fieldset',$formId).hide();
			$.post(formAction, $formId.serialize(),function(data){
				$('.loading').remove();
				$formId.append(data).fadeIn();
			});
		}
		e.preventDefault();
	});
});
function defaulttextRemove(){
	$('.default').each(function(){
		var defaultVal = $(this).attr('title');
		if ($(this).val() == defaultVal){
			$(this).val('');
		}
	});
}

View Demo

Download Source Files

Setting Equal Heights of Floated Elements Using jQuery

Lee — Fri, 07 Jan 2011 19:53:15 +0000

As a web designer you are bound to come across the problem of how to handle unequal heights of floated elements, especially when it comes to layouts for online stores:

Without Resizing

Whilst many ecommerce/content management systems will automatically create standard thumbnails or you can use CSS to limit the height of the thumbnail shown sometimes it is not possible/desirable/liked by client to limit the thumbnail height.

Using jQuery we can easily overcome this problem to create an auto-resizing product list:

Using jQuery to Resize

The jQuery Code:

So, in the following jQuery code we are going to do a few things:

Create a function to determine the greatest height of an element
Use the above function to get the height of the largest list item
Use the function again to get the height of the largest image
Use the above values to then set the CSS of the list item – for this example we set both the height of the list item as well as the bottom margin of the image to line-up the text

// The function to find the greatest height from a set of elements
function findMaxValue(element){
    var maxValue = undefined;
    $(element).each(function(){
        var val = parseInt($(this).height());
        if (maxValue === undefined || maxValue < val) {
            maxValue = val;
        }
    });
    return maxValue;
}
// Using the above function we set the height of all list items and the bottom margin of the image
$(document).ready(function (){
    $listItem = $('ul li');
    maxValue = findMaxValue($listItem);
    $listItemImg = $('img',$listItem);
    maxImgHeight = findMaxValue($listItemImg);
    $listItem.each(function(){
        $(this).css("height",maxValue);
        var imageHeight = $('img',this).height();
        var imageMargin = maxImgHeight - imageHeight;
       $('img',this).css("margin-bottom",imageMargin);
    });
});

Whilst we have used a list of thumbnails and text to demonstrate the jQuery this can easily be applied to an selection of elements.

View Demo – Set Equal Heights Using jQuery Download source files

jQuery Tutorial Demos

Lee — Fri, 07 Jan 2011 17:14:07 +0000

I have now added a list of all of the available jQuery tutorial demos so far, including demos and links for the jQuery plugins. So if you are looking for some quick tips take a look at:

jQuery Tutorial Demos

Light-Weight jQuery Animated Slider

Lee — Wed, 05 Jan 2011 21:56:25 +0000

Today’s tutorial is a brief look at the jQuery animate function and how this can be used to create a very quick and easy content slider from an unordered list and a few lines of jQuery.

Whilst there are a lot of plugins out there for creating slick jQuery sliders sometimes all you need is a few lines a code to come up with your own features and in fact this simple code snippet is only 580 bytes!

View the jQuery light weight slider demo

Download source files

The HTML Code

The slider will be created from a very simple unordered list, which we wrap in a container tag. The jQuery will automatically handle any number of list items so we can add as many as necessary. Since its created from straight forward HTML our slider can contain any content including text, images, etc:


  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra, elit sed hendrerit condimentum, libero elit tincidunt mauris, id rutrum tellus leo at urna. Fusce dui mi, lacinia sit amet blandit vitae, interdum ut eros.
    Aenean scelerisque ipsum a nunc placerat sed blandit odio sollicitudin. Donec sed velit id ipsum lobortis tincidunt a sit amet leo. Praesent sit amet nisl a arcu lobortis egestas. Nunc at felis in erat condimentum ornare vel vel nisl.Suspendisse iaculis sodales dui pretium faucibus. Praesent vitae ipsum justo, id tempor tellus. In nulla leo, dignissim quis luctus sed, commodo nec velit. Aliquam ac nisl quam, quis tincidunt magna.
    It elit sed hendrerit condimentum, libero elit tincidunt mauris, id rutrum tellus leo at urna. Fusce dui mi, lacinia sit amet blandit vitae, interdum ut eros. Nulla egestas imperdiet rutrum. Praesent vel metus ligula.

So, in our example we have 4 list items, all wrapped in a div tag, which has the id “light-slide”.

The jQuery Code

The jQuery basically comes in 2 parts – the first section creates the control navigation buttons for our content slider and the second part handles the animation function when we click a control button:

$(document).ready(function (){

  // Here we check how many list items are present and generate the correspdonding number of control buttons //
    var controlHtml = '';
    $('#light-slide li').each(function(){
        controlHtml += '';
    });
    controlHtml += '';
    $('#light-slide').after(controlHtml);

  // Set the first button to "active" //
  $('#control a:first').addClass('active');

  // Next we define the click event and subsequent animate function that will move our slider to the correct position //
  var $slideButton = $('#control a');
  $slideButton.click(function(e){
      $slideButton.removeClass('active');
      $(this).addClass('active');
      var integer = $(this).index();
      $('#light-slide ul').animate({"left": -400*integer}, 400);
      e.preventDefault();
    });
});

So in the above code, when one of the slider buttons is clicked the jQuery code checks the position of the button using index() and moves the unordered list sideways based on the list position x the list item width – in this case 400px. So if we click button #3 our list will be moved 800 pixels to the left, therefore showing slide number 3 in the viewing area.

The CSS

There are a few CSS rules, which are essential for the jQuery to be effective:

/* The slider container width needs to be fixed based on the width of one of our list items and the overflow set to "hidden" to hide the other items */
#light-slide {width: 400px; height: 200px; overflow: hidden; position: relative;}
#light-slide ul {height: 200px; position: absolute; top: 0; left: 0;}

/* We set the width and the height of each list item to match the slider container */
#light-slide li {width: 400px; height: 200px; float: left;}

/* The following code just sets the control button styling */
#control a {background:#999;padding:6px;display:block;float:left;margin-right:5px;}
#control a.active{background:#111;padding:6px;display:block;float:left;outline:none;}

And that is basically it …

View the jQuery light weight slider demo

Download source files

Add Default Text To Form Fields Using jQuery

Lee — Thu, 23 Dec 2010 07:28:57 +0000

The following code snippet is a handy jQuery function that will allow you to add default text to any form input text field using the element’s title attribute.

View Default Text Demo.

1. The HTML – Form With Text Inputs

So, in the above example we have created a very basic form with 3 text input fields and a submit button. For each of the text inputs we have added the class “default”, which we will use in the jQuery function to identify the input fields and a title attribute, which contains the default text that we wish to display.

2. JQuery Code Part I – Creating The Default Text

For the first part of the function we add code, which will take the title attribute of each input field with the class “default” and insert this in the form field:

$(document).ready(function(){
  $('.default').each(function(){
    var defaultVal = $(this).attr('title');
    $(this).focus(function(){
      if ($(this).val() == defaultVal){
        $(this).removeClass('active').val('');
      }
    })
    .blur(function(){
      if ($(this).val() == ''){
        $(this).addClass('active').val(defaultVal);
      }
    })
    .blur().addClass('active');
  });
});

There are 2 parts to the function:

On Focus
jQuery checks the actual input value and if it is the same as the default text (i.e. no input has yet been made) it will clear the form field and remove the “active” class, basically resetting the text field for the user to enter their text.

On Blur
jQuery checks the input value and if it is empty it will apply the default text from the title attribute and add the active class, which we can use for the default text styling.

3. JQuery Code Part II – Handling Form Submit

When the form is submitted we obviously dont want the default text submitted for any text elements that may have been left blank by the user. We can handle this using the following jQuery function:

$('form').submit(function(){
  $('.default').each(function(){
    var defaultVal = $(this).attr('title');
    if ($(this).val() == defaultVal){
      $(this).val('');
    }
  });
});

The above code checks each input element with the class “default” and if the form field value is the same as the title attribute it will clear the text prior to the form being submitted.

4. The Complete jQuery Code

The following is the complete jQuery code for both the default text and handling the form submit:

$(document).ready(function(){
  $('.default').each(function(){
    var defaultVal = $(this).attr('title');
    $(this).focus(function(){
      if ($(this).val() == defaultVal){
        $(this).removeClass('active').val('');
      }
    })
    .blur(function(){
      if ($(this).val() == ''){
        $(this).addClass('active').val(defaultVal);
      }
    })
    .blur().addClass('active');
  });
  $('form').submit(function(){
    $('.default').each(function(){
      var defaultVal = $(this).attr('title');
      if ($(this).val() == defaultVal){
        $(this).val('');
      }
    });
  });
});

View Default Text Demo.

Disable Form Input Autocomplete Using jQuery

Lee — Wed, 03 Nov 2010 14:36:23 +0000

Earlier I came across an interesting problem caused by a text input field’s autocomplete. Sometimes it is useful to be able to disable this feature in a users browser – e.g. for completing forms with sensitive information such as credit card numbers but using the attribute autocomplete=”off” on the input field would technically cause issues with validation.

One way to … more

jQuery Simple Vertical Accordion Menu with Cookies

Lee — Fri, 24 Sep 2010 20:14:21 +0000

Using the jQuery code from one of our previous tutorials on creating a simple vertical navigation menu we can add the very useful jQuery cookie plugin to create a more advanced navigation menu that remembers your visitors last location.

The HTML, jQuery and CSS

To speed up the tutorial we will assume that you have already followed the initial postings and therefore understand how to create the basic HTML/CSS structure for a vertical accordion menu and that you have the preliminary jQuery in place.

Using jQuery Cookies

What jQuery cookies allows us to do is very easily create/modify/store a cookie on the visitors computer that will hold the position of the last menu item visited. When they next visit the site we can therefore use this value to automatically open the relevent menu section.

Creating a jQuery Cookie

To create a cookie we simply declare the cookie name, followed by the value. For our accordion menu we will therefore create a cookie named “nav-item” and its value will be the index value of the last anchor tag clicked. So to create this we use:

$('#nav > li > a').click(function(){
      var navIndex = $('#nav > li > a').index(this);
	  $.cookie("nav-item", navIndex);
	  $('#nav li ul').slideUp();
	   if ($(this).next().is(":visible")){
		   $(this).next().slideUp();
	   } else {
	   $(this).next().slideToggle();
	   }
	   $('#nav li a').removeClass('active');
	   $(this).addClass('active');
  });

In the above code – line 2 gets the index value and line 3 sets the cookie.

Using the Cookie Value

Now that we have a cookie on their computer we need to add the jQuery code that will check the visitors browser when the page loads, retrieve the cookie if it exists and use this to open the appropriate menu section:

var checkCookie = $.cookie("nav-item");
  if (checkCookie != "") {
	$('#nav > li > a:eq('+checkCookie+')').next().show();
  }

That is basically all that is required. Put it all together and the complete code …

The Complete jQuery

$(document).ready(function () {
  var checkCookie = $.cookie("nav-item");
  if (checkCookie != "") {
	$('#nav > li > a:eq('+checkCookie+')').next().show();
  }
  $('#nav > li > a').click(function(){
      var navIndex = $('#nav > li > a').index(this);
	  $.cookie("nav-item", navIndex);
	  $('#nav li ul').slideUp();
	   if ($(this).next().is(":visible")){
		   $(this).next().slideUp();
	   } else {
	   $(this).next().slideToggle();
	   }
	   $('#nav li a').removeClass('active');
	   $(this).addClass('active');
  });
});

Check out the online demo

Update 5th Mar 2011:

We have now also released the jQuery Vertical Accordion Menu Plugin, which makes it easy to create accordion menus from any nested HTML lists. The plugin has several features including use of cookies and ability to select either hover or click to activate the menu.

Check out the project pages for more information and examples or go straight to the download page.

jQuery Simple Horizontal Accordion

Lee — Wed, 21 Jul 2010 08:17:31 +0000

After our tutorial last month showing how to create a vertical accordion menu using jQuery we have had a couple of requests asking how to make a horizontal accordion.

So we have decided to provide the following post, which shows very easily how to use the power of jQuery to create a rather nice horizontal accordion effect.

1. The HTML

First we create an unordered HTML list with id=”accordion” and include some content in each of the li tags – since the accordion is horizontal we have decided to use images to create the section labels:


      
        
        Section 1 Header

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      
      
        
        Section 2 Header

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      
      
        
        Section 3 Header

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      
      
        
        Section 4 Header

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.

2. Style The Accordion

Next we add a few CSS rules, which will help style the accordion and its content:

#accordion {
list-style: none;
margin: 30px 0;
padding: 0;
height: 200px;
overflow: hidden;
background: #7d8d96;}

#accordion li {
float: left;
border-left:
display: block;
height: 170px;
width: 50px;
padding: 15px 0;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;
border-left: 1px solid #fff;}

#accordion li img {
border: none;
border-right: 1px solid #fff;
float: left;
margin: -15px 15px 0 0;
}

#accordion li.active {
width: 450px;
}

The main items to take note of here are the widths of the li elements, which need to be the same as the min-width setting in our jQuery below and the width of the “active” tag, which should equal the max-width of the accordion section.

The “#accordion li.active” is also required to ensure that the default section is open when the page loads.

The rest is mainly styling of the background, text and positioning of the section header images.

3. The jQuery Code

Finally the jQuery to create the horizontal accordion effect – in this example we have used the “hover” event to trigger the animation:

$(document).ready(function(){

    activeItem = $("#accordion li:first");
    $(activeItem).addClass('active');

	$("#accordion li").hover(function(){
		$(activeItem).animate({width: "50px"}, {duration:300, queue:false});
		$(this).animate({width: "450px"}, {duration:300, queue:false});
		activeItem = this;
	});

});

You can change which is the default open section upon page load by changing the “activeItem” variable – in our example we have used “#accordion li:first” to select the first list item.

Other options that can be changed include the min-width (in this case 50px) and the max-width, which we have set to 445px – the values in these lines must match the values given in the CSS rules above.

The duration setting controls the time in milliseconds for the accordion to animate from minimum to maximum width – again these can be set according to your preference.

The queue:false is required to stop the accordion capturing every hover event and continuing to animate after the mouse has left the hover area.

View the jQuery horizontal accordion demo

jQuery Image Swap Using Click

Lee — Sat, 19 Jun 2010 09:56:11 +0000

In a previous post we showed a simple piece of jQuery code, which allows you to add the ability to swap images on hover to your website. Since then we have had several requests asking how to add a similar effect using “click” instead.

The Image

Use the same naming system for the 2 images as in our previous post – i.e. normal state called xxxxxx_off.jpg and the clicked state xxxxxx_on.jpg and add the class “img-swap” to the image tag in your HTML:

jQuery Code

With just a few lines of jQuery you can now add the image swap function on click to any images in your web pages:

$(function(){
  $(".img-swap").live('click', function() {
    if ($(this).attr("class") == "img-swap") {
      this.src = this.src.replace("_off","_on");
    } else {
      this.src = this.src.replace("_on","_off");
    }
    $(this).toggleClass("on");
  });
});

See the demo

jQuery Simple Vertical Accordion Menu

Lee — Wed, 09 Jun 2010 02:40:50 +0000

Today’s jQuery tutorial is a perfect example of how easy it is to add a slick vertical accordion style menu to your website with just a few lines of jQuery code!

The HTML

First we create a nested unordered list, which will include all of our links. Give the first ul tag a unique id – we use #nav:


  Item 1
    
      Sub-Item 1 a
      Sub-Item 1 b
      Sub-Item 1 c
    
  
  Item 2
    
      Sub-Item 2 a
      Sub-Item 2 b
    
  
  Item 3
    
      Sub-Item 3 a
      Sub-Item 3 b
      Sub-Item 3 c
      Sub-Item 3 d
    
  
  Item 4
    
      Sub-Item 4 a
      Sub-Item 4 b
      Sub-Item 4 c

Style The Menu With CSS

For this tutorial we add a little styling to the menu and use CSS to hide the sub-menus using “display: none;”:

#nav {float: left; width: 280px;  border-top: 1px solid #999; border-right: 1px solid #999; border-left: 1px solid #999;}
#nav li a {display: block; padding: 10px 15px; background: #ccc; border-top: 1px solid #eee; border-bottom: 1px solid #999; text-decoration: none; color: #000;}
#nav li a:hover, #nav li a.active {background: #999; color: #fff;}
#nav li ul {display: none;}
#nav li ul li a {padding: 10px 25px; background: #ececec; border-bottom: 1px dotted #ccc;}

The jQuery Code

To create the accordion effect the code is extremely simple:

$(document).ready(function () {
  $('#nav > li > a').click(function(){
    if ($(this).attr('class') != 'active'){
      $('#nav li ul').slideUp();
      $(this).next().slideToggle();
      $('#nav li a').removeClass('active');
      $(this).addClass('active');
    }
  });
});

First we use the child selector “>” to ensure that only the parent links activate the accordion menu – otherwise you would end up closing the menu each time a sub-link is clicked.

We add a new class to the active item – this allows us to not only style the open accordion menu but also identify if a sub-menu is open when a link is clicked. The above jQuery code will only work on closed menu items.

View the jQuery vertical accordion menu demo.

Update 5th Mar 2011:

Check out the project pages for more information and examples or go straight to the download page.

Change Order of Multiple Select Lists Using jQuery

Lee — Fri, 21 May 2010 09:36:27 +0000

In my last post I went through the code required to create an add/remove select list using jQuery.

Today’s post is going to expand on the earlier tutorial and add up/down buttons, which will allow you to change the order of the option items in the select list.

The HTML Code

The HTML code for the select lists remains the same as the earlier post, except with the addition of the “up” and “down” links:


  
    
    Add »
    « Remove
    
    Up
    Down

The jQuery Code

Again, keeping the same code for the add/remove functions, we just need to add the additional jQuery to handle the up/down links:

$(document).ready(function() {
    $('#btn-add').click(function(){
        $('#select-from option:selected').each( function() {
                $('#select-to').append("");
            $(this).remove();
        });
    });
    $('#btn-remove').click(function(){
        $('#select-to option:selected').each( function() {
            $('#select-from').append("");
            $(this).remove();
        });
    });
    $('#btn-up').bind('click', function() {
		$('#select-to option:selected').each( function() {
			var newPos = $('#select-to option').index(this) - 1;
			if (newPos > -1) {
				$('#select-to option').eq(newPos).before("");
				$(this).remove();
			}
		});
	});
	$('#btn-down').bind('click', function() {
		var countOptions = $('#select-to option').size();
		$('#select-to option:selected').each( function() {
			var newPos = $('#select-to option').index(this) + 1;
			if (newPos < countOptions) {
				$('#select-to option').eq(newPos).after("");
				$(this).remove();
			}
		});
	});
});

1. The “Up” Link

First we tackle the “up” link. Basically how we handle this is to retrieve the index value of each selected option, set the variable for the option items new position as … current index – 1, recreate the option HTML and insert it “before” the new index position. Finally – remove the old HTML from the list.

In order to make sure that we dont lose the option item off list list by trying to insert at an index position < 0 we do a quick check on the current position and only run the code if index > 0.

2. The “Down” Link

The down link is very similar except we set the new index postion to “current + 1″ and insert the option HTML “after” this value.

Once again we need to make sure that we dont lose the option item off the bottom of the list so we include an “if” statement, which checks the total number of items in the list and only runs the code if the new index position is less than the total items.

The above code also works for multiple selected items.

Check out the change order of select lists demo.

Create Add & Remove Select Lists Using jQuery

Lee — Wed, 19 May 2010 19:20:54 +0000

JQuery makes it very easy to select specific elements and their attributes in your web page HTML.

In the following tutorial I will show you how to use just a few lines of jQuery to create an add/remove select list for your website form.

The Form HTML


  

    

    Add »
    « Remove

So here we have just 2 select lists with sample data – the top one listing the items “from”. There are also 2 anchor tags, which provide the “add” and “remove” links.

The jQuery Code

$(document).ready(function() {

    $('#btn-add').click(function(){
        $('#select-from option:selected').each( function() {
                $('#select-to').append("");
            $(this).remove();
        });
    });
    $('#btn-remove').click(function(){
        $('#select-to option:selected').each( function() {
            $('#select-from').append("");
            $(this).remove();
        });
    });

});

Basically what we do here is that when either of the “add” or “remove” links are clicked jQuery will get the values for all of the relevant options that are selected, recreate each option item HTML, insert it into the opposite select list and finally remove these items from the original list.

Check out the jquery add & remove select list demo.

Simple Tabs with AJAX and jQuery

Lee — Sun, 02 May 2010 18:15:46 +0000

One of the great things about jQuery is its complete suite of built in AJAX functions, which allow you to add quick and easy features to your website.

The example below came from a recent project to create an internal web application for a client, which utilised tab navigation, jQuery and AJAX to load data into the page without the need to refresh the web page.

1. The HTML Code



  Page 1
  Page 2
  Page 3


This is default text, which will be replaced

You can fill the “ajax-content” div with default text, which will be replaced when one of the tabs are clicked.

2. The jQuery Code


$(document).ready(function() {
    $("#nav li a").click(function() {

        $("#ajax-content").empty().append("");
        $("#nav li a").removeClass('current');
        $(this).addClass('current');

        $.ajax({ url: this.href, success: function(html) {
            $("#ajax-content").empty().append(html);
            }
	});
	return false;
    });
});

The above jQuery code will automatically use the URL written into each anchor tag as the source for the AJAX data.

So what is the above code doing?

When a tab is clicked we first empty the contents of the ajax-content div and then load a loading graphic, whilst the content is being retrieved.
The jQuery then removes the “current” class from the tabs and adds the class to the newly clicked anchor tag allowing you to style the tabs to show which one is now active.
Once the data from the URL has been retrieved the loading image is removed and the content loaded into the “ajax-content” div.
Finally, the “return false” command is used to prevent the default action of the tabs browsing to the content pages.

3. Loading A Default Page

If you wanted to use one of the external pages as your default content you can simply edit the code as below:


$(document).ready(function() {
    $("#nav li a").click(function() {

        $("#ajax-content").empty().append("");
        $("#nav li a").removeClass('current');
        $(this).addClass('current');

        $.ajax({ url: this.href, success: function(html) {
            $("#ajax-content").empty().append(html);
            }
	});
	return false;
    });

    $("#ajax-content").empty().append("");
	$.ajax({ url: 'page_1.html', success: function(html) {
            $("#ajax-content").empty().append(html);
	}
    });
});

Substitute the URL for your required page in the code.

A very simple yet effective way to create a basic jQuery and AJAX application for your website

Check out the demo.

How To Add Blog Posts To A WordPress Page

Lee — Fri, 30 Apr 2010 20:22:27 +0000

By default pages in WordPress websites will not display blog posts. However, there is a quick an easy way to edit the code of your theme page to handle this.

1. WordPress Theme Page Code

First create a new page for your theme. Then add the following code to the web page in the area where you normally display the main content:

 'Latest News', 'posts_per_page' => $post_per_page);
?>

The above code allows you to select posts from a specific categories and display the excerpts on the page. In this example we select our “Latest News” category – change the ‘category_name’ => ‘Latest News’ to suit your requirements.

You can also control the number of posts displayed by changing the “$post_per_page” parameter.

2. How To Use In Your Page

Very simply – upload your new template file to your themes folder, create a new page in your WordPress admin and assign the new template file to this page.

There you have it – a custom page on your WordPress website showing latest posts. To add more pages just repeat the process by creating a new theme page file and change category name parameter.

Check Passwords Using jQuery

Lee — Tue, 27 Apr 2010 18:00:29 +0000

We have had several requests on how to use jQuery to check that passwords match in your website registration form when requesting visitors to re-enter their passwords.

This can easily be achieved by using similar code shown in our previous posts on Using jQuery to Validate Search Box Input and Email Validation Using jQuery.

1. The Password Input Fields


  
    Password:
    
    Re-Enter Password:

2. The jQuery Validation Code – Check That Both Passwords Match

jQuery(function(){
        $("#submit").click(function(){
        $(".error").hide();
        var hasError = false;
        var passwordVal = $("#password").val();
        var checkVal = $("#password-check").val();
        if (passwordVal == '') {
            $("#password").after('Please enter a password.');
            hasError = true;
        } else if (checkVal == '') {
            $("#password-check").after('Please re-enter your password.');
            hasError = true;
        } else if (passwordVal != checkVal ) {
            $("#password-check").after('Passwords do not match.');
            hasError = true;
        }
        if(hasError == true) {return false;}
    });
});

The above code will perform the following checks upon clicking the submit button:

Check that a password has been entered and return an error message if the input field is empty.
Check that the “re-enter password” field contains text and return an error message if the input field is empty.
Finally – compare both password texts to check if they match

If any of the validation checks return an error then the form submission on your website is stopped with the “return false” command.

Check out the demo.