2

I've already asked this, but I don't think I was specific enough!

I'm looking for a very simple way for a div to be hidden when there isn't any information in it. - It needs to be simple for the client so they don't have to worry about it.

The Div has information put into it with joomla in certain categories.

For example on my main template I might have a div below my nav on the left, I can choose which pages it displays modules in, but when it's not in-use it still displays it's borders.

I also don't want to use many different templates for the site, just have the ability to use many module positions, but when they're not in use, they're hidden.

http://msc-media.co.uk/

Have a look, under my nav on the left.

If it helps, here is the code i'd be trying to hide if joomla isn't outputting any data on that page:

    <div id="lnav2">
    <jdoc:include type="modules" name="left2" />
    </div>

Thanks in advance

Max Chandler
  • 503
  • 1
  • 6
  • 21
  • 3
    Instead of pasting a wall of text and expecting us to figure it out, how about just indicating WHICH of those divs you'd like to be hidden? – Marc B Feb 29 '12 at 20:26
  • In theory, any of them, the styling is exactly the same for each one. I'll edit it down now. – Max Chandler Feb 29 '12 at 20:49

5 Answers5

4

Check out jquery :empty selector

http://api.jquery.com/empty-selector/

<script>$("div:empty").css('display', 'none');</script>

Load the latest jquery library into your

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

and place the code above <script>$("div:empty").css('display', 'none');</script> into the head or in before the closing tag of your html. This will detect all instances of empty tags. Change div accordingly depending on what you are trying to detect.

ckaufman
  • 1,487
  • 9
  • 15
  • I'm not too sure how to implement this code onto my site, I have attempted to, but to be honest I haven't delved into javascript/jquery at all. Could you take a look please? – Max Chandler Feb 29 '12 at 21:26
  • Hmm, seem to have got it implemented now, but once I've added it, it removes the twitter module from the page and not the div below the nav... Why is this happening? – Max Chandler Feb 29 '12 at 23:35
4

In Joomla! templates you can use countModules to determine if a module is infact set for the position. So your code could be wrapped like this:

<?php if ($this->countModules('left2')): ?>
    <div id="lnav2">
        <jdoc:include type="modules" name="left2" />
    </div>
<?php endif; ?>

That way the <div id="lnav2"> is only rendered if there is an active module for the position.

Craig
  • 9,335
  • 2
  • 34
  • 38
2

You can put a jQuery code at the page. Something like:

$(function() {
    $('div').each(function() {
        if($(this).html() == '') {
            $(this).css('display','none');
        }
    }
});
Tiago César Oliveira
  • 812
  • 8
  • 18
0

you can do the following inside your tags that you do not want displayed, if empty:

<div id="rnav1a" <?php if(empty($variable)||!isset($variable)) echo 'style="display: none;"'; ?>>   <jdoc:include type="modules"
 name="right1" />
</div>

Simply adding a css style="display:none;" get's rid of that block.

Ben Ashton
  • 1,385
  • 10
  • 15
0

While hiding the div on page load is good, it's cleaner to set the div to display: none by default, and show it if it does have content. Also, should still wrap this in a .ready to ensure all content has loaded.

jQuery( function( ) {
    jQuery( '#divid:not(:empty)' ).css( 'display', 'block' );
});
Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
kitti
  • 14,663
  • 31
  • 49
  • On what do you base this theory that hiding every div by default is better (or "cleaner" as you put it)? In my opinion, it is much worse - borderline ridiculous. – Wesley Murch Feb 29 '12 at 20:43
  • @Madmartigan Because if you default to show, the div can appear on the user's screen before the jQuery runs, then flash away. Basically the same as a FOUC. Since the OP's goal is to avoid showing the empty div, it's better to show no div and have it pop up if it has content. And where exactly did you get this 'hiding every div' idea? I never said anything of the sort. I said to hide 'the div' - that's singular, meaning ONE. Not all. – kitti Feb 29 '12 at 21:04
  • Apologies, I misunderstood. However, I still don't get this: `set the div to display: none by default, and show it if it does have content`... Why not just ***not*** set `display: none` on elements that *have* content? I think the OP has no viable way to check if the content is empty on the server side, so it's moot anyways. This is a confusing question that doesn't make a whole lot of sense, so I'm not sure how to approach it. – Wesley Murch Feb 29 '12 at 21:08
  • Simply, I have a html/css layout with a set number of Div's. If one of the divs dosent have information in, I would like if it wasn't shown. – Max Chandler Feb 29 '12 at 23:08