Only 1 of 2 moves

View previous topic View next topic Go down

avatar
grimofdoom
Member
Member
Forum Posts : 106
Member Since : 2012-03-06
View user profile

Postgrimofdoom on 13/6/2012, 7:50 pm

I got a javascript code to make a div move, i made one move, but i need the second one moving,can someone help me?

Code:

<HTML>
<HEAD>
<TITLE>Cursor Mover</TITLE>
<SCRIPT>
var ie = (document.all && !window.opera)?1:0;
if(!ie)
{
   var e=document.captureEvents(Event.KEYDOWN)
}
window.onload=function()
{
   if(!ie)
   {
      document.onkeydown=function(e)
      {
         move(e);
      }
   }
   else
   {
      document.onkeydown=function()
      {
         move();
      }
   }   
}
function move(e)
{
      if(ie)
      {
         ek = window.event.keyCode;
      }
      else
      {
         var event=e;
         var ek = event.keyCode ? event.keyCode : event.which ?

event.which : event.charCode;   
      }
      if (ek==37) document.getElementById('DIV1','DIV2').style.left=

(document.getElementById('DIV1','DIV2').style.left.replace('px','')*1)-7;
      if (ek==39) document.getElementById('DIV1','DIV2').style.left=

(document.getElementById('DIV1','DIV2').style.left.replace('px','')*1)+7;
      if (ek==38) document.getElementById('DIV1','DIV2').style.top=

(document.getElementById('DIV1','DIV2').style.top.replace('px','')*1)-7;
      if (ek==40) document.getElementById('DIV1','DIV2').style.top=

(document.getElementById('DIV1','DIV2').style.top.replace('px','')*1)+7;
}

</SCRIPT>
<style type=text/css>
.char{background-color:white;border:1px solid

black;height:50px;width:50px;position:absolute;-webkit-animation:char 1s infinite;}

@-webkit-keyframes char{

0%{background-color:white;}
25%{background-color:lightgrey;box-shadow:0px 0px 8px 2px lightgrey;}
50%{background-color:grey;box-shadow:0px 0px 8px 2px grey}
75%{background-color:lightgrey;box-shadow:0px 0px 8px 2px lightgrey;}
100%{background-color:white;}

}
</style>
</HEAD>
<BODY>
<DIV ID="DIV1" class=char style="left:200px;top:100px;border-radius:45%;";></DIV>
<DIV ID="DIV2" class=char style="left:100px;top:100px;border-radius:45%;";></DIV>
</BODY>
</HTML>
avatar
Mike
Administrator
Forum Posts : 446
Member Since : 2011-10-28
View user profile http://www.codinghelp.org

PostMike on 13/6/2012, 7:56 pm

use classes, it might help. Dunno what you're really trying to do
avatar
Vanilla990
Administrator
Forum Posts : 114
Member Since : 2011-10-30
View user profile

PostVanilla990 on 14/6/2012, 3:30 am

From looking at the code, it seems you want to move the div around the screen based on which arrow key is being pushed down but can only get 1 div to move?

What you could do would be to effectively copy and paste the javascript and have 1 of the circles controlled by the normal up,down keys and have the other one controlled by the W,A,S,D keys.
avatar
LGforum
Moderator
Forum Posts : 77
Member Since : 2011-11-12
View user profile

PostLGforum on 14/6/2012, 12:16 pm

Your Javascript isn't working because of these lines:
Code:
document.getElementById('DIV1','DIV2')
You can only specify one ID string in the getElementById method.
avatar
grimofdoom
Member
Member
Forum Posts : 106
Member Since : 2012-03-06
View user profile

Postgrimofdoom on 15/6/2012, 2:05 pm

oh,well,i dont need this anymore, i figured out a much easyer way to do it, i just put them in a div and moved the div that held the other 2 and they stay in place on movement.
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