If you’ve ever found yourself debugging multiple elements stacked with z-index, and wish you could visualize their boundaries and stack positions without trying to remember numbers, this one is for you.

The picture on the right pretty much sums it up. “Visualize Stack” as I call it applies different shades of a color to elements based on their z-index value, relative to the z-index of other elements. This is particularly useful for developers who are stacking multiple elements on top of each other and would like to visually see their layering. For the time being, this plugin only works on browsers that support CSS3 hsl() coloring. Sorry, IE.

• View an example
• Get the code and follow this project on GitHub
• Get the bookmarklet

Usage

Call the visualizeStack() method on a jQuery object. The plugin will internally filter and only apply logic to the elements with a positive or negative numerical z-index. Example:

$(function(){
 
	// the logic will only apply to div and p elements in this example.  
	// use $("*") for all elements.
	$("div, p").visualizeStack({
 
		// CSS rules to apply.  the percent sign (%) is replaced with 
		// the appropriate color shade.
		properties: {
			background: "%",
			border: "1px solid black"
		},
 
		// the base color of the gradients.  Enter one of the following
		// colors, or a hue number for hsl(). accepted color names: 
		// red, purple, blue, turquoise, green, orange, and yellow.
		color: "red",
 
		// a hex color to apply to very lightly/darkly shaded elements.  
		// the "color" property of these
		// elements will be set to this value.  pass an empty string 
		// to disable.
		lightTextColor: "#fff",
		darkTextColor: "#000"
	});
 
});

The Bookmarket

If you’re like me, you’re probably too lazy to come to this website, download the JS file, include it, and write the selector/plugin call just to debug some simple CSS stack issues. By the time you’ve done all that it’s likely you could have figured the problem out on your own. Therefore, I packaged this code up in a little bookmarklet so you can instantly apply plugin.

A couple caveats first: 1) you must already have jQuery included in the website, and 2) it isn’t configurable unless you change the bookmarklet code yourself. All elements are selected (using $(“*”)) and the default options are automatically applied (the background property changes to shades of red).

To use, drag this link into your bookmarks toolbar: Visualize Stack

I suggest giving this thing a run on Digg.com; it’s pretty interesting to see what they have going over there for z-index’d elements.

(more…)