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">
.fadeinbox {
position:absolute;
width: 300px;
left: 0;
top: 400px;
border: 2px solid black;
background-color: lightyellow;
padding: 4px;
z-index: 100;
visibility:hidden;
}
.fadebox2 {
background-color: red;
}
</style>
<script src="http://www.vicsjavascripts.org.uk/Animate/Animate.js" type="text/javascript">
// featured at http://www.vicsjavascripts.org.uk/Animate/Animate.htm
</script>
<script type="text/javascript">
/*<![CDATA[*/
// Sticky Note (05-Febuary-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk/
/*
*/
function zxcStickyNote(o){
var notes=this.bycls(o.ClassName,document.body,'DIV'),z0=0,hide,oop,nu=o.Show,nme=o.ClassName+'=',cookie=this.cookie(nme),s,days=o.DaysPersistance,days=typeof(days)=='number'?days:false,slide=typeof(o.SlideIn)=='string'?o.SlideIn.charAt(0).toUpperCase():false,slide=slide=='L'||slide=='R'?['left',slide,'offsetWidth']:slide=='T'||slide=='B'?['top',slide,'offsetHeight']:false;
this.nme=nme;
if (cookie&&days){
s=cookie.split(',');
nu=this.date()-s[1]<=days?-1:s[0]*1;
}
this.notes=[];
this.ms=typeof(o.FadeDuration)=='number'?o.FadeDuration:false;
this.delay=typeof(o.HideDelay)=='number'?o.HideDelay*1000:'X';
for (;z0<notes.length;z0++){
oop=this.ms?new zxcAnimate('opacity',notes[z0],0):false;
if (oop){
oop.Complete=function(){
if (this.data==0){
this.obj.style.visibility='hidden';
}
}
}
this.notes[z0]=[notes[z0],oop,slide?new zxcAnimate(slide[0],notes[z0]):false,null];
hide=this.bycls('hide',notes[z0],'*')[0];
if (hide){
this.addevt(hide,'mouseup','Hide',z0);
}
}
if (typeof(o.Fixed)=='boolean'&&o.Fixed){
this.addevt(window,'scroll','scroll');
}
this.nu=nu;
this.slide=slide;
oop=this;
if (typeof(o.DisplayEvery)=='number'){
setInterval(function(){ oop.Show(oop.nu); },o.DisplayEvery*1000);
}
if (typeof(nu)=='number'&&this.notes[nu]){
setTimeout(function(){ oop.Show(nu); },typeof(o.ShowDelay)=='number'?o.ShowDelay*1000:50);
}
}
zxcStickyNote.prototype={
Show:function(nu){
var op=this,z0=0,oop=this.notes[nu],wwhs=this.wwhs(),lft,top,type,date,m;
for (var z0=0;z0<this.notes.length;z0++){
this.Hide(z0);
}
if (oop){
lft=(wwhs[0]-oop[0].offsetWidth)/2+wwhs[2];
top=(wwhs[1]-oop[0].offsetHeight)/2+wwhs[3];
oop[0].style.position='absolute';
oop[0].style.left=lft+'px';
oop[0].style.top=top+'px';
if (oop[1]){
oop[1].animate(oop[1].data[0],100,this.ms,[0,100]);
}
if (oop[2]){
type=this.slide[1];
oop[2].animate((type=='T'?wwhs[3]:type=='B'?wwhs[3]+wwhs[1]:type=='L'?wwhs[2]:wwhs[2]+wwhs[1])-oop[0][this.slide[2]]*(type=='L'||type=='T'?1:-1),this.slide[0]=='top'?top:lft,this.ms,null,'s');
}
oop[0].style.visibility='visible';
this.nu=nu;
clearTimeout(oop[3]);
if (this.delay!='X'){
oop[3]=setTimeout(function(){ op.Hide(nu); },this.delay);
}
if (this.days){
document.cookie=this.nme+nu+','+this.date()+';expires='+(new Date(new Date().getTime()+500*86400000).toGMTString())+';path=/';
}
}
return false;
},
Hide:function(nu){
var oop=this.notes[nu];
clearTimeout(oop[3]);
if (oop[1]){
oop[1].animate(oop[1].data[0],0,this.ms,[0,100]);
}
else {
oop[0].style.visibility='hidden';
}
return false;
},
scroll:function(){
if (this.notes[this.nu]){
this.notes[this.nu][0].style.position='fixed';
}
},
bycls:function(nme,el,tag){
for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
},
wwhs:function(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
},
cookie:function(nme){
var split=document.cookie.split(';'),s,z0;
for(z0=0;z0<split.length;z0++){
s=split[z0];
while (s.charAt(0)==' '){
s=s.substring(1,s.length);
}
if (s.indexOf(nme)==0){
return s.substring(nme.length,s.length);
}
}
return null;
},
date:function(nu){
var date=new Date(),m=date.getMonth(),m=(m<10?'0':'')+m,d=date.getDate(),d=(d<10?'0':'')+d;
return date.getFullYear()+m+d;
}
}
/*]]>*/
</script>
</head>
<body>
<input type="button" name="" value="Fade Box 1" onmouseup="SN1.Show(0)"/>
<input type="button" name="" value="Fade Box 2" onmouseup="SN1.Show(1)"/>
<div class="fadeinbox" >
INSERT ANY HTML TO DISPLAY HERE. DO NOT REMOVE OUTER MOST DIV.<br>
Script © <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
<div align="right"><a href="#" class="hide" >Hide Box</a></div>
<!--
an event will be attached the element with class name 'hide' to hide the sticky note
-->
</div>
<div class="fadeinbox fadebox2" >
Fade Box 2
<div align="right"><a href="#" class="hide" >Hide Box</a></div>
</div>
<div style="height:2000px;" ></div>
<script type="text/javascript">
/*<![CDATA[*/
SN1=new zxcStickyNote({
ClassName:'fadeinbox', // the common class name of the sticky note DIVs. (string)
FadeDuration:500, //(optional) the fade duration in milli seconds. (number, default = no fade)
Show:0, //(optional) the sticky note index number to show on initialization. (number, default = no show on initialization)
ShowDelay:3, //(optional) show the sticky note after the specified seconds. (number, default = no hide)
HideDelay:5, //(optional) hide the sticky note after the specified seconds. (number, default = no hide)
SlideIn:'top', //(optional) slide the sticky note in from the top, bottom, left or right. (string, default = no slide in)
Fixed:true, //(optional) true = the sticky note top position will scroll on page scroll. (string, default = the note will be static)
// DaysPersistance:1, //(optional) sticky note will display again after DaysPersistance days. (number, default = display every time the page loads)
DisplayEvery:10 //(optional) display the sticky note every DisplayEvery seconds. (number, default = display once)
});
/*]]>*/
</script>
</body>
</html>
Sticky Note - Closing another open layer "OnClick"
Reply With Quote
Bookmarks