Home/ Questions/Q 4064822
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T15:54:19+00:00

How do I make a movable div that appears from bottom of screen. Like

  • 0

How do I make a movable div that appears from bottom of screen. Like you see on sites where online support chat is available and on page load, a window appears from bottom which says something like “Click here to chat”.
So I just want to make a rectangle box appear from bottom and then stop when it is fully appeared. I have created an example in Powerpoint if you want to see it. You will see a blue box that appears from bottom of screen.

It is a PPS file and can be downloaded from below:
http://rapidshare.com/files/451089108/Presentation1.pps

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Working example: http://jsfiddle.net/GdFfB/

    Basically you want to hide the div off screen with a fixed position to start (needs to be as negative as your div will be tall) so we use -100px in the example for the bottom. Then once our page is ready we use jQuery to animate the div coming on to the screen. If you want the div to be snug against the bottom you can animate bottom to 0, in my example I animated bottom to 50 to give it a little space.

    Edit
    Added actual code to this thread in case JSFiddle decides to delete hosted code examples.

    <html>
<head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>

  <style type='text/css'>
  #chat-box { 
    position:fixed; 
    bottom:-100px; 
    background: #ccc;
  }
  </style>


  <script type='text/javascript'>
  $(document).ready(function(){
  $('#chat-box').animate({bottom:'50'});
  });
  </script>

</head>
<body>
  <div id="chat-box">Click here to chat!</div>

</body>
</html>
    • 0