Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Aug 2006
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts

    opening new box - the right way?

    Hi,

    This question is JS&CSS related, but I decided to post it here anyway:

    I'm trying to write a function that opens a new box with 100% width & height when clicking on some element (that works with Gecko & IE).
    No problem with that, but with something else: how can I make it semi-transparent, and another box inside it - not transparent?

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes it can be done
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #3
    Regular Coder
    Join Date
    Aug 2006
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, I know it can be done...
    Can you give me directions? Is there an article about this kind of thing?

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Create a <div> with opacity (different ways of setting it for Gecko and IE) set to 50%, append it to <body>, use fixed positioning (CSS expression hack for IE) and set its width and height to 100% (no margins).
    Append the <div> that represents the "inside box" to the above <div>.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #5
    Regular Coder
    Join Date
    Aug 2006
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts
    But the inside-div gets the opacity too.
    Look at this:
    Code:
    #opacitydiv{
     display: none;
     opacity: 0.7;
     filter: alpha(opacity=70);
     position: absolute;
     right: 0;
     top: 0;
     background-color: #ffffff;
     width: 100%;
     height: 100%;}
    
    #opacitydiv div{
     opacity: 1;
     filter: alpha(opacity=100);
     position: absolute;
     right: 50%;
     top: 50%;}
    That's it. I tried both with JS createElement, and with simple CSS display:block\none on event onclick.
    Nothing works. Any ideas?

  • #6
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    you could always try using seperate <div>'s and layer them over each other.

    of course the element that you dont want semi-transparent wont be within the semi-transparent element, but i'm sure that wont create too big of a problem.

    if you are worried about being able to control both elements at the same time do like so:

    <div id="mainDiv">

    <transparent div></div>
    <regular div></div>

    </div>

    this would be good for hiding and showing both together at the same time.
    just hide and show the mainDiv.
    Last edited by brandonH; 10-30-2006 at 05:30 PM. Reason: corrections
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #7
    Regular Coder
    Join Date
    Aug 2006
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nice, I think I'll try it out. Thanks!


  •  

    Posting Permissions

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