Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Apply various shades of a color to elements stacked with z-index in order of their z-index level.
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
src
README.markdown
index.htm

README.markdown

jQuery Visualize Stack

View an interactive demo and read the related blog post

This plugin apply various shades of a color to elements stacked with z-index in order of their z-index level. Useful if you have multiple widgets/elements stacked on top of each other and need to quickly visualize their stack positions. Elements with the same z-index receive the same shading color.

At the moment this plugin only works on browsers that support CSS3 hsl() styling. Sorry, IE.

Example

Usage

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

$(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"
    });

});
Something went wrong with that request. Please try again.