1

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

Community
  • 1
  • 1
Plexus81
  • 1,221
  • 6
  • 23
  • 44
  • What do you mean by "dynamically"? – kontur Mar 30 '12 at 11:31
  • It's not possible to fix this in the CSS? Do you have any indication (trigger) to know when your `.content` changes? – m90 Mar 30 '12 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 Mar 30 '12 at 11:51
  • You can't get rid of the absolute positioning? – m90 Mar 30 '12 at 11:59
  • @m90 nope, not with this layout .. I could get insert a dalay check on the statusbar, but that's not a good way to do this – Plexus81 Mar 30 '12 at 12:01
  • @kontur check my jsfiddler url – Plexus81 Mar 30 '12 at 12:27
  • Any particular reason for having the status bar positioned absolute? Why not let css do the job for you with normal block flow? – kontur Mar 30 '12 at 13:44
  • I'm branding MS SharePoint, so if I set the statusbar other than absolute it crashes the entire design , etc when you have to edit a page... – Plexus81 Mar 30 '12 at 13:47
  • 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 Mar 30 '12 at 11:26

3 Answers3

1

Try this post.

jQuery event to trigger action when a div is made visible

Community
  • 1
  • 1
naim shaikh
  • 1,103
  • 2
  • 9
  • 20
  • 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. – Plexus81 Mar 30 '12 at 12:40
  • I have edited the answer. Also check your class name spelling in html tag and jquery script – naim shaikh Mar 30 '12 at 13:00
  • Try the updated answer. I have just checked that in Jsfiddle. – naim shaikh Mar 30 '12 at 13:07
  • 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. – Plexus81 Mar 30 '12 at 13:11
  • Thanks again for the reply but it doesn't seem to work.. look at http://jsfiddle.net/qcbDy/29/ – Plexus81 Mar 30 '12 at 13:31
  • Nope, the "alert" should be displayed after the delay! Told in another day: the alert should appear after 3 seconds – Plexus81 Mar 30 '12 at 13:42
  • 1
    try this post http://stackoverflow.com/questions/1225102/jquery-event-to-trigger-action-when-a-div-is-made-visible – naim shaikh Mar 30 '12 at 13:50
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'});
});
kapantzak
  • 11,610
  • 4
  • 39
  • 61
0

Try executing your code after the page has been loaded:

$(document).ready(function() {
    // put your code here
});
gitaarik
  • 42,736
  • 12
  • 98
  • 105
  • 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. – Plexus81 Mar 30 '12 at 11:44