Press the Browser refresh button to
view the random tip selection (note the status bar as well)
Setup the Component
For this example, the Page Scroller component will be setup with an intro
page and 7 tip pages. The intro page will be a splash or intro page that
will appear when the component first comes up. The pause time on the intro
page is set to 30,000 mS or 30 seconds so that the intro page will remain
until the JavaScript sets the random tip page.
Setup of the Scroll Page Component
Controlling the Page Scroller with
JavaScript
By adding a couple of lines of JavaScript in the FrontPage HTML view,
we can make page selection controls for the Page Scroller component. The
JavaScript interface for the Component Effects are documented on the Component Effects Advanced page of the
Component Effects Help file. For this example, we will use the "GotoPage"
function in the form:
MyComponentName.GotoPage('pagenumber');
where the "MyComponentName"
is the name of the component as set in the "Name" field on the Presenter's
Component panel as illustrated below:
Component Name Field
The "GotoPage()"
function tells the Page Scroller component to display
the "pagenumber"
in the page list. Valid range for the index values is from 1 to the number
of images in the component.
The JavaScript Code
The JavaScript routine is setup to
select a random page for the tip of the day using a JavaScript timer that
waits 7000 mS or seven seconds and then calls the "tipoftheday" function as
illustrated below:
timerID = setInterval('tipoftheday()', 7000);
The "tipoftheday" function is
setup to generate a random number and call the "GotoPage" function. Then the
routine sets the status bar text and kills the timer. Here is the complete
JavaScript listing.
<script
language="JavaScript">
<!--
function tipoftheday(){
var numberoftips = 7; // # of tip pages (not including intro)
var tip = Math.round(Math.random()*(numberoftips-1))+2;
PS20030501160049.GotoPage(tip);
window.status = 'Tip of the Day #' + (tip-1);
clearInterval(timerID);
}
PS20030501160049.Pause();
timerID = setInterval('tipoftheday()', 7000);
//-->
</script>
Complete JavaScript Listing - Note
Red text above may need to be modified
Copy the JavaScript Code to
the Page
This code should above should be copied from this page and then pasted
into an open NotePad window. This will remove all HTML formatting
characters. Then go to the web page you wish to add the JavaScript and
press the HTML tab Find the </head> tag and paste the routine on the line
before the </head> tag as illustrated below.
Code in the HTML View
Once the JavaScript Routine is added to the page, the
name of your component must be determined from the Component Panel and the
"PS20030501160049" in the code above should be replaced with your
component name. Also, you may want to adjust the "# of tip pages"
value as well. Also, please note that
JavaScript is case sensitive.
Now save the page and preview the page in your browser
(the FrontPage Preview tab will preview the component correctly).
Note: If you would like to disable the
status bar readout of the tip number, then place a "//" in front
window.status function call as illustrated below:
// window.status = 'Tip of the Day #' + (tip-1)
A Special of the Day
With a small modification to the Java Script we can make it so the tip
displayed is determined by the day of the week as illustrated below. This
might be very useful for specials of the day at a restaurant web site.
<script
language="JavaScript">
<!--
function tipoftheday(){
// must have 7 pages plus intro page
var theDate = new Date();
var tip = theDate.getDay()+2;
PS20030501160049.GotoPage(tip);
window.status = 'Tip of the Day #' + (tip-1)
clearInterval(timerID);
}
PS20030501160049.Pause();
timerID = setInterval('tipoftheday()', 7000);
//-->
</script>
Complete JavaScript Listing - Note
Red text above may need to be modified
And that
is it!
Outlined in this tip is the easy way to make
interactive Component Effects presentations with a simple block of JavaScript
code.
