]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 0708a84)
Added a static demo and CSS solution for the common problem that occurs when slider...
authorScott Jehl <scott@scottjehl.com>
Wed, 18 Feb 2009 15:09:31 +0000 (15:09 +0000)
committerScott Jehl <scott@scottjehl.com>
Wed, 18 Feb 2009 15:09:31 +0000 (15:09 +0000)
This will fix bug #3467

tests/static/slider/slider_horizontal_range_collision.html [new file with mode: 0644] patch | blob
tests/static/slider/slider_vertical_range_collision.html [new file with mode: 0644] patch | blob
themes/base/ui.slider.css patch | blob | history

diff --git a/tests/static/slider/slider_horizontal_range_collision.html b/tests/static/slider/slider_horizontal_range_collision.html
new file mode 100644 (file)
index 0000000..b10dd43
--- /dev/null
+++ b/tests/static/slider/slider_horizontal_range_collision.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+       <title>Slider Static Test : Slider horizontal range</title>
+       <link rel="stylesheet" href="../static.css" type="text/css" />
+       <link rel="stylesheet" href="../../../themes/base/ui.base.css" type="text/css" />
+       <link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" />
+       <script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
+       <script type="text/javascript" src="../static.js"></script>
+</head>
+<body>
+
+<div id="slider-horizontal-range" class="ui-slider ui-slider-horizontal ui-slider-horizontal-collision ui-widget ui-widget-content ui-corner-all">
+       <div class="ui-slider-range ui-widget-header" style="width:0%; left: 75%;"></div>
+       <a href="#" class="ui-slider-handle ui-state-default ui-corner-left" style="left: 75%;"></a>
+       <a href="#" class="ui-slider-handle ui-state-default ui-corner-right" style="left: 75%;"></a>
+</div>
+
+</body>
+</html>
diff --git a/tests/static/slider/slider_vertical_range_collision.html b/tests/static/slider/slider_vertical_range_collision.html
new file mode 100644 (file)
index 0000000..a9d95c0
--- /dev/null
+++ b/tests/static/slider/slider_vertical_range_collision.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+       <title>Slider Static Test : Slider vertical range</title>
+       <link rel="stylesheet" href="../static.css" type="text/css" />
+       <link rel="stylesheet" href="../../../themes/base/ui.base.css" type="text/css" />
+       <link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" />
+       <script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
+       <script type="text/javascript" src="../static.js"></script>
+</head>
+<body>
+
+<div id="slider-vertical-range" class="ui-slider ui-slider-vertical ui-slider-vertical-collision ui-widget ui-widget-content ui-corner-all">
+       <div class="ui-slider-range ui-widget-header" style="bottom: 75%; height:0%;"></div>
+       <a href="#" class="ui-slider-handle ui-state-default ui-corner-bottom" style="bottom: 75%;"></a>
+       <a href="#" class="ui-slider-handle ui-state-default ui-corner-top" style="bottom: 75%;"></a>
+</div>
+
+</body>
+</html>
diff --git a/themes/base/ui.slider.css b/themes/base/ui.slider.css
index 98995fecb5862532f383b17408ed1bfeb30f60e8..191bec98706b36f55f1f2ec094b65516904613c2 100644 (file)
--- a/themes/base/ui.slider.css
+++ b/themes/base/ui.slider.css
@@ -6,12 +6,16 @@
 
 .ui-slider-horizontal { height: .8em; }
 .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
+.ui-slider-horizontal-collision .ui-slider-handle { width: .6em; }
+.ui-slider-horizontal-collision .ui-corner-right { margin-left:0; border-left: 0; }
 .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; position: relative; }
 .ui-slider-horizontal .ui-slider-range-min { left: 0; }
 .ui-slider-horizontal .ui-slider-range-max { right: 0; }
 
 .ui-slider-vertical { width: .8em; height: 100px; }
 .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
+.ui-slider-vertical-collision .ui-slider-handle { height: .6em; }
+.ui-slider-vertical-collision .ui-corner-top { margin-bottom:0; border-bottom: 0; }
 .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; position: relative; }
 .ui-slider-vertical .ui-slider-range-min { bottom: 0; }
 .ui-slider-vertical .ui-slider-range-max { top: 0; }
\ No newline at end of file
The official jQuery user interface library: https://github.com/jquery/jquery-ui