Skip to content

Instantly share code, notes, and snippets.

@paulirish
Created October 15, 2009 19:35
Show Gist options
  • Star 18 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save paulirish/211209 to your computer and use it in GitHub Desktop.
Save paulirish/211209 to your computer and use it in GitHub Desktop.
find all elements with a z-index and indicate what they are.
// find all elements with a z-index and indicate what they are.
// uses css outline which is not supported in IE <8
function contrast(color){ return '#' +
(Number('0x'+color.substr(1)).toString(10) > 0xffffff/2 ? '000000' : 'ffffff');
}
jQuery('*')
.filter(function(){ return $(this).css('zIndex') !== 'auto'; })
.each(function(){
var color = '#'+Math.floor(Math.random()*16777215).toString(16); // <3 temp01
if ($(this).css('position').match(/absolute|relative/)) $(this).css('position','relative');
$(this).css('outline','1px solid '+color);
$('<span>z-index: '+ $(this).css('zIndex') + '</span>')
.css({'background':color, color: contrast(color), position:'absolute', top:0,left:0,textIndent:0})
.appendTo(this);
})
// boomarkletized:
// generated using : http://benalman.com/code/test/jquery-run-code-bookmarklet/
javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="http://ajax.googleapis.com/ajax/libs/jquery/"+g+"/jquery.min.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"1.2.6",function($,L){function contrast(a){return"#"+(Number("0x"+a.substr(1)).toString(10)>16777215/2?"000000":"ffffff")}jQuery("*").filter(function(){return $(this).css("zIndex")!=="auto"}).each(function(){var a="#"+Math.floor(Math.random()*16777215).toString(16);if($(this).css("position").match(/absolute|relative/)){$(this).css("position","relative")}$(this).css("outline","1px solid "+a);$("<span>z-index: "+$(this).css("zIndex")+"</span>").css({background:a,color:contrast(a),position:"absolute",top:0,left:0,textIndent:0}).appendTo(this)});});
@paulirish
Copy link
Author

@mintyPT beautiful! that's much better.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment