I've been keeping an eye on UI, but unfortunately I have a deadline and it doesn't look like UI will be ready in time for me to meet it.
You can view my solution by cut and pasting it into a text editor, saving as something.html and viewing it in your browser. You will have to provide a jQuery and an interface library to link to, and you will also have to provide your own images, but you should be able to see something once you've done that. On Aug 15, 10:16 pm, "Ganeshji Marwaha" <[EMAIL PROTECTED]> wrote: > Gordon, > > I just wish u finish this widget in style... I also have similar problems > with interface slider and wasn't able to get around it... Interface slider > also has problems when executing callbacks. For example, when the handle is > dragged and dropped, the onChange fires, but not when you click somewhere on > the slider bar that moves the handle... That was pretty annoying, coz, > onChange events wont work fine in my cases... I sincerely wish u get it > right... > > Lemme know if you want my help testing it... I will give my best shot to > break them if u need me to. > > Also, remember, there is a jquery UI project taht is going to implement a > slider... But, i am not sure when it is due. Either ways, i think u r in the > right direction... > > Also, can u post ur example somewhere where i can take a look... > > -GTG > > On 8/15/07, Gordon <[EMAIL PROTECTED]> wrote: > > > > > 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: > > ... > > read more ยป
