Jump to content

Add a tint to the page


mark110384

Recommended Posts

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.

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.

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

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;

 

}

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.