SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    Non-Member
    Join Date
    Sep 2007
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Transparent Hide/Show div

    Hi

    How do I create a transparent div, that appears upon a link being clicked, and disappears upon another link being clicked?

    TheBIGCube

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    This is a really a javascript question and you basically toggle an element on and off via javascript using various methods.

    Here are some old examples:

    http://www.pmob.co.uk/temp/hideandshow7.htm
    http://www.pmob.co.uk/temp/2col-toggle2.htm

    Of course these should be updated to use unobtrusive techniques.

    The nearest you can get in css (without javascript) is something like this which will only work in firefox and IE.

    http://www.pmob.co.uk/temp/hideandshow3-css.htm

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You shouldn't do that with CSS, you'll need JavaScript.

    Make sure it's not critical functionality though as any users without JavaScript will be unable to use your site.

  4. #4
    Non-Member
    Join Date
    Sep 2007
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do I make a div transparent?

    TheBIGCube.

  5. #5
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TheBIGcube View Post
    How do I make a div transparent?
    Did you have a look at the links Paul gave you?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by theBIGcube
    How do I make a div transparent?
    You are unlikely to get a good response if you don't provide a reasonable explanation as to what you want. If our answers haven't answered your question then at least spend some time on your question (as we have done on the answers).

    In answer to your second post then the answer is you don't have to do anything to a div to make it transparent because its background is already transparent by default.

  7. #7
    Non-Member
    Join Date
    Sep 2007
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My Apologies

    In my second post, I meant how do I make a div transparent that contains a background colour?

    TheBIGCube.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    HI,

    Well you basically have 2 choices. You can use the filter property to add opacity to the element but it will also make the foreground opaque also.

    See the drop downs in this example.

    http://www.pmob.co.uk/temp/drop-down-multi-opaque.htm

    They are made opaque using this format:

    Code:
    li 
    {
       color: #fff;
       background-color: red;
    /*opacity for IE5+*/
      filter: alpha(opacity=50);
      /*opacity for older Mozilla browsers*/
      -moz-opacity: 0.5;
      /*opacity for mozilla/safari/opera*/
      opacity: 0.5;
    }
    opacity is css3 and the others are proprietary code so it won't validate. The drawback is that the text gets faded as well.

    The alternative is to use a background png but again for ie6 you need to use a proprietary filter to make it work as IE6- doesn't understand partial transparency.

    e.g.

    http://www.pmob.co.uk/temp/transparent-test.htm
    http://www.pmob.co.uk/temp/opacity5.htm

    View source to see the code as it is in the head and should be self explanatory.

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, they're all great suggestions for semi-transparency but is there anything wrong with just using

    Code:
    background-color: transparent;

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Dave,

    That will just make the divs background completely transparent which is its default state anyway. If you want opacity (partial transparency) that operates on the current elements background content then you need the filter.


    Hope that's what you meant

  11. #11
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kind of, I was just wondering whether somehow a background colour was being applied and TheBIGcube was asking how to change it back to being transparent and it was that simple.

    Maybe a :hover effect being applied that meant it needed complete transparency for example.

    I know questions aren't usually that simply to answer though

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Kind of, I was just wondering whether somehow a background colour was being applied and TheBIGcube was asking how to change it back to being transparent and it was that simple.
    Yes of course that would be correct and may indeed be what bigcube wanted I was just guessing at what was wanted

  13. #13
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I was just guessing at what was wanted
    Aren't we all

  14. #14
    Non-Member
    Join Date
    Sep 2007
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Basically, I need a div that has a background colour, and is 50% transparent.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Basically, I need a div that has a background colour, and is 50% transparent.
    Then your question was answered in post #8

    http://www.pmob.co.uk/temp/opacity5.htm

    Use a png image at 50% opacity and apply it as shown in the demo.

    Alternatively if you don't mind the foreground also being opaque then use the code from post #8:


Bookmarks

Posting Permissions

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