SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    if empty - hide divs

    Hi,

    I have a page with with div elements with the class "more".
    I want to hide them if they don't include any content.
    If there is text or an image in it nothing should happen to show it's
    content.

    Any idea how to relize that? I'm using jQuery and probably I can
    get all divs with the following line:
    Code:
    var more_content = $('div.more')[i];
    But what comes next, a loop function and what do I have to do
    then?


    thanks
    T.C.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    You want to hide them if they're empty, and nothing should happen to shows its content if it has text or an image.

    That sounds contradictory. Can you please expand on what your requirements are?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm working with a CMS. Each content element is writing this <div class"more"> onto
    the page no matter if it's filled out or not by the editor. So looking at the html
    source text of the page there could be this:

    1. ...<div class="more"></div>...
    2. ...<div class="more"><a href="#">Links</a></div>...
    3. ...<div class...

    Well the problem with this is that IEs don't set the height of these divs to 0 if
    it's empty. So there is too much space between this and the following element
    which isn't allowed in the style guide. Hence I want to make a function which
    hides (display: none) all empty divs with the class "more".
    Maybe there could be another solution to set min-height to 0 with a jQuery plugin
    which makes this attriute also available to IE6.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    The traditional javascript way is as follows:

    Code javascript:
    var els = document.getElementsByTagName('div'),
        el,
        i;
    for (i = 0; i < els.length; i += 1) {
        if (el.className === 'more') {
            if (!el.firstChild) {
                el.style.display = 'none';
            }
        }
    }

    In jquery that would be something like

    Code javascript:
    $('#div.more:empty').hide();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks pmw57, it works perfectly


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
  •