iphone unlock button slide back?

**dc2698** · 07-14-2009, 03:43 PM

hi all, i would like to make a dhtml slider that acts like the iphone unlock button.

i found many horizontal sliders (i.e. http://www.daftlogic.com/sandbox-jav...er-control.htm) but none will slide back on mouse out......

....anyone with a simple solution please?

thanks a bunch in advance!

**vwphillips** · 07-14-2009, 04:17 PM

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[*/
#scrollbarH {
  position:absolute;left:220px;top:20px;width:440px;height:20px;
}

.bar {
  position:absolute;left:20px;top:0px;width:400px;height:20px;background-Color:#CCFFFF;
}
.slide {
  position:absolute;left:0px;top:0px;width:100px;height:20px;background-Color:#33CCFF;
}
.lft {
  position:absolute;left:0px;top:0px;width:20px;height:20px;background-Color:#6699FF;
}

.right {
  position:absolute;left:420px;top:0px;width:20px;height:20px;background-Color:#6699FF;
}

#scrollbarV {
  position:absolute;left:640px;top:60px;width:20px;height:340px;
}

.barV {
  position:absolute;left:0px;top:20px;width:20px;height:200px;background-Color:#CCFFFF;
}
.slideV {
  position:absolute;left:0px;top:0px;width:20px;height:30px;background-Color:#33CCFF;
}
.lftV {
  position:absolute;left:0px;top:0px;width:20px;height:20px;background-Color:#6699FF;
}

.rightV {
  position:absolute;left:0px;top:220px;width:20px;height:20px;background-Color:#6699FF;
}

#tst {
  position:relative;overflow:hidden;left:0px;top:0px;width:300px;height:400px;background-Color:#FFFFCC;
}

#tstparent {
 position:relative;overflow:hidden;left:350px;top:120px;width:100px;height:100px;border:solid black 1px;
}
/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
// Custom Scroll Bars III (13-July-2009) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk

// A lightweight 'Custom Scroll Bar' script which return the slide position to a specified function
// or scrolls a specified element.
// When a Slide is not required a dummy will be made.
// There may be as many applications on a page as required.

// 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)
//               or the unique ID name of the element to scroll.             (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.39K) - 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.obj=document.getElementById(fun);
 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 (this.obj){ this.Scroll(pos/this.max); }
  else 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.Scroll=function(pos){
 var wh=this.mde=='top'?'height':'width';
 this.obj.style[this.mde]=-(zxcLT(this.obj,wh)-zxcLT(this.obj.parentNode,wh))*pos+'px';
}

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 (this.obj){ this.Scroll(zxcLT(this.slide,this.mde)/this.max); }
  else 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">
/*<![CDATA[*/

function MyFunctionH(pos){
document.Show.Show0.value=pos;
}

function Rtn(obj,oop){
 var e=window.event||arguments.callee.caller.arguments[0];
 if (zxcCkEventObj(e,obj)) oop.slide.style.left='0px';


}
function zxcCkEventObj(e,p){
 if (!e) var e=window.event;
 e.cancelBubble=true;
 if (e.stopPropagation) e.stopPropagation();
 if (e.target) eobj=e.target;
 else if (e.srcElement) eobj=e.srcElement;
 if (eobj.nodeType==3) eobj=eobj.parentNode;
 var eobj=(e.relatedTarget)?e.relatedTarget:(e.type=='mouseout')?e.toElement:e.fromElement;
 if (!eobj||eobj==p) return false;
 while (eobj.parentNode){
  if (eobj==p) return false;
  eobj=eobj.parentNode;
 }
 return true;
}

/*]]>*/
</script>
</head>

<body onload="S=zxcScrollBar('h','MyFunctionH','slide','lft','right');">
<div class="parent">

<div id="scrollbarH" onmouseout="Rtn(this,S);">
 <div class="bar" style="">
  <div class="slide" id="slide" ></div>
 </div>
 <div class="lft" id="lft" ></div>
 <div class="right" id="right" ></div>
</div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:420px;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>

</body>

</html>

**dc2698** · 07-15-2009, 08:26 AM

Originally Posted by vwphillips

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[*/
#scrollbarH {
  position:absolute;left:220px;top:20px;width:440px;height:20px;
}

.bar {
  position:absolute;left:20px;top:0px;width:400px;height:20px;background-Color:#CCFFFF;
}
.slide {
  position:absolute;left:0px;top:0px;width:100px;height:20px;background-Color:#33CCFF;
}
.lft {
  position:absolute;left:0px;top:0px;width:20px;height:20px;background-Color:#6699FF;
}

.right {
  position:absolute;left:420px;top:0px;width:20px;height:20px;background-Color:#6699FF;
}

#scrollbarV {
  position:absolute;left:640px;top:60px;width:20px;height:340px;
}

.barV {
  position:absolute;left:0px;top:20px;width:20px;height:200px;background-Color:#CCFFFF;
}
.slideV {
  position:absolute;left:0px;top:0px;width:20px;height:30px;background-Color:#33CCFF;
}
.lftV {
  position:absolute;left:0px;top:0px;width:20px;height:20px;background-Color:#6699FF;
}

.rightV {
  position:absolute;left:0px;top:220px;width:20px;height:20px;background-Color:#6699FF;
}

#tst {
  position:relative;overflow:hidden;left:0px;top:0px;width:300px;height:400px;background-Color:#FFFFCC;
}

#tstparent {
 position:relative;overflow:hidden;left:350px;top:120px;width:100px;height:100px;border:solid black 1px;
}
/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
// Custom Scroll Bars III (13-July-2009) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk

// A lightweight 'Custom Scroll Bar' script which return the slide position to a specified function
// or scrolls a specified element.
// When a Slide is not required a dummy will be made.
// There may be as many applications on a page as required.

// 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)
//               or the unique ID name of the element to scroll.             (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.39K) - 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.obj=document.getElementById(fun);
 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 (this.obj){ this.Scroll(pos/this.max); }
  else 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.Scroll=function(pos){
 var wh=this.mde=='top'?'height':'width';
 this.obj.style[this.mde]=-(zxcLT(this.obj,wh)-zxcLT(this.obj.parentNode,wh))*pos+'px';
}

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 (this.obj){ this.Scroll(zxcLT(this.slide,this.mde)/this.max); }
  else 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">
/*<![CDATA[*/

function MyFunctionH(pos){
document.Show.Show0.value=pos;
}

function Rtn(obj,oop){
 var e=window.event||arguments.callee.caller.arguments[0];
 if (zxcCkEventObj(e,obj)) oop.slide.style.left='0px';


}
function zxcCkEventObj(e,p){
 if (!e) var e=window.event;
 e.cancelBubble=true;
 if (e.stopPropagation) e.stopPropagation();
 if (e.target) eobj=e.target;
 else if (e.srcElement) eobj=e.srcElement;
 if (eobj.nodeType==3) eobj=eobj.parentNode;
 var eobj=(e.relatedTarget)?e.relatedTarget:(e.type=='mouseout')?e.toElement:e.fromElement;
 if (!eobj||eobj==p) return false;
 while (eobj.parentNode){
  if (eobj==p) return false;
  eobj=eobj.parentNode;
 }
 return true;
}

/*]]>*/
</script>
</head>

<body onload="S=zxcScrollBar('h','MyFunctionH','slide','lft','right');">
<div class="parent">

<div id="scrollbarH" onmouseout="Rtn(this,S);">
 <div class="bar" style="">
  <div class="slide" id="slide" ></div>
 </div>
 <div class="lft" id="lft" ></div>
 <div class="right" id="right" ></div>
</div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:420px;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>

</body>

</html>

Thank you, vwphillips, for your quick reply! However, when I tested your script when I moved my mouse out quick enough the slide handle wouldn't bounce back. I tried to use 'mouseup' and 'onmouseup' but this way when I clicked on the handle it will stick to my mouse movement.

Is there any version that works with the mouseup and onmouseup events?

Thanks a bunch in advance!

**dc2698** · 07-15-2009, 08:34 AM

Actually I found two links that have what I need..........but TOO BAD both won't work on IE6/7:

http://www.aboone.com/?p=34
http://www.marcofolio.net/webdesign/...nd_jquery.html

I really hope either one of these two DHTML scripts to work on IE6/7..........but I think I need to know the JQuery very much to fix.........

**vwphillips** · 07-15-2009, 09:22 AM

Code:

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 (this.obj){ this.Scroll(pos/this.max); }
  else if (window[this.fun]) window[this.fun](pos/this.max);
  this.to=setTimeout(function(oop){return function(){oop.scrollLR(e,ud);}}(this),10);
 }
 else this.slide.style.left='0px';

}



zxcScroll.prototype.up=function(ev){
  this.slide.style.left='0px';
 if (this.drag){
  this.drag=false;
  document.onselectstart=null;
 }
}

Thread: iphone unlock button slide back?

Thread Tools

Search Thread

iphone unlock button slide back?

Bookmarks

Bookmarks

Posting Permissions