Here are a few scripts demonstrating the power of javascripts Math.random and jquery animate in producing something useless.

• Pixel Swarm 1
• Pixel Swarm 2
• Pixel Swarm 3

Say for example, your designer suddenly decides that having a postage stamp border on a site is a good idea, and tells you to code it up, you quickly realise that your side borders are going to have weird looking cutoffs like in the image below.

There are two options, a) in css make your line-heights, paddings, and margins of all elements always add up to the correct number to display the border properly, or b) add a few lines of jQuery to adjust the height for you.

$(function(){

var multiplier = 20;

var ptop = parseInt($("#page").css('padding-top'));
var pbot = parseInt($("#page").css('padding-bottom'));

var totalheight = $("#page").height() + ptop + pbot;
if (!totalheight%multiplier == 0){
var adjustedheight = totalheight + multiplier - totalheight%multiplier - ptop - pbot;
$("#page").css("height",adjustedheight);
}

});

This code basically just gets the current height of the element that needs to be set (in this case #page) as well as the top and bottom padding. It then checks if this isn’t a multiple of 20 (which is how high the repeating element is for the stamp), if it isn’t then it adds whatever is needed to reach the next highest multiple and sets it as the element height, minus the padding .

So there you are, keeping your designs in shape with jQuery.

Many of you have already seen websites highlighting searched keywords to improve accessibility. Using the same concept of parsing the referring url we can adjust the website to improve the chances that the user will find what they are looking for. Here are a couple of examples I have written to give an idea of the many ways it can be used.

Example 1

The first example of it being used can be seen by going to the search page and clicking the top link Web Design Sydney.

These examples are google specific as that is what the vast majority of our users use. It is possible to add multiple search engine matching though.

Here is the code for how it is used on Rival Web Design with comments

$(document).ready(function(){

// Gets the referrer URL and matches it against a regular expression
// for google, if it finds matches it gets the keywords and puts
// them in the array aa.
if (!document.referrer)
return;
var matches = document.referrer.match(/[?&]q=([^&]*)/);
if (!matches)
return;
var terms = matches[1].replace(/\+/g, ' ');
aa = terms.split(' ');

// There are six buttons on the site labelled with the corresponding
// class names in the sections array.
var sections = ['web','logo','cms','email','seo','gfx'];
var active = [];
var match = 0;

// This function goes through all the keywords found and matches
// them against this switch. The ones that match then update the
// active and nomatch variables so that the next functions know what
// to update
$.each(aa, function(aIndex){
switch(aa[aIndex]){
case 'website':
case 'site':
case 'custom':
case 'ecommerce':
case 'web': active[0] = 1; match = 1; break;
case 'logo': active[1] = 1; match = 1; break;
case 'cms':
case 'management':
case 'content': active[2] = 1; match = 1; break;
case 'email':
case 'marketing': active[3] = 1; match = 1; break;
case 'search':
case 'traffic':
case 'seo': active[4] = 1; match = 1; break;
case "graphic":
case "graphics":active[5] = 1; match = 1; break;
default :;
}
});

// For each of the keywords matched in the switch it will change
// the state of the correct images to the colored state
// and set the z-index so that the lightbox is underneath them.
$.each(sections, function(bIndex){
if (active[bIndex] == 1) {
$('.' + sections[bIndex] + '').parent().css('z-index', '50');
$('.' + sections[bIndex] + '').addClass("active");
}
else {
}
});

// Adds the lightbox and post-it note to the page if there is a match.
if (match==1){
$('body').prepend("<div class='lightbox'></div><div class='post-it'></div>");

// The function to restore the page to normal when the user clicks any of
// the page except the highlighted images.
$('.lightbox').add($('.post-it')).click(function(){
$('.post-it').remove();
$('.lightbox').remove();
$('.sections').removeClass('active');
});
}

});

While the above example may be too overt for most people it is just as easy to do something subtle such as changing a picture to reflect a different promotion.

Example 2

This is the code for demo 2. In this example the promo image is changed if a search term is matched. If multiple words are matched then the last keyword the user enters in their search is the one that will be displayed.

$(document).ready(function(){

if (!document.referrer)
return;
var matches = document.referrer.match(/[?&]q=([^&]*)/);
if (!matches)
return;
var terms = matches[1].replace(/\+/g, ' ');
aa = terms.split(' ');

function promoImg(fruit){
$('#promo-image').attr("src","images/" +fruit+ ".jpg");
}

$.each(aa, function(aIndex){
switch(aa[aIndex]){
case 'apples':
case 'apple': promoImg("apple"); break;
case 'orange':
case 'oranges': promoImg("orange"); break;
default :;
}
});

});

Introducing my first jQuery plugin, a horizontal sliding submenu. Has a couple of options and the appearance can be modified in the css. Any comments or feedback would be greatly appreciated.

• Demo

Required Files

Slide Submenu requires:

1. jQuery library
2. hoverIntent plugin
3. Slide Subnav plugin

License

Licensed under the MIT-license.

Download

Download file includes the commented version and the minified version of the plugin, as well as the demo page to save you writing the css from scratch.

• ssubnav1.1.zip (4.13 KB)

Welcome! This site is mainly a place for me (Justin Volpato) to publish my plugins, experiments, and tutorials on jQuery. I’m still just an amateur to the library but I hope I can share some of the things I’ve learned so far to help the community.

Upcoming:

• New theme
• My recent experimentations
• A sliding subnavigation plugin I’ve made.