Slider without a default tab position

@vwphillipsApr 09.2012 — #

[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[*/
 
 .bar {
 position:absolute;overflow:hidden;left:100px;top:100px;width:400px;height:30px;background-Color:#FFFFCC;
 }
 
 .bar DIV {
 position:absolute;left:-100px;top:0px;width:40px;height:30px;background-Color:#FFCC66;
 }
 
 .barV {
 position:absolute;overflow:hidden;left:20px;top:100px;width:20px;height:430px;background-Color:#FFFFCC;
 }
 
 .barV DIV {
 position:absolute;left:0px;top:-100px;width:40px;height:30px;background-Color:#FFCC66;
 }
 
 /*]]>*/
 </style>
 
 </head>
 
 <body>
 <div id="Bar1" class="bar" ><div></div></div>
 <input id="ip1" />
 <div id="BarV" class="barV" ><div></div></div>
 <span id="ipV" ></span>
 
 <script type="text/javascript">
 /*<![CDATA[*/
 var bar={
 
 init:function(o){
 var bar=document.getElementById(o.BarID),mde=bar.offsetWidth>bar.offsetHeight;
 this.addevt(bar,'mouseup','show',{obj:bar,slide:bar.getElementsByTagName('DIV')[0],xy:mde?0:1,mde:mde?'left':'top',wh:mde?'offsetWidth':'offsetHeight',ip:document.getElementById(o.IPID)});
 },
 
 show:function(e,p){
 var lft=this.mse(e)[p.xy]-this.pos(p.obj)[p.xy];
 p.slide.style[p.mde]=Math.min(Math.max(lft-p.slide[p.wh]/2,0),p.obj[p.wh]-p.slide[p.wh])+'px'
 if (p.ip){
 p.ip[p.ip.nodeName.toUpperCase()=='INPUT'?'value':'innerHTML']=lft/p.obj[p.wh]*100;
 }
 },
 
 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];
 },
 
 pos:function(obj){
 var rtn=[0,0];
 while(obj){
 rtn[0]+=obj.offsetLeft;
 rtn[1]+=obj.offsetTop;
 obj=obj.offsetParent;
 }
 return rtn;
 },
 
 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); });
 }
 
 
 }
 
 bar.init({BarID:'Bar1',IPID:'ip1'});
 bar.init({BarID:'BarV',IPID:'ipV'});
 
 /*]]>*/
 </script>
 </body>
 
 </html>[/CODE]

Slider without a default tab position

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Slider without a default tab position

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴