Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts

    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.
    Attached Thumbnails Attached Thumbnails Display style details-stats.jpg  
    Last edited by AndrewGSW; 09-19-2012 at 07:05 AM. Reason: Correction to code
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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
    Attached Thumbnails Attached Thumbnails Display style details-stats2.png  
    Last edited by AndrewGSW; 09-19-2012 at 02:03 AM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Internet Explorer 9 (and possibly earlier) requires <br> rather than \n to create newlines in the textareas: it won't accept either \r\n or \n\r .

    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.
    Last edited by AndrewGSW; 09-19-2012 at 06:57 AM. Reason: Removed link
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    Last edited by AndrewGSW; 09-19-2012 at 06:53 AM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    Attached Thumbnails Attached Thumbnails Display style details-stats3.png  
    Last edited by AndrewGSW; 09-19-2012 at 07:00 AM. Reason: Correcting error
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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 . If you think there is other important information that could, or should, display in the info-box, let me know.

    Regards, Andy.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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();})()
    Attached Thumbnails Attached Thumbnails Display style details-stats4.png  
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •