Tuesday, July 18, 2006

Web site stuff Web site stuff

I have a website for my business as a patent attorney. But contrary to usual practice, I wrote it all from scratch, and have included a number of novel features in its operation. I did this mostly because I am a programmer at heart, and it was fun, though it has taken a lot of work to accomplish.

A year or so ago, I got it operational after a couple of months of hard work. Since then, I haven't worked on its functionality, but have tweaked the content a bit. But even that is dangerous, as it got me thinking about ways to improve the functionality of the site.

One thing that I ran into a month ago was a need to duplicate most of my home page for Yahoo marketing. They wouldn't accept my fairly stark home page. But the minute I duplicated my home page, I realized that the easiest way to keep my, now, three main/home pages consistant, is through the use of Javascript and CSS style sheets. But as a result I also started screwing around with their look.

The page I am using right now in blogger to draft this has some 3D effects. They have become so common that we don't think about them anymore. The primary way it is accomplished is via shadowing, and the easiest way to do that in HTML is via borders.(Blogger also uses a slightly lighter color for the top "tab").

It turns out that this sort of 3D effects can be modified on the fly through changing CSS classes for entities using Javascript to modify the entities' DOM (the data structures correspnding to the enties). I discovered this nice scripting feature last fall when working with blogger to figure out how to hide and show blog entries. That is one way it is done - one CSS class has text visible, and another doesn't, and switching them back and forth causes the text to appear and disappear.

So, I figured to do the same thing with my buttons on my web site. When you depress a button, I switch CSS classes, and then switch back. As a side note, I also switched from anchors to "onclick" on table entires in order to provide a single click response on my main web pages plus provide a bigger target to "hit" - I had done that earlier on my navigation buttons.

It took awhile to get the graphics to work right, and to move the HTML button generation to Javascript, but I got it working a week or so ago. Then, I tweaked it a bit to switch from a light blue with black lettering to a dark blue with white lettering, along with reversed shading, for depressed buttons.

This morning I managed to get the navigation buttons redone too. They were more difficult, because they reside in one frame, and are used to navigate in another. Worse, the document in the second frame may change, while they don't (I did this to speed up loading subdocuments in that other frame that share the same navigation and legal notices frames). That means that the binding between the buttons and the functions used to navigate has to be delayed until the last instance. But if you wait until then for the entire binding, it means that the Javascript code is interpreted, instead of being compiled, which slows things down a bit. Another problem that I faced with binding was that I was trying to build internal tables and generate HTML at the same time, but that the code had to ultimately access the DOM for the generated HTML entities - that didn't exist yet. A fine line, that I think I have managed to optimize.

One final problem reared its head. For each of the navigation buttons, I would first swap CSS classes for the button (so it would appear to be "down"). Then I would call the navigation routine. And then, I would swap CSS classes back, to show the button as "up" again. Which sometimes worked just fine. But sometimes, it happened so quickly, that you almost couldn't see it. So, I instituted a timed delay for the "up", giving the button enough down time that it would be noticable.


1:24 PM Display: Full / Chopped / Footer

Display: Full / Chopped / None

Display: Full / Footer / None

Display: Chopped / Footer / None


Blogger Stephen C. Carlson said...

Instead of swapping class for the buttons, you might want to consider using the ":hover" pseudo-class in CSS.

6:42 PM  

Post a Comment

Links to this post:

Create a Link

<< Home >>