javascriptjqueryuser-interfaceviewportonresize

Listener for Direction of Resize

I have a right pointing triangle.

▶

On resize, the triangle should move in the direction of the resize, and when it changes direction, the triangle should flip horizontally, without ever going out of the screen.

Is there a way to listen to the direction (LEFT / RIGHT) in which the browser is being resized?

Solution

  • You might want to take a look at this question. You can get the browser window position and subtract the last position (saved from the previous resize call). If the result is non-zero in x you can assume the left edge was used, same goes for y and the top edge.

    Here is a quick example of this :

        var last_pos_x = window.screenX;
    var last_pos_y = window.screenY;

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

        var diff_x =  window.screenX - last_pos_x;
        var diff_y =  window.screenY - last_pos_y;

        last_pos_x = window.screenX;
        last_pos_y = window.screenY;

        console.log(diff_x, diff_y)
    });

    Hope this helps.