How to Trigger the Window Resize Event in JavaScript?

Resize Triggering: Scenario Breakdown

When would you trigger resize manually?

In practical terms:

• Responsive Design Testing: It's useful to trigger resizing programmatically for testing responsive designs. It's like the effort-saver mode, so you don't need to manually drag your browser edges every time.

• Layout Adjustments: These are situations where layout dimensions change, but the viewport stays the same. For instance, when sidebar is collapsed or an element is hidden or adjusted.

• Custom UI Components: Specific custom elements might need to adapt to window size the same way as standard ones, ensuring consistent UI behaviour.

Resize event in non-modern browsers

While window.dispatchEvent(new Event('resize')); works a charm in modern browsers, Internet Explorer prefers its own way:

var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(evt);


And for jQuery users, we do have a shorthand:

$(window).trigger('resize');


Remember the window.resizeTo(). It’s like the "Do not touch" sign in the museum. It resizes the actual window, not the elements, which is a different behaviour and often disabled in contemporary browsers due to UX considerations.

Handling Events: From Window to Elements

Triggering events on specific elements

Sometimes we need to stimulate events on specific elements, not the entire window. Here's the same dispatchEvent method coming handy:

element.dispatchEvent(new Event('customEvent')); // element plays pretend, thinking a 'customEvent' really happened


Custom function for event simulation

To facilitate event simulations across your code, you might consider a reusable custom function:

function simulateEvent(element, eventName) {
  let event = new Event(eventName);
  element.dispatchEvent(event); // same old trick, new dressing
}


On the fly mouse event simulation

With MouseEvent constructor, you can simulate mouse-related events such as click, mouseover, mouseout:

var mouseEvent = new MouseEvent('click', {
  view: window,
  bubbles: true,
  cancelable: true
});

element.dispatchEvent(mouseEvent); // clicking without touching. Magic? No, it's JavaScript!


Remember to pay attention to deprecation warnings and use the right method for event initialization in the ever-evolving browsers.

Asynchronous Operations and Window Resize

Post async operation resize trigger

In an Angular context, for instance, there could be scenarios where you need to trigger window resize after certain asynchronous operations. Here's where $timeout comes into play:

$timeout(function() {
   window.dispatchEvent(new Event('resize')); // delayed reaction
}, 0);


Cross-Browser Compatibility: The Ultimate Strategy

It's usually a prudent decision to join forces of multiple solutions to ensure compatibility across different browsers. Always consider checking for the existence of certain constructors or methods before utilising them, and fall back on older methods when necessary.