...

View Full Version : Difficulty initializing location of slider bar handles



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



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

vwphillips
07-02-2012, 04:33 PM
http://www.vicsjavascripts.org.uk/SliderMinMaxSwab/SliderMinMaxSwab.htm

or


<!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>

redstang423
07-02-2012, 07:29 PM
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!

vwphillips
07-03-2012, 09:23 AM
see the modified code on post 2


<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum