PDA

View Full Version : 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-javascript-slider-control.htm) but none will slide back on mouse out......:confused:....anyone with a simple solution please?

thanks a bunch in advance!

vwphillips
07-14-2009, 04:17 PM
<!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
<!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/the_iphone_unlock_screen_in_xhtml_css_and_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
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;
}
}