Capitan Obvious says: google.com : search for: transparent overlay
javascript
results:
http://bjerrehuus.dk/blog/jens/article/how-to-automatically-create-tr...
When it comes to JS, don't trust Google results.
var overlay = {
init : function()
{
if (!document.getElementsByTagName || !document.createElement
|| !document.appendChild || !document.styleSheets)
return false;
Bad feature detection, but that's a minor quibble. I don't see any
potential for explosions here, but then there's no reason to do it
right and avoid the need for scrutiny.
/* Add the CSS styles needed to get the effect we want. */
var selector = '.overlay-background';
var declarations = 'background:#222; filter:alpha(opacity=80);
height:100%; -khtml-opacity:0.8; -moz-opacity:0.8; opacity:0.8; text-
shadow:0 0 0 #000; width:50%;';
100% height is not going to work in general.
var styles = document.styleSheets[0];
if (styles.insertRule)
No check to see if the first style sheet exists.
styles.insertRule(selector + '{' + declarations + '}', 0);
else if (styles.addRule)
styles.addRule(selector, declarations, 0);
Missing brackets (minor). More bad feature detection, this time very
dangerous (methods of a style sheet object). If the style sheet
object is implemented as an ActiveX object, this will blow up. Best
to use typeof and not have to keep track of which MSHTML
implementations feature which ActiveX objects (there are a lot of
them).
/* And add the extra div elements that the styles are applied to.
*/
var elements = document.getElementsByTagName('*');
Never do this without checking that it works. Will fail in older
browsers (e.g. Safari 2). If you really have the need to query every
element in the document (!), the fallback is document.all.
var re = new RegExp("(^|\\s)transparent-overlay(\\s|$)");
for (var i = 0; i < elements.length; ++i) {
The collection referenced by - elements - is live. This loop could go
on forever, depending on what the body does.
var el = elements
;
if (re.test(el.className)) {
So found an element with a "transparent-overlay" class...
var back = document.createElement('div');
var mess = document.createElement('div');
Don't like the look of this.
back.className = 'overlay-background';
mess.className = 'overlay-message';
I didn't see overlay-message defined above.
var children = el.childNodes;
Also live.
while (children.length)
Not exactly what I would have done, but won't be infinite anyway.
mess.appendChild(children[0]);
el.appendChild(back);
el.appendChild(mess);
This is what I'm talking about. At the very least, it's incredibly
inefficient as there is a reference to a live "*" collection.
el.className = el.className.replace(/transparent-overlay/,
'');
That doesn't match up with the previous RegExp, but why try to kill
the class anyway? Does this class exist only to flag elements to
"overlay-ize"? If so, that's a poor use of a class, especially
considering the hoops the code must go through to find the targeted
elements. A much better design would have been to have the calling
app pass id's (or element references). But that's not usually
considered a "cool" design because it makes the developer write at
least one line of script.
}
}
},
addEvent : function(obj, type, fn)
{
if (obj.addEventListener)
obj.addEventListener(type, fn, false);
else if (obj.attachEvent) {
obj["e" + type + fn] = fn;
OMG, that's from the Resig-authored "winner" of PPK's infamous
addEvent contest. Don't augment host objects. Don't use the toString
result of a Function object as part of a property name.
obj[type + fn] = function() { obj["e" + type + fn]
( window.event ); }
Again and again. Try running this with document.expando == false
in IE. Exceptions are allowed and must be _expected_ from host
objects augmentations. That's why you should avoid them at all costs.
obj.attachEvent("on" + type, obj[type + fn]);
Leaks memory in IE too.
}
}
};
overlay.addEvent(window, 'load', overlay.init);
That's the leakiest host object of all and the only thing this paste-
job was used for. This is (more or less) what it creates (when it
works):-
<body onload="overlay.init()">
The - init - method couldn't care less what the - this - object is set
to, so all of that leaky, meddling addEvent nonsense was superfluous.
Simplified (and impervious to leaks and explosions):-
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('load', overlay.init, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent("onload', overlay.init);
}
But it still just creates the onload attribute of the body in a less
than guaranteed manner. Not every browser supports these methods, but
all browsers must support the onload attribute.