Sothink Scroller

Getting Started

This is not a tutorial page. The program has an excellent help section and a step-by-step tutorial. The purpose of this page is to acquaint you with the user interface (UI) which we think is so intuitive that most users will not need to use the program's help section.

When you open the program, the first thing you will see is a Start window with a sample scroller that contains four placeholder images:

Start Window

You can use the sample scroller as a starting point for your own scroller, or you can close the Start window and choose one of the templates included with the program (File>New>From Templates or Ctrl + N).

Here is the JavaScript Web Scroller UI:

user interface

Across the top of the screen are the standard text menus and menu icons. Down the left side is the List Panel. Scrollers consist of a number of items (images, text, etc.), and the List Panel is where items are added, deleted, and selected for editing. To the right of the List Panel, just under the menu icons, is the Tasks Panel with eight tabs: Item, Popup Tip, Global, Title, Pagination, Scroll Arrows, Border and Web Path. Immediately below the Task Panel is the Preview Window.

In order to become familiar with the program, mouse over the menu icons and the icons at the top of the List Panel. Then look at each tab in the Tasks Panel and you will see how easy it is to control the appearance and functioning of a scroller.

Here are some tips for using the program:

1. Create a "scroller" folder/subdirectory in your site's root directory. This folder will contain all the resource files (images and JavaScripts) for your scroller. Also save your *.sjc file in the "scroller" folder. The *.sjc file is the definition file for your scroller, and you will need it in order to edit or recreate a scroller. If you save it in your "scroller" folder, when you upload the folder to your server you will have a online backup of your scroller definition file.

2. On the Web Path tab of the Tasks Panel, enter an absolute path to your "scroller" folder for both JavaScript and image files (e.g., http://yourdomain.com/scroller/). That way, if you have a multi-level site and you have a scroller on a page two levels down, the scroller will be able to find the resource files. It is also a good idea to enter a link prefix which will be added in front of every relative URL you add to scroller items. The link prefix should be the absolute path to the root directory of your site (e.g., http://yourdomain.com/).

3. Fortunately, the Scroller program does not have an option to include the JavaScript code in a web page, so we don't have to recommend that you generate a JavaScript include file; the program does that automatically. Place a link to stscode.js in between the <head></head> tags of the page on which you want the scroller displayed. The link should look similar to the following:

Finally, place a link to the JavaScript scroller file in between the <body></body> tags where you want the scroller to appear on the page. The link should look similar to the following: