Skip to main content

JavaScript Sticky Footer and Scroll Effect

This post talks about two different HTML/JavaScript effects:
  1. How to keep a page footer stuck at the bottom of the browser window.
  2. How to create a scrolling <div> without using a scroll bar

OK. So... you have a website. You want a header stuck at the top of your page and the footer stuck at the bottom of your page. The stuff in the middle, you want to be able to scrollable. But, you don't want those ugly scrollbars to the right of your scrollable text. Maybe, instead, you'll have up arrows and down arrows above and below your <div>. When you mouseover the arrows, the text in the <div> will move up or down and create a scrolling effect.

Suppose your page looks like this...

<html>
<head>
<title>Test</title>
</head>
<body>
<div style="position: relative; width: 700px; margin-left: auto; margin-right: auto;">
<div id="header">Header</div>
<div id="scrollUp" style="text-align:center"><img src="arrow_up.jpeg" alt=""/></div>
<div id="content">
<p>Scrollable content goes here...</p>
</div>
<div id="scrollDown" style="text-align:center"><img src="arrow_down.jpeg" alt=""/></div>
<div id="footer">Footer</div>
</div>
</body>
</html>

Allow me to explain how we will use each <div> in our JavaScript code. The first <div> simply squishes our entire page to 700 pixels wide and centers it in the browser window. Then, our header <div> is where we put our page header, the footer <div> is where we put our page footer, and the content <div> is where we put our scrollable content. The scrollUp and scrollDown <div> contain the up and down arrow images. We will write JavaScript code to scroll the text in the content <div> when we mouseover the scrollUp or scrollDown <div>.

Prerequisites: We will use the jQuery JavaScript library for this example. The latest version at the time of this writing 1.4.2. So, we download it from jquery.com and save in the same directory as our webpage. Then, include the <script> tag: <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

The JavaScript code:

The code is below, but allow me to explain.
  • Get familiar with jQuery (their tutorials and API documentation is pretty good). It's pretty different than writing native JavaScript code.
  • scrollContent(amt) function will scroll down by the amt given. If amt is positive, it scrolls down; if negative, it scrolls up. scrollContent() also creates a timer and stores the timer ID into the scrollTimer global variable. More on this later...
  • onWindowResize() is necessary because we want to keep the footer at the bottom of the page. We do that by shrinking or expanding the height of the content <div>, as necessary. The number 100 in this function is just a "plug" number - it's the sum of the margins, paddings, and height of arrow_up.jpg and arrow_down.jpg images. Change this value, as necessary.
  • In the callback function of $(document).ready(callback):
    • $("#content").css("overflow", "hidden"); //This is not added to the style attribute of the content <div> because we only want to change the "overflow" CSS property if JavaScript is enabled in the client's web browser.
    • mouseenter events fire when the mouse enters the scrollUp or scrollDown <div>s. The code basically runs the scrollContent() function.
    • mouseleave events fire when the mouse leaves the scrollUp or scrollDown <div>s. The code basically stops the 'scrollTimer' and prevents scrollContent() from running again. Note: the scrollContent() function creates a timer that fires each time scrollContent() fires. So,the scrollContent() function would run forever if it wasn't for the clearTimeout function.
    • Animations of the scrollUp and scrollDown <div>s show and hide the arrow_up.jpeg and arrow_down.jpeg images.

<script type="text/javascript"><!--
var scrollTimer;
function scrollContent(amt)
{
$("#content").scrollTop($("#content").scrollTop()+amt);
scrollTimer = window.setTimeout("scrollContent(" + amt + ")", 25);
}
function onWindowResize()
{
$("#content").height($(window).height() - $("#header").height() - $("#footer").height() - 100);
}
$(document).ready(function ()
{
$("#content").css("overflow", "hidden");
$("#scrollUp").mouseenter(function() {
window.clearTimeout(scrollTimer); //Not necessary, but just to be sure...
$("#scrollUp").animate({"opacity": 100}, 'fast');
scrollContent(-10);
});
$("#scrollUp").mouseleave(function() {
window.clearTimeout(scrollTimer);
$("#scrollUp").animate({"opacity": 0}, 'fast');
});
$("#scrollDown").mouseenter(function() {
window.clearTimeout(scrollTimer); //Not necessary, but just to be sure...
$("#scrollDown").animate({"opacity": 100}, 'fast');
scrollContent(10);
});
$("#scrollDown").mouseleave(function() {
window.clearTimeout(scrollTimer);
$("#scrollDown").animate({"opacity": 0}, 'fast');
});
//$("#scrollUp").css("opacity", 0); //Alternative
$("#scrollUp").animate({"opacity": 0}, 'slow');
$("#scrollDown").animate({"opacity": 0}, 'slow');
$(window).resize(onWindowResize);
onWindowResize();
});
//-->
</script>

That's it! Enjoy! Oh... and don't forget to find some up and down arrow images.

Comments

Anonymous said…
Good brief and this enter helped me alot in my college assignement. Thanks you on your information.
10:38 AM
Post a Comment

Popular posts from this blog

Wedding Prediction - October, 2013

Carla and I are planning on getting married sometime in October next year.  We need to pick a date, and that decision may  involve some science and mathematics.  :) For example, we want the weather to be nice.  To be more precise, we'd like the high temperature for the wedding day to be between 60 and 80 degrees Fahrenheit.  Obviously, we have both lived in Ohio our entire lives, and we have a pretty good idea of what the weather will be like.  We both hypothesised that October was a "hit or miss" sort of month; it could be cold, or it could be nice. But, for me, a simple hypothesis was not enough; I really wanted to know the probabilities of decent weather based on historical weather data.  Many websites on the Internet (i.e. almanac.com) charge you to review historical weather data, but Carla and I discovered a cool page on cleveland.com that provided exactly what we wanted.  I loaded the historical temperature data from 1903 to 2011 f...
2 comments
Read more

Web Browsers You Should Support

As a web developer, generally speaking, you should consider supporting the following browsers (at the time of this writing): Chrome (latest) - the browser that sets the bar for the others; you should be using it and supporting it Internet Explorer 9+ - the browser that finally caught up with the times a bit; basically, a Chrome wannabe.  I still say that IE sucks... even if it really doesn't anymore.  Yes... I'm sour about IE8 and below. Internet Explorer 8 - the old, sad browser that we sadly still have to support for a while.  CSS 3 is not well-supported here, so we use projects like CSS3 PIE or whatever.  By the way... IE8 sucks.  I can't wait until this comes off of the list. Firefox (latest) - the browser that was once awesome and has sadly suffered recently because it's slower than Chrome... but hey, lots of people still use it. Safari (latest) - Watch out for Safari as more iPhones, iPads, Macs, and more overly-priced Apple products flood the ...
Post a Comment
Read more

Computer Clocks Cause More Issues

Two nights ago, a leap second was added to system clocks running Linux, causing much-undesired havoc. On July 1st at 12:00 AM UTC, both of my Amazon EC2 instances fired an alarm indicating high CPU usage. I investigated to find that it was MySQL that was eating all of the CPU. I logged in and ran SHOW PROCESSLIST to find that no queries were running (these servers don't get hit much after business hours). I stopped MySQL, CPU utilization dropped back down to 1-3% (as normal). I restarted MySQL, and it started eating a lot of CPU again. Then, I restarted the server (shutdown -r now), and the problem went away. Both servers had the exact same problem (running Ubuntu 12.04 LTS). In my particular case, MySQL began eating CPU, even after being restarted.  It was a livelock. The only relevant item I saw in the syslog was: Jun 30 23:59:59 hostname kernel: [14152976.187987] Clock: inserting leap second 23:59:60 UTC Oh yeah... leap seconds.  Those are super impor...
Post a Comment
Read more