I realised in the end it's not really a problem because dragging the sliders trigger a resizing of the divs used to define the domain so the handles still remain grabbable when that part of the object is implemented.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/ TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <script type="text/javascript" src="/js/jquery/jquery.js"></script> <script type="text/javascript" src="/js/jquery/interface/ interface.js"></script> <style type="text/css"> /* Sliders */ .slider { width: 171px; height: 58px; position: relative; margin: 2px; padding: 0px; overflow: hidden; background: url(ui/configurator/range_chart.gif) no-repeat top; } .slifer .domain { position: absolute; height: 100%; } .slider .domain { position: absolute; top: 0; width: 152px; height: 100%; /*opacity: 0.3;*/ /*filter: alpha (opacity=30);*/ } .slider .domain.left { /*background: yellow;*/ left: 0px; } .slider .domain.right { /*background: cyan;*/ right: 0px; } .slideHandle { width: 19px; height: 58px; position: absolute; font-size: 0; line-height: 0; overflow: hidden; border: none; top: 0px; } .leftHandle { background: url(ui/configurator/range_handle_left.gif) no-repeat bottom; } .rightHandle { left: 133px; background: url(ui/configurator/range_handle_right.gif) no-repeat bottom; } </style> <script type="text/javascript"> function RangeSlider (slideElem, slideMin, slideMax, fieldMin, fieldMax, rangeMin, rangeMax, step) { var self = this; // DOM elements self.container = $(slideElem); self.domainLeft = $('.left', self.container); self.domainRight = $('.right', self.container); self.handleMin = $(slideMin); self.handleMax = $(slideMax); // Widths self.sliderWidth = self.container.width (); self.handleWidth = self.handleMin.width (); self.dmnLeftWidth = self.domainLeft.width (); self.dmnRightWidth = self.domainRight.width (); self.dmnLeftSize = function () // resize left domain { // Calculate left domain width var newWidth = self.sliderWidth - self.dmnRightWidth + parseInt (self.handleMax.css ('left')); // Resize the left hand domain self.domainLeft.width (self.dmnLeftWidth = newWidth); }; self.dmnRightSize = function () // Resize right domain { // Calsulate right domain width and handle offset var newWidth = self.sliderWidth - self.handleWidth - parseInt (self.handleMin.css ('left'), 10); var widthChange = self.dmnRightWidth - newWidth; // Resize the right hand domain self.domainRight.width (self.dmnRightWidth = newWidth); // Reposition the right drag handle to maintain its relative position self.handleMax.css ('left', parseInt (self.handleMax.css ('left'), 10) - widthChange); }; self.initHandle = function (handle) // Initialize a handle { handle.Draggable ( { containment : 'parent', grid : step, onChange : function () { switch (this.id) { case self.handleMin [0].id : self.dmnRightSize (); break; case self.handleMax [0].id : self.dmnLeftSize (); break; } } }); }; self.initHandle (self.handleMin); self.initHandle (self.handleMax); } var test; $(document).ready (function () { test1 = new RangeSlider ('#slider1', '#left1', '#right1', 0, 0, 0, 0, 0); test2 = new RangeSlider ('#slider2', '#left2', '#right2', 0, 0, 0, 0, 17); test3 = new RangeSlider ('#slider3', '#left3', '#right3', 0, 0, 0, 0, 0); test4 = new RangeSlider ('#slider4', '#left4', '#right4', 0, 0, 0, 0, 17); test5 = new RangeSlider ('#slider5', '#left5', '#right5', 0, 0, 0, 0, 0); }); </script> <body> </body> <div class="slider" id="slider1"> <div class="domain left" id="leftDomain1"> <div class="slideHandle leftHandle" id="left1"> </div> </div> <div class="domain right" id="rightDomain1"> <div class="slideHandle rightHandle" id="right1"> </div> </div> </div> <div class="slider" id="slider2"> <div class="domain left" id="leftDomain2"> <div class="slideHandle leftHandle" id="left2"> </div> </div> <div class="domain right" id="rightDomain2"> <div class="slideHandle rightHandle" id="right2"> </div> </div> </div> <div class="slider" id="slider3"> <div class="domain left" id="leftDomain3"> <div class="slideHandle leftHandle" id="left3"> </div> </div> <div class="domain right" id="rightDomain3"> <div class="slideHandle rightHandle" id="right3"> </div> </div> </div> <div class="slider" id="slider4"> <div class="domain left" id="leftDomain4"> <div class="slideHandle leftHandle" id="left4"> </div> </div> <div class="domain right" id="rightDomain4"> <div class="slideHandle rightHandle" id="right4"> </div> </div> </div> <div class="slider" id="slider5"> <div class="domain left" id="leftDomain5"> <div class="slideHandle leftHandle" id="left5"> </div> </div> <div class="domain right" id="rightDomain5"> <div class="slideHandle rightHandle" id="right5"> </div> </div> </div> </html> On Aug 15, 2:10 pm, Gordon <[EMAIL PROTECTED]> wrote: > After scratching my head over this for a while I thought maybe I would > have more luck with plan B. I could give each handle its own div > inside the slider div and allow each slider to slide only inside that > region. by adjusting the width of the container divs I could get > notched sliders that don't overlap each other quite easily. > > The only thing is I've hit an enormous snag. Each of the domain divs > stack up on top of each other inside the slider div, and as soon as > you slide the handle in the div that's behind the other div you can no > longer drag it because the front div is in the way. > > Here is the revised code: > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/ > TR/xhtml11/DTD/xhtml11.dtd"> > <html xmlns="http://www.w3.org/1999/xhtml";> > <head> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > <title>Untitled Document</title> > </head> > <script type="text/javascript" src="/js/jquery/jquery.js"></script> > <script type="text/javascript" src="/js/jquery/interface/ > interface.js"></script> > <style type="text/css"> > /* Sliders */ > .slider { > width: 171px; > height: 58px; > position: relative; > margin: 2px; > padding: 0px; > overflow: hidden; > background: url(configurator%209/ui/configurator/range_chart.gif) no- > repeat top;} > > .slider .domain { > position: absolute; > top: 0; > width: 152px; > height: 100%; > opacity: 0.3;} > > .slider .domain.left { > background: yellow; > left: 0px;} > > .slider .domain.right { > background: blue; > right: 0px;} > > .slideHandle { > width: 19px; > height: 58px; > position: absolute; > font-size: 0; > line-height: 0; > overflow: hidden; > border: none; > top: 0px;} > > .leftHandle { > background: url(configurator%209/ui/configurator/ > range_handle_left.gif) no-repeat bottom;} > > .rightHandle { > left: 133px; > background: url(configurator%209/ui/configurator/ > range_handle_right.gif) no-repeat bottom; > > } > > </style> > <script type="text/javascript"> > > $(document).ready (function () > { > $('#left, #right').Draggable ({ > containment : 'parent', > grid : 17 > }); > //test = new RangeSlider ('#slider1', '#left', '#right', 0, 0, 0, 0); > > }); > > </script> > <body> > </body> > <div class="slider" id="slider1"> > <div class="domain left"> > <div class="slideHandle leftHandle" id="left"> </div> > </div> > <div class="domain right"> > <div class="slideHandle rightHandle" id="right"> </div> > </div> > </div> > </html> > > Is it possible to get a click through the front layer to the handle > behind? > > On Aug 15, 12:41 pm, Gordon <[EMAIL PROTECTED]> wrote: > > > As I just can't track down a javascript slider that can cope with two > > handles satisfactorially, I am trying to implement my own using just > > the Draggable functionality of the interface library. > > > I need to make a slider for selecting a minimum and maximum limits of > > a range of values that: > > > * cope with 2 handles in the slider > > * can snap the handles to notches while dragging, the size of which > > doesn't change based on the position of either of the sliders > > * will not allow the handles to either pass each other or overlap > > > So far this is as far as I have got: > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/ > > TR/xhtml11/DTD/xhtml11.dtd"> > > <html xmlns="http://www.w3.org/1999/xhtml";> > > <head> > > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > > <title>Untitled Document</title> > > </head> > > <script type="text/javascript" src="/js/jquery/jquery.js"></script> > > <script type="text/javascript" src="/js/jquery/interface/ > > interface.js"></script> > > <style type="text/css"> > > /* Sliders */ > > .slider { > > width: 171px; > > height: 58px; > > position: relative; > > margin: 2px; > > padding: 0px; > > overflow: hidden; > > background: url(configurator%209/ui/configurator/range_chart.gif) > > no- > > repeat top;} > > > .slideDomain { > > position: absolute; > > height: 100%;} > > > .leftDomain { > > left: 0px;} > > > .rightDomain { > > right: 0px;} > > > .slideHandle { > > width: 19px; > > height: 58px; > > position: absolute; > > font-size: 0; > > line-height: 0; > > overflow: hidden; > > border: none; > > top: 0px;} > > > .leftHandle { > > background: url(configurator%209/ui/configurator/ > > range_handle_left.gif) no-repeat bottom;} > > > .rightHandle { > > left: 152px; > > background: url(configurator%209/ui/configurator/ > > range_handle_right.gif) no-repeat bottom; > > > } > > > </style> > > <script type="text/javascript"> > > > function RangeSlider (slideContainer, slideMin, slideMax, fieldMin, > > fieldMax, rangeMin, rangeMax) > > { > > var self = this; > > self.container = $(slideContainer); > > self.handleMin = $(slideMin); > > self.handleMax = $(slideMax); > > > self.notches = 10; > > self.spacing = Math.round (self.container.width () / > > self.notches); > > > console.log (self.minLeft = parseInt (self.handleMin.css > > ('left'), > > 10)); > > console.log (self.maxLeft = parseInt (self.handleMax.css > > ('left'), > > 10)); > > > var leftDraggable = self.handleMin.Draggable ({ > > containment : 'parent', > > grid : self.spacing, > > onDrag : function (newX) > > { > > if (newX >= self.maxLeft) > > { > > console.log ('Left too far'); > > $('#dragHelper').css ('left', self.maxLeft > > - self.grid); > > } > > }, > > onChange : function () > > { > > self.minLeft = parseInt (self.handleMin.css > > ('left'), 10); > > } > > }); > > var rightDraggable = self.handleMax.Draggable ({ > > containment : 'parent', > > grid : self.spacing, > > onDrag : function (newX) > > { > > if (newX <= self.minLeft) > > { > > console.log ('Right too far'); > > $('#dragHelper').css ('left', self.minLeft > > + self.grid); > > } > > }, > > onChange : function () > > { > > self.maxLeft = parseInt (self.handleMax.css > > ('left'), 10); > > } > > }); > > > } > > > var test; > > $(document).ready (function () > > { > > test = new RangeSlider ('#slider1', '#left', '#right', 0, 0, 0, > > 0);}); > > > </script> > > <body> > > </body> > > <div class="slider" id="slider1"> > > <div class="slideHandle leftHandle" id="left"> </div> > > <div class="slideHandle rightHandle" id="right"> </div> > > </div> > > </html> > > > At the moment I'm trying to implement code that wil restrict the > > handle being dragged from sliding past the other one. What I have > > written does successfully detect when one handle is overlapping or > > passing the other, but the code to reposition the drag helper to an > > acceptible location doesn't seem to work. > > > Does anyone know what I'm doing wrong here?
