Home/ Questions/Q 6942657
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T13:03:10+00:00

I have div which height changes depending on its content. Div element is located

  • 0

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 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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)');
}
    • 0