PageBuilder Webpage Scrolling Scripts

Auto-scrolling webpages add a neat touch in special cases, like memorial pages with appropriate background music; but, when used inappropriately, they are a very irritating!

With our MSN-TV browsers, we can override the auto-scrolling action with our scroll and arrow keys. You can inform your viewers of this option if the notice will not seriously distract from your webpage message.

Where possible, you should always add stop buttons near the top of your document, or a short distance from a scroll start button, so your viewers can stop the auto-scroll if they desire! Why? All of us do not read at the same speed, and may not be able to read properly at the speed you chose for your scroller!

Here, I use a relatively slow scroll speed. See below for ways to increase or decrease the scroll speed. Future revisions of this script will add user interactive feedback to select the proper scroll speed for individual viewers. This will consist of using changeable variables for the scroll method's parameters, and allowing the viewer to change the scroll speed parameter variables to their confort level. A simple "plus or minus" parameter incrementer/decrementer script will add a viewer's speed selection option.

Auto-Scroll Codes

Here's the basic script:

<script language="javascript"> function autoScr() {window.scrollBy(0, 1) scrtim=window.setTimeout("autoScr()", 1);} </script>

A simple link scroller:

Click here for: Vertical Scroll.

Here's the link scoller code:

Click here for: <a href="javascript:void()" onClick="autoScr()">Vertical Scroll</a>.

Click here to <a href="javascript:void()" onClick="window.clearTimeout(scrtim)">Stop Scroll</a>

Click here to Stop Scroll

Form Button Scroller

Here's the form button scroller code:

<form action="javascript:void()">Click here for <font color="#ffffff"> <input type="button" value="Auto-Scroll" onClick="autoScr()" usestyle borderimage="file://rom/borders/buttonborder7.bif"> </font> </form>

<form action="javascript:void()">Click here to <font color="#ffffff"> <input type="button" value="Stop Scroll" onClick="window.clearTimeout(scrtim)" usestyle borderimage="file://rom/borders/buttonborder7.bif"> </font> </form>

Note: Here I show the form start and stop buttons as two separate form codes, as I did with the link scroller above. Why? You must use that syntax to place the start and stop button around a section of your webpage. The link and form demos above is actually an example of this option and can be viewed in the source code for this webpage.

To start the Auto-Scroll when a PageBuilder webpage loads; you must use an advanced editor method to place the scroll script inside an expanded head tag, and use an added custom body tag code to "call" the script with the "onLoad" event handler, in additon to the other body tag attributes.

The codes for a PageBuilder advanced editor webpage using my PB AE script method are as follows:

The code syntax for the title text box is:

Title of your Document</title> <script> /*

The code syntax for the first "Add text" box at the top of the document is:

*/ </script> <script language="javascript"> function autoScr() {window.scrollBy(0, 1) scrtim=window.setTimeout("autoScr()", 1);} </script> </head> <body bgcolor="#??????" background="URLof yourBackgroundImage" text="#??????" link="#??????" vlink="#?????? onLoad="autoscr()"> <div align="center"> <noframes> <font color="red"> <limittext value="WARNING: JavaScript Bug Alert – Please Reload (Cmd-R)"> </font> </noframes> </div> <h1 align="center">Your Webpage Title Here</h1> <p> <table> <tr> <td>

Notes: My PB AE script method shown above uses an empty script tag with only the multiline comment tags to block-out the PB built-in body tag! If you use the HTML comment tags inside the blocking script tags, some browsers may assume that the code, consisting of the HTML ending title tag, ending head tag, beginning body tag, and table template formatting tags, between the comment tags inside the script tags is errornous javascript; and may pop-up a javascript error alert if the script debugger is enabled! I suggest you only use the multiline comment tags in your PB AE script editor method (code blocking) tags! Empty script tags and multiple script tags are legal inside the head tag of a document, or anywhere inside the body tag!

I use a MSN-TV javascript bug warning script because your webpage will not start scrolling upon loading when the bug strikes – you must warn viewers to reload the webpage to see the auto-scroll action. Only MSN-TV viewers can see the JS bug warning in the <limittext> tag inside the <noframes> tags!

I also show the added table tags that must be added to replace the table template tags tag are blocked-out by the PB AE method's script tags. I show the added tags after my title heading tags, but you can, and probably should, add them immedately following the body tag – it's your preference, but they must be in the first add text box at the top of your document! Check the document's source code to be sure you have the PB table template tags properly beginning, nested, and closed – Netscape browsers have display problems with missing table tags!

Now, for all you folks that don't want to use a PageBuilder advanced editing method to put the script in an extended head tag ahead of the body tag onLoad event handler, here's a workaround code using the onLoad event handler in an invisible ("0 x 0 pixel") image tag in the first "Add text" box the top of your document, like this:

<script language="javascript"> function autoScr() {window.scrollBy(0, 1) scrtim=window.setTimeout("autoScr()", 1);} </script> <img width="0" height="0" src="http://community-2.webtv.net/jaxred/images/scrapbookFiles/importD44.gif" onLoad="autoScr()">

The image will not show, and the script will call the scroll function when the image file loads, and scroll the webpage! This works great; in fact, you can use this trick to load any script with the "onLoad" event handler – it's just as effective as a body tag onLoad event handler! You can use any other HTML container tag that uses the onLoad event handler!

And, of course; you can use an actual image at the top of your webpage to do the same thing. In fact, if your webpage title is an image, that's a very effective way to use the image onLoad event handler attribute to call your scroll function!

Just don't forget to add one of the stop links or buttons, shown above, after the scrolling section where you think your viewers may want the webpage scrolling to stop.

Work with these scripts to make your webpage scrollers effective for interesting content delivery rather than irritating gimickery for your webpage visitors!

Customize the scroller wording, form and links layout, font color, and botton styles as you desire.

Many of the MSN-TV ROM buttons are here:

http://www.angelfire.com/md2/fred/tutorial/buttons.html

Note: In the above codes the font tag is for the button text color, and only surrounds the input button tag, The input button tag uses the MSN-TV proprietary "usestyle" attribute which puts the font color on the button.

The script passes the scroll parameters listed in the "scrollBy(horz, vert)" method to the "autoScr()" function. The scrollBy() parameters are "0" horizontal by "1" vertical. The setTimeout calls the function once every "1" millisecond. The scrolling function scrolls the page "1-pixel" every "1-millisecond" – this is a relatively slow scroll speed. Typically, the pixels are set from 5 to 10, and the setTimeout interval is usually 10-50. To speed-up the scroll, increase the pixels and/or reduce the setTimeout interval; to slow the scroll, reduce the pixels and/or increase the setTimeout interval.

I have found many auto-scroll scripts online; but, they are more complex than the very simple script I show here! My purpose for this webpage was to provide a very simple script even beginners could start using and customize it as they desire! Beginners can easily create a scroller page and play with the speed and form layout, to learn the basics.

I request others to work with these scripts and provide evaluation, additions, corrections, additional script variations, other comments! Post additional information in the PageBuilder or JavaScript NG's.

Thanks for visiting my webpage, folks! My best wishes to all Webbers, their families, and friends!

JaxRed

VIEW THE SOURCE CODE OF THIS PAGE



	Powered by MSN TV