Dynamic check if div is displayed or not , jquery css (display:none/block)

Question

I'm having a problem that a statusbar get displayed over the content of the page. The problem is when I try to calculate the margin-top of the content (this to display the content correct) the statusbar height always returns 0 px because the statusbar gets displayed after the page has been loaded.

Is there a way to dynamically check if the div #statusbar is displayed or not? LIVE?

Something like this, but dynamically :

$('#statusbar').is(':visible') {
  $('.content').css('margin-top', $('#statusbar').height());
}

I'm branding SharePoint so the statusbar get displayed by the framework. With this layout I can't use css to do this.

Check this code: This is what happens.

http://jsfiddle.net/qcbDy/12/

The delay on the example is just for you guys to understand what's happening. The statusbar gets displayed after the DOM / site has been loaded.

I need to listen to changes on a spesific selector. (height/vibility etc.)

Solution

http://www.west-wind.com/weblog/posts/2011/Feb/22/A-jQuery-Plugin-to-monitor-Html-Element-CSS-Changes

or

jQuery event to trigger action when a div is made visible mentioned by @naim shaikh

It depends how the status bar is getting added to the page. If you've written that code, then surely you can just make sure that the above code runs after the code that inserts the bar? — Chris
– Chris, Commented Mar 30, 2012 at 11:26
It's not possible to fix this in the CSS? Do you have any indication (trigger) to know when your .content changes? — m90
– m90, Commented Mar 30, 2012 at 11:31
@m90 Sorry but I can't get any triggers, I've tried for days to get a trigger to do this right. Isn't there any way to LIVE check if a div is visible or not? Check my jsfiddle url — Plexus81
– Plexus81, Commented Mar 30, 2012 at 11:51

Community · Accepted Answer · 2017-05-23 12:02:21Z

1

Try this post.

jQuery event to trigger action when a div is made visible

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Mar 30, 2012 at 12:30

naim shaikh

1,1112 gold badges9 silver badges21 bronze badges

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

7 Comments

Plexus81 Over a year ago

I know about the delay, but I can't rely if the statusbar always gets displayed before a given time. So I need a event that checks the selector for changes.

naim shaikh Over a year ago

I have edited the answer. Also check your class name spelling in html tag and jquery script

naim shaikh Over a year ago

Try the updated answer. I have just checked that in Jsfiddle.

Plexus81 Over a year ago

thanks for the reply but the "delay" I've put inside jsfiddle is just to show how it gets displayed for the user. I need a event that listens to a selectors changes in visibility / height etc.

naim shaikh Over a year ago

try this post stackoverflow.com/questions/1225102/…

|

gitaarik · Accepted Answer · 2012-03-30 11:33:03Z

0

Try executing your code after the page has been loaded:

$(document).ready(function() {
    // put your code here
});

answered Mar 30, 2012 at 11:33

gitaarik

47k12 gold badges101 silver badges109 bronze badges

1 Comment

Plexus81 Over a year ago

The code already runs inside document.ready without any luck. The problem is that the statsbar get displayed after the entire site has been loaded.

kapantzak · Accepted Answer · 2012-03-30 17:05:50Z

0

What if you set the status bar width and the content width in a certain number and make them both float left. Then, if the status bar appears, the css will automaticaly push down the content! (i think this will work)

For example the html:

<div id="wrapper">
  <div id="status_bar"></div>
  <div id="content"></div>
</div>

And the css:

#wrapper {
   width: 900px;
   margin: 0 auto;
}

#status_bar {
   width: 900px;
   float: left;
}

#content {
   width: 900px;
   float: left;
}

Perhaps you can use this:

$('.statsubar').delay(2000).fadeIn(400).
queue(function() {
    $('.statsubar').css({'position' : 'relative'});
    $(this).dequeue();        
});

Try using the on() method:

var wrapper = $('#wrapper');


function test() {
var status = $('.statsubar');

status.css({'position' : 'relative'});
}

wrapper.on('load', '#statsubar', test);

For the '#wrapper' element use one element that is loaded from the begining

If the '.statsubar' div does not exist in the original DOM but loads after that (via ajax call) this should work:

$('.statsubar').load(function() {
    $('.statsubar').css({'position' : 'relative'});
});

edited Mar 30, 2012 at 17:05

answered Mar 30, 2012 at 11:32

kapantzak

11.8k5 gold badges42 silver badges63 bronze badges

3 Comments

Plexus81 Over a year ago

I know that CSS is the best way, but with my layout I can't use css :(

kapantzak Over a year ago

Check my answer, I use the .queue() method

Plexus81 Over a year ago

sorry but I can't use this because I don't know when the statusbar gets displayed. I have NO control at all if the statusbar is going to be displayed or not

Collectives™ on Stack Overflow

Dynamic check if div is displayed or not , jquery css (display:none/block)

3 Answers 3

7 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related