Cross-Browser Window Resize Event - JavaScript/Jquery

Cross-browser window resize event - JavaScript / jQuery

jQuery has a built-in method for this:

$(window).resize(function () { /* do something */ });

For the sake of UI responsiveness, you might consider using a setTimeout to call your code only after some number of milliseconds, as shown in the following example, inspired by this:

function doSomething() {
    alert("I'm done resizing for the moment");
};

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
});

How to trigger the window resize event in JavaScript?

Where possible, I prefer to call the function rather than dispatch an event. This works well if you have control over the code you want to run, but see below for cases where you don't own the code.

window.onresize = doALoadOfStuff;

function doALoadOfStuff() {
    //do a load of stuff
}

In this example, you can call the doALoadOfStuff function without dispatching an event.

In your modern browsers, you can trigger the event using:

window.dispatchEvent(new Event('resize'));

This doesn't work in Internet Explorer, where you'll have to do the longhand:

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

jQuery has the trigger method, which works like this:

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

And has the caveat:

Although .trigger() simulates an event activation, complete with a synthesized event object, it does not perfectly replicate a naturally-occurring event.

You can also simulate events on a specific element...

function simulateClick(id) {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });

  var elem = document.getElementById(id); 

  return elem.dispatchEvent(event);
}

jQuery on window resize

Here's an example using jQuery, javascript and css to handle resize events.

(css if your best bet if you're just stylizing things on resize (media queries))

http://jsfiddle.net/CoryDanielson/LAF4G/

css

.footer 
{
    /* default styles applied first */
}

@media screen and (min-height: 820px) /* height >= 820 px */
{
    .footer {
        position: absolute;
        bottom: 3px;
        left: 0px;
        /* more styles */
    }
}

javascript

window.onresize = function() {
    if (window.innerHeight >= 820) { /* ... */ }
    if (window.innerWidth <= 1280) {  /* ... */ }
}

jQuery

$(window).on('resize', function(){
    var win = $(this); //this = window
    if (win.height() >= 820) { /* ... */ }
    if (win.width() >= 1280) { /* ... */ }
});

How do I stop my resize code from executing so often!?

This is the first problem you'll notice when binding to resize. The resize code gets called a LOT when the user is resizing the browser manually, and can feel pretty janky.

To limit how often your resize code is called, you can use the debounce or throttle methods from the underscore & lodash libraries.

• debounce will only execute your resize code X number of milliseconds after the LAST resize event. This is ideal when you only want to call your resize code once, after the user is done resizing the browser. It's good for updating graphs, charts and layouts that may be expensive to update every single resize event.
• throttle will only execute your resize code every X number of milliseconds. It "throttles" how often the code is called. This isn't used as often with resize events, but it's worth being aware of.

If you don't have underscore or lodash, you can implement a similar solution yourself:
JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

JavaScript window resize event

Best practice is to add to the resize event, rather than replace it:

window.addEventListener('resize', function(event) {
    ...
}, true);

An alternative is to make a single handler for the DOM event (but can only have one), eg.

window.onresize = function(event) {
    ...
};

jQuery may do some work to ensure that the resize event gets fired consistently in all browsers, but I'm not sure if any of the browsers differ, but I'd encourage you to test in Firefox, Safari, and IE.

$(window).on('resize') in JavaScript

They aren't the same, in the first example, you're affecting an event to the dom object onresize handler.

The jQuery version is probably doing something different behind the scene. Without looking into the source code, it is probably simply doing:

window.addEventListener('resize', function () {...})

That said, the jQuery version and the native addEventListener are still different because jQuery is also adding some magic to the event handler.

And addEventListenener is probably the prefered way to add event to a DOM object, because you can add multiple events but with the dom attribute on[event] you're limited to one event.

Here's a bit more about it: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

While you're at it, you could also read about the addEventListener friend: removeEventListener.

JavaScript On Browser Resize

Yep, it's possible - just add the resize event handler like this:

$(window).resize(function() {
    $('#body').css('min-height', $(window).height() - $('#title').height() - 220);
});

Responsive Video Window resize (possible js / jquery conflict)

Use jQuery resize()
Here is a fiddle with the resize working: https://jsfiddle.net/b6fncgwg/

The key is using .html() to change the html of your background/video div.

$(window).resize(function () {
    changeBackground();
});

changeBackground();

function changeBackground(){
    var viewportWidth = $(window).width();

    if (viewportWidth < 767) {
        $("#video-bg").html('<video autoplay nomuted loop preload="none" poster="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/small.jpg" id="bgvid-SMARTPHONE"><source type="video/mp4" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/small.mp4"><source type="video/webm" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/small.webm"><source type="video/ogg" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/small.ogv">');
    } else if (viewportWidth < 979) {
       $("#video-bg").html('<video autoplay nomuted loop preload="none" poster="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/SampleVideo_1080x720_1mb.jpg" id="bgvid-TABLET"><source type="video/mp4" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/SampleVideo_1080x720_1mb.mp4"><source type="video/webm" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/SampleVideo_1080x720_1mb.webm"><source type="video/ogg" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/SampleVideo_1080x720_1mb.ogv"></video>  <!--    Buttons or metadata go here -->');
    } else if (viewportWidth > 980) {
       $("#video-bg").html('<video autoplay nomuted loop preload="none" poster="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/jaguar_video1.jpg" id="bgvid-DESKTOP"><source type="video/mp4" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/jaguar_video1.mp4"><source type="video/webm" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/jaguar_video1.webm"><source type="video/ogg" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/jaguar_video1.ogv"></video>  <!--    Buttons or metadata go here');
    }
}

jQuery $(window).resize(); equivalent event listener, that only fires on a specified axis change?

You can save the width of the browser on a window load in variable. Example:

var w = 0;

$( window ).load( function(){

   w = $( window ).width();

});

$( window ).resize( function(){

  if( w != $( window ).width() ){

    //Do something

    w = $( window ).width();

  }

});

How to resize a window using JQuery?

Try to use this, its a pure javascript no JQuery involved.

window.resizeTo(width, height);

---

Related Topics