...

View Full Version : Display style details



AndrewGSW
09-19-2012, 01:34 AM
The code below (a Bookmarklet (http://en.wikipedia.org/wiki/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 (http://subsimple.com/bookmarklets/jsbuilder.htm)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.


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. :)

AndrewGSW
09-19-2012, 01:57 AM
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 :)

AndrewGSW
09-19-2012, 02:19 AM
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.

AndrewGSW
09-19-2012, 02:31 AM
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.

AndrewGSW
09-19-2012, 03:50 AM
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:


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;inf o.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,mycl ick);d.onkeydown=addHandler(d.onkeydown,mydown);createBox();})()

Stats (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;inf o.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,mycl ick);d.onkeydown=addHandler(d.onkeydown,mydown);createBox();})())

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

AndrewGSW
09-19-2012, 07:12 AM
I had to correct my code as it was attempting to call
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.

AndrewGSW
09-21-2012, 05:26 PM
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.


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,mycl ick);d.onkeydown=addHandler(d.onkeydown,mydown);createBox();})()



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum