Posted By

boydexter on 07/23/10


Tagged


Versions (?)

Animated footer code (HTML)


 / Published in: HTML
 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Untitled Document</title>
  5. html,body{margin:0; padding:0; height:100%; background-color:#111111; color:#CCCCCC; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
  6. #container{min-height:100%; position:relative;}
  7. #launch{position:absolute; bottom:0; width:100%; background-color:#999999; margin:0 auto; text-align:center; color:CCCCCC;}
  8. #footer{position:absolute; bottom:0; width:100%; height:400px; background-color:#333333; display: none;}
  9.  
  10. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  11. <script type="text/javascript">
  12. jQuery(function($) {
  13. var slide = false;
  14. var height = $('#footer').height();
  15. $('#launch,.close').mouseleave(function() {
  16. var docHeight = $(document).height();
  17. var windowHeight = $(window).height();
  18. var scrollPos = docHeight - windowHeight + height;
  19. $('#footer').animate({ height: "toggle"}, 300);
  20. if(slide == false) {
  21. if($.browser.opera) {
  22. $('html').animate({scrollTop: scrollPos+'px'}, 300);
  23. } else {
  24. $('html, body').animate({scrollTop: scrollPos+'px'}, 300);
  25. }
  26. slide = true;
  27. } else {
  28. slide = false;
  29. }
  30. });
  31. });
  32. </head>
  33.  
  34.  
  35. <div id="container">
  36.  
  37.  
  38. <div id="launch">Click Me To Open Footer...</div>
  39. <div id="footer" class="close">Bla bla bla bla</div>
  40. </div>
  41.  
  42.  
  43. </body>
  44. </html>

Report this snippet  

You need to login to post a comment.