Use Iframe to cover the whole page

Z

Zhiguo

Hi, my friends:

I see this in several sites:
When the page is busy doing something, the whole page is covered by
something dark but transparent(I guess it should be an iframe). The
user can see what is happening but cannot do anything before the
progress is done or before they click a button in the top iframe.

How to do this?

Thanks in advance! Any help will be appreciated! :)
 
W

wilq

Hi, my friends:

I see this in several sites:
When the page is busy doing something, the whole page is covered by
something dark but transparent(I guess it should be an iframe). The
user can see what is happening but cannot do anything before the
progress is done or before they click a button in the top iframe.

How to do this?

Thanks in advance! Any help will be appreciated!     :)

Capitan Obvious says: google.com : search for: transparent overlay
javascript

results:

http://bjerrehuus.dk/blog/jens/arti...ansparent-overlays-on-images-with-javascript/
 
Z

Zhiguo

Thanks a lot!
I don't know the term "overlay".
That is why I cannot got anything from google.
 
R

rf

Thanks a lot!

I don't know the term "overlay".
That is why I cannot got anything from google.

Why didn't you just look at the source of one of these several sites that do
this?

BTW I find this terribly annoying.

BTW don't top post.
 
D

David Mark

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,906
Latest member
SkinfixSkintag

Latest Threads

Top