onclick change class

View previous topic View next topic Go down

grimofdoom
grimofdoom
Member
Member
Forum Posts : 106
Member Since : 2012-03-06

Postgrimofdoom 14/5/2012, 6:39 pm

i am creating an animation demo for a future project peice of mine but when i implimented javascript function to onclick change class,nothing happened(click here to see results).i am using this(whole page of code)code for the page:
Code:
<head>
<style type=text/javascript>
function changeClass(elem, move,moveback)
{
    elem.className = (elem.className == move)?moveback:move;
}
</style>
<style type="text/css">

#move{width:100px;height:100px;-o-border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;background:red;position:relative;}

.moveback
{
width:100px;height:100px;-webkit-border-radius:10px;background:red;position:relative;
animation: moveback 1s linear 1 infinite forwards;
/* Firefox: */
-moz-animation :moveback 1s linear 1 alternate forwards;
/* Safari and Chrome: */
-webkit-animation: moveback 1s linear 1 alternate forwards;
}

.move
{
width:100px;height:100px;-webkit-border-radius:10px;background:red;position:relative;
animation:move 1s linear 1 alternate forwards;
/* Firefox: */
-moz-animation:move 1s linear 1 alternate forwards;
/* Safari and Chrome: */
-webkit-animation: move 1s linear 1 alternate forwards;
}

@keyframes moveback
{
0%  {background:blue; left:500px; top:200px; transform:scale(1.7)}
50%  {background:green; transform:rotateY(120deg)}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes moveback /* Firefox */
{
0%  {background:blue; left:500px; top:200px; -moz-transform:scale(1.7)}
50%  {background:green; -moz-transform:rotateY(120deg)}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes moveback /*Safari and Chrome */
{
0%  {background:blue; left:500px; top:200px; -webkit-transform:scale(1.7)}
50%  {background:green; -webkit-transform:rotateY(120deg)}
100% {background:red; left:0px; top:0px;}
}


/*move*/
@keyframes move
{
0%  {background:red; left:0px; top:0px;}
50%  {background:green; transform:rotateY(120deg)}
100% {background:blue; left:500px; top:200px; transform:scale(1.7)}
}

@-moz-keyframes move /* Firefox */
{
0%  {background:red; left:0px; top:0px;}
50%  {background:green; -moz-transform:rotateY(120deg)}
100% {background:blue; left:500px; top:200px; -moz-transform:scale(1.7)}
}

@-webkit-keyframes move /*Safari and Chrome */
{
0%  {background:red; left:0px; top:0px;}
50%  {background:green; -webkit-transform:rotateY(120deg)}
100% {background:blue; left:500px; top:200px; -webkit-transform:scale(1.7)}
}
</style>
</head>
<body>

<div class=move id=move onclick='changeClass(this,"move","moveback");'></div>


</body>
LGforum
LGforum
Moderator
Forum Posts : 77
Member Since : 2011-11-12

PostLGforum 15/5/2012, 12:49 pm

You've put the Javascript in style tags.
grimofdoom
grimofdoom
Member
Member
Forum Posts : 106
Member Since : 2012-03-06

Postgrimofdoom 15/5/2012, 1:24 pm

Oh woww. I feel so stupid(but i did just start using javascript for the first time)it works now,thanks.
Sponsored content

PostSponsored content

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum