Ergebnis 1 bis 11 von 11
  1. #1
    JULm3 ist offline Foren As
    registriert
    08-03-2010
    Beiträge
    96

    right & bottom in javascript?

    Hallo.
    Ich habe eine Frage zu meinem Code:
    Code:
    document.onkeydown = function(event) {
      if (event.keyCode == 68) { /*****D*******/
        head_move_right();
      }
      
        if (event.keyCode == 65) { /*****A*******/
        head_move_left();
      }
      
        if (event.keyCode == 87) { /*****W*******/
        head_move_up();
      }
      
        if (event.keyCode == 	83) { /*****S*******/
        head_move_down();
      }
    };
    
    function head_move_right() { /*****D*******/
    		var snake_head= document.getElementById("snake_head");
    		var left = snake_head.offsetLeft;
    		
    		if (left <= 5000) snake_head.style.left = left + 1 + 'px' ; 
    		window.setTimeout("head_move_right()", 50);
    		
    	}
    Das bedeutet, dass, wenn ich die Taste "D" drücke, die Div-Box mit der ID "snake-head" "geschmeidig" nach rechts fährt. Es funktioniert auch. Ebenso mit "top" also, dass es nach unten fährt.

    Das selbe möchte ich jedoch auch nach links und nach oben.
    Wie geht das?

  2. #2
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: right & bottom in javascript?

    In deiner Funktion head_move_right() bewegst du dich nach rechts indem du der Position von links aus gesehen Pixel hinzuaddierst. Für die Gegenrichtung bewegst du dich nach links indem du der Position von links aus gesehen Pixel subtrahierst.
    Hoffe ich konnte helfen

  3. #3
    JULm3 ist offline Foren As
    registriert
    08-03-2010
    Beiträge
    96

    AW: right & bottom in javascript?

    Ja, so habe ich mir das eben auch forgestellt.
    Nur, wenn ich dann

    if (left <= 5000) snake_head.style.left = left - 1 + 'px' ;
    window.setTimeout("head_move_right()", 50);

    mache, bewegt es sich trotzdem nach rechts...

  4. #4
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: right & bottom in javascript?

    1 - Du rufst ja auch dauernd die "bewege nach rechts"-Funktin auf: window.setTimeout("head_move_right()", 50);
    2 - Du produzierst eine Endlosfunktion, da left immer kleiner als 5000 sein wird: left = left -1
    Hoffe ich konnte helfen

  5. #5
    JULm3 ist offline Foren As
    registriert
    08-03-2010
    Beiträge
    96

    AW: right & bottom in javascript?

    1. Es ist ja egal ob die Funktion "head_move_right()", "head_move_left()", oder "head_move_baum()" heißt. Wenn ich -1 eingebe müsste es nach links gehen.

    2. Dann geht es eben unendlich lang nach links, auch egal. UND, wenn ich größer alls 0 eingebe, gehts auch nach rechts.

    EDIT: Jetzt hab ichs mit ner neuen funktion die "head_move_left()" heißt probiert, und es geht, wie erwartet, immer noch nach rechts.
    Geändert von JULm3 (22-03-2011 um 15:39 Uhr)

  6. #6
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: right & bottom in javascript?

    und wo stopst du das nach rechts wandern?

  7. #7
    JULm3 ist offline Foren As
    registriert
    08-03-2010
    Beiträge
    96

    AW: right & bottom in javascript?

    Wie man oben sehen kann, bei left=5000, aber was hat das mit meiner Frage zu tun?

  8. #8
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: right & bottom in javascript?

    Bei mir macht die Funktion das was sie soll!
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>DIV verschieben</title>
    <script type="text/javascript" language="javascript">
    window.onload = head_move_left;
    
    function head_move_left() { /*****D*******/
    		var snake_head= document.getElementById("snake_head");
    		var left = snake_head.offsetLeft;
    		
    		if (left > 10) {
    			snake_head.style.left = left - 1 + 'px';
    			window.setTimeout("head_move_left()", 50);
    			document.getElementById("zeit").innerHTML = "left: " + snake_head.style.left;
    		}
    	}
    </script>
    </head>
    <body>
    <table><tr><td id="zeit"></td></tr></table>
    <div id="snake_head" style="position:absolute; left:100px; border:2px solid red;">Hier mein Inhalt</div></body>
    </html>
    Hoffe ich konnte helfen

  9. #9
    JULm3 ist offline Foren As
    registriert
    08-03-2010
    Beiträge
    96

    AW: right & bottom in javascript?

    Wenn ich jetzt nur deinen Javascript Code, one HTML kopiere, und meinen restlichen JS-Code lösche, schießt mein Quadrat wieder nach rechts
    Wie verrückt ist das?!

    EDIT: Mir ist gerade aufgefallen, dass es daran liegt, dass ich position:relative eingestellt habe. Mit absolut gehts nämlich. Wieso gehts mit relativ nicht?
    Und danke für die Antworten. Ohne sie wäre ich nicht darauf gekommen.
    Geändert von JULm3 (22-03-2011 um 15:59 Uhr)

  10. #10
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: right & bottom in javascript?

    1 - Hättest du ja eben mal schnell selber testen können und
    2 - JA, liegt an deiner Positionierung

    Für position:relative; müsste das hier funktionieren
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>DIV verschieben</title>
    <script type="text/javascript" language="javascript">
    window.onload = head_move_left;
    
    function head_move_left() { /*****D*******/
    		var snake_head= document.getElementById("snake_head");
    		var left = parseInt(snake_head.style.left.slice(0, snake_head.style.left.length - 2));
    		
    		if (left > 10) {
    			snake_head.style.left = left - 1 + 'px';
    			window.setTimeout("head_move_left()", 50);
    			document.getElementById("zeit").innerHTML = "left: " + snake_head.style.left;
    		}
    	}
    </script>
    </head>
    <body>
    <table><tr><td id="zeit"></td></tr></table>
    <div id="snake_head" style="position:relative; left:100px; border:2px solid red;">Hier mein Inhalt</div></body>
    </html>
    Hoffe ich konnte helfen

  11. #11
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: right & bottom in javascript?

    Zitat Zitat von JULm3 Beitrag anzeigen
    aber was hat das mit meiner Frage zu tun?
    der einzige grund, warum er nach rechts laufen könnte, ist der, dass du mehrfach nach rechts und einmal nach links läufst.
    EDIT: ok, sehe es hat sich erledigt

Ähnliche Themen

  1. div scrollbar mit bottom-start
    Von Heini_net im Forum CSS und (X)HTML
    Antworten: 1
    Letzter Beitrag: 18-07-2009, 18:36
  2. [CSS] bottom:0px hat keinen Effekt
    Von jeko im Forum CSS und (X)HTML
    Antworten: 6
    Letzter Beitrag: 07-02-2009, 23:27
  3. border-bottom für td-tag
    Von KIUNES im Forum CSS und (X)HTML
    Antworten: 11
    Letzter Beitrag: 31-10-2008, 21:11
  4. Probleme mit top, bottom, left, right
    Von akswiff im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 03-04-2008, 19:33
  5. Table am Bottom festnageln
    Von macadamia im Forum Allgemeines
    Antworten: 16
    Letzter Beitrag: 25-04-2004, 21:28

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •