Hide div when another div is empty

Question

I know theres lots of answers on this problem, but I've read through all I can find but still cant get it to work.

I have a div which i need to be hidden if another div is empty, or just containing whitespace.

<div id="rt-main" class="mb12">
    <div class="rt-grid-12">
        <div class="rt-block component-block main-overlay-light">
            <div id="rt-mainbody">
                <div class="component-content">
                    <div class="blog-featured"></div>

( I want to hide div.mb12 when div blog-featured = ' ' )

My closest bet is this:

$(document).ready(function() {
   str = $('div.section').text();
   if($.trim(str) === "") {
     $('div.section').hide();
   }
});

But I get all sorts of errors in the console when trying.

Now I've got "TypeError: Cannot call method 'text' of null"

I don't see a div with class `.section` Seems like you are not selecting anything... — Pevara, Jun 17 '13 at 20:54
If you had a `div` with an id = "section", the jQuery to get it would be `$("#section")`. Mind the `#`. `$(".section")` will get elements with the "section" class, but you don't have any of these in your code either. — Geeky Guy, Jun 17 '13 at 20:55
check this: http://stackoverflow.com/questions/13438464/joomla-2-5-jquery-cannot-call-method-of-null — TechBytes, Jun 17 '13 at 20:56
`$('div.blog-featured')` would never result in `null` with jQuery. — Felix Kling, Jun 17 '13 at 20:56
Nothing wrong here. Where you getting the errors? (browser?) http://jsfiddle.net/RaphaelDDL/TMPQF/ — RaphaelDDL, Jun 17 '13 at 21:01
I get it in the chrome debugger TypeError: Object # has no method 'ready' — Håkan Bylund, Jun 17 '13 at 21:11
Same again. `$(document)` would return a jQuery object, not the DOM element. Are you using Prototype.js by any chance? — Felix Kling, Jun 17 '13 at 21:15
@HåkanBylund That message about `ready` is very different than what you posted in your question. This implies that you are trying to do `document.ready` without the `$()`. Please be sure the code you have posted is actually the one you are using. — James Montagne, Jun 17 '13 at 21:19
@JamesMontagne It is the same. Copied from Chrome debugger: Uncaught TypeError: Object # has no method 'ready' index.php:60 FB.getLoginStatus() called before calling FB.init(). all.js:55 $(document).ready(function() { str = $('div.section').text(); if($.trim(str) === "") { $('div.section').hide(); } }); TypeError: Object # has no method 'ready' — Håkan Bylund, Jun 17 '13 at 21:22
@FelixKling See comments on gibberish's answer. Not prototype, but mootools and some other stuff. — James Montagne, Jun 17 '13 at 21:23
@HåkanBylund Your question states: ""TypeError: Cannot call method 'text' of null"... implying you made it past the `ready` call which clearly now is not the case. — James Montagne, Jun 17 '13 at 21:23
@JamesMontagne I understand that, but how could that be? Write it off as a mootools(?) conflict? — Håkan Bylund, Jun 17 '13 at 21:43

score 1 · Accepted Answer · answered Jun 17 '13 at 21:42

1

On the actual site (not included in the question), you have this:

jQuery.noConflict();

This makes it so that $ is no longer jquery. Most likely because one of the many other libraries you have included uses the $ name. You can simply change your code to use jQuery in place of $:

jQuery(document).ready(function() { ...

Alternatively, you can assign jQuery to a different variable name:

var $j = jQuery.noConflict();

$j(document).ready(function(){ ...

answered Jun 17 '13 at 21:42

James Montagne

77,516
14
110
130

Oh, that did it! I was just about to jump out the window. Sorry for the bad explaining and such, I'll do better in the future. – Håkan Bylund Jun 17 '13 at 21:51

Adil Shaikh · Answer 2 · 2013-06-17T21:02:09.340

0

You want this -

jQuery(document).ready(function () {
    var str = jQuery('div.blog-featured').text();
    if (jQuery.trim(str) === "") {
        jQuery('div.mb12').hide();
    }
});

Demo ---> http://jsfiddle.net/PqXWJ/20/

edited Jun 17 '13 at 21:02

answered Jun 17 '13 at 20:55

Adil Shaikh

44,509
17
89
111

I get this: TypeError: Object # has no method 'ready' – Håkan Bylund Jun 17 '13 at 20:58
1

As I said above `$` is not `jQuery`! You got a problem since `$` is something else. – epascarello Jun 17 '13 at 21:00
Obviously I'm a noob, and I suck. I've been at this for two days and I'm getting desperate. If it isn't jQuery i suppose it's JS? I still just declare it in – Håkan Bylund Jun 17 '13 at 21:05
Still getting: TypeError: Object # has no method 'ready' Maybe I'm doing some declarations wrong? – Håkan Bylund Jun 17 '13 at 21:09
Are you loading the jQuery library first? See my example. – cssyphus Jun 17 '13 at 21:12
@gibberish Yes I am. I think. Maybe I should not post links to the site, but it is www.elvina-marin.se If you wanna verify that the library is properly declared – Håkan Bylund Jun 17 '13 at 21:24

score 0 · Answer 3 · answered Jun 17 '13 at 21:11

0

Are you loading the jQuery library before your script? Do you have something like this in the <head> tags of your page?

    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    </head>

    <script type="text/javascript">
        $(document).ready(function() {
        etc etc
    </script>

answered Jun 17 '13 at 21:11

cssyphus

37,875
18
96
111

I have this – Håkan Bylund Jun 17 '13 at 21:13
uhm... not sure how to add as code in comments. – Håkan Bylund Jun 17 '13 at 21:13
1

You have mootools, some sort of noconflict plugin. This is all very relevant to the question. You likely have a conflict between all of these libraries and plugins. – James Montagne Jun 17 '13 at 21:21
@JamesMontagne I see. I've tried the no.confilct option and also tried to install plugins to joomla to handle jquery libraries. Can this be done with regular JS, to avoid conflicts? – Håkan Bylund Jun 17 '13 at 21:26
this is a bad method for importing jquery. please refer to my answer here: http://stackoverflow.com/questions/12471067/importing-jquery-into-joomla/12473933 – Lodder Jun 17 '13 at 21:32
@Lodder I've added the code according to your guide. It gives me this in the header: but the problem persists – Håkan Bylund Jun 17 '13 at 21:41
@HåkanBylund see my answer. The question did not include enough information to give an answer. Seeing the real site I was able to find the issue. – James Montagne Jun 17 '13 at 21:43

Hide div when another div is empty

3 Answers3