.resize()S2C Home « Events « .resize()

DOM loaded event handler.

Description

Resize event handler.

Description

The .resize() method is used to bind an event handler to the JavaScript resize event or trigger that event on the specified element.

  • The .resize() method only works on the window object not on arbitrary elements unless you fire the .resize() method whenever you resize the element in question.
  • Any code in a resize handler should never rely on the number of times the handler is called due to differences in browser implementations.

Syntax


Signature Description
.resize( )Trigger the resize JavaScript event on the window object or the specified element.
.resize( [eventData], handler(eventObject) )Bind an event handler to the resize JavaScript event, optionally passing an object of data.

Parameters


Parameter Description Type
eventDataAn object of data to pass to the event handler.Object
handler( eventObject )A function to execute each time the event is triggered.Function

Return

A jQuery object.

.resize( ) Examplesgo to top of page Top

Trigger the resize JavaScript event on the specified element.

  • This signature is a shortcut for .trigger('resize').

In the example below we show a new message in the 'div' element with an id of 'div1' when the div below is clicked on the first time.

When the div is clicked on we run the function aResizeFunction() which triggers off the resize JavaScript event on the 'div1'. This then fires off the $('#div1').resize(function(){}) code.

As a side note this will also fire off the the window example below, as text is added to the window which fires this event, even though the viewable window dimensions do not change.


$(function(){
  $('#div1').resize(function () {
    $('#div1').append('resize JavaScript event triggered. New window dimensions are: Height: ' 
              + $(this).height() + ' Width: ' + $(this).width());
  });
  $('#div1').one('click', function(){
    aResizeFunction('A new line of text. ', this);
  });
  function aResizeFunction(ourText, ourDiv) {
    $(ourDiv).html(ourText);
    $(ourDiv).resize();
  }
});

div1. Some initial text.



.resize( [eventData], handler(eventObject) ) Examplesgo to top of page Top


  • This signature is a shortcut for .bind('resize', handler).

Bind an event handler to the resize JavaScript event.

In the example below we show a new message in the 'div' element with an id of 'div2' each time the window is resized.


$(function(){
  $(window).resize(function() {
    $('#div2').append('The resize JavaScript event is being handled. New window dimensions 
      are: Height: ' + $(this).height() + ' Width: ' + $(this).width() + '<br />';
  });
});

div2.



Bind an event handler to the resize JavaScript event passing an object of data.

In the example below we show a new message in the 'div' element with an id of 'div3' when the div below is clicked on the first time.

When the div is clicked on we run the function aResizeFunction() which triggers off the resize JavaScript event on 'div3'. This then fires off the $('#div3').resize({ param: '**JavaScript event triggered**' }, addText); code.

What we are doing here is passing across the event object to the function addText(event). The map we specify, in our case { param: '**JavaScript event triggered**' } gets tagged onto the event.data property. We then access this parameter in the function via event.data.param and use it as part of the appended data.

As a side note this will also fire off the the window example below, as text is added to the window which fires this event, even though the viewable window dimensions do not change.


$(function(){
  $('#div3').resize({ param: '**JavaScript event triggered**' }, addText);
  $('#div3').one('click', function(){
    aResizeFunction('A new line of text. ', this);
  });
  function aResizeFunction(ourText, ourDiv) {
    $(ourDiv).html(ourText);
    $(ourDiv).resize();
  }
  function addText(event) {
    $('#div3').append('resize ' + event.data.param + '. New window dimensions 
      are: Height: ' + $(this).height() + ' Width: ' + $(this).width());
  }
});

div3.


go to home page Homepage go to top of page Top