AndrewGSW
09-19-2012, 12: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. :)
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. :)