Merge branch 'master' of https://github.com/flames/dynmap

web/css/dynmap_style.css

@@ -418,6 +418,11 @@
 	background: url(../images/scrollup.png) rgba(32,32,32,0.6);
 
 	margin-bottom: 4px;
+
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    -o-border-radius: 2px;
+	border-radius: 2px;
 }
 
 .panel .scrolldown {
@@ -425,6 +430,11 @@
 	background: url(../images/scrolldown.png) rgba(32,32,32,0.6);
 
 	margin-top: 4px;
+
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    -o-border-radius: 2px;
+	border-radius: 2px;
 }
 
 .panel .scrollup:hover, .panel .scrolldown:hover {
@@ -454,11 +464,6 @@
 
 	background-repeat: no-repeat;
 	background-position: center;
-
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    -o-border-radius: 2px;
-	border-radius: 2px;
 }
 
 .playerlist {

web/js/map.js

@@ -182,13 +182,46 @@ DynMap.prototype = {
 			.appendTo(largeclock)
 		);
 		
+		// The scrollbuttons
+		// we need to show/hide them depending: if (me.playerlist.scrollHeight() > me.playerlist.innerHeight()) or something.
+		var upbtn = $('<div/>')
+		.addClass('scrollup')
+		.bind('mousedown mouseup', function(event){ 
+		    if(event.type == 'mousedown'){
+				playerlist.animate({"scrollTop": "-=300px"}, 3000, 'linear');
+		    }else{
+		        playerlist.stop(); 
+		    }
+		});
+		var downbtn = $('<div/>')
+		.addClass('scrolldown')
+		.bind('mousedown mouseup', function(event){ 
+		    if(event.type == 'mousedown'){ 
+				playerlist.animate({"scrollTop": "+=300px"}, 3000, 'linear');
+		    }else{ 
+		        playerlist.stop(); 
+		    }
+		});
+		
 		// The Player List
 		var playerlist;
 		$('<fieldset/>')
 			.append($('<legend/>').text('Players'))
-			.append(me.playerlist = playerlist = $('<ul/>').addClass('playerlist'))
+			.append(upbtn)
+			.append(me.playerlist = playerlist = $('<ul/>').addClass('playerlist')
+				.bind('mousewheel', function(event, delta){ 
+					this.scrollTop -= (delta * 10);
+					event.preventDefault();
+				})
+			)
+			.append(downbtn)
 			.appendTo(panel);
 		
+		playerlist.height(sidebar.innerHeight() - (playerlist.offset().top - worldlist.offset().top) - 64); // here we need a fix to avoid the static value, but it works fine this way :P
+		$(window).resize(function() {
+			playerlist.height(sidebar.innerHeight() - (playerlist.offset().top - worldlist.offset().top) - 64); // here we need a fix to avoid the static value, but it works fine this way :P
+		});
+		
 		// The Compass
 		var compass = $('<div/>')
 			.addClass('compass')