Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

PVII Knowledge Base

1. Select a product ...
2. Select category ...
3. Search the Knowledge Base...

Question #75

I am trying to apply the Geewizz scroller to a template-based page and Dreamweaver will not allow me. Why?

The Answer

Prepared Jan. 2002 by Ken Ford, PVII Support

There are 2 things at play here and both have to do with limitations in Dreamweaver's Template feature. DWTs are very powerful tools that evolve with every DW version, but there are limitations. It is certainly possible to put a Geewizz scroller (or any DHTML widget) on a template-based page... but it requires a deep understanding of just how DW Templates work.

Here's the short course:

1. Create a special Editable Region in your Template called LayerDropZone:

<!-- #BeginEditable "LayerDropZone" -->
<!-- Paste your layers here -->
<!-- #EndEditable -->

-Place this region at the bottom of your DWT's source, just above the </body> tag.

2. Make a second special editable region called scrollScripts

<!-- #BeginEditable "scrollScripts" -->
<!-- Paste your scroller scripts here -->
<!-- #EndEditable -->

-Place this region in the <head> of the template, just above the </head> tag.

3. Make a third special editable region called Scroll Styles.

<!-- #BeginEditable "scrollStyles" -->
<!-- Paste your scroller styles here -->
<!-- #EndEditable -->

-Place this region in the <head> of the template, just above the </head> tag.

4. Make your scroller on a fresh new test page with absolutely no other content.

5. Move the onLoad SetScroller and runScroller (if an auto scroller is used) to the onMouseDown event on the right or down pointing arrow control. In other words, the first "button" a user will use to operate the scroller.

6. In the source code of the test page, copy all of the layers that comprise the scroller. Essentially, this will be everything between the <body> and </body> tags.

7. Paste this code inside the "LayerDropZone" region, replacing the <!-- Paste your layers here -->.

8. Copy all the scripts (including the <script> and </script> tags and paste them into the ScrollScripts region, replacing the <!-- Paste your scroller scripts here -->.

9. Copy the nested layer styles from the test page, including the <style> and </style> tags and paste them into ScrollStyles region, replacing the <!-- Paste your scroller styles here -->.

That should do it. Now keep your scroller test page, because you'll need it to alter the event handlers (if you change options or settings) and paste the revised handlers into your template-based page.

This is an advanced technique and should not be tried by anyone without a good knowledge of DW Templates and is comfortable working in Code View. This can be a daunting task for a beginner.

Also understand that this technique does not fix anything wrong with Geewizz... it's just a workaround to an inherent limitation of the DW Template feature.

Get to love the Code View... it will definitely be your friend :-)

Back to the questions list