Probleme mit Slider

Gustl_regex

Grünschnabel
Hallo Community,

ich habe ein Problem mit meinen Slider.
Folgender Link: http://www.j-haefner.de/skripte/slider/test.html
Dort ist im kleinen Fenster ein Schieberegler zu sehen. Beim ersten anklicken und verschieben funktioniert alles prima. Aber wenn der Schalter verstellt ist, und ich ihn wieder umstellen möchte, bringt er den gewünschten Schiebeffekt nicht mehr.

Problem beim 2. Benutzen des Schiebers:
Wenn ich nach rechts schiebe, egal wo er steht, sprint er wieder zum Ausgangspunkt 0 zurück. Nach Links passiert dann nichts.
Ich starre schon seit einer Stunde auf den Code und finde den Fehler einfach nicht.
Irgendwo meint er wohl der steht wieder ganz links, was er aber nicht tut...
Sollte aber nur eine Kleinigkeit sein, wie meistens eben.

Vielleicht könnt mir mir helfen. Auch für Tipps, wie ich das gnaze vielleicht verbessern könnte, wäre ich dankbar.

Zur Veranschaulichung hier die wichtigen Code-Ausschnitte:
HTML:
<div id="slider">    
          <div id="fill">
          </div>    
          <div class="grenze" id="a">
          </div>    
          <div class="grenze" id="b">
          </div>    
          ...  
          <div id="handle">
          </div>  
</div>
Code:
//Slider
  var min = 8;
  var max = 292;
  var new_plus = 23;
  var new_minus = 8;
	var
		elem = $('#handle'),
		doc = $(document),
		fill = $('#fill'),
		xOff = 0,
		yOff = 0;
		
		var xcoor = 0;
	  
	//Wird aufgerufen, wenn die Maus gedrückt wird
	function onDragStart(e) {
		//Die drei Zeilen sind nur für schön. Damit bleibt der Mauszeiger relativ zum Objekt und das Objekt springt zu Beginn nicht.
		var off = elem.offset();
		xOff = e.pageX - off.left;
		yOff = e.pageY - off.top;
		
		xcoor = e.pageX;
		
    $(".ausgabe").html('xcoor'+xcoor +' ');
		
		//Hier setzen wir erst den Listener für das mousemove-Event. Damit er nicht unnötig Events produziert, obwohl wir gar nicht draggen.
		doc.mousemove(onDrag);
	}
	
	//Wird bei jeder Mausbewegung während des drags aufgerufen
	function onDrag(e) {
	  xOff = e.pageX-xcoor;
	  //var wert = elem.position();
	  var newleft = 8 + xOff;
	  if(newleft < max && newleft > min){
	    fill.css({ width: xOff });
      elem.css({ left: newleft });
    }		
	}
	
	//Browser standard verhindern
	elem
		.bind('dragstart', function() {return false;})
		.mousedown(onDragStart);
	
	//Wenn wir irgendwo die Maus wieder loslassen, entfernen wir den Listener, da er nicht gebraucht wird.
	doc.mouseup(function() {
		doc.unbind('mousemove', onDrag);
	});

Freue mich auf Antworten!

LG Gustl
 

Neue Beiträge

Zurück