Jquery Hide or show div on height of another div

Question

I have a div class called siteads where i put js-adbanners in I have another div id called adblockmessage

<div class="siteads"><!-- js-code goes here --></div>
<div id="adblockmessage"><!-- adblock message goes here --></div>

What I want to do should be simple; check the height of .siteads and if is 0px display #adblockmessage as a block (or show / hide)

What I did is this:

function blockAdblockUser() {
    if ($('.siteads').height() == 0) {
        $('#adblockmessage').show();
    else 
          $('#adblockmessage').hide();
    }
}

$(document).ready(function(){
    blockAdblockUser();
});

Can any jQuery captain solve this in seconds please? Thanks in advance!

what's the output of `console.log($('.siteads').height());` before the condition? — Fabrizio Calderan, Apr 09 '15 at 13:39
I hope this [fiddle](http://jsfiddle.net/SukanyaHalder/hrsd2ca5/1/) solves your problem. — Sukanya1991, Apr 09 '15 at 13:48

score 2 · Answer 1 · answered Apr 09 '15 at 13:54

2

Your jQuery if-else has an error. You can see it in console(F12).

function blockAdblockUser() {        
    if ($('.siteads').height() == 0) {
        $('#adblockmessage').show();
    }
        else $('#adblockmessage').hide();        
}

Fiddle

answered Apr 09 '15 at 13:54

Sukanya1991

778
3
17

score 0 · Answer 2 · answered Apr 09 '15 at 13:51

0

Easier way of doing this.

Review:
http://jsfiddle.net/uph9wz76/

Checking if an element is :visible will check if it exists, if it has a non-hidden display type, and if it has dimensions.

More info: https://api.jquery.com/visible-selector/

answered Apr 09 '15 at 13:51

Josh

3,258
2
19
31

score 0 · Accepted Answer · edited May 23 '17 at 12:22

0

If the content of your divs are loaded dynamically, then you will need to use window.load event to get its correct height as discussed here: https://stackoverflow.com/a/13071846/1845408

$(window).load(function() {
   blockAdblockUser();
});

//blockAdblockUser fn goes here

edited May 23 '17 at 12:22

Community

1
1

answered Apr 09 '15 at 13:54

renakre

8,001
5
46
99

Jquery Hide or show div on height of another div

3 Answers3