Question

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.

Answer 1

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
  });