Scroller Genie in Template?

Question:

Can I use Scroller Genie in a template-based page?

Answer:

It can be done, but not easily and automatically. While Dreamweaver’s template feature is technically advanced, it also has its limitations. And those limitations stand in the way of adding Scroller Genie to a template-based page in the way you would add it to a regular HTML page.

However, with some modifications to the template and some manual copying/pasting of source code you can definitely put a Scroller Genie scroller in a template-based page.

Note however that adding Scroller Genie to a template is an advanced technique and it should not be tried by anyone who’s not comfortable working in Code View and/or who has no prior experience with Dreamweaver templates.
This is not a task for a beginner!

Here’s how to do it:

Open a new, blank HTML page (not based on the template!) in the same site directory as your Genie page.
This page will hereafter be referred to as “test page”.

Add Scroller Genie to this test page the way you would like it to be on the real, template-based page (eg. specify the position, size, and appearance etc. according to the required end result in your real page).

Note:
Anchoring can not be specified at this time, because evidently the anchor object is not available on the test page. But if required, anchoring can be specified later-on in the Genie page itself.

Now move the BODY onLoad handler to the scroller itself:
a. Find the onLoad event for the <body> tag, select it completely and use ‘Cut’ to place it on the clipboard.
b. Then find the first IMG element in the scroller (an image named ‘shim.gif’), place your cursor just before the closing ‘>’, press [Space] and then paste the content of the clipboard.

That <IMG> tag should now look something like:

Make the template aware of the Scroller Genie JS file:
Open the template itself and create a reference to the external Scroller Genie JS file in the HEAD section just before the </head> tag.
The code should look something like this:

Note:
It should be possible to place the reference to the JS file only in the template-based page, thus keeping the ‘burden’ of loading the Scroller Genie scripts from pages that don’t need them.
However, in that case Dreamweaver doesn’t seem to be able to handle Behavior changes later-on: it crashes with a ‘fatal exception’ error. So to be on the safe side, we’ll put the reference in the template already.
But because it concerns an external JS file, the file will only be loaded once and will then be cached by the browser. So the ‘burden’ for other pages derived from the same template is not too bad.

Create an Editable Region in the HEAD section of your template, just above the </head> tag, and name it eg. “ScrollerGenieHead”.
In Code View it should look something like this in DW4/UD4:

And it should look something like this in DWMX:

Create an Editable Region in the BODY section of your template, just above the </body> tag, and name it eg. “ScrollerGenieBody”.
In Code View it should look something like this:

And it should look something like this in DWMX:

Save your template and open or create the template-based page where you want to add Scroller Genie (hereafter referred to as “Genie page”).

In the source code of the test page, copy all the HTML code that comprise the scroller (everything between the <body> and </body> tags), and paste it into the “ScrollerGenieBody” editable region in the BODY section of the Genie page.

In the HEAD section of the test page, copy all the styles (including the <style> and </style> tags).
Paste them in the Genie page in the “ScrollerGenieHead” editable region in the HEAD section.

In the HEAD section of the test page, there are also several standard DW scripts that are associated with Behaviors that are applied to some Scroller Genie elements, eg. MM_findObj(), MM_preloadImages(), MM_swapImgRestore(), and MM_swapImage().

If these are not yet available to your page, either directly in a script block in the HEAD of the template or in some external JS file, then copy/paste this entire script block (including the <script> and </script> tags) from the test page to the “ScrollerGenieHead” editable region in the HEAD section in the Genie page.

Now save and test your Genie page to see if the scroller looks and functions okay.

If you would like to anchor the scroller to some object (eg. an image in a centered table) on the Genie page:
a. Find the IMG tag where you pasted the onLoad handler.
b. Put your cursor on it and double-click the ‘Scroller Genie - Init’ behavior in the Behavior panel.
c. Specify the anchoring options and click OK.
d. Save and test your page again.

That should do it!

Comments

Be the first to write a comment

You must me logged in to write a comment.