CODEWITHSUNDEEP
javascript
Needzhelp
Needzhelp

Reputation: 111

How to obtain smooth javascript popup resizing

I want a popup to resize to minimum size right before closing. I would like the user to see the animation so they understand the window they were using is disappearing.

I have come up with the following code, but it is very jaggy. Is there a smoother way? Thank you!

function resizeWindow() {

    setTimeout(function() {
        window.resizeTo(500, 500);
    }, 100);
    setTimeout(function() {
        window.resizeTo(475, 475);
    }, 125);
    setTimeout(function() {
        window.resizeTo(450, 450);
    }, 150);
    setTimeout(function() {
        window.resizeTo(425, 425);
    }, 175);
    setTimeout(function() {
        window.resizeTo(400, 400);
    }, 200);
    setTimeout(function() {
        window.resizeTo(350, 350);
    }, 250)
    setTimeout(function() {
        window.resizeTo(300, 300);
    }, 300);
    setTimeout(function() {
        window.moveTo(900, 600);
    }, 350);
    setTimeout(function() {
        window.resizeTo(100, 100);
    }, 400);
    setTimeout(function() {
        window.resizeBy(10, 10);
    }, 500);
    setTimeout(function() {
        window.close();
    }, 500);

}

Upvotes: 2

Views: 427

Answers (2)

Mario Rawady
Mario Rawady

Reputation: 871

Use jQuery animation http://api.jquery.com/animate/

The below function can be used with any div size, and you can set any time you wish for the animation

$(".closeBtn").click(function() {
  var parentElem = $(this).parents(".popup").first() ; //Get the parent div that needs to be closed
  
  parentElem.animate({ //set width and height of the parent div to 0
    "width": "0",
    "height": "0"
  },
  1000, //Animation time: 1000ms = 1 sec
  function() {
    parentElem.hide() ; //After the animation if finished, hide the div (you can use .remove() if you wish to remove the div completely
  })
}) ;
.popup{
  border: 1px solid #000;
  width: 250px;
  height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup">
  Pop up text goes here.
  <br />
  <a href="javascript:;" class="closeBtn">Click here to close</a>
</div>

Updated Answer

Sorry for the above answer, but I miss understood the question.

I have came up with a solution. I don't know if it is the perfect solution. But at least it works.

The below is the popup window content.

I have created a function animateClose() that takes the duration by milliseconds as a parameter.

When called, it will calculate the window width and height, then will calculate the number of loops to do by dividing the duration given in the parameters by 10 (The popup will animate each 10 milliseconds)

When the popup reaches the given duration, it will be closed

<div class="main">
    <a href="javascript:;" class="closeWindow">Close Window</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(function() {
        $(".closeWindow").click(function() {
            animateClose(500) ;
        }) ;
    }) ;

    function animateClose(time) {
        if (time == undefined || time == null) {
            time = 1000 ;
        }

        var w = $(window).width() ; //Get window width
        var h = $(window).height() ; //Get window height

        var loops = time * 0.1 ; //Get nb of loops

        var widthDecreasePercentage = (w / loops) * -1 ;
        var heightDecreasePercentage = (h / loops) * -1 ;

        var loopInterval = setInterval(function(){
            window.resizeBy(widthDecreasePercentage, heightDecreasePercentage) ;
            loops-- ;

            if (loops <= 0) {
                clearInterval(loopInterval) ;
                window.close() ;
            }
        }, 10);
    }
</script>

Upvotes: 2

Anupam
Anupam

Reputation: 8016

This is an implementation using setInterval instead of setTimeout. I doubt that it solves the problem of "jaggy" animation but provides an improvement over code. DEMO

var child = window.open("www.google.com","_blank","toolbar=yes,scrollbars=yes,resizable=yes,top=0,left=0,width=500,height=500");
function resizeWindow(child) {
    var width = 500;
    var height = 500;
    var timer = setInterval(function(){ 
      if(width > 10) {
        child.resizeTo(width-=25,height-=25);
      }else{
        child.close();
        clearInterval(timer);
      }     
    },0);
}
resizeWindow(child);

Upvotes: 1

Related Questions