fixed scrollbar issues

diff --git a/apps/media/css/music.css b/apps/media/css/music.css
index c4db4e05855c6c9e6687222308f6d8ad79f58ee8..8575e6334a5d0fcfbc910ec07966e08987597c96 100644 (file)
--- a/apps/media/css/music.css
+++ b/apps/media/css/music.css
@@ -18,7 +18,7 @@ a.jp-mute,a.jp-unmute { left:24em; }
 div.jp-volume-bar { position:absolute; overflow:hidden; background:#eee; width:4em; height:0.4em; cursor:pointer; top:1.3em; left:27em; }
 div.jp-volume-bar-value { background:#ccc; width:0; height:0.4em; }
 
-#collection { padding-top:1em; position:relative; width:70em; float:left; }
+#collection { padding-top:1em; position:relative; width:100%; float:left; }
 #collection li.album,#collection li.song { margin-left:3em; }
 #leftcontent img.remove { display:none; float:right; cursor:pointer; }
 #leftcontent li:hover img.remove { display:inline; }

diff --git a/core/css/styles.css b/core/css/styles.css
index d51bd0896ea1805a2a7f0b441f5d843315a67831..2d78c174978bafa327e0507dea1e8cf235450100 100644 (file)
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -53,7 +53,7 @@ input[type="submit"].highlight{ background:#ffc100; border:1px solid #db0; text-
 #controls { width:100%; top:3.5em; height:2.8em; margin:0; background:#f7f7f7; border-bottom:1px solid #eee; position:fixed; z-index:50; -moz-box-shadow:0 -3px 7px #000; -webkit-box-shadow:0 -3px 7px #000; box-shadow:0 -3px 7px #000; }
 #controls .button { display:inline-block; }
 #content { margin:3.5em 0 0 12.5em; }
-#leftcontent, .leftcontent { position:absolute; top:6.4em; width:20em; background:#f8f8f8; height:100%; border-right:1px solid #ddd; }
+#leftcontent, .leftcontent { position:fixed; overflow: auto; top:6.4em; width:20em; background:#f8f8f8; border-right:1px solid #ddd; }
 #leftcontent li, .leftcontent li { padding:.3em .8em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-transition:background-color 500ms; -moz-transition:background-color 500ms; -o-transition:background-color 500ms; transition:background-color 500ms; }
 #leftcontent li:hover, #leftcontent li:active, #leftcontent li.active, .leftcontent li:hover, .leftcontent li:active, .leftcontent li.active { background:#eee; }
 #rightcontent, .rightcontent { position:absolute; top:6.4em; left:33em; }

diff --git a/core/js/js.js b/core/js/js.js
index 61a60c52485058dcd2ff8a31f3872b103de5a71d..9e814ca07298d23fae5a176997c84ab065d67d80 100644 (file)
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -244,7 +244,36 @@ function object(o) {
        return new F();
 }
 
+
+/**
+ * Fills height of window. (more precise than height: 100%;)
+ */
+function fillHeight(selector) {
+       var height = parseFloat($(window).height())-parseFloat(selector.css('top'));
+       selector.css('height', height + 'px');
+       if(selector.outerHeight() > selector.height())
+               selector.css('height', height-(selector.outerHeight()-selector.height()) + 'px');
+}
+
+/**
+ * Fills height and width of window. (more precise than height: 100%; or width: 100%;)
+ */
+function fillWindow(selector) {
+       fillHeight(selector);
+       var width = parseFloat($(window).width())-parseFloat(selector.css('left'));
+       selector.css('width', width + 'px');
+       if(selector.outerWidth() > selector.width())
+               selector.css('width', width-(selector.outerWidth()-selector.width()) + 'px');
+}
+
 $(document).ready(function(){
+
+       $(window).resize(function () {
+               fillHeight($('#leftcontent'));
+               fillWindow($('#rightcontent'));
+       });
+       $(window).trigger('resize');
+       
        if(!SVGSupport()){//replace all svg images with png images for browser that dont support svg
                replaceSVG();
        }else{