Animating a div to the corners of the website

Question

I have a div in the bottom right corner. Clicking to one of the corners, the div should move there through an animation. The problem seems to be that left and top properties are blocking their pairs. I could make it work without animation, but now I am stuck. You can try; it works if you move it to the left or top, but not backward.

JSFiddle

HTML:

CSS:

#chatdiv  {
    width:400px; 
    height:260px; 
    position: absolute !important; 
    top:auto;
    left:auto;
    bottom:0px; 
    right:0px; 
    background-color: #FF9933; 
}

#chatlefttopbtn {
    position: fixed;
    left: 0px;
    top: 0px;                  
}

#chatrighttopbtn {
    position: fixed;
    top:0;
    right:0;               
}

#chatleftbottombtn {
    position: fixed;
    left: 0px;
    bottom: 0px;               
}

#chatrightbottombtn {
    position: fixed;
    bottom:0;
    right:0;               
}

JavaScript:

var firstMove = true;

    $(function() { 
        document.getElementById("chatlefttopbtn").addEventListener("click", function() {
        moveChatWindow("lefttop");
    }, false);

    document.getElementById("chatrighttopbtn").addEventListener("click", function() {
        moveChatWindow("righttop");
    }, false);

    document.getElementById("chatleftbottombtn").addEventListener("click", function() {
        moveChatWindow("leftbottom");
    }, false);

    document.getElementById("chatrightbottombtn").addEventListener("click", function() {
        moveChatWindow("rightbottom");
    }, false);
    });

    function moveChatWindow(moveTo) {
    var chatWindow = $("#chatdiv");

    var left = chatWindow.offset().left;
    var right = ($(window).width() - (chatWindow.offset().left + chatWindow.outerWidth()));
    var top = chatWindow.offset().top; 
    var bottom = ($(window).height() - (chatWindow.offset().top + chatWindow.outerHeight()));

    if(firstMove){
        chatWindow.css({left:left, right: right, bottom: bottom, top: top});
        firstMove = false;
    }

    chatWindow.css.position = 'absolute';

    if(moveTo === "lefttop"){
        chatWindow.css.left = left;
        chatWindow.css.top = top;
        chatWindow.css.right = 0;
        chatWindow.css.bottom = 0;

        chatWindow.animate({
            left : '0px',
            top : '0px'
        }, 2000);
    } else if(moveTo === "righttop"){
        chatWindow.css.left = "auto";
        chatWindow.css.top = top;
        chatWindow.css.right = right;
        chatWindow.css.bottom = 0;

        chatWindow.animate({
            top : '0px',
            right : '0px'
        }, 2000);
    } else if(moveTo === "leftbottom"){
        chatWindow.css.top = 0;
        chatWindow.css.left = left;
        chatWindow.css.right = 0;
        chatWindow.css.bottom = bottom; 

        chatWindow.animate({
            left : '0px',
            bottom : '0px'
        }, 2000);
    } else {
        chatWindow.css.left = 0;
        chatWindow.css.top = 0;
        chatWindow.css.right = right;
        chatWindow.css.bottom = bottom;

        chatWindow.animate({
            right : '0px',
            bottom : '0px'
        }, 2000);   
    }
}

Note: This is not the real code, do not judge me, I just threw it together for the sake of the question.

gvee · Accepted Answer

The problem you have is that you're assigning values to all four corners of the object: top, right, bottom and left.

To move this properly you only need to change 2 of the co-ordinates.

Because your chat window starts in the bottom right, we'll use that as our datum.

DEMO: http://jsfiddle.net/rws95a1q/4/

Basic code:

var chatWindow = $("#chatdiv");
var chatWidth = chatWindow.width();
var chatHeight = chatWindow.height();

var windowWidth = $(window).width();
var windowHeight = $(window).height();

function moveChatWindow(moveTo) {
    if (moveTo === "lefttop") {
        chatWindow.stop().animate({
             bottom: windowHeight - chatHeight
           , right: windowWidth - chatWidth
        }, 2000);
    }
    else if (moveTo === "righttop") {
        chatWindow.stop().animate({
             bottom: windowHeight - chatHeight
           , right: 0
        }, 2000);
    }
    else if (moveTo === "leftbottom") {
        chatWindow.stop().animate({
             bottom: 0
           , right: windowWidth - chatWidth
        }, 2000);
    }
    else {
        chatWindow.stop().animate({
             bottom: 0
           , right: 0
        }, 2000);
    }

First up we have to work out a few things - namely the dimensions of the chat box and the size of the document/window. This gives us enough data points to work out where to animate to.

Next comes the animation: note how the only dimensions we are ever assigning new values to are the bottom and right.

To set it to the "lefttop", the bottom of the chat window needs to be 260px from the top, which is equivalent to the height of the document minus the height of the chat box. The principal for left is the same: width of the document minus the chat box width.

UPDATE: I would probably change the positioning of the chat box to fixed. Alternatively I have included some extra code in the JSFiddle to handle window resizing (in principal).

Animating a div to the corners of the website

Answers (2)

Related Questions