Results 1 to 9 of 9

Thread: sliding pop up at bottom right of page

  1. #1
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default sliding pop up at bottom right of page

    Hi
    Can anyone help me with a script to display a sliding popup from bottom right towards upward direction when the entire page is loaded

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 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[*/
    
    .float {
      position:absolute;right:0px;bottom:0px;width:200px;height:200px;background-Color:red;
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function FloatUp(id,ms){
     var obj=document.getElementById(id),top=document.body.clientHeight;
     if (window.innerHeight){
      top=window.innerHeight;
     }
     else if (document.documentElement.clientHeight){
      top=document.documentElement.clientHeight;
     }
     animate(obj,'bottom',0,top-obj.offsetHeight,new Date(),ms||2000);
    }
    
    
    function animate(obj,mde,f,t,srt,mS){
     var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
     if (isFinite(now)){
      obj.style[mde]=now+'px';
     }
     if (ms<mS){
      this.dly=setTimeout(function(){ oop.animate(obj,mde,f,t,srt,mS); },10);
     }
     else {
      obj.style[mde]=t+'px';
     }
    }
    
    /*]]>*/
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
     FloatUp('tst',2000);
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    
    </head>
    
    <body>
    <div id="tst" class="float" ><input type="button" name="" value="Close" onmouseup="this.parentNode.style.display='none'; " /></div>
    </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
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks a lot
    One more help please
    How can I stop the sliding div after the required content is shown on screen
    I mean I don't want it to move up to the top of the window

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 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[*/
    
    .float {
      position:absolute;right:0px;bottom:0px;width:200px;height:200px;background-Color:red;
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function FloatUp(id,stop,ms){
     var obj=document.getElementById(id),top=document.body.clientHeight;
     if (window.innerHeight){
      top=window.innerHeight;
     }
     else if (document.documentElement.clientHeight){
      top=document.documentElement.clientHeight;
     }
     animate(obj,'bottom',0,top-obj.offsetHeight-stop,new Date(),ms||2000);
    }
    
    
    function animate(obj,mde,f,t,srt,mS){
     var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
     if (isFinite(now)){
      obj.style[mde]=now+'px';
     }
     if (ms<mS){
      this.dly=setTimeout(function(){ oop.animate(obj,mde,f,t,srt,mS); },10);
     }
     else {
      obj.style[mde]=t+'px';
     }
    }
    
    /*]]>*/
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
     FloatUp('tst',100,2000);
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    
    </head>
    
    <body>
    <div id="tst" class="float" ><input type="button" name="" value="Close" onmouseup="this.parentNode.style.display='none'; " /></div>
    </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/

  5. #5
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks again

  6. #6
    Join Date
    Jul 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Awesome code, thanks! Is there a way to use a background image instead of a flat background color? Also, is there a way to move the "close" button to the bottom of the box?

  7. #7
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    the appearance of the box is controlled by CSS

    Code:
    .float {
      position:absolute;right:0px;bottom:0px;width:200px;height:200px;background-Image:url(http://www.vicsjavascripts.org/StdImages/Cartoon1.gif);
    }
    
    .float INPUT {
      position:absolute;right:10px;bottom:5px;width:60px;
    }
    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. #8
    Join Date
    Oct 2015
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    How to add text in that popup?

  9. #9
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <div id="tst" class="float" ><input type="button" name="" value="Close" onmouseup="this.parentNode.style.display='none'; " /> Any HTML Code</div>
    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/

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
  •