Chatbox

You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 onclick change class on 14/5/2012, 8:39 pm

grimofdoom

avatar

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

View user profile

2 Re: onclick change class on 15/5/2012, 2:49 pm

LGforum

avatar

Moderator
You've put the Javascript in style tags.

View user profile

3 Re: onclick change class on 15/5/2012, 3:24 pm

grimofdoom

avatar

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

View user profile

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

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