www.webdeveloper.com
Results 1 to 14 of 14

Thread: Hide empty div in i.e

  1. #1
    Join Date
    May 2009
    Posts
    62

    Hide empty div in i.e

    Hi there

    I have a div which may / may not contain content. When the div does not contain content, I would like it to disappear.

    Firefox seems to have a grasp on this, however IE still displays the div. I have tried adding any empty comment, and whilst the div is not displaying, the area where it used to be still exists and other content is wrapping around it, which is not what I want, I would like it to completely disappear.

    Does anyone know how to achieve this?

    Thanks in advance

  2. #2
    Join Date
    Nov 2009
    Posts
    36
    There are a lot of possible ways my friend. Put your code here, that way we may be able to help!

    But a universal solution is

    <script type="text/javascript">
    if(document.getElementById("your_div_name").innerHTML=="") {document.getElementById("your_div_name").style.display="none";}
    </script>

    This removes the empty div, but there can be a lot of better ways, specially if you can use php. The problem of this solution is that it needs a little playing, you should make sure that the div contents when empty are absolutely nothing, and also it needs javascript to be enabled.

  3. #3
    Join Date
    May 2009
    Posts
    62
    Hi there,

    Thankyou for your reply. Do you know if there is a way to do this in pure CSS, i.e no javascript or PHP?

    Thank you again

  4. #4
    Join Date
    Nov 2009
    Posts
    36
    You are welcome. No, I don't think that there can be a pure CSS solution, as CSS is not content related. You need something to be dynamic, CSS is static.

  5. #5
    Join Date
    May 2009
    Posts
    62
    Darn it!I hate IE - it works perfectly in FF. Really no hack or anything?

  6. #6
    Join Date
    Nov 2009
    Posts
    36
    Would you please tell me what did you do for Firefox? Well, as I know, this should be a non-standard solution. I would appreciate if you send your FF solution.

  7. #7
    Join Date
    May 2009
    Posts
    62
    Hi there,

    Thank you for replying once again.

    It's not a solution, it's literally just an empty div eg:

    <div class="header"></div>

    This works in FF Chrome and Safari but not IE.

  8. #8
    Join Date
    Oct 2009
    Location
    Lawrence, KS
    Posts
    52
    Post your css rules, then maybe we can help you out a little more.

  9. #9
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,105
    Code:
    .header {display: none;}

  10. #10
    Join Date
    May 2009
    Posts
    62
    Hi cbVision

    Thanks for your reply. I actually do not need to hide the div all the time - only when it is empty.

    I currently have no css rules to enforce Firefox to hide an empty div - the only css I have defines bg color and width.

  11. #11
    Join Date
    Oct 2009
    Location
    Lawrence, KS
    Posts
    52
    The reason it's not showing up in Firefox then is because there is no height declared, and is thus appearing to be "invisible". What is actually happening is that the div, because it's empty, has a height of 0px, so cannot be seen, but it is still there.

  12. #12
    Join Date
    May 2009
    Posts
    62
    OK thank you for explaining that mordauk!

    So I guess the only way to make it dynamically 'disappear' if it contains no content is to use javascript and this is not achievable in the css?

  13. #13
    Join Date
    Oct 2009
    Location
    Lawrence, KS
    Posts
    52

  14. #14
    Join Date
    May 2009
    Posts
    62
    Thanks everyone for your advice so far.

    I am currently trying to use the code as first given

    <script type="text/javascript">
    if(document.getElementById("c1").innerHTML=="") {document.getElementById("c1").style.display="hidden";}
    </script>

    However it doesn't hide my div with the structure I have:

    I have a wrapper with a display:table
    I have an inner wrapper with dispay:table-row
    I have wrapper within that with display:table-cell
    and within this I have 3 x columns.

    (See example here for why I have created this layout - http://www.projectseven.com/tutorial...-flex-display/)

    If I set the CSS to column 1 to display:none; the column disappear and column 2 stretches to fill it's place. Likewise if I apply the css to column3. However this isn't working when I want to dynamically hide it using the javascript above. Is the javascript above not compatible with the structure I have. Is there a way to achieve this using .net or php?

    Thank you once again for your advice

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