...

View Full Version : 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?:



<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>



<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
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum