Use JavaScript to Dynamically Update Your Website
By Shelley Lowery
If you've been on the Internet for a while, you've probably
seen numerous examples of JavaScript use. JavaScript is a
powerful scripting language used to create special effects
on your website, but did you know it can also be used as
a very powerful web design tool?
Have you ever joined a new affiliate program or created a
new publication that you wanted to add to your existing
navigational set up, but dreaded having to manually add the
links to every page on your site?
You can use JavaScript to enable you to dynamically update
every page on your website with just one file. This technique
is the same technology used by numerous syndication services
on the Internet. It enables them to deliver dynamically
updated content to every website in their program.
Before we begin, if you'd like to see an example of a
navigational system that is dynamically displayed, visit
http://www.web-source.net/. This website has over one
thousand pages and each and every one of them displays its
navigational system using JavaScript. If I want to add an
additional link, I simply update one file and every page on
the site is automatically updated.
The first step in setting up your JavaScript feed is to
create the file that will contain your content. To do this,
open a text editor such as NotePad and simply copy and paste
your existing navigational setup into a new page. There is
no need to begin the page with <html><head> etc., as you are
only creating the feed for one section of your existing web
page which already has those tags.
Once you've created your new page containing your
navigational HTML, you'll now need to add some additional
JavaScript coding to each line of your HTML.
The first line of your new file will look like this:
!--
The next line will begin with "document.writeIn('" and end
with "');" (without the beginning and ending quotes). Your
first line of HTML will be placed between the beginning and
ending coding. For every line of your original coding,
you'll need to add the above-mentioned codes before and after.
Note: Make sure you don't add any extra spaces, including
at the end of each line, as JavaScript is very sensitive.
Your new file will end with //-- on the last line.
Here's how your code might look:
Please note: The following code should be enclosed with <
at the beginning of the first line and > at the end of the
last line. These brackets have been removed to enable you
to view the code properly.
!--
document.writeln('<TABLE BORDER="0" ALIGN="Center">');
document.writeln('<TR>');
document.writeln('<TD>');
document.writeln('Your table content');
document.writeln('</TD>');
document.writeln('</TR>');
document.writeln('</TABLE>');
//--
Each backslash (\) should be preceded with another backslash.
Example: \\
Each apostrophe (') should be preceded with a backslash.
Example: \'
You can include most HTML and JavaScript coding; however,
you cannot include JavaScript that must access another file.
After you've created your content and added the special
JavaScript coding, you'll need to save your new file. Try to
select a name that reflects your file such as navigate.js and
make sure your filename is no longer than eight letters.
Next, you'll need to create a new directory on your server
where you store your HTML files. Name this directory
"content" (without the quotes) and upload your new .js file
in ASCII.
Here's where the magic occurs... Place the following code in
your HTML pages where you would like your navigate.js content
to be displayed. Make sure you change the URL and direct it
to your new .js file. The following code must be displayed
exactly as it appears. Make sure there are no spaces after
the first line of code.
<SCRIPT language="Javascript" src="http://www.yourdomain.com/content/yourfile.js">
</SCRIPT>
If you've followed the above steps correctly, your
navigational system should now be displaying on your web
page. If you are receiving a script error message, most of
the time, it's due to an extra space at the end of a line
or an extra or missing character. Make sure you go over
your code very carefully. Once you've created your content
feed and it is displaying your content, updating your file
will be simple.
If you'd rather not have to code the JavaScript yourself, I
use a great script called, Master Syndicator which will
code your content for you. http://willmaster.com/master/
Using JavaScript to display your navigational set up can
not only enable you to instantly update the content on
every page of your website, but can also save you hours of
valuable time.