SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member Python's Avatar
    Join Date
    May 2004
    Location
    UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Move div with keyboard

    Ok,

    I am trying to code a piece of JS so that I can move a div around on the page using the keyboards arrow keys.

    So far I have the following...


    Code:
    <HTML>
    <HEAD>
    <TITLE>Cursor Mover</TITLE>
    <SCRIPT>
    function move(e)
    {
    	if(window.event) // IE
    	{
    		ek = window.event.keyCode;
    
    		if (ek==37)
    			document.getElementById('DIV1').style.left = (document.getElementById('DIV1').style.left - 5);
    		if (ek==39)
    			document.getElementById('DIV1').style.left = (document.getElementById('DIV1').style.left + 5);
    		if (ek==38)
    			document.getElementById('DIV1').style.top = (document.getElementById('DIV1').style.left - 5);
    		if (ek==40)
    			document.getElementById('DIV1').style.top = (document.getElementById('DIV1').style.top + 5);
    	}
    	else // Other browsers
    	{
    		ek = e.which
    
    		if (ek==37)
    			document.getElementById('DIV1').style.left = (document.getElementById('DIV1').style.left - 5);
    		if (ek==39)
    			document.getElementById('DIV1').style.left = (document.getElementById('DIV1').style.left + 5);
    		if (ek==38)
    			document.getElementById('DIV1').style.top = (document.getElementById('DIV1').style.left - 5);
    		if (ek==40)
    			document.getElementById('DIV1').style.top = (document.getElementById('DIV1').style.top + 5);
    		
    	}
    }
    </SCRIPT>
    <STYLE TYPE="TEXT/css">
    #DIV1
    {
    	position: absolute;
    	background-color:#000000;
    	height:20;
    	width:20;
    	top:100px;
    	left:100px;
    }
    </style>
    </HEAD>
    <BODY onkeydown="move(event);">
    <div id="DIV1" style=""></DIV>
    </BODY>
    </HTML>

    Now the problems...

    In both IE and Firefox when you press an arrow key the div suddenly jumps to the left top corner of the screen.

    In IE if you try to press an arrow key again it shows an error.

    In firefox if you try to press an arrow key again it does nothing.


    Im obviously doing something wrong.

    Any ideas?

    Thanks
    UK Web Site Design
    - Affordable web site design solutions

  2. #2
    SitePoint Member Python's Avatar
    Join Date
    May 2004
    Location
    UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok what Im trying to recreate is... http://cross-browser.com/x/examples/arrowkeys.html
    UK Web Site Design
    - Affordable web site design solutions

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Rancho Cordova
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your question is answered here:

    http://www.codingforums.com/showthread.php?t=99641

    Basscyst

  4. #4
    SitePoint Member Python's Avatar
    Join Date
    May 2004
    Location
    UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks
    UK Web Site Design
    - Affordable web site design solutions

  5. #5
    SitePoint Member Python's Avatar
    Join Date
    May 2004
    Location
    UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One more question...

    Im thinking about making a type of browser based game where you must control a character (the DIV) around a basic map. Then when the character is on top of certain areas when the user presses enter various messages show up. Is Javascript capable of doing this and capable of doing it well?
    UK Web Site Design
    - Affordable web site design solutions


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •