[Hilfe] Div per Button verschieben

muhmuhmilk · Beitrag von **muhmuhmilk** » 25.06.2013, 20:04

Hallo Leute,

ich verzweifel irgendwie gerade an einer eigentlich sehr simplen Sache. Ich brauche ein DIV was sich per Klick auf einen Botton rechts verschiebt um einen Wert X. Wenn man noch einmal drauf klickt, verschiebt er sich noch einmal - bis er dann irgendwann an eine Grenze stößt und nicht mehr weiter kann. Die Animation soll sanft laufen (das ist da wo ich hänge). Bei allem was ich probiere, geht es entweder gar nicht oder das DIV geht unendlich lang nach rechts.

Den Code habe ich von einem Tutorial, was aber auf meine Thematik leider nicht eingeht.

HTML

Code: Alles auswählen

<html> 

<head> 

<link rel="stylesheet" type="text/css" href="style.css">

    
   <script type="text/javascript"> 
      var i = 10; 
       
      function wandern() 
      { 
         if ( document.getElementById ) // für moderne Browser 
         { 
            document.getElementById('myLayer').style.left = i + "px"; 
         } 
          
         i = i + 10; 
         window.setTimeout( 'wandern()', 100 ); 
          
        
      } 
   </script> 
</head> 



<body> 

   <div id="myLayer"></div>    
	<input type="button" name="move" value="move" onclick="wandern();" />
    
</body> 
</html>

CSS

Code: Alles auswählen

#myLayer   { 
         width: 200px; 
         height: 40px; 
         position: absolute; 
         top: 50px; 
         left: 10px; 
         z-index: 1; 
         background-color: red; 
         color: #000; 
         font-weight: bold; 
         cursor: pointer; 
      }

Wäre cool wenn mir jemand helfen könnte - kann doch nicht so schwer sein.

Thx,
Muhmuhmilk

spid · Beitrag von **spid** » 26.06.2013, 08:38

Wie wäre es mit einer Abbruchbedingung? Du rufst wandern ständig neu auf ohne zu definieren wann es aufhören soll. Die Breite von Elementen (oder auch dem sichtbaren Bereich) könnte dabei hilfreich sein.

Desweiteren:
- warum ist die x-Position (i) global? Du kannst das Element nach seiner derzeitigen Position fragen.
- absolute Positionierung ist in dem kleinen Szenario zwar "die Position im Browser-Fenster". Aber später wirst du sicherlich noch die anderen Arten (static, relative, fixed) kennenlernen und merken, daß absolute Positionierung sich nicht auf das Browser-Fenster bezieht.

muhmuhmilk · Beitrag von **muhmuhmilk** » 28.06.2013, 14:18

Danke

.

Ich habe es noch eine Weile mit Abbruchbedingung usw probiert - letztendlich habe ich das Problem aber ganz einfach mit jquery gelöst. Dies hat genau die Funktion die ich brauche.

Mehr als das ist es nicht:

Code: Alles auswählen

$("#right").click(function(){
  $("#block").animate({"left": "+=289px"}, "slow");
});
 
$("#left").click(function(){
  $("#block").animate({"left": "-=289px"}, "slow");
});

Mein Name sei Wapaz · Beitrag von **Mein Name sei Wapaz** » 29.06.2013, 21:37

Fragt sich nur, wie du darauf kamst, dass ein timeout das gleiche erreicht wie ein click-event.

spid · Beitrag von **spid** » 30.06.2013, 08:06

Im Endeffekt macht jquery das über setInterval, und nicht über setTimeout:
https://github.com/jquery/jquery/blob/m ... effects.js

ABER! Auch das kleine jQuery-Snippet hat keine spezielle Abbruchbedingung für deinen Fall, sondern jQuery.animate hat eine und zwar die Dauer. Die beträgt standardmäßig nämlich 400ms, also hast du vermutlich die Schrittweite so gewählt, daß sie zur Dauer der Animation passt, oder?
Das ist natürlich in sofern schlecht, als daß es nicht mit variablen Container-Größen funktioniert, ausser du berechnest die Schrittweite entsprechend zur Container-Breite.

muhmuhmilk · Beitrag von **muhmuhmilk** » 01.07.2013, 19:22

Mein Name sei Wapaz hat geschrieben:Fragt sich nur, wie du darauf kamst, dass ein timeout das gleiche erreicht wie ein click-event.

Das war nicht mein Script - das war von einem Tutorial

.

So schau der Spaß nun aus in der fertigen Version (mit Stop bei entsprechender Position)

Code: Alles auswählen

$("#right").click(function(){
    if(parseInt($("#block").css('left')) <= 262) return;
    $("#block").animate({"left": "-=289px"}, "slow");
});
 
$("#left").click(function(){

    if(parseInt($("#block").css('left')) >= 840) return;
    $("#block").animate({"left": "+=289px"}, "slow");
});