...

View Full Version : Challenge initializing slider minimum value



redstang423
07-06-2012, 05:58 PM
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!




<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.co okie(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>

redstang423
07-06-2012, 06:01 PM
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.

vwphillips
07-06-2012, 06:35 PM
You have removed the credits and application notes

these can be found here

http://www.vicsjavascripts.org.uk/SliderMinMaxSwab/SliderMinMaxSwab.htm

redstang423
07-06-2012, 06:48 PM
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.

vwphillips
07-07-2012, 09:26 AM
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

redstang423
07-08-2012, 02:53 AM
Here's the relevant portion of the CSS and HTML:


.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:


<?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.

vwphillips
07-08-2012, 10:40 AM
this works for me


<!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.co okie(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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum