I am new to this so please be kind (;
I’m trying to use Greasemonkey to add div-layers and I just can’t get it to work properly.
My final goal is to let the user draw a window on the screen (or make two clicks) and everything but this area should kind of fade out (added dark div-layers).
But, for now I just wanted to add a visible layer to every site. Here is my first try (which did not work at all) :
var CSSNJE = '#Test_divnje {height:100px; width:100px; background-color:red;
position:absolute; top: 200px; left: 400px; z-index:2147483647}';
var CSSNJE = '<style type="text/css">'+ CSSNJE +'</style>';
document.write(CSSNJE);
var DIVNJE = '<DIV id="Test_divnje"></DIV>';
document.write(DIVNJE);
I Googled this piece of code, which works for some pages but not many:
makeLayer('LYR1',400,250,100,100,'red',1,2147483647);
function makeLayer(id,L,T,W,H,bgColor,visible,zIndex) {
if (document.getElementById) {
if (document.getElementById(id)) {
alert ('Layer with this ID already exists!');
return;
}
var ST = 'position:absolute'
+'; left:'+L
+'; top:'+T
+'; width:'+W
+'; height:'+H
+'; clip:rect(0,'+W+','+H+',0)'
+'; visibility:'
+(null==visible || 1==visible ? 'visible':'hidden')
+(null==zIndex ? '' : '; z-index:'+zIndex)
+(null==bgColor ? '' : '; background-color:'+bgColor);
var LR = '<DIV id='+id+' style="'+ST+'"></DIV>'
if (document.body) {
if (document.body.insertAdjacentHTML)
document.body.insertAdjacentHTML("BeforeEnd",LR);
else if (document.createElement
&& document.body.appendChild) {
var newNode = document.createElement('div');
newNode.setAttribute('id',id);
newNode.setAttribute('style',ST);
document.body.appendChild(newNode);
}
}
}
}
First I thought the z-index of my div-layer was too low and my div-layer was just behind the visible layers (that’s why my index is so high right now) but using a higher index did not help.
I also tried do use position:fixed because I read that this would maybe help, but it didn’t.
How can I make an overlay that works?
Since you are starting out, use jQuery and (in this case) jQuery-UI. It makes coding vastly simpler, and will save you a ton of grief from trying to “reinvent the wheel” the hard way.
In jQuery-UI, two-thirds of what the question asks for is accomplished in 1 line of code:
Note that this is drag-able and sizable, right out of the box!
With Greasemonkey on Firefox, there is almost no cost to using jQuery, and jQuery-UI, either. The scripts are downloaded one time (when the script is installed or edited) and then run from the local machine. It’s nice and fast.
Here is a complete Greasemonkey script that adds “a layer” with a re-sizable window to Stack Overflow pages: