CODEWITHSUNDEEP
javascriptanimationhtml
user2906766
user2906766

Reputation: 893

re-positioning a div on page load using pure javascript

hi i would like to create some animations using javascript when i thought of something which didn't work (i am a beginner in js) so in simple i have a box at the top of my page and i want to change its css properties on pageload like width , margin -top margin -bottom and etc

here is my code - 

<html>
<head>
<style>
#div{
backgroud: #ecb4df;
width: 200px;
height: 50px;
}
</style>
<script>
function codeAddress() {
            /* the code here */
        }
        window.onload = codeAddress;
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>

moreover is this way correct and workable or is there any other way of tackling my problem , if yes please tell that too

Upvotes: 1

Views: 267

Answers (1)

Halcyon
Halcyon

Reputation: 57729

I can strongly recommend you to look at CSS animations, they perform much better and are easier to maintain.

In JavaScript all you need to do is add or remove a class.

<style>
.my-div {
    -webkit-transition-property: top, left;
    -moz-transition-property: top, left;
    -o-transition-property: top, left;
    transition-property: top, left;
    -webkit-transition: 2s ease-in-out;
    -moz-transition: 2s ease-in-out;
    -o-transition: 2s ease-in-out;
    transition: 2s ease-in-out;
    position: absolute;
    top: 200px;
    left: 200px;
}
.initial {
    top: 0px;
    left: 0px;
}
</style>

<div id="mydiv" class="my-div initial">Ipsum Lorem</div>
<script>
    setTimeout(function () {
        document.getElementById("mydiv").className = "my-div"; // remove "initial" to trigger animation
    });
</script>

http://jsfiddle.net/srTnE/1/

Upvotes: 1

Related Questions