Add a tint to the page

[mark110384]

At the moment I hava a flash button that when it is pressed the it open up a stick tooltips login box of sorts. I'm looking to add a tint to the rest of the page but not to the login box does anyone know of a way of how this can be done or offer any suggestions? Thanks

[xenophobia]

Is your tooltips is an HTML elements? If that is your case, to tint your background, use javascript to create an DIV element:

 

var tint = document.createElement("div");

 

Then set it's className to transparent using css:

In css:
.transparent {
filter:alpha(opacity=55);
opacity:.55;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}

In javascript:
// Continue from above.
tint.className = "transparent";

 

Then after created, append it to the document. But, you can't just append to the document directly like this:

document.appendChild(tint);  // WRONG!!!

You will get error.

 

Instead, you need to add any element in your document, a blank element:

<div id="blank_here"></div>

 

After that, you can append to it:

document.getElementById('blank_here').appendChild(tint);

 

 

Hope you understand what I mean.

[mark110384]

Thanks for the suggestion xenphobia, I have it working now. However I have a new issue, I have a Flash banner  and navigation system on my website, the issue that I have is with that I wish to open a table that will tint the rest of the page and highlight a login box, I have this working however the table for some reason opens behind the Flash. Does anyone have any suggestion how to handle the Flash in the site, is there some kind of send to back function or other.

[mark110384]

No sooner had I posted this I found the soloution to that problem with the following parameters

 

<param name="wmode" value="transparent">

        <embed src="menu01.swf" height="52" width="100%" wmode="transparent" />

 

However the table is set as follows in CSS

 

#loginbox

{

position: absolute;

width: 100%;

height: 100%;

top: 0px;

left: 0px;

visibility: hidden;

}

 

It seems that it only covers the portion of the screen that is visible and when you scroll down there is a gap, hmmm

[mark110384]

I 've added the following, it has eliminated the white margin down the right on IE (worked fine before that with FF) but there is still a gap at the bottom of the page

 

 

body {

 

margin:0px;

 

width: 100%;

height: 100%;

 

}

 

 

#loginbox

{

position: absolute;

width: 100%;

height: 100%;

top: 0px;

left: 0px;

visibility: hidden;

 

}

[mark110384]

*bump*