CODEWITHSUNDEEP
javascriptdomonresize
blogofsongs
blogofsongs

Reputation: 2567

DOM onresize event

If I have this 

window.onresize = function() {
  alert('resized!!');
};

My function gets fired multiple times throughout the resize, but I want to capture the completion of the resize. This is in IE.

Any ideas? There are various ideas out there, but not has worked for me so far (example IE's supposed window.onresizeend event.)

Upvotes: 23

Views: 45989

Answers (7)

p3nGu1nZz
p3nGu1nZz

Reputation: 1715

simple pure javascript solution, just change the 1000 int value to be lower for more responsiveness

        var resizing = false;
        window.onresize = function() {
            if(resizing) return;
            console.log("resize");
            resizing = true;
            setTimeout(function() {resizing = false;}, 1000);
        };

Upvotes: 2

Pim Jager
Pim Jager

Reputation: 32129

I always use this when I want to do something after resizing. The calls to setTimeout and clearTimeout are not of any noticable impact on the speed of the resizing, so it's not a problem that these are called multiple times.

var timeOut = null;
var func = function() { /* snip, onresize code here */};
window.onresize = function(){
   if(timeOut != null) clearTimeout(timeOut);
   timeOut = setTimeout(func, 100);
}

Upvotes: 9

user1263254
user1263254

Reputation:

Not sure if this might help, but since it seems to be working perfectly, here it is. I have taken the snippet from the previous post and modified it slightly. The function doCenter() first translates px to em and than substracts the width of the object and divides the remainder by 2. The result is assigned as left margin. doCenter() is executed to center the object. timeout fires when the window is resized executing doCenter() again.

function doCenter() {
document.getElementById("menuWrapper").style.position = "fixed";
var getEM = (window.innerWidth * 0.063);
document.getElementById("menuWrapper").style.left = (getEM - 40) / 2 + "em";
}

doCenter();

var timeOut = null;
var func = function() {doCenter()};
window.onresize = function(){
    if (timeOut != null) clearTimeout(timeOut);
    timeOut = setTimeout(func, 100);
};

Upvotes: 1

jfkelley
jfkelley

Reputation: 83

I liked Pim Jager's elegant solution, though I think that there's an extra paren at the end and I think that maybe the setTimeout should be "timeOut = setTimeout(func,100);"

Here's my version using Dojo (assuming a function defined called demo_resize())...

var _semaphorRS = null;
dojo.connect(window,"resize",function(){
 if (_semaphorRS != null) clearTimeout(_semaphorRS);
 _semaphorRS = setTimeout(demo_resize, 500);
 });

Note: in my version the trailing paren IS required.

Upvotes: 0

Lance
Lance

Reputation: 5800

In this case, I would strongly suggest debouncing. The most simple, effective, and reliable way to do this in JavaScript that I've found is Ben Alman's jQuery plugin, Throttle/Debounce (can be used with or without jQuery - I know... sounds odd).

With debouncing, the code to do this would be as simple as:

$(window).resize($.debounce(1000, function() {
   // Handle your resize only once total, after a one second calm.
   ...
}));

Hope that can help someone. ;)

Upvotes: 31

ChaosPandion
ChaosPandion

Reputation: 78292

This is not perfect but it should give you the start you need.

var initialX = null;
var initialY = null;
var lastResize = null;
var waiting = false;
var first = true;
var id = 0;

function updateResizeTime()
{
    if (initialX === event.clientX && initialY === event.clientY)
    {
        return;
    }

    initialX = event.clientX;
    initialY = event.clientY;

    if (first)
    {
        first = false;
        return;
    }

    lastResize = new Date();            
    if (!waiting && id == 0)
    {
        waiting = true;
        id = setInterval(checkForResizeEnd, 1000);
    }
}

function checkForResizeEnd()
{
    if ((new Date()).getTime() - lastResize.getTime() >= 1000)
    {
        waiting = false;
        clearInterval(id);
        id = 0;
        alert('hey!');
    }
}

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

Upvotes: 5

lod3n
lod3n

Reputation: 2903

You get multiple events because there really are multiple events. Windows animates the resize by doing it several times as you drag the window (by default, you can change it in the registry I think).

What you could do is add a delay. Do a clearTimeout, setTimout(myResize,1000) every time the IE event fires. Then, only the last one will do the actual resize.

Upvotes: 4

Related Questions