Home arrow HTML arrow Scrolling Functions for HTML Magic Edges

Scrolling Functions for HTML Magic Edges

Welcome to the third part of a five-part series that explains how to create magic edges -- edges of web pages from which items can be scrolled -- using HTML. In this part, we continue with the basics of scrolling from the left edge. We shall complete the basics in this part, and then we shall begin the project.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
March 23, 2009
  1. · Scrolling Functions for HTML Magic Edges
  2. · The shiftRight() Function
  3. · Removing the Pane
  4. · The Project

print this article

Scrolling Functions for HTML Magic Edges
(Page 1 of 4 )

Basic Function for Scrolling from the Left

When the mouse pointer goes over the left edge, the doShiftRight() function is called. The function has two associated variables. This is the function with the variables:

var x; //x coordinate

var TR; //return value for setInterval() function - moving right

function doShiftRight()


x = document.getElementById('Calc').style.left;

x = parseInt(x);

TR = self.setInterval("shiftRight()",10);


Keep in mind that the pixel is the smallest recognizable component on the web page. The web page is filled with pixels arranged in rows and columns. The entire image you see on the screen is a result of the pixels having different colors.

The x variable above is for a column of pixels in the outer DIV element. Remember that the inner DIV element just fits into the outer DIV element. So this variable is actually used to change the horizontal position of the inner DIV. The next variable, TR, is for the return ID for the setInterval() method inside the function above.

The first line in the function copies the CSS left position value of the inner DIV element to the x variable. This left value at the start is Ė205px. The next line makes sure it is an integer. The third line calls a function named shiftRight() through the DOMís setInterval() function every 10ms.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials