PDA

View Full Version : Resolved Sticky Note - Closing another open layer "OnClick"



Luys
02-03-2011, 02:20 PM
1) Script Title: Sticky Note script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/stickynote.htm

3) Describe problem: Hi all!
I would like to run several instances of this script, that is, to have two or more window layers (of different sizes and background colors) for two or more purposes, obviously not open at the same time. I don't know how to make this...
The main obstacle is how to close one opened layer automatically when I press on web page the link to open another window layer. Any ideas?

Thanks in advance for your help.

Luys

ddadmin
02-03-2011, 10:54 PM
Hmm this is a rather old script- the perfect candidate for a rewrite that incorporates such a feature. Please check back on DD in a week or so. :)

Luys
02-04-2011, 12:16 PM
Thank you very much, ddadmin, for your interest!

For my part, I think it has some untapped potential: I like from this script the crossbrowser compatibility, the centered window and also the persistence of the object against the web page scroll. I do not lose the same page where I am and yet I could embed multiple items using iframes.
There is an issue or problem regarding the autohidebox function: if I close manually a popup window that has to be automatically closed and next I press on a link calling function initfunction(), for example, the setTimeout for closing the window is still running and terminate the new popup window suddenly... There is a way to combine the delay with a specific link?
Finally, if I embed one iframe on this hidden box window, can anyone tell me how to show this iframe from the beginning (flash, etc...) once I call the displayfadeinbox function and then is visible to user for the first time?
So many questions for me! ;-)

Thank you all for your answers.

Luys

vwphillips
02-04-2011, 04:20 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">

.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>

Luys
02-05-2011, 12:32 PM
Thank you, vwphillips. I think code scripting is your cup of tea! I will visit your site often, I promise.
New features and the up to down animation...

There is no limit on the number of "fadeinboxes", is not it? Excuse me, I will try myself, but what is the correct way to use links instead of buttons?

"Grącies" :)

Luys

P.S.: If no objection, I repeat again the question above: Is there any way for the iframe file being loaded from the disk cache when the page that contains it becomes visible, like in this script?

vwphillips
02-05-2011, 02:45 PM
you can attach the event call to any object
but if it is a link you need a return false


<a href="#" onmouseup="SN1.Show(0); return false" >Fade Box 1</a>


for the iframe


<div class="fadeinbox" >

<iframe src="http://www.itv-f1.com/home.aspx" width="200" height="200" frameborder="0" onload="SN1.Show(0)"></iframe>
<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>


see

http://www.vicsjavascripts.org.uk/StickyNote/StickyNote.htm

Luys
02-05-2011, 10:36 PM
Thank you so much, Vic, for your quick answers and help. I have no words...

Luys