PDA

View Full Version : Form with a number scroller



jrheeder
02-13-2009, 11:53 AM
Hi there,

I recently introduced a feature to my website where you can select at amount and it would generate the cost of the total accumulated items. E.g. 1 Teddy will cost you $12 , 2 Teddies will cost you $20 etc. Now I find this method very annoying you have to type in the amount every time then click calculate just to find out how much it will cost you. So I would like to introduce a feature where you just use a form of a scroller within a form and it will auto calculate the cost based upon the field defined in the math code. Is this possible to intoduce this into a form? below is a picture of what I mean I would like to see.

http://img502.imageshack.us/my.php?image=sliderue1.jpg

Can anyone help
Thank you,
Jrheeder

vwphillips
02-14-2009, 10:10 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

<head>
<title></title>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">


<head>
<title></title>
<style type="text/css">
<!--
#scrollbarH {
position:relative;width:440px;height:100px;background-Color:#FFCC66
}

.bar {
position:absolute;left:20px;top:50px;width:400px;height:20px;background-Color:#CCFFFF;
}
.slide {
position:absolute;left:0px;top:-10px;width:10px;height:40px;background-Color:#33CCFF;
}
.text {
position:absolute;left:10px;top:10px;width:200px;height:20px;text-Align:left;font-Size:12px;
}

-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
// Custom Scroll Bars III (05-February-2009) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk

// Initialised by a BODY or window onloadevent call to function:
// zxcScrollBar('h','MyFunction','bar','lft','right');
// where:
// parameter 0 = the scroll bar type 'V' = vertical, 'H' = horizontal. (string, 'V' or 'H, default 'H')
// parameter 1 = the function to pass the position of the scroll bar slider. (string)
// parameter 2 = (optional) the unique id name of the bar slider. (string, a dummy will be made if not required)
// parameter 3 = (optional) the unique id name of the bar left control. (string)
// parameter 4 = (optional) the unique id name of the bar right control. (string)

// functional Code(3.19K) - NO NEED to Change

function zxcScrollBar(mde,fun,sid,lid,rid){
var oop=new zxcScroll(mde,fun,sid,lid,rid);
return oop;
}

function zxcScroll(mde,fun,sid,lid,rid){
this.mde=mde.charAt(0).toUpperCase()=='V'?'top':'left'
this.min=0;
this.slide=document.getElementById(sid);
if (this.slide){
this.max=zxcLT(this.slide.parentNode,this.mde=='top'?'height':'width')-zxcLT(this.slide,this.mde=='top'?'height':'width');
this.addevt(this.slide,'mousedown','down');
this.addevt(document,'mousemove','move');
this.addevt(document,'mouseup','up');
}
else {
var p=zxcES('DIV',{position:'absolute',left:'0px',top:'0px',width:'1000px',height:'1000px'});
this.slide=zxcES('DIV',{position:'absolute',left:'0px',top:'0px',width:'10px',height:'10px'},p);
this.max=990;
}
this.slide.oop=this;
this.lft=document.getElementById(lid);
if (this.lft){
this.addevt(this.lft,'mousedown','scrollLR',-1);
this.addevt(this.lft,'mouseup','scrollLR',false);
}
this.right=document.getElementById(rid);
if (this.right){
this.addevt(this.right,'mousedown','scrollLR',1);
this.addevt(this.right,'mouseup','scrollLR',false);
}
this.to=null;
this.fun=fun;
}

zxcScroll.prototype.scrollLR=function(e,ud){
clearTimeout(this.to);
if (ud){
var pos=Math.max(Math.min(zxcLT(this.slide,this.mde)+ud,this.max),0);
this.slide.style[this.mde]=pos+'px';
if (window[this.fun]) window[this.fun](pos/this.max);
this.to=setTimeout(function(oop){return function(){oop.scrollLR(e,ud);}}(this),10);
}
}

zxcScroll.prototype.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); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
else o['on'+t]=o[f];
}
}

zxcScroll.prototype.down=function(ev){
document.onselectstart=function(event){ window.event.returnValue=false; }
this.lastXY=this.mde=='left'?ev.clientX:ev.clientY;
this.pos=zxcLT(this.slide,this.mde);
this.drag=true;
if (!window.event) ev.preventDefault();
return false;
}

zxcScroll.prototype.move=function(ev){
if (this.drag){
var mse=this.mde=='left'?ev.clientX:ev.clientY;
this.pos=Math.min(Math.max(this.min,this.pos+mse-this.lastXY),this.max);
this.slide.style[this.mde]=this.pos+'px';
this.lastXY=mse;
if (window[this.fun]) window[this.fun](zxcLT(this.slide,this.mde)/this.max);
}
if (!window.event) ev.preventDefault();
return false;
}

zxcScroll.prototype.up=function(ev){
if (this.drag){
this.drag=false;
document.onselectstart=null;
}
}

function zxcLT(obj,p){
if (obj.currentStyle) return parseInt(obj.currentStyle[p]);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p));
}

function zxcES(ele,style,par,txt){
if (typeof(ele)=='string') ele=document.createElement(ele);
for (key in style) ele.style[key]=style[key];
if (par) par.appendChild(ele);
if (txt) ele.appendChild(document.createTextNode(txt));
return ele;
}



//-->
</script>
<script type="text/javascript">
<!--

function MyFunctionH(pos){
document.getElementById('tst').innerHTML='Teddys '+(Math.floor(14*pos)+1);
document.forms[0].cost.value=(Math.floor(14*pos)+1)*12;
}


//-->
</script></head>

<body onload="zxcScrollBar('h','MyFunctionH','slide');">
<form name="frm" >
<div id="scrollbarH">
<div class="text" id="tst" >Teddys 1</div>
<div class="bar" style="">
<div class="slide" id="slide" ></div>
</div>
</div>
<input name="cost" value="12">
</form>

</body>

</html>

jrheeder
02-19-2009, 01:21 PM
Thank you for the code, I will test it as soon as I can