Beyond Fusion
Follow us on Twitter

Scrolling Static Content

Tested and Works with:

This tutorial teaches you how to use a DIV to scroll static content on a page. A useful alternative to an iframe.

Tutorial and code by: Chuck Joslin

Internet Explorer FireFox Safari
Chrome Opera

You are using:

Working Example

Fusion XII, the latest Fusion from NetObjects adds a number of exciting new features.

Example: This version adds W3C-compliant code

Use our iFrame code generator for inserting iFrames on your site in Fusion. 

Step 1. In your page where you want the scrolling content to appear, insert a text box. Set its width to the size you wish. Check the Lock Height checkbox and stretch the text box vertically to the desired height.

Step 2. In the text box properties, click on the HTML button.

             Before the <p> tag, insert: <div style="position:absolute; overflow: auto; width: 200px; height: 100px;">

             Set the width and height size to match the height and width of your text box.

             Additional Option: to insert padding, add the following after the height: padding: 10px; as in the  example. You can restrict padding to the scrollbar side by using: padding-right: 10px;

             After the </p> tag, insert: </div>

Step 3. Press Ctrl+T at the text insertion point in the text box. Enter the text you wish to scroll in the Insert HTML window. You can also insert html tags if you wish in order to format the text. By default, the contents take on the settings of the text box container.

That's it.  This technique can also be used to scroll the contents of a Layout Region or a Table Cell.

Caveats: Firefox handles padding differently than IE. Also, Firefox displays a taller scrollbar than IE does. So, you may need to do some fine-tuning to allow for the differences in browsers.



Buy AllWebMenus

Works with Fusion 2015

NetObjects Fusion is Registered Trademark of NetObjects, Inc.


Once You Know, You Newegg