8 Useful jQuery Snippets For URL’s & Querystrings

In any web project you will inevitably come across a situation where being able to extract information or use the current page URL would be useful. If server-side code is not available to help we can use javascript to get this information.

The following are examples of useful code snippets that can be used – some of the examples use … more

jQuery Tutorial – Create a Flexible Data Heat Map

jQuery Data Heat Map

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 … more

jQuery Tutorial – Adding Vertical Animation to the Slider Menu

After our jQuery tutorial yesterday on creating a jQuery Slider Menu we have had several requests on how to modify the jQuery code to scroll the slider images vertically instead of horizontally.

In today’s post we are going to look at changing the jQuery code so that the slider menu can handle both vertical and horizontal animation.

Both the HTML … more

jQuery Tutorial – Create a jQuery Menu Slider

jQuery Menu Slider

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 is very simple and basically includes:

  • A wrapper (”#menu-slider”) – only used for styling the jquery menu
  • more

jQuery Animated Error Messages & Form Validation

In today’s tutorial we are going to use jQuery animation to create more interesting and engaging form validation errors for a user registration form.

Our jQuery form submit and validation code is based on the same one we created in our “Create Your Own jQuery AJAX Form Submit With Validation” tutorial in February. The additional items that we are going … more

Form Validation Using jQuery and Regular Expressions

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 … more

jQuery Tooltips – Create Your Own Tooltip Plugin

jQuery Tooltips Plugin Tutorial

In today’s jQuery tutorial we are going to look at creating your own jQuery tooltip plugin!

Whilst there are many great tooltip plugins available out there, creating your own provides a nice and relatively easy opportunity to try your hand at jquery plugins as well as some basic jquery code.

View jQuery Tooltips Plugin DemoDownload Source Files

By creating a … more

Open External Links In New Browser Window Using jQuery

Since one of our earlier posts – How To Open Links In a New Browser Window we have had many 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 … more

jQuery Image Swap Gallery with Just 3 Lines of Code!

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 DemoDownload Source Files

A great … more

Wordpress Tutorial – Create Your own Custom Vertical Mega Menu

Custom Vertical Mega Menu

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 … more

Page 1 of 512345»