Results 1 to 5 of 5

Thread: Fade-in/out message

  1. #1
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default Fade-in/out message

    Hi all.

    I have a form. When the submit button is clicked, I want a message to fade-in in a pop-up, wait for a pre-determined amount of time, and then fade out. Has anyone come across a script that will do that?

    Thanks.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,775
    Thanks
    2
    Thanked 411 Times in 406 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">
    /*<![CDATA[*/
    #message {
      position:absolute;z-Index:101;left:-3000px;top:-3000px;width:200px;height:200px;background-Color:#FFFF66;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <form action="#"  onsubmit="return Message(this,'message',1000,2000);">
    <input type="submit" name="" value="Submit"/>
    </form>
     <div id="message" >
      My Message
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Message(frm,id,ms,hold){
     var obj=document.getElementById(id),ms=typeof(ms)=='number'?ms:1000,hold=typeof(ms)=='number'?hold:ms*4,wwhs=WWHS();
     if (obj.offsetLeft<0){
      animate(frm,obj,0,100,new Date(),ms,hold);
      obj.style.left=wwhs[2]+(wwhs[0]-obj.offsetWidth)/2+'px';
      obj.style.top=wwhs[3]+(wwhs[1]-obj.offsetHeight)/2+'px';
    
     }
     return false;
    }
    
    function animate(frm,obj,f,t,srt,mS,hold){
     var ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
     if (isFinite(now)){
      obj.style.filter='alpha(opacity='+now+')';
      obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
     }
     if (ms<mS){
      setTimeout(function(){ animate(frm,obj,f,t,srt,mS,hold); },10);
     }
     else {
      if (t==100){
       setTimeout(function(){ animate(frm,obj,100,0,new Date(),mS); },hold);
      }
      else {
       frm.submit();
      }
     }
    }
    
    function WWHS(){
     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];
    }
    
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    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/

  3. #3
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Vic.

    Many thanks. I'll give it a try.

  4. #4
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Vic:

    Works fine. Thanks.
    Last edited by Jim Weinberg; 07-29-2012 at 08:54 PM.

  5. #5
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Looks like I spoke too soon. The script works the first time, but then stops working. I think the problem is that the form in the code has a null (action="#") value. The form on my page posts data to another page. If I null out the action attribute in my code, it works fine. Unfortunately, I can't do that.

    If anyone has a suggestion on how to fix this or another script that will do the same thing, I'd appreciate hearing from you.

    Thanks.

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
  •