SCROLLER

The Scroller script is a simple JavaScript that scrolls through an HTML file pausing every 300 pixels so the viewer can read the contents. The window is inserted into existing web pages using the IFRAME. The IFRAME is a rectangular area that’s contents is from another HTML document. By removing the IFRAME’s borders and scroll bars then placing some GIF images either side of it (shown below), the web page viewer will assume they are viewing a slick scroller!

I've used a table to ensure correct placements of the gif images and the IFRAME.

How to Use It

First off create a new HTML with the following content.

 
<head>
    <meta http-equiv=Content-Type content="text/html; charset=windows-1252">
    <base target=fraPage>
    <title>Morphic Test Scroller</title>
    <LINK rel=STYLESHEET href="../danz.css" Type="text/css">
</head>

<BODY TEXT="#000000" LINK="#0000ff" VLINK="#ffffff" onload="Initialise()" TOPMARGIN=0 bgcolor=#B8C7DE LEFTMARGIN=0px>

<SCRIPT LANGUAGE="JScript">
<!-- Hide Script

  // javaScript scroller
  // Writen by Dan Hamblin
  // Copyright 2004 Dan Hamblin
  var scroll_count;        // which item is currently being viewed
  var intervalID;        // ID for the timer being used for scrolling
  var items;            // number of items to scroll through
  var itemCounter;        // the item currently being viewed
  var nextInterval=0;    // next interval (scroll position) where document will scroll to
  var intervalSize=300; // size of each scroll window in pixels
  var speed=1;            // variable for scroll speed - scrolling accelerates and slows between items
  var pauseTime=7500;    // number of ms to pause at a window position

  function Initialise()
  {
    // initialise variables and set-up scrolling timer
    scroll_count=1;
    items=8;
     y=0;
    itemCounter=0;
    intervalID = window.setInterval("ScrollWindow()", 5);
    intervalSize=300;
    nextInterval=intervalSize;
    speed=1;
  }

  function ScrollWindow()
  {
    // scroll to window position
    window.scrollTo(0,y+=speed)
   
    // decelerate/accelerate?
    if(y<(nextInterval-intervalSize/8))
    {
      speed+=0.3;
      if(speed>8) speed=8;
    }
    else
    {
      speed-=1;
      if(speed<1) speed=1;
    }

    // next interval reached?
    if( y >= nextInterval  )
    {
      y=nextInterval;
      window.scrollTo(0,y);
      nextInterval+=intervalSize;
      window.clearInterval( intervalID )
     
      // pause window for a period of time so reader can read contents
      intervalID = window.setInterval("PauseWindow()",pauseTime)
      scroll_count=1
      speed=1;
    }

  }

  function PauseWindow()
  {
    // This is called x after the window has paused
    // this function re-starts the scrolling
    window.clearInterval( intervalID );
    if( itemCounter++ >= items )
    {
      // loop document around
      itemCounter=0;
      nextInterval=intervalSize;
      y=0;
    }
    intervalID = window.setInterval("ScrollWindow()", 5);
  }
//-->
</SCRIPT>


<P ALIGN=CENTER>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=220px>

<TR HEIGHT=300><TD VALIGN=CENTER><P ALIGN=CENTER>&nbsp;</P></TD></TR>


<TR HEIGHT=300><TD VALIGN=CENTER>
<h2 align=center>JavaScript Scroller</h2>
<p align=center>
Written by Dan Hamblin<BR><BR>
June 2004<BR><BR>
http://www.morphic.co.uk<BR>
</p>
</P></TD></TR>

<TR HEIGHT=300><TD VALIGN=CENTER>
<H2>About the Scroller</H2>
<p>This scroller uses JavaScript to scroll an HTML document.  By embedding this HTML
document into another document using IFRAME’s we can make a nice looking scroller!</p>
</P></TD></TR>

<TR HEIGHT=300><TD VALIGN=CENTER>
<H2>Hiding the IFRAME</H2>
<p>By using some nicely sculpted gif images, we can disguise the IFRAME so the viewer 
thinks that they’re viewing a nice scrolling window.</p>
</P></TD></TR>

<TR HEIGHT=300><TD VALIGN=CENTER>
<H2>Transitions</H2>
<p>By smoothly accelerating and decelerating between window items the viewer should 
find the scroller much more comfortable on their eyes!</p>
</P></TD></TR>

<TR HEIGHT=300><TD VALIGN=CENTER>
<H2>Add Some Graphics</H2>
<p>Because the scrolling window is an ordinary HTML file, we can easily incorporate 
some graphics in it:</p>
<p align="left"><img src="scroller-image.gif" width="94" height="90"></p>
</P></TD></TR>

<TR HEIGHT=300><TD VALIGN=CENTER>
<H2>Legal Bit</H2>
<p>You may use this script in your own websites provided that you a. credit myself 
or the website and b. you do not use this script in any commercial venture.<BR>
<small>Copyright 2004 Daniel Hamblin</small></p>
</P></TD></TR>


<TR HEIGHT=300><TD VALIGN=CENTER>
<h2>Contact the Author</h2>
<p>Feel free to drop me an e-mail at:<BR><BR><font size=3>dnz_mx@yahoo.com</font></p>
</P></TD></TR>


 <TR HEIGHT=300><TD VALIGN=CENTER>&nbsp;</td></tr>
<TR HEIGHT=300><TD VALIGN=CENTER>&nbsp;</td></tr>


</TABLE>
</body>
</html>
 

Now edit the sections shown in purple to add your own scroller messages and pictures. You may add additional table rows, but you must ensure that there is an empty row of 300 pixels and the start and end of the table. If you change the number of rows, be sure to change the value of the 'items' variable (shown in blue).

Save this file (this is your scrolling message file). Next, insert the following lines of code to your web page where you would like the scroller to appear (this example I'm note placing gif's either side of the IFRAME, but you should be able to work out how to do that from the demonstration page).

 
<IFRAME WIDTH="300px" SCROLLING="no" FRAMEBORDER="0" HEIGHT="300px" SRC="scroller-window.htm"></IFRAME>
 

NOTE: Make sure you edit the URL shown in red to point to your scroller file.

If you don't like the default height of 300 pixels, this is easily changed by editing the code in the appropriate places - just look for and replace the number 300 with whatever you would like! The width of the scrolling window should take care of itself - just change the IFRAME dimensions.

To see an example at work, click here.