Can anyone help me finding a free script allowing or denying access to a site upon answering a single yes/no-question? Think of the pop ups that prevent minors from entrance to a **** site.
Many thanks,
Rob
Printable View
Can anyone help me finding a free script allowing or denying access to a site upon answering a single yes/no-question? Think of the pop ups that prevent minors from entrance to a **** site.
Many thanks,
Rob
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[*/
#popup {
position:fixed;z-Index:101;left:100px;top:0px;width:200px;height:200px;background-Color:#FFCC66;text-Align:center;
}
.mask {
position:fixed;z-Index:100;background-Color:#CCFFFF;
/* Moz */
opacity: .5;
/* IE5-7 */
filter: alpha(opacity=50);
/* IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
/*]]>*/
</style></head>
<body>
<input type="button" name="" value="Open" onclick="zxcPopUp.Open('popup',true);"/>
<input type="button" name="" value="Close" onclick="zxcPopUp.Open('popup',false);"/>
<div id="popup" >
<input type="button" name="" value="No" onclick="zxcPopUp.Open('popup',false);"/>
<input type="button" name="" value="Yes" onclick="window.top.location='http://www.vicsjavascripts.org/';"/>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Pop Up (29-July-2014)
// by: Vic Phillips - http://www.vicsjavascripts.org/
var zxcPopUp={
Open:function(id,ud){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
this.animate(o,o.a[0],o.a[0][2],ud?(o.mk.offsetTop-o.h)/2:-o.h,new Date(),o.ms);
o.a[1][2]=(o.mk.offsetLeft-o.w)/2;
o.p.style.left=o.a[1][2]+'px';
o.msk.style.height=o.mk.offsetTop+'px';
o.ud=ud;
}
},
init:function(o){
var id=o.PopUpID,ms=o.Animate,s=o.OpenDelay,mc=o.MaskClass,p=document.getElementById(id),mk=document.createElement('DIV'),msk;
if (p){
p.style.left=p.style.top='-3000px';
mk.style.position='fixed';
msk=mk.cloneNode(false);
msk.style.left=msk.style.top=msk.style.height='0px';
msk.style.width='100%';
msk.className=mc;
mc?document.body.appendChild(msk):null;
mk.style.bottom=mk.style.right=mk.style.width=mk.style.height='0px';
document.body.appendChild(mk);
o.mk=mk;
o.msk=msk;
o.p=p;
o.w=p.offsetWidth;
o.h=p.offsetHeight;
o.a=[[p,'top',-p.offsetHeight],[p,'left']];
o.ud=false;
o.ms=typeof(ms)=='number'&&ms>2?ms:1000;
this['zxc'+id]=o;
this.addevt(msk,'click','Open',id,false);
this.addevt(window,'resize','resize',o);
typeof(s)=='number'&&s>=0?o.to=setTimeout(function(){ zxcPopUp.Open(id,true); },s):null;
}
},
resize:function(o){
if (o.ud){
this.animate(o,o.a[0],o.a[0][2],(o.mk.offsetTop-o.h)/2,new Date(),o.ms);
this.animate(o,o.a[1],o.a[1][2],(o.mk.offsetLeft-o.w)/2,new Date(),o.ms);
o.msk.style.height=o.mk.offsetTop+'px';
}
},
animate:function(o,a,f,t,srt,mS,s,i){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[2]=n;
a[0].style[a[1]]=a[2]+'px';
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
}
else {
a[2]=t;
a[0].style[a[1]]=t+'px';
o.ud?null:o.msk.style.height='0px';
}
},
addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
}
}
zxcPopUp.init({
PopUpID:'popup', // the unique ID name of the PopUp DIV. (string)
MaskClass:'mask', //(optional) the class name of the mask. (string, default = no mask)
Animate:1000, //(optional) the animation duration in milliseconds. (number, default = 1000)
OpenDelay:2000 //(optional) the initial open delay in milliseconds. (number, default = no initial open)
});
/*]]>*/
</script></body>
</html>
Hi Vic,
Your access-script works fine and the way it comes up is highly elegant. Thank you very much. Just the excellent way it performs and the lot of code you wrote encourage me to ask you the following: Is it possible to make it work on the homepage in stead of a prior page? In such a way that the No-button directs back to the place the visitor came from or freezes the semi-hidden fashion, and the Yes-button clears up the page and gives full access to the site? Isn't that the most logic way to use a pop up?
Thank you very much in advance,
Rob
Hi Rob,
I was about to post a script when I saw that Vic had already proposed a nice script, for which you thanked him. So I refrained from posting.
But in view of your last question, my proposal may be of some relevance:
Code:<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> </title>
<script>
var original_inner, answer;
function go_to_site() {
original_inner=document.getElementById("original_inner").innerHTML;document.getElementById("original_inner").innerHTML="Permission granted to visit the <a href='javascript: void(0)' onclick='window.open(\"http://www.google.com\"); document.getElementById(\"original_inner\").innerHTML=original_inner; return false; ' >Google site<\/a>.";
}
function access()
{
answer=prompt('Granting or refusing permission to go to the Google site.\nEnter YES or NO')
if(answer=='YES' || answer=='Yes' || answer=='yes'){go_to_site(); }
else if(answer=='NO' || answer=='No' || answer=='no'){alert("You said you don't want your childrem to visit the Google site.")}
else {alert('Wrong answer or no answer.')}
}
</script>
</head>
<body>
<div id="original_inner">Granting or refusing permission to go to the <a href="javascript: void(0)" onclick="access(); return false">Google site</a></div>
</body>
</html>
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[*/
#popup {
position:fixed;z-Index:101;left:100px;top:0px;width:200px;height:200px;background-Color:#FFCC66;text-Align:center;
}
.mask {
position:fixed;z-Index:100;background-Color:#CCFFFF;
/* Moz */
opacity: .5;
/* IE5-7 */
filter: alpha(opacity=50);
/* IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
/*]]>*/
</style></head>
<body>
<input type="button" name="" value="Open" onclick="zxcPopUp.Open('popup',true);"/>
<input type="button" name="" value="Close" onclick="zxcPopUp.Open('popup',false);"/>
<div id="popup" >
<input type="button" name="" value="No" onclick="document.getElementById('popup').style.top='-300px';"/>
<input type="button" name="" value="Yes" onclick="zxcPopUp.Open('popup',false);"/>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Pop Up (29-July-2014)
// by: Vic Phillips - http://www.vicsjavascripts.org/
var zxcPopUp={
Open:function(id,ud){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
this.animate(o,o.a[0],o.a[0][2],ud?(o.mk.offsetTop-o.h)/2:-o.h,new Date(),o.ms);
o.a[1][2]=(o.mk.offsetLeft-o.w)/2;
o.p.style.left=o.a[1][2]+'px';
o.msk.style.height=o.mk.offsetTop+'px';
o.ud=ud;
}
},
init:function(o){
var id=o.PopUpID,ms=o.Animate,s=o.OpenDelay,mc=o.MaskClass,p=document.getElementById(id),mk=document.createElement('DIV'),msk;
if (p){
p.style.left=p.style.top='-3000px';
mk.style.position='fixed';
msk=mk.cloneNode(false);
msk.style.left=msk.style.top=msk.style.height='0px';
msk.style.width='100%';
msk.className=mc;
mc?document.body.appendChild(msk):null;
mk.style.bottom=mk.style.right=mk.style.width=mk.style.height='0px';
document.body.appendChild(mk);
o.mk=mk;
o.msk=msk;
o.p=p;
o.w=p.offsetWidth;
o.h=p.offsetHeight;
o.a=[[p,'top',-p.offsetHeight],[p,'left']];
o.ud=false;
o.ms=typeof(ms)=='number'&&ms>2?ms:1000;
this['zxc'+id]=o;
this.addevt(msk,'click','Open',id,false);
this.addevt(window,'resize','resize',o);
typeof(s)=='number'&&s>=0?o.to=setTimeout(function(){ zxcPopUp.Open(id,true); },s):null;
}
},
resize:function(o){
if (o.ud){
this.animate(o,o.a[0],o.a[0][2],(o.mk.offsetTop-o.h)/2,new Date(),o.ms);
this.animate(o,o.a[1],o.a[1][2],(o.mk.offsetLeft-o.w)/2,new Date(),o.ms);
o.msk.style.height=o.mk.offsetTop+'px';
}
},
animate:function(o,a,f,t,srt,mS,s,i){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[2]=n;
a[0].style[a[1]]=a[2]+'px';
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
}
else {
a[2]=t;
a[0].style[a[1]]=t+'px';
o.ud?null:o.msk.style.height='0px';
}
},
addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
}
}
zxcPopUp.init({
PopUpID:'popup', // the unique ID name of the PopUp DIV. (string)
MaskClass:'mask', //(optional) the class name of the mask. (string, default = no mask)
Animate:1000, //(optional) the animation duration in milliseconds. (number, default = 1000)
OpenDelay:2000 //(optional) the initial open delay in milliseconds. (number, default = no initial open)
});
/*]]>*/
</script></body>
</html>
Hi Vic,
Once again thank you very much. The script works fine now and can be styled easily by css. It refuses and allows entrance as required. However, in case of "no" the page freezes but after one arbitrary click the mask will turn up and the entry is free. You are just one tiny little click from the perfect script!
Yet I am applying the script as it is. The warning is clear and it's the repsonsibility of the visitors whether to proceed or not. But if you like to fix that bug I would love to adapt it.
Once again: thank you very much.
Regards,
Rob
Hi Arie,
Thank you very much for your script. As a simple developer I am deeply impressed by what encoders can accomplish. However, the functioning of your script seems to fit better in a parents-child strategy of dealing with the internet. In my case - or that of the organsation I am making this site for - there is no such strategy. There is only need for a barrier letting random people (kids among them) think twice before entering.
Once again: thank you very much.
Regards,
Rob