This post talks about two different HTML/JavaScript effects:
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...
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.
That's it! Enjoy! Oh... and don't forget to find some up and down arrow images.
- How to keep a page footer stuck at the bottom of the browser window.
- 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