CODEWITHSUNDEEP
jqueryresizelistener
Ron
Ron

Reputation: 4095

jQuery body resize listener

I am looking for a listener to body resize. I need something similiar to $(window).resize() but for the body.

Why do I need it for the body? I add content using ajax and it might change the body size (depends on user's resolution).

How can I make body resize listener / where can I find one?

EDIT:
except for the ajax, I got accordion.
each Item has different height and therefore can cause the body to resize...

Thanks.

Upvotes: 0

Views: 4052

Answers (2)

Fresheyeball
Fresheyeball

Reputation: 30035

There is no reliable way to listen for body resize, BUT you can listen for animation occurring in your accordion. There are two ways to do this, but one of them is cooler.

Somewhere in your accordion script you have a jQuery .animate statement. If you don't and are using a shortcut like .show(200) or .fadeIn, you will need to convert it to a .animate statement. All these commands are really just shortcuts for .animate anyway. If you are using slideUp and slideDown. You will have to save the height of your elements when the slider is initialized for use later (this is what jQuery is doing behind the scenes btw).

Next you will want to use the step property of .animate to listen for the presence of the scrollbar:

  $(accordionSlideToShow).animate({
        height : 200
        step : function(){
            //scrollbar checking and css control script here
        }
  }, 2000);

But if you want to be cooler, you can add custom events to your widget. This way future development can tie into these events as free functionality.

  $(accordionSlideToShow).trigger('ron-accordion-slideWillShow').animate({
        height : 200
        step : function(){
             $(accordionParentElement).trigger('ron-accordion-animationOccurring');
        }
  }, 2000, function(){
      $(this).trigger('ron-accordion-slideDidShow');
  });

Now you can tie into your widget's new event model and listen for animation and scrollbars like so:

  $(accordionInstance).on('ron-accordion-animationOccurring', function(){
       //test for scroll bars and add css if needed
  });

Upvotes: 2

Pebbl
Pebbl

Reputation: 36075

There is no such resize event that triggers when the body element changes size - you can assign a resize event handler, but this will only trigger when the window resizes. There are a few ways to approximate an element resize event, but as Fresheyeball states it's probably better to try and approach the problem from a different angle. That being said you could:

  1. Create a function that is frequently called via setInterval that would keep an eye on the width/height or the scrollWitdth/scrollHeight of the body, and fire a method if there is a change.

  2. In browsers that support this feature you could look at using the DOMAttrModified event or possibly make use of a MutationObserver. But then again these are only supported by a small percentage of the user agents out there.

Upvotes: 0

Related Questions