margin-left +1

markus_lanz · 23.06.2011

Hallo zusammen, ich hab ein Problem.
Ich habe einen button und ein div. Bei Klick auf den Button soll sich das div immer um einen Pixel nach rechts bewegen. Wie kann ich das mit JavaScript realisieren? Ich habe schon was probiert, aber es funktioniert nicht...

PHP:

function DivRight(){
    document.getElementById("divball").style.marginLeft="+1px";
}

Sorry, ich fange grad erst mit javascript an

MyBad · 23.06.2011

AW: margin-left +1

Du musst zunächst einmal schauen, welchen Marginwert das DIV-Element hat und diesen dann +1 hochzählen.

JavaScript ist auch nicht so ganz mein Hauptgebiet, aber ich meine es sollte so ungefähr aussehen:

PHP:

function DivRight(){
  // Aktuellen Marginwert in einer Variable speichern
  var aktMargin = document.getElementById("divball").style.marginLeft;

  // Neuen Marginwert zuweisen
  document.getElementById("divball").style.marginLeft = aktMargin +1;
}

So ähnlich müsste das eigentlich aussehen. Ich nutze eigentlich nur noch JS-Frameworks wie jQuery. Damit ist das leichter und vor allem weniger Schreibarbeit

Edit:
Bei deinem Vorhaben, würde ich an deiner Stelle, mit "Position" arbeiten. Glaube das ist Sinnvoller als "Margin".

markus_lanz · 23.06.2011

AW: margin-left +1

Danke dir schonmal. Aber das setzt jetzt den marginwert nur plus 1 hoch. Wenn ich aber mehrmals auf den button drücke dann tut sich nichts, also das soll bei jedem klick um einen pixel verschoben werden.
So passiert nur beim 1. Klick was

MyBad · 23.06.2011

AW: margin-left +1

Eigentlich sollte bei jedem Klick der Marginwert einen hoch gesetzt werden.
Die Variable "aktMargin" holt sich bei jedem Klick den neuen Wert des DIV-Elements. So zumindest die Theorie.

Ich werde es mal testen und mein Ergebnis editieren.

Edit:
Ich hatte nicht berücksichtigt, dass "aktMargin" 1px zurückliefert. Dann kann das Teil natürlich nicht weiter hochzählen. Man müsste also erst noch die "px" bereinigen. Muss mal schauen wie das geht.

Edit 2:
Hab ein kleines Workaround geschrieben:

PHP:

<script type="text/javascript">
  var aktMargin = 0; //Anfangsmargin
  function DivRight(){
    var newMargin = aktMargin++;
    document.getElementById('divball').style.marginLeft = newMargin+'px';
}
</script>

So klappt es. Ist aber nicht wirklich optimal und relativ statisch...

markus_lanz · 23.06.2011

AW: margin-left +1

Danke dir schonmal

Funzt bestens. Und wenn ich das div jetzt mit nem anderen Button um nen Pixel nach links verschieben will? d.h. quasi von der variablen wieder eins abziehen? Ich habs schon probiert aber es will nicht wirklich.
Ich schildere am besten mal die situation: Ich möchte ein div haben, welches ich mit 4 buttons je in eine richtung bewegen kann. (Ich lads gleich mal hoch, damit mans besser verstehn kann)
Ich habe es mir so überlegt, dass ich die x und die y achse nehme, den margin links und oben als variable setze und dann je nach klick 1 abziehe oder draufsetze, damit sich das div immer 1 pixel nach link/rechts oder oben/unten verschiebt.
Daran scheitere ich. In eine richtung funktioniert es ja, dank MyBad, aber der Rest will nicht.

Danke schonmal für eure Hilfe!

So habs mal hochgeladen:

Hoffe ihr könnt mir helfen

Orlandoo · 24.06.2011

AW: margin-left +1

Die Funktionen DivLeft, DivUp und DivDown sind ja auch nirgends in Deinem Javascript-Code definiert. Soll der Rechner die Funktionnen vielleicht selber dazuerfinden? Andererseits kannst Du das auch mit einer einzigen Funktion erledigen, die Du mit den passenden Parametern aufrufst. Vorteil: Du kannst später z.B. die Schrittweite recht leicht ändern.

HTML:

<body>
    <input name="ButtonLeft" value="⇐" onclick="moveDiv(horz,-1)" type="button">    
    <input name="ButtonRight" value="⇒" onclick="moveDiv(horz,1)" type="button">    
    <input name="ButtonUp" value="⇑" onclick="moveDiv(vert,-1)" type="button">
    <input name="ButtonDown" value="⇓" onclick="moveDiv(vert,1)" type="button">        
    <div id="divball"></div>
</body>

Code:

var horz = 'marginLeft';
var vert = 'marginTop';

function moveDiv(direction, step) {
    var newMargin = parseInt((document.getElementById("divball").style[direction]) || 0) + step;
    document.getElementById("divball").style[direction] = newMargin + "px";
}

Immer noch quick and dirty, aber funktioniert.

markus_lanz · 24.06.2011

AW: margin-left +1

Ohoh

Ich glaube das ist mir noch ne Nummer zu hoch... (Wie gesagt: javascript newbie) Ich glaube es wäre einfacher, wenn ich für jeden button ne eigene funktion hätte... Letztendlich soll das div dan so in 5pixel schritten hüpfen. Danke aber schonmal für d hilfe. Klappt zumindest

Orlandoo · 24.06.2011

AW: margin-left +1

Ach wo, das ist nicht zu hoch, Du schaffst das! Dem Aufruf der Javascript-Funktion werden bei den Buttons einfach zwei Parameter mit übergeben: Die Buttons Links und Rechts sollen das Kästchen in horizontaler Richtung bewegen, deswegen "horz" (für horizontal) und bei den Buttons Oben und Unten entsprechend "vert" (für vertikal).
Mit dem zweiten Wert bestimmst Du die Schrittweite und die Richtung: für "nach links" oder "nach oben" muss Du einen negativen Wert eingeben, für "nach rechts" oder "nach unten" einen positiven Wert.
Der Wert selbst bestimmt die Schrittweite, Du musst also bei jedem Button die 1 gegen eine 5 tauschen, schon flutsch die Geschichte ...