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.
__________________
"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
Last edited by AndrewGSW; 09-19-2012 at 06:05 AM..
Reason: Correction to code
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
__________________
"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
Last edited by AndrewGSW; 09-19-2012 at 01:03 AM..
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.
__________________
"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
Last edited by AndrewGSW; 09-19-2012 at 05:57 AM..
Reason: Removed link
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.
__________________
"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
Last edited by AndrewGSW; 09-19-2012 at 05:53 AM..
Edited: The information will also include an ID and/or class-name if present.
__________________
"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
Last edited by AndrewGSW; 09-19-2012 at 06:00 AM..
Reason: Correcting error
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
__________________
"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
Before you post, read our: 
.
. If you think there is other important information that could, or should, display in the info-box, let me know.
