CodingForums.com - Display style details

CodingForums.com (http://www.codingforums.com/index.php)

- Post a JavaScript (http://www.codingforums.com/forumdisplay.php?f=19)

- - Display style details (http://www.codingforums.com/showthread.php?t=273515)

Display style details

The code below (a Bookmarklet) enables me to move the mouse around a web page and it displays style information about the element under the cursor. [see screenshot]

The element is outlined in red temporarily. If I click on an element the info-box will remain and a new one will be created so that I can continue to click on other elements. Once completed I just press the Escape key to disable the feature.

The yellow boxes are textareas so that, having clicked an element to make the box permanent, I can later edit or copy the textarea's content. The red outline will also remain so that I can tell which element the details refer to.

I can click on a-links as well, without following the link: their href address is disabled (very) briefly to allow this. Similarly, any pre-existing mouse-over, click, etc., events on the page should be re-instated after pressing the Escape key. [The link is occasionally followed though.. so I try to click an area just outside the link.]

The code is shown below, but to use the feature you should be able to just drag the following link onto your Bookmarks or Favorites toolbar. Otherwise, you should use a tool like this to compress the code before pasting it into the URL-box for a new Bookmark (or Favorite).

LINK DELETED - use code in a later post please.

Code:

javascript:(function(){

    var d=document,useMine=true,prevEl,info;

    function addHandler(orig,mine) {

        return function(e){

            if (useMine) {

                mine(e);

            } else if (orig) {

                orig(e);

            }

        };

    }

    function GS(el, sRule) {

        var result ='';

        if (d.defaultView && d.defaultView.getComputedStyle ) {

            result = d.defaultView.getComputedStyle(el, '').getPropertyValue(sRule);

        } else if ( el.currentStyle ) {

            sRule = sRule.replace(/\-(\w)/g, function (strMatch, p1) {

                return p1.toUpperCase();

            });

            result = el.currentStyle[sRule];

        } else {

            result = 'n/a';

        }

        return sRule + ': ' + result;

    }

    function myover(e) {

        var el = e ? e.target : window.event.srcElement;

        el.style.outline='2px solid red';

        sInfo = GS(el,'width') + " " + GS(el,'height');

        sInfo += "\n" + GS(el,'padding');

        sInfo += "\n" + GS(el,'border');

        sInfo += "\n" + GS(el,'margin');

        sInfo += "\n" + GS(el,'display');

        sInfo += "\n" + GS(el,'position');

        sInfo += "\n" + GS(el,'font');

        sInfo += "\n" + GS(el,'float');

        sInfo += "\n" + GS(el,'z-index');

        info.innerHTML = sInfo;

        prevEl=el;

    }

    function myout(e){

        var el = e ? e.target : window.event.srcElement;

        if (!el.keepRed) el.style.outline='';

    } 

    function mymove(e){

        var evt = e || window.event;

        var el = evt.target || evt.srcElement;

        info.style.left=parseInt(evt.pageX)+20+"px";

        info.style.top=parseInt(evt.pageY)+10+"px";

    }

    function myclick(e){

        var evt = e || window.event;

        var el = evt.target || evt.srcElement;

        info.style.left=parseInt(evt.pageX)+4+"px";

        info.style.top=parseInt(evt.pageY)+4+"px";

        el.keepRed = true;

        createBox();

        if (el.href) {

            var temp = el.href;

            el.href = "#";

            window.setTimeout(function () {

                el.href = temp;

            },10);

        }

        evt.preventDefault;

        return false;

    }

    function mydown(e){

        var evt=e||window.event;

        if(evt.keyCode==27){

            if (!prevEl.keepRed)

                prevEl.style.outline='';

            useMine=false;

            info.parentNode.removeChild(info);

        }

    }

    function addHandlers() {

        d.onmouseover=addHandler(d.onmouseover,myover);

        d.onmouseout=addHandler(d.onmouseout,myout);

        d.onmousemove=addHandler(d.onmousemove,mymove);

        d.onclick=addHandler(d.onclick,myclick);

        d.onkeydown=addHandler(d.onkeydown,mydown);

    }

    function createBox() {

        info=d.createElement('textarea');

        info.style.position="absolute";

        info.style.width="250px";

        info.style.height="170px";

        info.style.zIndex="999";

        info.style.fontSize="12px";

        info.style.color="blue";

        info.style.backgroundColor="yellow";

        info.style.paddingLeft="3px";

        d.body.appendChild(info);

    }

    addHandlers();

    createBox();

})()

I should mention that there are similar versions to mine available on the internet.

I will find this a very useful feature myself and hope that others might as well. :)

A second screenshot attached.

Added: IE doesn't honour the line breaks \n in the textareas. It's still useful though; I'll issue an update if/when I sort this :)

Internet Explorer 9 :mad::mad: (and possibly earlier) requires <br> rather than \n to create newlines in the textareas: it won't accept either \r\n or \n\r :eek:.

For the moment you can just use the following alternative IE version:

LINK DELETED - use the link or code in a later post please.

Don't you just hate IE - even version 9 still behaves differently to every other browser!

I might try to add a conditional so that I can use the same bookmarklet in any browser. Andy.

Sorry, the following version works in IE, Chrome and Firefox - I just had to use .value, rather than .innerHTML, for the textarea. [I won't modify the earlier code as it might confuse.]

LINK DELETED - use the link or code in the following post please.

A final revision: I wanted to start the information with "Node: DIV", etc.. and I reduced the font size slightly.

The Stats links don't seem to be working so I'll just have to paste the compressed code version here for the moment:

Code:

javascript:(function(){var d=document,useMine=true,prevEl,info;function addHandler(orig,mine){return function(e){if(useMine){mine(e);}else if(orig){orig(e);}};}function GS(el,sRule){var result='';if(d.defaultView&&d.defaultView.getComputedStyle){result=d.defaultView.getComputedStyle(el,'').getPropertyValue(sRule);}else if(el.currentStyle){sRule=sRule.replace(/\-(\w)/g,function (strMatch,p1){return p1.toUpperCase();});result=el.currentStyle[sRule];}else{result='n/a';}return sRule+': '+result;}function myover(e){var el=e?e.target:window.event.srcElement;el.style.outline='2px solid red';var sInfo="Node: "+el.nodeName;if(el.id)sInfo+=" ID: "+el.id;sInfo+="\n";if(el.className)sInfo+="Class: "+el.className+"\n";sInfo+=GS(el,'width')+" "+GS(el,'height');sInfo+="\n"+GS(el,'padding');sInfo+="\n"+GS(el,'border');sInfo+="\n"+GS(el,'margin');sInfo+="\n"+GS(el,'display');sInfo+="\n"+GS(el,'position');sInfo+="\n"+GS(el,'font');sInfo+="\n"+GS(el,'float');sInfo+="\n"+GS(el,'z-index');info.value=sInfo;prevEl=el;}function myout(e){var el=e?e.target:window.event.srcElement;if(!el.keepRed)el.style.outline='';}function mymove(e){var evt=e||window.event;var el=evt.target||evt.srcElement;info.style.left=parseInt(evt.pageX)+20+"px";info.style.top=parseInt(evt.pageY)+10+"px";}function myclick(e){var evt=e||window.event;var el=evt.target||evt.srcElement;info.style.left=parseInt(evt.pageX)+4+"px";info.style.top=parseInt(evt.pageY)+4+"px";el.keepRed=true;createBox();if(el.href){var temp=el.href;el.href="#";window.setTimeout(function (){el.href=temp;},20);}evt.preventDefault;return false;}function mydown(e){var evt=e||window.event;if(evt.keyCode==27){if(!prevEl.keepRed)prevEl.style.outline='';useMine=false;info.parentNode.removeChild(info);}}function createBox(){info=d.createElement('textarea');info.style.position="absolute";info.style.width="250px";info.style.height="170px";info.style.zIndex="999";info.style.fontSize="11px";info.style.color="blue";info.style.backgroundColor="yellow";info.style.paddingLeft="3px";d.body.appendChild(info);}d.onmouseover=addHandler(d.onmouseover,myover);d.onmouseout=addHandler(d.onmouseout,myout);d.onmousemove=addHandler(d.onmousemove,mymove);d.onclick=addHandler(d.onclick,myclick);d.onkeydown=addHandler(d.onkeydown,mydown);createBox();})()

Stats

Edited: The information will also include an ID and/or class-name if present.

I had to correct my code as it was attempting to call

Code:

orig(e)

when orig would usually be null. My apologies to anyone who had already tried the code: it would have worked but, on Escaping, errors would have appeared in the console.

It's working perfectly now :thumbsup:. If you think there is other important information that could, or should, display in the info-box, let me know.

Regards, Andy.

I've lightened the colours, and float and z-index now occur on the same line - so there is less likelihood of a scrollbar appearing.

Code:

javascript:(function(){var d=document,useMine=true,prevEl,info;function addHandler(orig,mine){return function(e){if(useMine){mine(e);}else if(orig){orig(e);}};}function GS(el,sRule){var result='';if(d.defaultView&&d.defaultView.getComputedStyle){result=d.defaultView.getComputedStyle(el,'').getPropertyValue(sRule);}else if(el.currentStyle){sRule=sRule.replace(/\-(\w)/g,function (strMatch,p1){return p1.toUpperCase();});result=el.currentStyle[sRule];}else{result='n/a';}return sRule+': '+result;}function myover(e){var el=e?e.target:window.event.srcElement;el.style.outline='1px solid red';var sInfo=el.nodeName;if(el.id)sInfo+=" ID: "+el.id;sInfo+="\n";if(el.className)sInfo+="Class: "+el.className+"\n";sInfo+=GS(el,'width')+" "+GS(el,'height');sInfo+="\n"+GS(el,'padding');sInfo+="\n"+GS(el,'border');sInfo+="\n"+GS(el,'margin');sInfo+="\n"+GS(el,'display');sInfo+="\n"+GS(el,'position');sInfo+="\n"+GS(el,'font');sInfo+="\n"+GS(el,'float');sInfo+=" "+GS(el,'z-index');info.value=sInfo;prevEl=el;}function myout(e){var el=e?e.target:window.event.srcElement;if(!el.keepOl)el.style.outline='';}function mymove(e){var evt=e||window.event;var el=evt.target||evt.srcElement;info.style.left=parseInt(evt.pageX)+20+"px";info.style.top=parseInt(evt.pageY)+10+"px";}function myclick(e){var evt=e||window.event;var el=evt.target||evt.srcElement;info.style.left=parseInt(evt.pageX)+4+"px";info.style.top=parseInt(evt.pageY)+4+"px";el.keepOl=true;createBox();if(el.href){var temp=el.href;el.href="#";window.setTimeout(function (){el.href=temp;},20);}evt.preventDefault;return false;}function mydown(e){var evt=e||window.event;if(evt.keyCode==27){if(!prevEl.keepOl)prevEl.style.outline='';useMine=false;info.parentNode.removeChild(info);}}function createBox(){info=d.createElement('textarea');info.style.position="absolute";info.style.width="250px";info.style.height="170px";info.style.zIndex="999";info.style.fontSize="11px";info.style.color="black";info.style.backgroundColor="lightyellow";info.style.paddingLeft="3px";d.body.appendChild(info);}d.onmouseover=addHandler(d.onmouseover,myover);d.onmouseout=addHandler(d.onmouseout,myout);d.onmousemove=addHandler(d.onmousemove,mymove);d.onclick=addHandler(d.onclick,myclick);d.onkeydown=addHandler(d.onkeydown,mydown);createBox();})()