Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Difficulty initializing location of slider bar handles

    I'm using a free version of a 2-handled slider that I found online. Unfortunately, I've lost the web address it came from to reference. I've posted the code below. I'm using it to pass minimum and maximum prices for a filter on search results. I've had no issue with functionality, setting the minimum and maximum values, or passing it initial values for the high and low price. The struggle I'm having with my beginner's knowledge of java is setting the code to have the position of the slider handles match the initial values. I've put random initial values in the code for example purposes. Any help would be appreciated!

    Code:
    <script type="text/javascript">
    /*<![CDATA[*/
    // Min Max Slider (07-November-2011)
    // by |Vic Phillips
    
    // Functional Code Size 2.45K
    function zxcMinMaxSlider(o){
     var mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?[1,'top','height']:[0,'left','width'],obj=document.getElementById(o.ID);
     if (obj){
      var divs=obj.getElementsByTagName('DIV');
      if (divs[0]){
       var objw=this.style(obj,mde[2]),hw=this.style(divs[0],mde[2]),mm=[0,objw-hw,objw-hw*(divs[1]?2:0)],ips=o.InputIDs,mv=o.MaxValue;
       divs[0].style[mde[1]]=mm[0]+'px';
       divs[1].style[mde[1]]=mm[1]+'px';
       this.mde=mde;
       this.hw=hw;
       this.mm=mm;
       this.divs=[divs[0],divs[1]];
       this.complete=o.Complete;
       this.ips=[document.getElementById(ips[0]),document.getElementById(ips[1])];
       this.ips[0].value=50;
       this.ips[1].value=934;
       this.mv=typeof(mv)=='number'?mv:false;
       this.addevt(divs[0],'mousedown','down',divs[0]);
       if (divs[1]){
        this.addevt(divs[1],'mousedown','down',divs[1]);
       }
       this.addevt(document,'mousemove','move');
       this.addevt(document,'mouseup','up');
      }
     }
    }
    
    zxcMinMaxSlider.prototype={
    
     down:function(e,obj){
      document.onselectstart=function(event){ window.event.returnValue=false; }
      this.dobj=obj;
      var divs=this.divs,ud=obj==divs[0],hw=this.hw,mde=this.mde;
      this.os=ud?0:hw
      this.min=ud?0:this.style(divs[0],mde[1])+hw;
      this.max=ud?this.style(divs[1],mde[1])-hw:this.mm[1];
      this.ip=this.ips[ud?0:1];
      this.lastXY=[e.clientX,e.clientY];
      this.drag=true;
      if (!window.event) e.preventDefault();
      return false;
     },
    
     move:function(e){
      if (this.drag){
       var mde=this.mde,mse=[e.clientX,e.clientY],lfttop=Math.min(this.max,Math.max(this.min,this.style(this.dobj,mde[1])+mse[mde[0]]-this.lastXY[mde[0]])),ip=this.ip,p=(lfttop-this.os)/this.mm[2],f=this.complete;
       this.dobj.style[mde[1]]=lfttop+'px';
       this.lastXY=mse;
       if (ip){
        ip.value=Math.round(p*(this.mv||1));
       }
       if (f){
        f(p*100);
       }
      }
      if (!window.event) ev.preventDefault();
      return false;
     },
    
     up:function(){
      if (this.drag){
       this.drag=false;
       document.onselectstart=null;
      }
     },
    
     style:function(obj,p){
      if (obj.currentStyle){
       return parseInt(obj.currentStyle[p.replace(/-/g,'')]);
      }
      return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p));
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
      }
     }
    
    }
    
    S=new zxcMinMaxSlider({
    
     ID:'tst',                     // the unique ID name of the parent DIV.                               (string)
     Mode:'Horizontal',            //(optional) the slider type, 'Horizontal' or 'Vertical'.              (string, default = 'Horizontal')
     InputIDs:['minprice','maxprice'],       //(optional) the unique ID names of the INPUTS to display the results. (array, default = no display)
     MaxValue:1500,                //(optional) the maximum value to display.                             (number, default = percentage)
     Complete:function(percent){   //(optional) the custom function the return the percentage.            (function, default = no custom function)
      document.Show.Show0.value=percent+' percent';
     }
    });
    
    /*]]>*/
    </script>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    http://www.vicsjavascripts.org.uk/Sl...MinMaxSwab.htm

    or

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #tst {
      position:absolute;left:100px;top:100px;width:300px;height:20px;border:solid red 1px;
    }
    
    #tst DIV {
      position:absolute;left:0px;top:0px;width:30px;height:20px;background-Color:red;
    }
    
    /*]]>*/
    </style>
    </head>
    
    <body>
    <div id="tst" ><div></div><div></div></div>
    <script> vic=0; </script>
    <form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
    <input size=100 name=Show0 >
    <input size=10 name=Show1 >
    <input size=10 name=Show2 >
    <input size=10 name=Show3 >
    <input size=10 name=Show4 >
    <input size=10 name=Show5 >
    <input size=10 name=Show6 >
    <input size=10 name=Show7 >
    <input size=10 name=Show8 >
    <input size=10 name=Show9 ><br>
    <textarea name=TA rows=1 cols=100 ></textarea>
    </form>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    // Min Max Slider (01-July-2012)
    // by |Vic Phillips
    
    // Functional Code Size 2.45K
    function zxcMinMaxSlider(o){
     var mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?[1,'top','height']:[0,'left','width'],obj=document.getElementById(o.ID),srt=o.Start,str=typeof(srt)=='object'&&srt.constructor==Array&&typeof(srt[0])=='number'&&typeof(srt[1])=='number'?srt:[0,100],srt=srt.sort();
     if (obj){
      var divs=obj.getElementsByTagName('DIV');
      if (divs[0]&&divs[1]){
       var objw=this.style(obj,mde[2]),hw=this.style(divs[0],mde[2]),mm=[0,objw-hw,objw-hw*(divs[1]?2:0)],ips=o.InputIDs,mv=o.MaxValue;
       divs[0].style[mde[1]]=mm[2]*srt[0]/100+'px';
       divs[1].style[mde[1]]=mm[2]*srt[1]/100+hw+'px';
       this.mde=mde;
       this.hw=hw;
       this.mm=mm;
       this.divs=[divs[0],divs[1]];
       this.complete=o.Complete;
       this.ips=[document.getElementById(ips[0]),document.getElementById(ips[1])];
       this.mv=typeof(mv)=='number'?mv:false;
       this.addevt(divs[0],'mousedown','down',divs[0]);
       if (divs[1]){
        this.addevt(divs[1],'mousedown','down',divs[1]);
       }
       this.addevt(document,'mousemove','move');
       this.addevt(document,'mouseup','up');
      }
     }
    }
    
    zxcMinMaxSlider.prototype={
    
     down:function(e,obj){
      document.onselectstart=function(event){ window.event.returnValue=false; }
      this.dobj=obj;
      var divs=this.divs,ud=obj==divs[0],hw=this.hw,mde=this.mde;
      this.os=ud?0:hw
      this.min=ud?0:this.style(divs[0],mde[1])+hw;
      this.max=ud?this.style(divs[1],mde[1])-hw:this.mm[1];
      this.ip=this.ips[ud?0:1];
      this.lastXY=[e.clientX,e.clientY];
      this.drag=true;
      if (!window.event) e.preventDefault();
      return false;
     },
    
     move:function(e){
      if (this.drag){
       var mde=this.mde,mse=[e.clientX,e.clientY],lfttop=Math.min(this.max,Math.max(this.min,this.style(this.dobj,mde[1])+mse[mde[0]]-this.lastXY[mde[0]])),ip=this.ip,p=(lfttop-this.os)/this.mm[2],f=this.complete;
       this.dobj.style[mde[1]]=lfttop+'px';
       this.lastXY=mse;
       if (ip){
        ip.value=Math.round(p*(this.mv||1));
       }
       if (f){
        f(p*100);
       }
      }
      if (!window.event) ev.preventDefault();
      return false;
     },
    
     up:function(){
      if (this.drag){
       this.drag=false;
       document.onselectstart=null;
      }
     },
    
     style:function(obj,p){
      if (obj.currentStyle){
       return parseInt(obj.currentStyle[p.replace(/-/g,'')]);
      }
      return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p));
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
      }
     }
    
    }
    
    S=new zxcMinMaxSlider({
    
     ID:'tst',                     // the unique ID name of the parent DIV.                               (string)
     Mode:'Horizontal',            //(optional) the slider type, 'Horizontal' or 'Vertical'.              (string, default = 'Horizontal')
     InputIDs:['minprice','maxprice'],       //(optional) the unique ID names of the INPUTS to display the results. (array, default = no display)
     Start:[20,70],                //(optional) the min and max cursor persentages.                        (array, default = [0,100])
     MaxValue:1500,                //(optional) the maximum value to display.                             (number, default = percentage)
     Complete:function(percent){   //(optional) the custom function the return the percentage.            (function, default = no custom function)
      document.Show.Show0.value=percent+' percent';
     }
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Last edited by vwphillips; 07-02-2012 at 06:28 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Vic,

    Thanks for the response. That wasn't the exact example I used, but unfortunately I couldn't find the one I did. The "StartValue" initialization that is used in those examples doesn't seem to work. Would I be better off simply copying one of those proven examples, or can anyone easily spot where my code may contain some type of initialization?

    Thanks again!

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    see the modified code on post 2

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #tst {
      position:absolute;left:100px;top:100px;width:300px;height:20px;border:solid red 1px;
    }
    
    #tst DIV {
      position:absolute;left:0px;top:0px;width:30px;height:20px;background-Color:red;
    }
    
    /*]]>*/
    </style>
    </head>
    
    <body>
    <div id="tst" ><div></div><div></div></div>
    <script> vic=0; </script>
    <form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
    <input size=100 name=Show0 >
    <input size=10 name=Show1 >
    <input size=10 name=Show2 >
    <input size=10 name=Show3 >
    <input size=10 name=Show4 >
    <input size=10 name=Show5 >
    <input size=10 name=Show6 >
    <input size=10 name=Show7 >
    <input size=10 name=Show8 >
    <input size=10 name=Show9 ><br>
    <textarea name=TA rows=1 cols=100 ></textarea>
    </form>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    // Min Max Slider (01-July-2012)
    // by |Vic Phillips
    
    // Functional Code Size 2.45K
    function zxcMinMaxSlider(o){
     var mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?[1,'top','height']:[0,'left','width'],obj=document.getElementById(o.ID),srt=o.Start,str=typeof(srt)=='object'&&srt.constructor==Array&&typeof(srt[0])=='number'&&typeof(srt[1])=='number'?srt:[0,100],srt=srt.sort();
     if (obj){
      var divs=obj.getElementsByTagName('DIV');
      if (divs[0]&&divs[1]){
       var objw=this.style(obj,mde[2]),hw=this.style(divs[0],mde[2]),mm=[0,objw-hw,objw-hw*(divs[1]?2:0)],ips=o.InputIDs,mv=o.MaxValue;
       divs[0].style[mde[1]]=mm[2]*srt[0]/100+'px';
       divs[1].style[mde[1]]=mm[2]*srt[1]/100+hw+'px';
       this.mde=mde;
       this.hw=hw;
       this.mm=mm;
       this.divs=[divs[0],divs[1]];
       this.complete=o.Complete;
       this.ips=[document.getElementById(ips[0]),document.getElementById(ips[1])];
       this.mv=typeof(mv)=='number'?mv:false;
       this.addevt(divs[0],'mousedown','down',divs[0]);
       if (divs[1]){
        this.addevt(divs[1],'mousedown','down',divs[1]);
       }
       this.addevt(document,'mousemove','move');
       this.addevt(document,'mouseup','up');
      }
     }
    }
    
    zxcMinMaxSlider.prototype={
    
     down:function(e,obj){
      document.onselectstart=function(event){ window.event.returnValue=false; }
      this.dobj=obj;
      var divs=this.divs,ud=obj==divs[0],hw=this.hw,mde=this.mde;
      this.os=ud?0:hw
      this.min=ud?0:this.style(divs[0],mde[1])+hw;
      this.max=ud?this.style(divs[1],mde[1])-hw:this.mm[1];
      this.ip=this.ips[ud?0:1];
      this.lastXY=[e.clientX,e.clientY];
      this.drag=true;
      if (!window.event) e.preventDefault();
      return false;
     },
    
     move:function(e){
      if (this.drag){
       var mde=this.mde,mse=[e.clientX,e.clientY],lfttop=Math.min(this.max,Math.max(this.min,this.style(this.dobj,mde[1])+mse[mde[0]]-this.lastXY[mde[0]])),ip=this.ip,p=(lfttop-this.os)/this.mm[2],f=this.complete;
       this.dobj.style[mde[1]]=lfttop+'px';
       this.lastXY=mse;
       if (ip){
        ip.value=Math.round(p*(this.mv||1));
       }
       if (f){
        f(p*100);
       }
      }
      if (!window.event) ev.preventDefault();
      return false;
     },
    
     up:function(){
      if (this.drag){
       this.drag=false;
       document.onselectstart=null;
      }
     },
    
     style:function(obj,p){
      if (obj.currentStyle){
       return parseInt(obj.currentStyle[p.replace(/-/g,'')]);
      }
      return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p));
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
      }
     }
    
    }
    
    S=new zxcMinMaxSlider({
    
     ID:'tst',                     // the unique ID name of the parent DIV.                               (string)
     Mode:'Horizontal',            //(optional) the slider type, 'Horizontal' or 'Vertical'.              (string, default = 'Horizontal')
     InputIDs:['minprice','maxprice'],       //(optional) the unique ID names of the INPUTS to display the results. (array, default = no display)
     Start:[20,70],                //(optional) the min and max cursor persentages.                        (array, default = [0,100])
     MaxValue:1500,                //(optional) the maximum value to display.                             (number, default = percentage)
     Complete:function(percent){   //(optional) the custom function the return the percentage.            (function, default = no custom function)
      document.Show.Show0.value=percent+' percent';
     }
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •