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

Improve this question
2
  • 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? Commented Feb 29, 2012 at 20:26
  • In theory, any of them, the styling is exactly the same for each one. I'll edit it down now. Commented Feb 29, 2012 at 20:49

5 Answers 5

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Worked perfectly and seamlessly, exactly the solution I was looking for, Thank-you!
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.

Improve this answer

2 Comments

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?
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?
2

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

$(function() {
    $('div').each(function() {
        if($(this).html() == '') {
            $(this).css('display','none');
        }
    }
});
Improve this answer

2 Comments

It will run after the page loads.
Using :empty, as stated by @ckaufman, is way better. I've learned something new :)
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.

Improve this answer

Comments

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' );
});
Improve this answer

4 Comments

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.
@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.
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.
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.