Adding New Items to a .js File

Editing .js Javascript files for Allwebco templates

Document Write Rule
To add any item to a .js file like the sidebar.js or menu.js put the following in front of every line:

document.write('

Put this at the end of every line:

');

Do one line at a time and test to see if the template pages are still working properly before you go to the next line.

Note: If you use an ' (apostrophe) inside that code anywhere add a slash before it like this \' as in the example "jacks\'s".



Adding some text
If you want to a line of text to the menu.js or sidebar.js, add it as in the following example:

document.write('Just a short note<br>');


Note: This will not work in templates copyrighted before 2008 in the menu.js.



Adding an Image
To add an image with a link to the header.js, use the following:

document.write('<a href="newpage.htm"><img src="picts/yourimage.jpg" border="0"></a><br>');

In the above example notice how this code is breaking into two lines. When you paste it into your .js file make sure this is all on one line. If you need to, turn off "word wrap" under "Format" in Notepad or your text editor.

Option: Once you add the above code to a .js file, you can then optionally float and locate this item anywhere on the webpage. See: using a DIV to place an item.



Adding a Javascript
You can add a Javascript to any template .js file, however, in this case do not add the following code from your script. Remove the script start tag:

<script type="text/javascript"><!--

...and remove the script ending tag code...

//--> </script>



Adding Google Analytics
You can add Google Analytics code to a .js file. This allows you to add Analytics globally to every page in your website. See: Google Analytics support.



Adding Google Ads or other items with .js file calls
Some code or ads you will want to add may include other .js code. In other words you will be adding a .js file inside a .js file. Below is an example of how to add a .js file call inside a .js file.

If your line looks like the following:

<script type="text/javascript" src="http://google.com/coop/cse/brand?form=searchbox_003488088439636726711%3Adzunaemraqw"></script>

One option would be to edit the above line by adding ' + ' in the script text and a \ in front of every / like the following:

document.write('<scr' + 'ipt type="text\/javascript" src="http:\/\/google.com\/coop\/cse\/brand?form=searchbox_003488088439636726711%3Adzunaemraqw"><\/script>');

The above is a complex edit. You will want to take care and be sure to do this edit carefully. Any single error and this may not work. See also: adding Google ads.



EXAMPLE: Add a Google search box
Perhaps you would like to add a Google search to the sidebar.js that looks like this:



Copy the following code and paste this into a .js file:

document.write('<div style="background-color: #F0F0F0; border: 1px solid #999999; padding: 5px; max-width: 188px;">'); document.write('<span style="color:blue">G</span><span style="color:red">o</span><span style="color:orange">o</span><span style="color:blue">g</span><span style="color:green">l</span><span style="color:red">e</span> Search<br>'); document.write('<form action="http://www.google.com/search" name="f" target="_blank" style="margin: 0px;">'); document.write('<input type="hidden" name="as_occt" value="any">'); document.write('<input size="15" name="q" value="" style="width: 125px;"><input type="submit" value="Go!" name="btnG" style="width: 50px;margin-left: 5px;"><br>'); document.write('</form></div>');

Once you add the above code to a .js file, you can then optionally float and locate this item anywhere on the webpage. See: using a DIV to place an item.



Google search box in an HTML page
The following code is the same Google search box as the above example but it is instead added to an HTML webpage and not a .js file.

<div style="background-color: #F0F0F0; border: 1px solid #999999; padding: 5px; max-width: 188px;"> <span style="color:blue">G</span><span style="color:red">o</span><span style="color:orange">o</span><span style="color:blue">g</span><span style="color:green">l</span><span style="color:red">e</span> Search<br> <form action="http://www.google.com/search" name="f" target="_blank" style="margin: 0px;"> <input type="hidden" name="as_occt" value="any"> <input size="15" name="q" value="" style="width: 125px;"><input type="submit" value="Go!" name="btnG" style="width: 50px;margin-left: 5px;"><br> </form></div>

Related Topics:
Editing .js Files in Windows
Using a DIV to Place an Item