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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Challenge initializing slider minimum value

    Hi all - I am using a script I found online for a minimum/maximum value slider and modified it to fit my needs. It is part of a form to filter results, and when I click the filter button, it obviously passes the minimum and maximum values to my mySQL query. I'm not having any issues with that - the challenge I'm finding is that after I submit the query, it is supposed to maintain and use the minimum and maximum values previously submitted as the initial value.

    There are three main values: minprice, maxprice, and highestprice. Highest price sets the upper limit of the slider and is determined by a mysql query (the lower limit is always 0). minprice and maxprice are the locations of the slider handles. If the user either changes the filtering maximum value only or the maximum and minimum values, it functions as expected - the minimum and maximum initializes with the values the user submitted. If the user only changes the minimum value and doesn't change the maximum, the maximum initializes properly, but the minprice initializes as (highestprice - maxprice).

    Here is the javascript I'm using. If it helps, I can post the link to the test page I have this loaded on. Thanks!

    Code:
    <script>
    
    
     var minpass = "<?php echo $pricemin; ?>";
     var maxpass = "<?php echo $pricemax; ?>";
     var highestprice = "<?php echo $highestprice; ?>";
    
    
    
    
    
    // Functional Code - NO NEED to Change.
    
    
    var zxcSliderMinMaxSwab={
    
    // Slider Functions
     slider:function(o){
      var mde=this.mode(o.Mode),id=o.SlideID,nme=id+'=',p=document.getElementById(id),clds=this.clds(p),b=clds[0],c=clds[1],ms=o.AnimateDuration,v=this.v(o.StartValue),days=this.days(o),ck=this.cookie(nme),v=days&&ck?ck*1:v,obj;
      if (c&&b){
       var bw=this.int(b,mde[1]),cw=this.int(c,mde[1])/2,os=this.int(b,mde[0]);
       zxcSliderMinMaxSwab['zxc'+id]=obj={
        nme:id+'=',
        mde:mde,
        cursor:c,
        cw:cw,
        bar:b,
        bw:bw,
        os:os,
        days:typeof(days)=='number'?days:false,
        drag:false,
        ms:typeof(ms)=='number'?ms:1000,
        mms:bw,
        complete:o.Complete
       }
       c.style[mde[0]]=os-cw+bw*v+'px';
       this.rtn(v*1,obj);
       if (o.Drag===true){
        this.addevt(c,'mousedown','slidedown',obj);
        this.addevt(p,'mousemove','slidemove',obj);
        this.addevt(document,'mouseup','up',obj);
       }
       else {
        this.addevt(p,'mouseup','sliderdown',obj);
       }
      }
     },
    
     days:function(o){
      var days=o.DaysPersistence;
      return typeof(days)=='number'?days:false;
     },
    
     setslider:function(id,v){
      var o=this.o(id);
      if (o&&typeof(v)=='number'&&v>=0&&v<=1){
       this.sliderdown(null,o,this.pos(o.bar)[o.mde[2]]+o.bw*v);
      }
     },
    
     sliderdown:function(e,o,mse){
      var mse=mse||this.mse(e)[o.mde[2]],p=this.pos(o.bar)[o.mde[2]],p=Math.min(Math.max(mse-p,0),o.bw),f=this.int(o.cursor,o.mde[0]),t=p-o.cw+o.os;
      this.ani(o,o.cursor,f,t,p/o.bw,'dly');
     },
    
     slidedown:function(e,o){
      o.xy=this.mse(e)[o.mde[2]];
      o.drag=true;
      this.ertn(e);
     },
    
     slidemove:function(e,o){
      if (o.drag){
       var xy=this.mse(e)[o.mde[2]],p=Math.min(Math.max(this.int(o.cursor,o.mde[0])+xy-o.xy,o.os-o.cw),o.bw+o.os-o.cw),v=(p-o.os+o.cw)/o.bw;
       o.cursor.style[o.mde[0]]=p+'px';
       this.cookieset(o,v);
       this.rtn(v,o);
       o.xy=xy;
       this.ertn(e);
      }
     },
    
    // MinMax Functions
     minmax:function(o){
      var mde=this.mode(o.Mode),id=o.SlideID,nme=id+'=',p=document.getElementById(id),clds=this.clds(p)
      if (clds.length>2){
       var b=clds[0],bw=this.int(b,mde[1]),os=this.int(b,mde[0]),ms=o.AnimateDuration,cw=this.int(clds[1],mde[1])/2,days=this.days(o),ck=this.cookie(nme),v=days&&ck?ck.split(','):this.minmaxv(o.StartValue),obj;
       clds[2].style[mde[1]]=cw*2+'px';
       zxcSliderMinMaxSwab['zxc'+id]=obj={
        p:p,
        nme:nme,
        mde:mde,
        bar:b,
        bw:bw,
        os:os,
        cary:[clds[1],clds[2]],
        cursormin:clds[1],
        cursormax:clds[2],
        cw:cw,
        days:days,
        drag:false,
        ms:typeof(ms)=='number'?ms:1000,
        mms:bw,
        complete:o.Complete
       }
       clds[1].style[mde[0]]=os-cw+(bw-cw*2)*v[0]+'px';
       clds[2].style[mde[0]]=os+bw-cw-(bw-cw*2)*(1-v[1])+'px';
       if (typeof(obj.complete)=='function'){
        obj.complete(v[0]*1,v[1]*1,obj);
       }
       if (o.Drag===true){
        this.addevt(clds[1],'mousedown','minmaxdrag',obj,0);
        this.addevt(clds[2],'mousedown','minmaxdrag',obj,1);
        this.addevt(p,'mousemove','minmaxmove',obj);
        this.addevt(document,'mouseup','up',obj);
       }
       else {
        this.addevt(p,'mousedown','minmaxdown',obj);
       }
      }
     },
    
     minmaxv:function(v){
      v=typeof(v)=='object'&&v.constructor==Array?v:[],v=[this.v(v[0]),this.v(v[1])],v=v.sort();
      v[0]=v[0]+v[1]<=1?v[0]:1-v[1];
      return v;
     },
    
     setminmax:function(id,v){
      var o=this.o(id);
      if (o){
       v=this.minmaxv(v);
       this.ani(o,o.cary[0],this.int(o.cary[0],o.mde[0]),o.os-o.cw+(o.bw-o.cw*2)*v[0],1,'mm0');
       this.ani(o,o.cary[1],this.int(o.cary[1],o.mde[0]),o.os+o.bw-o.cw-(o.bw-o.cw*2)*v[1],1,'mm1');
       if (typeof(o.complete)=='function'){
        o.complete(v[0],v[1],o);
       }
      }
     },
    
     minmaxdown:function(e,o,nu){
      var xy=this.mse(e)[o.mde[2]],min=Math.abs(xy-(this.pos(o.cary[0])[o.mde[2]]+o.cw)),max=Math.abs(xy-(this.pos(o.cary[1])[o.mde[2]]+o.cw)),ud=min<max?0:1,p=xy-this.pos(o.p)[o.mde[2]]-o.cw;
      this.ani(o,o.cary[ud],this.int(o.cary[ud],o.mde[0]),(ud==0?Math.min(Math.max(p,o.os-o.cw),this.int(o.cary[1],o.mde[0])-o.cw*2):Math.min(Math.max(p,this.int(o.cary[0],o.mde[0])+o.cw*2),o.bw+o.os-o.cw)),1,'mm');
     },
    
     minmaxdrag:function(e,o,nu){
      o.xy=this.mse(e)[o.mde[2]];
      o.nu=nu;
      o.drag=true;
      this.ertn(e);
     },
    
     minmaxmove:function(e,o){
      if (o.drag){
       var xy=this.mse(e)[o.mde[2]],ud=o.nu==0,c=o.cary[o.nu],c1=o.cary[ud?1:0],min=ud?this.int(c1,o.mde[0])-o.cw*2:o.bw+o.os-o.cw,max=o.nu==0?o.os-o.cw:this.int(c1,o.mde[0])+o.cw*2;
       c.style[o.mde[0]]=Math.min(Math.max(this.int(c,o.mde[0])+xy-o.xy,max),min)+'px';
       this.minmaxrtn(o);
       o.xy=xy;
       this.ertn(e);
      }
     },
    
     minmaxrtn:function(o){
      var v=[(this.int(o.cary[0],o.mde[0])+o.cw-o.os)/(o.bw-o.cw*2),(this.int(o.cary[1],o.mde[0])+o.cw-o.os-o.cw*2)/(o.bw-o.cw*2)];
      this.cookieset(o,v);
      if (typeof(o.complete)=='function'){
       o.complete(v[0],v[1],o);
      }
     },
    
    // Swab Functions
     swab:function(o){
      var mde=this.mode(o.Mode),id=o.SwabID,nme=id+'=',p=document.getElementById(id),c=this.clds(p)[0],cw,swabs=this.bycls(o.SwabClass,p),ms=o.AnimateDuration,v=o.StartValue,days=this.days(o),ck=this.cookie(nme),v=days&&ck?ck*1:v,v=swabs[v]?v:0,obj,ary=[],z0=0;
      if (c&&swabs[0]){
       cw=this.int(c,mde[1])/2;
       c.style[mde[0]]=swabs[v][mde[3]]+(this.int(swabs[v],mde[1])-cw*2)/2+'px';
       zxcSliderMinMaxSwab['zxc'+id]=obj={
        nme:nme,
        mde:mde,
        cursor:c,
        cw:cw,
        swabs:swabs,
        lst:swabs[swabs.length-1],
        nu:v,
        days:days,
        ms:typeof(ms)=='number'?ms:1000,
        mms:this.int(swabs[0],mde[1]),
        m:false,
        drag:false,
        complete:o.Complete
       }
       if (typeof(obj.complete)=='function'){
        obj.complete(v*1,obj);
       }
       if (o.Drag){
        this.addevt(c,'mousedown','swabdrag',obj);
        this.addevt(p,'mousemove','swabmove',obj);
        this.addevt(document,'mouseup','up',obj);
       }
       else {
        for (;z0<swabs.length;z0++){
         this.addevt(swabs[z0],'mouseup','swabdown',obj,z0);
        }
       }
      }
     },
    
     setswab:function(id,v){
      var o=this.o(id);
      if (o&&o.swabs[v]){
       this.swabdown(null,o,v);
      }
     },
    
     swabdrag:function(e,o,nu){
      o.xy=this.mse(e)[o.mde[2]];
      o.drag=true;
      this.ertn(e);
     },
    
     swabmove:function(e,o){
      if (o.drag){
       var xy=this.mse(e)[o.mde[2]],xy=Math.min(Math.max(xy,this.pos(o.swabs[0])[o.mde[2]]+o.cw),this.pos(o.lst)[o.mde[2]]+this.int(o.lst,o.mde[1])),nu=0,z0=0;
       o.cursor.style[o.mde[0]]=this.int(o.cursor,o.mde[0])+xy-o.xy+'px';
       for (var nu=0,z0=0;z0<o.swabs.length;z0++){
        p=this.pos(o.swabs[z0])[o.mde[2]];
        if (xy>p){
         nu=z0;
        }
       }
       if (nu!=o.nu){
        o.nu=nu;
        this.rtn(nu,o);
       }
       o.xy=xy;
       this.ertn(e);
      }
     },
    
     swabdown:function(e,o,nu){
      var f=this.int(o.cursor,o.mde[0]),t=o.swabs[nu][o.mde[3]]+(this.int(o.swabs[nu],o.mde[1])-o.cw*2)/2;
      this.ani(o,o.cursor,f,t,nu,'dly');
     },
    
     bycls:function (nme,el){
      for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
       if(reg.test(els[z0].className)){
        ary.push(els[z0]);
       }
      }
      return ary;
     },
    
    // common functions
     o:function(id){
      return zxcSliderMinMaxSwab['zxc'+id];
     },
    
     ani:function(o,c,f,t,v,to){
      clearTimeout(o[to]);
      this.animate(o,c,f,t,new Date(),o.ms*Math.abs((t-f)/o.mms),v,to);
     },
    
     animate:function(o,c,f,t,srt,mS,v,to){
      var oop=this,mde=o.mde[0],ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       c.style[mde]=now+'px';
      }
      if (ms<mS){
       o[to]=setTimeout(function(){ oop.animate(o,c,f,t,srt,mS,v,to); },10);
      }
      else {
       c.style[mde]=t+'px';
       if (to=='dly'){
        this.cookieset(o,v);
        this.rtn(v,o);
       }
       else {
        this.minmaxrtn(o);
       }
      }
     },
    
     pos:function(o){
      var rtn=[0,0];
      while(o){
       rtn[0]+=o.offsetLeft;
       rtn[1]+=o.offsetTop;
       o=o.offsetParent;
      }
      return rtn;
     },
    
     mse:function(e){
      if (window.event){
       var docs=[document.body.scrollLeft,document.body.scrollTop];
       if (!document.body.scrollTop){
        docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
       }
       return [e.clientX+docs[0],e.clientY+docs[1]];
      }
      return [e.pageX,e.pageY];
     },
    
     clds:function(p){
      var clds=p.childNodes;ary=[],z0=0;
      for (;z0<clds.length;z0++){
       if (clds[z0].nodeType==1){
        ary.push(clds[z0]);
       }
      }
      return ary;
     },
    
     mode:function(mde){
      return typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','height',1,'offsetTop']:['left','width',0,'offsetLeft'];
     },
    
     v:function(v){
      return typeof(v)=='number'&&v>=0&&v<=1?v:0;
     },
    
     rtn:function(nu,o){
      if (typeof(o.complete)=='function'){
       o.complete(nu,o);
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](e,p,p1);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](e,p,p1); });
      }
     },
    
     int:function(o,p){
      return parseInt(this.style(o,p));
     },
    
     style:function(o,p){
      if (o.currentStyle){
       return o.currentStyle[p.replace(/-/g,'')];
      }
      return document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
     },
    
     up:function(e,o){
      if (o.drag){
       if (o.swabs){
        var f=this.int(o.cursor,o.mde[0]);
        this.ani(o,o.cursor,this.int(o.cursor,o.mde[0]),o.swabs[o.nu][o.mde[3]]+(this.int(o.swabs[o.nu],o.mde[1])-o.cw*2)/2,o.nu,'dly');
       }
       o.drag=false;
      }
     },
    
     ertn:function(e){
      if(e.stopPropagation){
       e.stopPropagation();
      }
      if (!window.event){
       e.preventDefault();
      }
      e.cancelBubble=true;
      e.cancel=true;
      e.returnValue=false;
      return false;
     },
    
     cookie:function(nme){
      var re=new RegExp(nme+'[^;]+','i');
      if (document.cookie.match(re)){
       return document.cookie.match(re)[0].split("=")[1];
      }
      return null
     },
    
     cookieset:function(o,v){
      if (o.days){
       document.cookie=o.nme+v+';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path=/';
      }
     }
    
    }
    
    
       
    function Init(){
    
    
    zxcSliderMinMaxSwab.minmax({
     SlideID:'mm1',        // the unique ID name of the slider parent DIV.                                      (string)
     Mode:'Horizontal',    //(optional) the mode of execution, 'Horizontal' or 'Vertical'.                      (string, default = 'Horizontal')
     StartValue:[minpass/highestprice,maxpass/highestprice],       //(optional) the initial position of the cursor as a number between 0 and 1.         (number, default = 0)
     Drag:true,
     Complete:function(min,max,obj){ // see Note 2.
      document.getElementById('ipmin').value=Math.round(min*highestprice);
      document.getElementById('ipmax').value=Math.round(max*highestprice);
     }
    });
    
    
    
    
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
     </script>

  • #2
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    To clarify, the variables pricemin, pricemax, and highestprice are pulled in from PHP outside of the script. I've confirmed the javascript variables are receiving the intended values.

    The initialization section of the code is towards the bottom of the block.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    You have removed the credits and application notes

    these can be found here

    http://www.vicsjavascripts.org.uk/Sl...MinMaxSwab.htm
    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/

  • #4
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, I removed them in order to try to only include relevant parts of the code on this post and not add lines that won't assist people in assisting me. I've scoured the comments and notes, but wasn't able to find any reason why I'm having this error.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    please provide the echo values

    var minpass = "<?php echo $pricemin; ?>";
    var maxpass = "<?php echo $pricemax; ?>";
    var highestprice = "<?php echo $highestprice; ?>";
    the css and html for the slider
    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/

  • #6
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's the relevant portion of the CSS and HTML:
    Code:
    .minmaxbar {
      position:relative;left:0px;width:130px;height:20px;background-Color:#6A888D;
    }
    .minmaxcursor {
      position:absolute;top:0px;left:0px;width:10px;height:20px;background-Image:url(cursorup.gif);cursor:pointer;
    }
    #mm1 {
    position: relative;
    width: 130px;
    
    <form>
    From:<br>
    <input readonly="readonly" size="5" name="minprice" id="ipmin" style="background-color: white;color:black;border:0px solid White" />
    
    To:<br>
    <input readonly="readonly" size="5" name="maxprice" id="ipmax" style="background-color: white;color:black;border:0px solid White;text-align:right" />
    
      <div id="mm1">
       <div class="minmaxbar" ></div>
       <div class="minmaxcursor"></div>
       <div class="minmaxcursor"></div>
      </div>
    <input type="submit" value="Filter">
    </form>
    And here's the php behind the variables:
    Code:
    <?php
    
    **DB connect info redacted and query strings redacted
    
    $highestprice = $r[0];
    
    if (preg_match("/^[0-9]{1,5}$/",$_GET['minprice'])) {
        $pricemin = $_GET['minprice'];
    } 
    else {
        $pricemin = 0;
    }
    
    if (preg_match("/^[0-9]{1,5}$/",$_GET['maxprice'])) {
        $pricemax = $_GET['maxprice'];
    } 
    else {
        $pricemax = $highestprice;
    }
    
    ?>
    The "highest price" query simply finds the maximum price in the database. The regex formulas intend to return a 0 for minimum if it isn't a 5 digit number and the highest price in the DB for maximum if the max isn't a 5 digit number. I've confirmed that the expected results of the query are returned to the variables via echo lines. Any help would be great.

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    this works for me

    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[*/
    .minmaxbar {
      position:relative;left:0px;width:130px;height:20px;background-Color:#6A888D;
    }
    .minmaxcursor {
      position:absolute;top:0px;left:0px;width:10px;height:20px;background-Color:red;cursor:pointer;
    }
    #mm1 {
    position: relative;
    width: 130px;
    }
    
    /*]]>*/
    </style>
    <script>
    
    
     var minpass = 50;
     var maxpass = 150;
     var highestprice = 200;
    
    
    
    
    
    // Functional Code - NO NEED to Change.
    
    
    var zxcSliderMinMaxSwab={
    
    // Slider Functions
     slider:function(o){
      var mde=this.mode(o.Mode),id=o.SlideID,nme=id+'=',p=document.getElementById(id),clds=this.clds(p),b=clds[0],c=clds[1],ms=o.AnimateDuration,v=this.v(o.StartValue),days=this.days(o),ck=this.cookie(nme),v=days&&ck?ck*1:v,obj;
      if (c&&b){
       var bw=this.int(b,mde[1]),cw=this.int(c,mde[1])/2,os=this.int(b,mde[0]);
       zxcSliderMinMaxSwab['zxc'+id]=obj={
        nme:id+'=',
        mde:mde,
        cursor:c,
        cw:cw,
        bar:b,
        bw:bw,
        os:os,
        days:typeof(days)=='number'?days:false,
        drag:false,
        ms:typeof(ms)=='number'?ms:1000,
        mms:bw,
        complete:o.Complete
       }
       c.style[mde[0]]=os-cw+bw*v+'px';
       this.rtn(v*1,obj);
       if (o.Drag===true){
        this.addevt(c,'mousedown','slidedown',obj);
        this.addevt(p,'mousemove','slidemove',obj);
        this.addevt(document,'mouseup','up',obj);
       }
       else {
        this.addevt(p,'mouseup','sliderdown',obj);
       }
      }
     },
    
     days:function(o){
      var days=o.DaysPersistence;
      return typeof(days)=='number'?days:false;
     },
    
     setslider:function(id,v){
      var o=this.o(id);
      if (o&&typeof(v)=='number'&&v>=0&&v<=1){
       this.sliderdown(null,o,this.pos(o.bar)[o.mde[2]]+o.bw*v);
      }
     },
    
     sliderdown:function(e,o,mse){
      var mse=mse||this.mse(e)[o.mde[2]],p=this.pos(o.bar)[o.mde[2]],p=Math.min(Math.max(mse-p,0),o.bw),f=this.int(o.cursor,o.mde[0]),t=p-o.cw+o.os;
      this.ani(o,o.cursor,f,t,p/o.bw,'dly');
     },
    
     slidedown:function(e,o){
      o.xy=this.mse(e)[o.mde[2]];
      o.drag=true;
      this.ertn(e);
     },
    
     slidemove:function(e,o){
      if (o.drag){
       var xy=this.mse(e)[o.mde[2]],p=Math.min(Math.max(this.int(o.cursor,o.mde[0])+xy-o.xy,o.os-o.cw),o.bw+o.os-o.cw),v=(p-o.os+o.cw)/o.bw;
       o.cursor.style[o.mde[0]]=p+'px';
       this.cookieset(o,v);
       this.rtn(v,o);
       o.xy=xy;
       this.ertn(e);
      }
     },
    
    // MinMax Functions
     minmax:function(o){
      var mde=this.mode(o.Mode),id=o.SlideID,nme=id+'=',p=document.getElementById(id),clds=this.clds(p)
      if (clds.length>2){
       var b=clds[0],bw=this.int(b,mde[1]),os=this.int(b,mde[0]),ms=o.AnimateDuration,cw=this.int(clds[1],mde[1])/2,days=this.days(o),ck=this.cookie(nme),v=days&&ck?ck.split(','):this.minmaxv(o.StartValue),obj;
       clds[2].style[mde[1]]=cw*2+'px';
       zxcSliderMinMaxSwab['zxc'+id]=obj={
        p:p,
        nme:nme,
        mde:mde,
        bar:b,
        bw:bw,
        os:os,
        cary:[clds[1],clds[2]],
        cursormin:clds[1],
        cursormax:clds[2],
        cw:cw,
        days:days,
        drag:false,
        ms:typeof(ms)=='number'?ms:1000,
        mms:bw,
        complete:o.Complete
       }
       clds[1].style[mde[0]]=os-cw+(bw-cw*2)*v[0]+'px';
       clds[2].style[mde[0]]=os+bw-cw-(bw-cw*2)*(1-v[1])+'px';
       if (typeof(obj.complete)=='function'){
        obj.complete(v[0]*1,v[1]*1,obj);
       }
       if (o.Drag===true){
        this.addevt(clds[1],'mousedown','minmaxdrag',obj,0);
        this.addevt(clds[2],'mousedown','minmaxdrag',obj,1);
        this.addevt(p,'mousemove','minmaxmove',obj);
        this.addevt(document,'mouseup','up',obj);
       }
       else {
        this.addevt(p,'mousedown','minmaxdown',obj);
       }
      }
     },
    
     minmaxv:function(v){
      v=typeof(v)=='object'&&v.constructor==Array?v:[],v=[this.v(v[0]),this.v(v[1])],v=v.sort();
      v[0]=v[0]+v[1]<=1?v[0]:1-v[1];
      return v;
     },
    
     setminmax:function(id,v){
      var o=this.o(id);
      if (o){
       v=this.minmaxv(v);
       this.ani(o,o.cary[0],this.int(o.cary[0],o.mde[0]),o.os-o.cw+(o.bw-o.cw*2)*v[0],1,'mm0');
       this.ani(o,o.cary[1],this.int(o.cary[1],o.mde[0]),o.os+o.bw-o.cw-(o.bw-o.cw*2)*v[1],1,'mm1');
       if (typeof(o.complete)=='function'){
        o.complete(v[0],v[1],o);
       }
      }
     },
    
     minmaxdown:function(e,o,nu){
      var xy=this.mse(e)[o.mde[2]],min=Math.abs(xy-(this.pos(o.cary[0])[o.mde[2]]+o.cw)),max=Math.abs(xy-(this.pos(o.cary[1])[o.mde[2]]+o.cw)),ud=min<max?0:1,p=xy-this.pos(o.p)[o.mde[2]]-o.cw;
      this.ani(o,o.cary[ud],this.int(o.cary[ud],o.mde[0]),(ud==0?Math.min(Math.max(p,o.os-o.cw),this.int(o.cary[1],o.mde[0])-o.cw*2):Math.min(Math.max(p,this.int(o.cary[0],o.mde[0])+o.cw*2),o.bw+o.os-o.cw)),1,'mm');
     },
    
     minmaxdrag:function(e,o,nu){
      o.xy=this.mse(e)[o.mde[2]];
      o.nu=nu;
      o.drag=true;
      this.ertn(e);
     },
    
     minmaxmove:function(e,o){
      if (o.drag){
       var xy=this.mse(e)[o.mde[2]],ud=o.nu==0,c=o.cary[o.nu],c1=o.cary[ud?1:0],min=ud?this.int(c1,o.mde[0])-o.cw*2:o.bw+o.os-o.cw,max=o.nu==0?o.os-o.cw:this.int(c1,o.mde[0])+o.cw*2;
       c.style[o.mde[0]]=Math.min(Math.max(this.int(c,o.mde[0])+xy-o.xy,max),min)+'px';
       this.minmaxrtn(o);
       o.xy=xy;
       this.ertn(e);
      }
     },
    
     minmaxrtn:function(o){
      var v=[(this.int(o.cary[0],o.mde[0])+o.cw-o.os)/(o.bw-o.cw*2),(this.int(o.cary[1],o.mde[0])+o.cw-o.os-o.cw*2)/(o.bw-o.cw*2)];
      this.cookieset(o,v);
      if (typeof(o.complete)=='function'){
       o.complete(v[0],v[1],o);
      }
     },
    
    // Swab Functions
     swab:function(o){
      var mde=this.mode(o.Mode),id=o.SwabID,nme=id+'=',p=document.getElementById(id),c=this.clds(p)[0],cw,swabs=this.bycls(o.SwabClass,p),ms=o.AnimateDuration,v=o.StartValue,days=this.days(o),ck=this.cookie(nme),v=days&&ck?ck*1:v,v=swabs[v]?v:0,obj,ary=[],z0=0;
      if (c&&swabs[0]){
       cw=this.int(c,mde[1])/2;
       c.style[mde[0]]=swabs[v][mde[3]]+(this.int(swabs[v],mde[1])-cw*2)/2+'px';
       zxcSliderMinMaxSwab['zxc'+id]=obj={
        nme:nme,
        mde:mde,
        cursor:c,
        cw:cw,
        swabs:swabs,
        lst:swabs[swabs.length-1],
        nu:v,
        days:days,
        ms:typeof(ms)=='number'?ms:1000,
        mms:this.int(swabs[0],mde[1]),
        m:false,
        drag:false,
        complete:o.Complete
       }
       if (typeof(obj.complete)=='function'){
        obj.complete(v*1,obj);
       }
       if (o.Drag){
        this.addevt(c,'mousedown','swabdrag',obj);
        this.addevt(p,'mousemove','swabmove',obj);
        this.addevt(document,'mouseup','up',obj);
       }
       else {
        for (;z0<swabs.length;z0++){
         this.addevt(swabs[z0],'mouseup','swabdown',obj,z0);
        }
       }
      }
     },
    
     setswab:function(id,v){
      var o=this.o(id);
      if (o&&o.swabs[v]){
       this.swabdown(null,o,v);
      }
     },
    
     swabdrag:function(e,o,nu){
      o.xy=this.mse(e)[o.mde[2]];
      o.drag=true;
      this.ertn(e);
     },
    
     swabmove:function(e,o){
      if (o.drag){
       var xy=this.mse(e)[o.mde[2]],xy=Math.min(Math.max(xy,this.pos(o.swabs[0])[o.mde[2]]+o.cw),this.pos(o.lst)[o.mde[2]]+this.int(o.lst,o.mde[1])),nu=0,z0=0;
       o.cursor.style[o.mde[0]]=this.int(o.cursor,o.mde[0])+xy-o.xy+'px';
       for (var nu=0,z0=0;z0<o.swabs.length;z0++){
        p=this.pos(o.swabs[z0])[o.mde[2]];
        if (xy>p){
         nu=z0;
        }
       }
       if (nu!=o.nu){
        o.nu=nu;
        this.rtn(nu,o);
       }
       o.xy=xy;
       this.ertn(e);
      }
     },
    
     swabdown:function(e,o,nu){
      var f=this.int(o.cursor,o.mde[0]),t=o.swabs[nu][o.mde[3]]+(this.int(o.swabs[nu],o.mde[1])-o.cw*2)/2;
      this.ani(o,o.cursor,f,t,nu,'dly');
     },
    
     bycls:function (nme,el){
      for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
       if(reg.test(els[z0].className)){
        ary.push(els[z0]);
       }
      }
      return ary;
     },
    
    // common functions
     o:function(id){
      return zxcSliderMinMaxSwab['zxc'+id];
     },
    
     ani:function(o,c,f,t,v,to){
      clearTimeout(o[to]);
      this.animate(o,c,f,t,new Date(),o.ms*Math.abs((t-f)/o.mms),v,to);
     },
    
     animate:function(o,c,f,t,srt,mS,v,to){
      var oop=this,mde=o.mde[0],ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       c.style[mde]=now+'px';
      }
      if (ms<mS){
       o[to]=setTimeout(function(){ oop.animate(o,c,f,t,srt,mS,v,to); },10);
      }
      else {
       c.style[mde]=t+'px';
       if (to=='dly'){
        this.cookieset(o,v);
        this.rtn(v,o);
       }
       else {
        this.minmaxrtn(o);
       }
      }
     },
    
     pos:function(o){
      var rtn=[0,0];
      while(o){
       rtn[0]+=o.offsetLeft;
       rtn[1]+=o.offsetTop;
       o=o.offsetParent;
      }
      return rtn;
     },
    
     mse:function(e){
      if (window.event){
       var docs=[document.body.scrollLeft,document.body.scrollTop];
       if (!document.body.scrollTop){
        docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
       }
       return [e.clientX+docs[0],e.clientY+docs[1]];
      }
      return [e.pageX,e.pageY];
     },
    
     clds:function(p){
      var clds=p.childNodes;ary=[],z0=0;
      for (;z0<clds.length;z0++){
       if (clds[z0].nodeType==1){
        ary.push(clds[z0]);
       }
      }
      return ary;
     },
    
     mode:function(mde){
      return typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','height',1,'offsetTop']:['left','width',0,'offsetLeft'];
     },
    
     v:function(v){
      return typeof(v)=='number'&&v>=0&&v<=1?v:0;
     },
    
     rtn:function(nu,o){
      if (typeof(o.complete)=='function'){
       o.complete(nu,o);
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](e,p,p1);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](e,p,p1); });
      }
     },
    
     int:function(o,p){
      return parseInt(this.style(o,p));
     },
    
     style:function(o,p){
      if (o.currentStyle){
       return o.currentStyle[p.replace(/-/g,'')];
      }
      return document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
     },
    
     up:function(e,o){
      if (o.drag){
       if (o.swabs){
        var f=this.int(o.cursor,o.mde[0]);
        this.ani(o,o.cursor,this.int(o.cursor,o.mde[0]),o.swabs[o.nu][o.mde[3]]+(this.int(o.swabs[o.nu],o.mde[1])-o.cw*2)/2,o.nu,'dly');
       }
       o.drag=false;
      }
     },
    
     ertn:function(e){
      if(e.stopPropagation){
       e.stopPropagation();
      }
      if (!window.event){
       e.preventDefault();
      }
      e.cancelBubble=true;
      e.cancel=true;
      e.returnValue=false;
      return false;
     },
    
     cookie:function(nme){
      var re=new RegExp(nme+'[^;]+','i');
      if (document.cookie.match(re)){
       return document.cookie.match(re)[0].split("=")[1];
      }
      return null
     },
    
     cookieset:function(o,v){
      if (o.days){
       document.cookie=o.nme+v+';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path=/';
      }
     }
    
    }
    
    
    
    function Init(){
    
    zxcSliderMinMaxSwab.minmax({
     SlideID:'mm1',        // the unique ID name of the slider parent DIV.                                      (string)
     Mode:'Horizontal',    //(optional) the mode of execution, 'Horizontal' or 'Vertical'.                      (string, default = 'Horizontal')
     StartValue:[minpass/highestprice,maxpass/highestprice],       //(optional) the initial position of the cursor as a number between 0 and 1.         (number, default = 0)
     Drag:true,
     Complete:function(min,max,obj){ // see Note 2.
      document.getElementById('ipmin').value=Math.round(min*highestprice);
      document.getElementById('ipmax').value=Math.round(max*highestprice);
     }
    });
    
    
    
    
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
     </script>
    
    </head>
    
    <body>
    <form>
    From:<br>
    <input readonly="readonly" size="5" name="minprice" id="ipmin" style="background-color: white;color:black;border:0px solid White" />
    
    To:<br>
    <input readonly="readonly" size="5" name="maxprice" id="ipmax" style="background-color: white;color:black;border:0px solid White;text-align:right" />
    
      <div id="mm1">
       <div class="minmaxbar" ></div>
       <div class="minmaxcursor">1</div>
       <div class="minmaxcursor">2</div>
      </div>
    <input type="submit" value="Filter">
    </form>
    </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
    •