PDA

Click to See Complete Forum and Search --> : Semi-Transparent color in DIV - Is it possible?

wood_tah
01-13-2004, 09:03 AM
Does anyone know if it is possible to create a layer (DIV), or a page, with a background color that is semitransparent (such as a light grey)? If so, how?

I have a requirement from a client that when a user clicks a button, a new page opens where they can fill in fields (very small popup, w/ 1 or 2 textfields), but they want the rest of the page behind it to not be accessible and to appear greyed out. I have seen an application that does something similar to what I am looking for, but I did not know how they did it.

It seems as if all that would be needed would be to show a div that was the size of the open window that had a bg color that was a semi-transparent grey, and then add the text fields in that div.

If anyone has any advice, it would be greatly appreciated.
Fang
01-13-2004, 09:48 AM
.transparent {
filter: alpha(opacity=50); /* ie */
-moz-opacity: .5; /* mozilla */
background:#ccc;
}
Use the above class on the div.
wood_tah
01-13-2004, 10:28 AM
Thanks -- that is what I was looking for. However, I now am faced w/ another problem. When I insert content into that div, the content is also transparent. Is there a way to make the content inside of the div not be transparent? Currently, I was just placing a table and simple form inside of another div that is contained within the main div (the one w/ the transparent bg), but I am not sure if this is the best way to do this or not.

The effect I am going for is to have the content (in this case, a simple form) stand out from the semi-transparent background that is masking all of the content on the main page. Below are 2 examples to try and help explain the effect I am looking for:

a) Have a full screen div that has a transparent background, but with a "hole" cut out of the middle where the content will be so the content is not transparent as well.

b) Have a full screen div that has a transparent badkground, but place another layer centered on top of it that does not have any transparency.

I hope someone can help....
Fang
01-13-2004, 11:29 AM
This sort of thing:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic transparency</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
.normal {
position:relative;
-moz-opacity:1;
}
body, .transparent {
filter: alpha(opacity=50); /* ie */
-moz-opacity: .5; /* mozilla */
background:#ccc;
color:#000;
width:100%;
}
#block {
position:absolute;
top:50%;
left:50%;
border:1px solid #000;
}
.bgc {
background:#ffc;
color:#f00;
}
-->
</style>

</head>
<body>
<div class="transparent">transparent text and background</div>
<div class="normal" id="block">"normal" text<div class="bgc">a colored block</div></div>

</body>
</html>
wood_tah
01-13-2004, 12:43 PM
Thanks very much! I should be able to modify what you have suggested to fit my needs.
hangnga
08-10-2006, 02:18 AM
On my web page, I have a main page. When I click a button on this page, a other layer open. This layer has semi-transparent color. I did but I can not do semi-transparent color cover on web page.
Because layer that has semi-transparent color, I define in div tab.
Example:
<div id="menu" style="position:absolute;left:0;top:0;visibility:hidden; width:1024; height:768; background-color:#E0EFD1;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
So, if content on my page expand over that width and height, this layer will not cover web page.
For example:

<HTML>
<HEAD>
<style type="text/css">

.transparent {
background-color: #ffffff;
filter:Alpha(Opacity=55);
-moz-opacity:0.55;
}
</style>
<script language="JavaScript1.2">
function showMe()
{
document.getElementById("menu").style.visibility="visible";
}
</script>
</HEAD>
<BODY style="background-color: transparent;">
To show the layer:
<a href="javascript:showMe();">show</a>
<br>To show the layer:<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>To show the layer:<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>To show the layer:<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>To show the layer:

<div id="menu" style="position:absolute;left:0;top:0;visibility:hidden; width:1024; height:768; background-color:#EAEAEA" class="transparent">
</div>

</BODY>
</HTML


I want layer that has semi-transparent color will cover whole of my web page.
Please help me.
wood_tah
08-10-2006, 09:26 AM
In order to do this, you will need to determine the size of your div at the time that you invoke showMe() function. Try this:


function showMe() {
var width = document.body.clientWidth;
var height = document.body.scrollHeight;
document.getElementById("menu").style.visibility="visible";
document.getElementById("menu").style.height = height;
document.getElementById("menu").style.width = width;
}

Please note, that in the past when I have wanted to use this technique in IE and the content that I was overlaying had a form select element in it, the select element would never be "under" the overlying div. So if you are using this as a way to prevent your users from doing anything on the screen until something else is done, make sure you don't have any select elements in your page.
hangnga
08-10-2006, 08:42 PM
With your code, I did.
Thanks a lot
hangnga
08-21-2006, 04:40 AM
I want when I click show, a transparent class will cover and below form will be disable. I did, but <select> on form still click.

Example:

<HTML>
<HEAD>
<style type="text/css">

.transparent {
background-color: #ffffff;
filter:Alpha(Opacity=55);
-moz-opacity:0.55;
}
</style>
<script language="JavaScript1.2">
function showMe()
{
document.getElementById("menu").style.visibility="visible";
}
</script>
</HEAD>
<BODY style="background-color: transparent;">
To show the layer:
<a href="javascript:showMe();">show</a>
<select name="spe">
<option value="1">-----Select-----</option>
<option value="2">-----month------</option>
</select>

<div id="menu" style="position:absolute;left:0;top:0;visibility:hidden; width:1024; height:768; background-color:#EAEAEA" class="transparent">
</div>

</BODY>
</HTML

I want when transparent class appear, I do not click <select>

Please, help me
wood_tah
08-22-2006, 08:04 AM
I mentioned this problem in my previous post:


Please note, that in the past when I have wanted to use this technique in IE and the content that I was overlaying had a form select element in it, the select element would never be "under" the overlying div. So if you are using this as a way to prevent your users from doing anything on the screen until something else is done, make sure you don't have any select elements in your page.


I think I remember reading a way around this by wrapping the select elements in an <iframe> tag, but I didn't want to do this for all of my select lists. If you do a google search about this problem, you will come across more detailed information.
hangnga
08-22-2006, 08:32 PM
I try to find on google search for this problem.
Thanks a lot
hangnga
10-19-2006, 04:54 AM
In IE, I use:
var width = document.body.clientWidth;
var height = document.body.scrollHeight;
I want to get clientWidth and scrollHeight in Netscape. How do I have to use?
Please help me.
micahzender
10-19-2006, 11:06 PM
like on this site?

http://www.mobobo.co.uk/

click any of the rectangle images on the bottom lefthand side.

z
felgall
10-20-2006, 12:04 AM
I mentioned this problem in my previous post:



I think I remember reading a way around this by wrapping the select elements in an <iframe> tag, but I didn't want to do this for all of my select lists. If you do a google search about this problem, you will come across more detailed information.

Opera 8 and earlier have the same problem with iframes that IE6 and earlier have with selects so wrapping the select in an iframe just transfers the problem from one browser to another and doesn't fix it.
hangnga
10-20-2006, 02:12 AM
Thank you very much