How this site works.

As you may know, Jazzy likes to go old skool occasionally. Sometimes the old way really is the best way, but sometimes you do it out of necessity. This site runs on a free web hosting service, which is cool, but it's got no bells and definitely no whistles. So, I decided to embark on a simple little adventure with JavaScript. I think that JavaScript is a good choice because what I wanted to do was very simple, and JavaScript is very compatible with the major browsers.

I wanted to create a menu where I could direct users to each section of the site seamlessly. The other desire was that the menu could be used on my blog site (which is on another server), and users could navigate from my blog to the main site and back with the same interface. I also wanted to create a method for users to select their preferred text color. I will eventually allow this to work with the background color as well. I don't want users to have to browse the entire site looking for new content, so I needed a way to indicate update dates. Since my free web host doesn't support include files, Javascript was a good way to get what I want.

I do some very simple things on this site with Javascript in order to accomplish those goals. One, I created a JavaScript header file to render the menu. Two, I created a cookie to allow the user to select their text color. I also created functions to return the most recent date that content in each section was updated. I have to change these dates manually, but only in one place. These things work together to create the menu and the dates identifying new content. I used simple Javascript with parameters to alter the subtitles on each page by sending in a parameter. I also send in a parameter that indicates which section the current page belongs to, so I can highlight the section in the menu (I used curly braces for that, which you can see at the top of this page). At the top of each page, I have a Javascript function call that renders the header menu. Here's the function call used at the top of this page:

Now, to do the header, I needed to pick up those parameters and read the cookie to determine the user's preferred text color. I also needed a way to preview the text color before it was saved to the cookie, so I created a page which simply sends in the chosen color in the querystring. The querystring color takes priority so that the preview will work without saving the cookie. If the user is happy with the color, the form is submitted to another page and the ColorFormSubmit() function is used to save the value from the querystring into a cookie. If no cookie is found and no querystring is present, the default color is used. I also use a function to display the footer at the bottom of the page, so I can close tags created by the header, and display information about the site. It's all done in the following Javascript code:

I plan to expand this at some time to keep track of user visits and display a icon next to the sections which have changed since the user's last visit. I think that will improve the ability of returning users to find changes I have made recently. The design of this site is not about fancy graphics or flashy features, it's about making the content easy to find, and I hope these simple little tricks will help you as you develop your sites. It's really best to keep things simple, and javascript is about as simple as it gets. I'm really not sure what else needs to be explained, so please let me know if anything is not clear. (Contact links are in the footer)