Skip to content

Instantly share code, notes, and snippets.

@paulirish

paulirish/zIndex-bookmarklet.js

Created October 15, 2009 19:35
Download ZIP

Revisions

  1. paulirish revised this gist Oct 15, 2009. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions zIndex-bookmarklet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -16,3 +16,9 @@ jQuery('*')
    .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)});});
  2. paulirish revised this gist Oct 15, 2009. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions zIndex-bookmarklet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@

    // 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');
    @@ -11,7 +11,7 @@ jQuery('*')
    var color = '#'+Math.floor(Math.random()*16777215).toString(16); // <3 temp01

    if ($(this).css('position').match(/absolute|relative/)) $(this).css('position','relative');
    $(this).css('border','1px solid '+color);
    $(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);
  3. paulirish created this gist Oct 15, 2009.
    18 changes: 18 additions & 0 deletions zIndex-bookmarklet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@

    // find all elements with a z-index and indicate what they are.

    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('border','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);
    })