transform: translate < javascript control

aster · 02-29-2012, 12:40 PM

Hi,

Is it possible that when a webpage loads I can have javascript change the class of a div from:

.up {
transform: translate(0px,-500px)
transition: all 5s ease-in;
}

to

.down {
transform: translate(0px,0px)
transition: all 5s ease-in;
}

Essentially I would like a div to move down into place from the top of screen to the middle of screen after the page has loaded.

Some thing like this?:

Code:

<script type="text/javascript">
function transform()
{
   document.getElementById("content").className = "down";

</script>


<div id="content" class "up" onload="transform()">

</div>
</html>

would this work or is there a better way?

Adrian.

Philip M · 02-29-2012, 01:22 PM

Well, it would if you called the script with <body onload>

Code:

<body onload="transform()">
<div id="content" class "up" >
</div>

<script type="text/javascript">
function transform(){
document.getElementById("content").className = "down";
alert (document.getElementById("content").className);
}
</script>

But what is the point? Why not simply change the class name of the <div> "content" in the page code? But if you are tring to animate the <div> so that it moves slowly from page top to page middle then that is a quite different issue.
Have a look at the many excellent scripts at http://www.vicsjavascripts.org.uk/

“A gentleman is one who never hurts anyone's feelings unintentionally.” -
Oscar Wilde (Irish Poet, Novelist, Dramatist and Critic, 1854-1900)

aster · 02-29-2012, 09:13 PM

yes moving the div slowly hence the "transition: all 5s ease-in"

I know how to make a div move with a button click or mouse over being the trigger but to do it automatically on page load?

Simply want the effect of a panel moving down the page into place when a viewer first loads the home page.

Ill check your link out...

MancunianMacca · 02-29-2012, 10:06 PM

Quote:

Originally Posted by aster

yes moving the div slowly hence the "transition: all 5s ease-in"

I know how to make a div move with a button click or mouse over being the trigger but to do it automatically on page load?

Simply want the effect of a panel moving down the page into place when a viewer first loads the home page.

Ill check your link out...

I'm defo no expert but won't a simple "onLoad" even handle this? *Edit* Nevermind you already tried that :P

aster · 02-29-2012, 11:13 PM

Thanks to Philip M,

inserted the body onload, now it works a charm.

thanks again.