www.webdeveloper.com
Results 1 to 15 of 15

Thread: Semi-Transparent color in DIV - Is it possible?

  1. #1
    Join Date
    Jan 2004
    Posts
    198

    Semi-Transparent color in DIV - Is it possible?

    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.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    .transparent {
    filter: alpha(opacity=50); /* ie */
    -moz-opacity: .5; /* mozilla */
    background:#ccc;
    }
    Use the above class on the div.

  3. #3
    Join Date
    Jan 2004
    Posts
    198
    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....

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    This sort of thing:
    Code:
    <!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>

  5. #5
    Join Date
    Jan 2004
    Posts
    198
    Thanks very much! I should be able to modify what you have suggested to fit my needs.

  6. #6
    Join Date
    Aug 2006
    Posts
    9

    cover semi-transparent color on page

    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.
    Last edited by hangnga; 08-10-2006 at 03:03 AM.

  7. #7
    Join Date
    Jan 2004
    Posts
    198
    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:

    Code:
    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.

  8. #8
    Join Date
    Aug 2006
    Posts
    9

    semi-transparent color

    With your code, I did.
    Thanks a lot

  9. #9
    Join Date
    Aug 2006
    Posts
    9

    Transparent

    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

  10. #10
    Join Date
    Jan 2004
    Posts
    198
    I mentioned this problem in my previous post:

    Quote Originally Posted by wood_tah
    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.

  11. #11
    Join Date
    Aug 2006
    Posts
    9

    Transparent

    I try to find on google search for this problem.
    Thanks a lot

  12. #12
    Join Date
    Aug 2006
    Posts
    9
    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.

  13. #13
    Join Date
    Oct 2006
    Posts
    11
    like on this site?

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

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

    z

  14. #14
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Quote Originally Posted by wood_tah
    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.
    Stephen

  15. #15
    Join Date
    Aug 2006
    Posts
    9
    Thank you very much

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles