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

Code:

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

Thread: Form with a number scroller

Thread Tools

Search Thread

Form with a number scroller

Bookmarks

Bookmarks

Posting Permissions