EverWeb Widgetbox

Scroller

Scrolling content can be created using javascript or, very simply, using an iframe whose dimensions are set to less than that of the content to force the browsers to create scrollbars.

There are quite a few jQuery plugins for creating scrolling divs but, apart from their complexity, they require the user to insert the content using HTML and styling it with CSS.

The iframe method is far simpler but the standard iframe code will not work as planned with iOS devices such as the iPad/iPhone. These devices display the full content of the frame and mess up the layout. This widget has been adapted to overcome the problem so that the frame will appear at the correct size. On iOS devices there are no scrollbars and the content is scrolled using finger swiping as usual.

Mobile Website Iframe Scroller Window

The widget is set with a width of 40px wider than the document it displays and the height is set to whatever is required.

The example to the left has been dropped onto a black background created with the rectangle widget so that the boundaries of the frame can be more easily seen.

NOTE: When using an absolute URL, the content will be visible in EverWeb but relative paths should be used when using the Preview button or when published to a local folder.

iFrame Scroller Widget

The content if the scroller shown above was created on a page in a separate directory. The page is 560px wide so that it will fit into the 600px width of the widget without forcing the horizontal scrollbar to appear.

The paragraphs use standard text boxes and the h3 and h4 headings utilise the web safe HTML headings widget.

Click the button to get the widget

Get The Widget

Scroller Version 2

This is a version of the Scroller widget which uses the new control for selecting a link to a page of the website.

It can be used when the page to be linked to is in the same project file as the page with the widget.

Easy Scroller Widget