Dynamic check if div is displayed or not , jquery css (display:none/block)
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
Try this post.
jQuery event to trigger action when a div is made visible
尝试在加载页面后执行代码：
$(document).ready(function() {
// put your code here
});
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'});
});