Advanced Search

Results 1 to 7 of 7

Thread: Sticky Note - Closing another open layer "OnClick"

  1. #1
    Join Date
    Jan 2011
    Posts
    51
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Default Sticky Note - Closing another open layer "OnClick"

    1) Script Title: Sticky Note script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...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
    Last edited by Luys; 02-05-2011 at 11:33 AM.

  2. #2
    Join Date
    Aug 2004
    Posts
    9,863
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

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

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    Luys (02-04-2011)

  4. #3
    Join Date
    Jan 2011
    Posts
    51
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Default

    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

  5. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    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>
    Last edited by vwphillips; 02-05-2011 at 10:18 AM. Reason: additional features
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #5
    Join Date
    Jan 2011
    Posts
    51
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Default

    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?
    Last edited by Luys; 02-05-2011 at 11:56 AM.

  7. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    you can attach the event call to any object
    but if it is a link you need a return false

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

    Code:
     <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/St...StickyNote.htm
    Last edited by vwphillips; 02-07-2011 at 09:47 AM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  8. #7
    Join Date
    Jan 2011
    Posts
    51
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Default

    Thank you so much, Vic, for your quick answers and help. I have no words...

    Luys

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •