decloak logo
Cart cart | sign out  
Template and Menu Hot Sauce
MainFeaturesFLASH MoviesFAQCustomersOverview ONDownloadsBuy

1. Support Home
2. Common Error Messages
3. Useful Upgrade Tips
4. URL Path Confusion
5. Setting Keyboard
6. Sending Error Messages
7. Find And Replace Tips
8. RollOver Problems
9. Layout vs Standard View
10. Site Definitions
11. Editing Vertical
      Tree Menus
12. Recreate Site List
13. Update Site...
14. Web Page Width
15. Designing for
      Search Engines
16. Adjusting Tree
      Menu Margins
17. Set Focus On
      Text Box
18. Rename Folder
19. Dynamic Page
20. No Valid
      Editable Region
21. No Super
22. Initialize Folder
23. Initialize Combo Tree
24. Tree Line
25. UnBalanced
      Editable Regions
26. Foreign Language
      & Special Characters
27. Adjust Row Menu Height of
      Vertical Tree Menu Items

    Set Focus on a Text Box when
web page first loads
0.   Overview:
As you already should know, you can set the the template parameters to be different for each one of your pages so that each page has it's own unique highlighted menu item and/or background colors.

Accordingly, by using another new template parameter, you can do the same for adding a JavaScript function (or inline code) to set the focus to be different (or the same) for each one your web pages.

This is a little tricky so just follow the steps below and if you have any questions or problem, please do contact customer support.
1.   Add a another template parameter in the SUPER template. I would call it the onLoadEventAddendum parameter.

For example, in the SUPER template of your web site: put this code in RED, after to your other template parameters:
<!-- TemplateParam name="TNavParam" type="text" value="" -->
<!-- TemplateParam name="SNavParam" type="text" value="" -->
<!-- TemplateParam name="bgcolor" type="text" value="#FFFFFF" -->


<!-- TemplateParam name="onLoadEventAddendum" type="text" value="" -->

2.   In the same SUPER template, add the following inside the BODY tag:

onLoad="@@(onLoadEventAddendum)@@ void(0);"

so that a typical "completed" BODY tag up top will look like this below:

<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;" onLoad="@@(onLoadEventAddendum)@@ void(0);" >

3.   Next, execute the command:
Modify --> Templates --> Update Pages...
to have the new template parameter, onLoadEventAddendum and the changes to the body tag applied to all the other pages of your web site
You will have to set the checkbox "passthrough" parameter for the templates, TOPNAV, and it's child templates on down to the web pages so that this new template parameter, onLoadEventAddendum, will be available for the web pages.

Dreamweaver will also ask you to Update Pages on each change after you save it. Say OK to update these pages.

5.   In the web page, e.g. for example Forms_01.htm, you want to have the JavaScript command for say the focus() event, you just add the code in the template parameter on that web page.

For example, if you want the textbox with ID textfield1 to be focus when loading, you can use the folowing JavaScript code:


You can also see the below image since it can be confusing on where it should go.

onLoadEvent template parameter value is actually the JavaScript code itself!!!
6.   By doing it this way, you can still update pages the same way and Dreamweaver will not touch your client side code

And just as important, each one your web pages can have a different focus, or JavaScript command if you want it to be.

If you wanted to call a function instead of some inline JavaScript code like above, please use the name of the function instead of what you see above, e.g.

So instead of putting the code,
You can put a call to your JavaScript function. Like for example:


NOTE: Put a semi-colon ";" at the end of your function call.

Then, inside the Editable region, named doctitle, of that same web page that needs to have the textbox focused when the page loads, you put your <script></script> tags and inside of these script tags, you can define (or put the code) for your JavaScript .function.

In fact, inside the Editable Region doctitle, you can put additional CSS style blocks, other JavaScript <SCRIPT> tags, additional meta tags, and any other stuff that you want customize for that page.

It's a little tricky, but it's not bad once you do one of them.

terms of use | privacy policy
copyright © 2003 - decloak, inc. all rights reserved