✔ jQuery Volume Slider

[Jeremy1]

Hallo,

ich bin gerade dabei einen Webplayer zu erstellen und komme jetzt nicht mehr weiter. Denn der Slider lässt sich zwar hin und her bewegen, aber wenn ich dann die Maustaste auslasse bleibt er nicht stehen! Ich hoffe irgendwer kann mir helfen und im Vorhinein schon mal Danke!

Hier der Code den ich bis jetzt habe:

<script type="text/javascript">
	//<![CDATA[
			var offsetX = 0;
			var curX = 0;
			
			$(document).ready(function() {
				$('#player_volume_bar').mousedown(function(event){
					offsetX = event.offsetX;
					$(this).bind('mousedown', startSlide());
				});
				
				$('html').mouseup(function(){
					$('html').bind('mouseup', stopSlide());
				});
				
				function startSlide() {
					console.log('startSlide');
					$('body').bind('mousemove', function(){
						curX = event.pageX - offsetX
						if(curX < 175 && curX > 0) {
							$('#player_volume_bar').css('margin-left', event.pageX - offsetX);
						}
						else {
							if (curX > 175) {
							$('#player_volume_bar').css('margin-left', 175);
							}
							if (curX < 0) {
							$('#player_volume_bar').css('margin-left', 0);
							}
						}
						var volume = curX / 100;
						volume = volume / 4;
						console.log(volume);
					});
					
				}
 				function stopSlide() {
 					console.log('stopSlide');
      				$('body').unbind('mouseup', function(){
      					console.log('stop');
						$('#player_volume_bar').bind('mouseup');
					});				
				}
			});
			//]]>
	</script>

Lg Jeremy1

 

[CPoly]

Ich habe es nicht getestet, aber die Symptomatik lässt darauf schließen, dass dein Code irgendwo beim "stop" Event einen Fehler enthält. Und wenn ich in den Code gucke, stimmt da auch etwas mit unbind und bind nicht (vertauscht)?

 

[Jeremy1]

indem ich noch Anfänger in diesem Bereich bin weiß ich nicht genau was du damit mein, das der stop Event einen Fehler enthält!

Bezüglich dem unbind und bind habe ich schon alles mögliche ausprobiert aber leider funktioniert irgendwie nicht´s! Denn entweder geht in die function innerhalb der stop function nicht rein, oder er verdoppelt dann bei jeden weiteren klick die Ausgabe in der Console mittels "stop".

Vielleicht könntest du mir hier einen konkreteren Tip geben******

 

[CPoly]

Hab deinen Code eben nicht richtig angeguckt. Also nochmal:

Ich habe es nicht getestet, aber habe den Code mal etwas umgebaut. Der war an manchen stellen doch etwas komisch und fehlerhaft. Wenn du auch das HTML und CSS bereitstellst, kann ich es auch testen.

var offsetX = 0;
var curX = 0;

$(document).ready(function() {
	var player_volume_bar = $('#player_volume_bar');
	
    player_volume_bar.mousedown(function(event){
        offsetX = event.offsetX;
        startSlide();
    });
    
    function startSlide() {
        console.log('startSlide');
        
        $(document)
        	.one('mouseup', stopSlide)
		    .bind('mousemove', function(){
		        curX = event.pageX - offsetX
		        if(curX < 175 && curX > 0) {
		            player_volume_bar.css('margin-left', event.pageX - offsetX);
		        }
		        else {
		            if (curX > 175) {
		            	player_volume_bar.css('margin-left', 175);
		            }
		            
		            if (curX < 0) {
		            	player_volume_bar.css('margin-left', 0);
		            }
		        }
		        
		        var volume = curX / 100;
		        volume = volume / 4;
		        console.log(volume);
		    });
    }
    
    function stopSlide() {
    	console.log('stopSlide');
    	
        $(document).unbind('mousemove');
    }
});

 

[Jeremy1]

Vielen Dank, jetzt funktioniert es!