sliding pop up at bottom right of page

**Dips** · 12-26-2011, 06:58 AM

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

**vwphillips** · 12-26-2011, 11:56 AM

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>

**Dips** · 12-27-2011, 07:39 AM

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

**vwphillips** · 12-27-2011, 09:44 AM

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>

**Dips** · 12-27-2011, 12:02 PM

Thanks again

**wondergel** · 07-16-2014, 09:02 PM

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?

**vwphillips** · 07-17-2014, 09:20 AM

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;
}

**bhavyareddivari** · 10-09-2015, 08:54 PM

How to add text in that popup?

**vwphillips** · 10-10-2015, 11:02 AM

Code:

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

Thread: sliding pop up at bottom right of page

Thread Tools

Search Thread

sliding pop up at bottom right of page

Bookmarks

Bookmarks

Posting Permissions