Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
102 lines (86 sloc) 3.76 KB
<!DOCTYPE html>
<html>
<head>
<title>jQuery Visualize Stack - Eric Hynds</title>
<link type="text/css" rel="stylesheet" href="http://www.erichynds.com/examples/style.css" />
<style type="text/css">
#examples { width:900px; border:1px solid #ccc; padding:10px; background:#f7f7f7 }
#examples div { position:relative; padding:15px 15px; width:200px }
#examples input { width:50px; border:1px solid #000; padding:3px }
#x { border:1px solid #000 }
#a { z-index:10; top:-15px }
#b { z-index:20; top:-30px; left:55px }
#c { z-index:20; top:-40px; left:30px }
#d { z-index:15; top:-55px; left:15px }
#e { z-index:25; top:-60px; left:60px }
#f { z-index:18; top:-75px; left:75px }
#g { z-index:5; top:-90px; left:90px }
#h { z-index:5; top:0; left:105px }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="src/jquery.visualizestack.js"></script>
<script type="text/javascript">
$(function(){
// properties to pass into this plugin
var options = {
color: "red",
properties: {
background: "%",
border: "1px solid #000"
},
lightTextColor: "#fff",
darkTextColor: "#000"
};
var divs = $("#examples div").visualizeStack(options).draggable({ containment:"parent" })
divs
.find("input") // find the inputs
.each(function(){ // set the initial z-index values based on the input values
var $this = $(this);
$this.val( $this.parent().css("z-index") );
})
.bind("keydown", function(){ // detect changes
var $this = $(this),
props = { "z-index": this.value };
if(this.value === "auto"){
props.color = "#000";
props.background = "none"
}
$this.parent().css(props);
divs.visualizeStack(options);
});
});
</script>
</head>
<body>
<div id="bar">
<h1><a href="http://www.erichynds.com">eric<span>hynds</span></a></h1>
<div><a href="http://www.erichynds.com/jquery/visualizing-your-z-index-stacks-with-jquery">&laquo; Return to Blog Post</a></div>
</div>
<div id="content">
<h2>jQuery Visualize Stack Demo</h2>
<div class="message notice">
<div class="message-title">Attention IE Users!</div>
<div class="message-body">This demo only works in browsers that support CSS3's hsl() coloring. Currently, that is limited to Firefox 3, Chrome, Opera 9+, and Safari 3+.</div>
</div>
<p>This plugin applies various shades of a color to elements based on their z-index value, relative to the z-index of other elements. Useful
for developers trying to debug CSS z-index stacking issues.</p>
<ul style="margin-bottom:12px">
<li><a href="http://www.erichynds.com/jquery/visualizing-your-z-index-stacks-with-jquery/">Return to the blog post</a></li>
<li><a class="blank" href="http://github.com/ehynds/jquery-visualize-stack">Get the code</a> and follow this project on GitHub</li>
<li><a href="http://www.erichynds.com/visualizing-your-z-index-stacks-with-jquery/#bookmarklet">Get the bookmarklet</a></li>
</ul>
<p style="margin:20px 0 5px 0"><b>Use the tab key to move between inputs &amp; to visually refresh the stack.</b> Try entering &quot;auto&quot; as a value, and dragging the divs around.</p>
<form id="examples">
<div id="h">z-index: <input type="text" name="value" /></div>
<div id="a">z-index: <input type="text" name="value" /></div>
<div id="b">z-index: <input type="text" name="value" /></div>
<div id="c">z-index: <input type="text" name="value" /></div>
<div id="d">z-index: <input type="text" name="value" /></div>
<div id="e">z-index: <input type="text" name="value" /></div>
<div id="f">z-index: <input type="text" name="value" /></div>
<div id="g">z-index: <input type="text" name="value" /></div>
</form>
</div>
</body>
</html>