# HG changeset patch # User hamidouk # Date 1322148041 -3600 # Node ID abe961b7f295d11d3fca1e929b7f2ec7ba2175b1 # Parent 3cb8b501708016b63c14c6bac0378bc12819f344 a slider that more or less works. diff -r 3cb8b5017080 -r abe961b7f295 src/css/LdtPlayer.css --- a/src/css/LdtPlayer.css Thu Nov 24 16:20:27 2011 +0100 +++ b/src/css/LdtPlayer.css Thu Nov 24 16:20:41 2011 +0100 @@ -259,26 +259,42 @@ overflow:hidden; } - .SliderWidget { + /* slider */ + .Ldt-SliderMinimized { + height: 6px; + } + + .Ldt-SliderMaximized { + height: 11px; + } + .Ldt-sliderElementMinimized { + width: 100%; + height: 5px; } - /* slider */ + + .Ldt-sliderElementMaximized { + width: 100%; + height: 10px; + } + .Ldt-sliderBackground { background-color: #B6B8B8; + position: absolute; + z-index: 2; + bottom: 1px; width: 100%; height: 5px; - position: absolute; - z-index: 2; + } .Ldt-sliderForeground { background-color: #747474; - padding-top: 5px; z-index: 2; width: 0px; position: absolute; - top: 0%; - width: 0%; + bottom: 1px; + height: 5px; } .Ldt-sliderPositionMarker { @@ -288,6 +304,7 @@ height: 5px; width: 5px; top: 0%; + bottom: 1px; } .positionMarker { diff -r 3cb8b5017080 -r abe961b7f295 src/js/widgets/sliderWidget.js --- a/src/js/widgets/sliderWidget.js Thu Nov 24 16:20:27 2011 +0100 +++ b/src/js/widgets/sliderWidget.js Thu Nov 24 16:20:41 2011 +0100 @@ -8,11 +8,13 @@ var self = this; this.selector.append(Mustache.to_html(IriSP.sliderWidget_template, {})); + this.selector.addClass("Ldt-SliderMinimized"); this.sliderBackground = this.selector.find(".Ldt-sliderBackground"); this.sliderForeground = this.selector.find(".Ldt-sliderForeground"); this.positionMarker = this.selector.find(".Ldt-sliderPositionMarker"); + // a special variable to stop methods from tinkering // with the positionMarker when the user is dragging it this.draggingOngoing = false; @@ -64,14 +66,21 @@ /* handles mouse over the slider */ IriSP.SliderWidget.prototype.mouseOverHandler = function(event) { -/* this.sliderBackground.animate({"padding-top": "10px", "margin-top": "-10px"}, 100); - this.sliderForeground.animate({"margin-top": "-10px"}, 100); */ + this.sliderBackground.animate({"height": "10px"}, 100); + this.sliderForeground.animate({"height": "10px"}, 100); + +// this.selector.removeClass("Ldt-SliderMinimized"); +// this.selector.addClass("Ldt-SliderMaximized"); }; /* handles when the mouse leaves the slider */ IriSP.SliderWidget.prototype.mouseOutHandler = function(event) { -/* this.sliderBackground.animate({"padding-top": "5", "margin-top": "0px"}, 100); - this.sliderForeground.animate({"padding-top": "5px"}, 50); */ + this.sliderBackground.animate({"height": "5px"}, 100); + this.sliderForeground.animate({"height": "5px"}, 100); + +// this.selector.removeClass("Ldt-SliderMaximized"); +// this.selector.addClass("Ldt-SliderMinimized"); + }; // called when the user starts dragging the position indicator