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

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 multiple = 20;
$('.post').each(function(){
if($(this).innerHeight()%multiple != 0){
$(this).height(parseInt($(this).height())+(multiple-$(this).innerHeight()%multiple));
}
});

});

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.

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 :;
}
});

});

• 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)

Upcoming:

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