CODEWITHSUNDEEP
jquerydynamiccssheightcss-transitions
nqw1
nqw1

Reputation: 1009

Move div with dynamic height using javascript and css3 transition

I have div which height changes depending on its content. Div element is located at bottom outside of the screen but when user clicks a button, div element will come up exactly the height of the div. For example, if div's height is 200 pixels, it will move up 200 pixels and if div's height is 400 pixels, it will move up 400 pixels. I'm able to get the height of the div and lift the div element up but I'm unable to move it back outside the screen. Here's my code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#button {
    height: 100px;
    width: 100px;
    background: blue;
}
#box {
    position: absolute;
    top: 100%;
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: all 1s ease-out;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function moveUp() {
    var height = $("#box").height();
    $("#box").css('-webkit-transform', 'translate3d(0px,-'+height+'px,0)');
}
function moveDown() {
    var height = $("#box").height();
    $("#box").css('-webkit-transform', 'translate3d(0px,'+height+'px,0)');
}
</script>
</head>
<body>          
    <div id="button" onclick="moveUp();"></div>
    <div id="box" onclick="moveDown();"></div>
</body>
</html>

I would also like to have an option that I would be able to lift up and put down the box by clicking the same button. So, two solutions needed :)

Upvotes: 0

Views: 2585

Answers (1)

Niels
Niels

Reputation: 49929

Try this fiddle: http://jsfiddle.net/W7NDp/2/

Script:

var visible = false;
function moveUp() {
    if(visible)
    {
        moveDown();
    }
    else
    {
        var height = $("#box").height();
        $("#box").css('-webkit-transform', 'translate3d(0px,-'+height+'px,0)');
    }
    visible = !visible;
}
function moveDown() {
    var height = $("#box").height();
    $("#box").css('-webkit-transform', 'translate3d(0px,0px,0)');
}

Upvotes: 1

Related Questions