Home/ Questions/Q 8443809
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T09:14:21+00:00

I got some code off the net to make a box slide in. However

  • 0

I got some code off the net to make a box slide in. However it slid in from the top left and I wanted it to slide in from the bottom. I changed the css position from top:-200px to bottom:-200px and changed the part of the code that alters the position from 

{
    popup.style.top = (currentTop + speed) + "px";
    keepMoving = true;
}

to

{
    popup.style.bottom = (currentTop + speed) + "px";
    keepMoving = true;
}

now it doesn’t work. I cannot see what variable I should be making. Here is the full code (which works if I change them back to ‘top’)

<html>
<head>
<title>Moving Pop Up Samplet</title>


<style>

#popup 
{
height:200px; 
width:200px; 
border:1px solid #000; 
background:#CC9900;
position:absolute;
bottom:-200px;
left:-200px;
}

</style>


<script>

var timer = null;
var speed = 3; //1 is  slow
var endTop = 0;
var endLeft = 0;

//******************************************************
// Simple little function to get Elements as an object
//******************************************************
function getEl(id)
{
var el = document.getElementById(id);
return el;
}
//******************************************************
// Function to show Elements
//******************************************************
function showEl(id)
{
getEl(id).style.display ="";
 }
   //******************************************************
  // Function to hide Elements
     //******************************************************
   function hideEl(id)
 {
getEl(id).style.display ="none";
  }

   //******************************************************
   // Function to move Element
     //******************************************************
    function moveEl(id)
    {
var popup = getEl(id);
var currentTop = parseInt(popup.offsetTop);
var currentLeft = parseInt(popup.offsetLeft);

var keepMoving = false;
//Move
if (currentTop <= endTop)
{
    popup.style.bottom = (currentTop + speed) + "px";
    keepMoving = true;
}
if(currentLeft <= endLeft)
{   
    popup.style.left = (currentLeft + speed) + "px";
    keepMoving = true;
}
if (keepMoving)
{
    startMove(id);
}
else
{
    endMove();
}
  }
   //******************************************************
   // Function to start the move
      //******************************************************
     function startMove(id)
    {
timer = setTimeout("moveEl('"+id+"')", 1);
   }
  //******************************************************
    // Function to end the move
 //******************************************************
  function endMove()
{
clearTimeout(timer);
 }

 </script>

</head>
<body onload="startMove('popup');">
<!-- POP UP DIV -->
<div id="popup">
<center><span onclick="hideEl('popup');" style="cursor:pointer;"> Close</span></center>
</div>
<!--END  POP UP DIV -->

<center><span onclick="startMove('popup');" style="cursor:pointer;"> Show Pop Up</span></center>


</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’ll just need to rejiggle your inequalities a bit.

    Given that there’s no offset bottom property in javascript, it’ll be easier to still work with top values, even if you want to come in from the bottom.

    function moveEl(id) {
    var popup = getEl(id);

    var currentTop = parseInt(popup.offsetTop);
    var currentLeft = parseInt(popup.offsetLeft);

    var keepMoving = false;
    //Move
    if (currentTop >= endTop) {
        popup.style.top = (currentTop - speed) + "px";
        keepMoving = true;
    }
    if (currentLeft <= endLeft) {
        popup.style.left = (currentLeft + speed) + "px";
        keepMoving = true;
    }
    if (keepMoving) {
        startMove(id);
    }
    else {
        endMove();
    }
}

    Here’s a working jsFiddle.

    If you think about the way the function is checking to see if it’s finished yet, and adding on the speed variable each time, you should be able to step through the original version compared to this and see how the logic is working.

    • 0