add tinyscrollbar

app/assets/javascripts/desktop.js

@@ -7,6 +7,7 @@
 //= require jquery
 //= require jquery_ujs
 //= require jquery-ui
+//= require jquery.tinyscrollbar.min
 //= require bootstrap
 //= require orbitdesktopAPI
 //= require orbitdesktop

app/assets/javascripts/orbitdesktop.js

@@ -33,7 +33,7 @@ var orbitDesktop = function(dom){
 		
 	};
 	this.bindDesktopEvents = function(){
-		$("a#app_manager").click(function(){
+		$("a#d_app_manager").click(function(){
 			var target = $(this).attr("href");
 			if(o.currenthtml!=target){
 				o.desktopData[o.currentface] = $(o.contentHolder).html();
@@ -42,7 +42,7 @@ var orbitDesktop = function(dom){
 				});
 			}
 		});
-		$("a#desktop").click(function(){
+		$("a#d_desktop").click(function(){
 			var target = $(this).attr("href");
 			if(o.currenthtml!=target){
 				o.desktopData[o.currentface] = $(o.contentHolder).html();
@@ -51,7 +51,7 @@ var orbitDesktop = function(dom){
 				});
 			}
 		});
-		$("a#sections").click(function(){
+		$("a#d_sections").click(function(){
 			var target = $(this).attr("href");
 			if(o.currenthtml!=target){
 				o.desktopData[o.currentface] = $(o.contentHolder).html();
@@ -122,6 +122,7 @@ var orbitDesktop = function(dom){
 				}
 			
 			});
+			$('#holder').tinyscrollbar({ axis: 'x'});
 		}
 		if(!o.desktopData[o.currentface]){
 			$(o.contentHolder).empty().load("/desktop/"+target,function(){
@@ -174,6 +175,7 @@ var orbitDesktop = function(dom){
 				$(".group_search").html(allApps);
 				return false;
 			})
+			$('#holder').tinyscrollbar({ axis: 'x'});
 		}
 		if(!o.desktopData[o.currentface]){
 			$(o.contentHolder).empty().load("desktop_pages/"+target,function(){
@@ -213,6 +215,7 @@ var orbitDesktop = function(dom){
 			$(".section_label ul li:not(:nth-child(1)) span.tile").hover(function(){
 				$(this).toggleClass("op06");
 			})//.mouseleave(function(){$(this).addClass("op06");});
+			$('#holder').tinyscrollbar({ axis: 'x'});
 		};
 		if(!o.desktopData[o.currentface]){
 			$(o.contentHolder).empty().load("desktop_pages/"+target,function(){
@@ -299,7 +302,8 @@ orbitDesktop.prototype.themefolder = "themes";
 			$(this).removeClass('thmc1');
 			$fn_des.stop(true, true).fadeOut();
 		});
-	
+		
+
 	});
 	
 

app/assets/stylesheets/desktopmain.css

@@ -24,6 +24,11 @@ time, mark, audio, video {
 	font: inherit;
 	vertical-align: baseline;
 }
+#container input, #container textarea, #container select, #container input:focus, #container textarea:focus {
+	border-radius: 0;
+	box-shadow: none;
+	font: inherit;
+}
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
@@ -54,7 +59,7 @@ body {
 	font-size: 12px;
 	background-color: #000;
 	}
-a { text-decoration: none; }
+a, a:hover { text-decoration: none; }
 /* desktop layout */
 #container {
 	margin: 72px 0 0 156px;
@@ -69,12 +74,14 @@ a { text-decoration: none; }
 	position: absolute;
 	top: 144px;
 	left: 0;
-	z-index: 999;
+	z-index: 9;
 	}
 #holder {
-	overflow: hidden;
-	overflow-x: auto;
+	/*overflow: hidden;
+	overflow-x: auto;*/
 	height: 540px;
+	width: auto;
+	position: relative;
 	}
 #rwidget {
 	height: 516px;
@@ -104,7 +111,7 @@ a { text-decoration: none; }
 	}
 .docklist > li:hover .dock_child { display: block; }
 .dock_item { float: left; }
-.fn_des.thmtxt {
+.fn_des.admtxt {
 	line-height: 60px;
 	padding: 0 6px;
 	font-size: 15px;
@@ -154,7 +161,7 @@ a { text-decoration: none; }
 	float: left;
 	margin: 0 12px 0 0;
 	position: relative;
-	z-index: 99;
+	z-index: 9;
 	}
 .dtitle:hover {
 	/* $(this).addClass( .thmc1 or .thmc2 ); */
@@ -247,6 +254,19 @@ a { text-decoration: none; }
 
 .clear { clear: both; }
 
+/* tiny scrollbar */
+#holder .viewport { width: auto; height: 516px; overflow: hidden; position: relative; }
+#holder .overview { position: absolute; left: 0; top: 0; }
+#holder .scrollbar { 
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	height: 12px;
+}
+#holder .track { height: 100%; width: 12px; position: relative; }
+#holder .thumb { height: 12px; width: 12px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
+#holder .thumb .end { overflow: hidden; height: 12px; width: 12px; }
+#holder .disable{ display: none; }
 
 /* Orbit Notification */
 #orbitnote {