About This Site

This page is the development journal for the web pages I'm building for a UML class and for the JS practice I'm doing. So there are lots of long, boring discussions about problems I encountered and the solutions I tried to implement. This may well have little interest to you all, but it will have interest to me when I find I need to remember how or why I did something before.

Wednesday, April 02, 2008:
I embedded a monpage graph on my "About" page.
I should work some more on this, but I've been spending my time trying to develop a blog section using a TextPattern install on a subdomain.
Saturday, January 05, 2008:
It looks like I got hit by some kind of weird search and replace bug on the dates below. Oh well, we'll just have to guess it seems.
This update relates to finding some typos: 3 on the Umaji2003 page; 2 on the ONA_FAQ page; 2 on the Hokkaido page; 6 or so on the Page of Dogs; 3 or 4 in the DesignGoals page; 3 on Annotated Spirituality Resources; 3 on the 3-col layout page; one on my home page. There might be others, but the crawler/spell checker I used had problems with subdomains.
Wednesday, July 11, 2007:
I found that the title over the nav bar was called "Page Index". Really, it should have been called Site Index, so I changed it on all pages (I hope).
Wednesday, July 11, 2007:
Yikes, I've done nothing in 8 months, then I found a bad link on the DesignGoals page.
I also formatted and added the various travelogue pages, Hokkaido, Madrid, Umaji, etc.
Wednesday, July 11, 2007:
Yikes, I found a typo inside one of the links on the JoyfulNoise page.
I made a minor revision to the About page. I shouldn't read and edit things when I'm trying to avoid doing other things.
I added a meta tag to the home page to allow Google Webtools to validate the site. I'm not sure what good that does. I'm not much up for making site maps and the like. Maybe someday.
Wednesday, July 11, 2007:
A couple of weeks ago, I made a new web site for my more alleged professional pursuits. So this site has been on hiatus. Today, I uploaded a bunch of scanned journal articles to the other site, and then linked to those pages from the Technical pages on this site.
I fixed a typo on the family pages and noted that Scooter had left us.
Ok, I worked up my Spirituality pages a bit more. Mostly some layout issues so I could post my Stewardship articles. I'd formatted those a while back, but not posted them.
I put a few crane pictures up. The formatting sucks, but at least I have something posted.
Saturday, June 10, 2006:
I munged the e-mail addresses at the bottom of the sets of pages in Brewster's and Justin's web pages. I also changed Brewster's e-mail. They both now have e-mails on my domain. I've set them up to automatically forward messages elsewhere. Actually, I need to redirect Justin's. I tested it by sending it to my GMail account, but it really needs to go to his account.
I retitled my pages so there would be alliteration
Wednesday, July 11, 2007:
Oops, I had a typo on one of the tunes from Justin's recital. I found it when I checked the links I'd sent to Steve Callan who did his real site. Interestingly, it didn't show up on his newly moved "original" site.
Wednesday, July 11, 2007:
For some reason, I lost everything in my primary folder on my home computer. So I had to download it all back. It wasn't even in the recycle bin. What's up with that?
I made a custom error-404 page and it seems to work. I have to figure out if I can make special pages for the subdomain sites I set up for Justin and Brewster.
I moved the link to Brewster's home page (on the Family page) Comcast to the subdomain on this site.
I formatted my ONA pages and uploaded them. It took more effort than I expected. I had wanted to minimize the amount of work, so tried to use the original pages. Well, I had to do quite a bit to get the layout ok. There are still problems. The headers are all offset for some reason.
Wednesday, July 11, 2007:
Yesterday and today, I worked on uploading the new site such as it is. Basically, I just uploaded the UML site with all the gaps and weirdnesses.
I uploaded a ton of music. I managed to fix the tags on the recital clips, but not on any of the other clips. I'll have to do that later, then re-upload it all. Uploading takes a while.
I made a subdomain for justin's old site and uploaded that site after making a few changes. The big problem was what to use for the e-mail address. In the end I gave him a dummy address on lgpiper.net
I made a subdomain for zapiper in preparation for moving Zach's site.
I put the Google Analytics tags on my pages. I still plan to install AWStats, but the Google analytics is faster for me to implement.
Wednesday, July 11, 2007:
My class ended, so things slowed down. I spent a little time tonight stripping some UML-centric coding so I could prepare my site to be uploaded to my TxD host.
Sunday, April 09, 2006:
As far as I'm concerned, I'm done with the site as far as the class goes. However, for some reason, I missed putting Katy on the Family page. She is, after all, a member of my family, and is a cool person on top of that.
Hazel gave me a nice picture of Kim and Brewster. So I scanned it and added it as well. Now we're complete.
Wednesday, April 05, 2006:
Ok, I fixed the problem with the setting of the radio button. The checked property is a boolean.
I added a right nav box to the About pages so that inner navigation would work better
I wrote up a resume of my JS files, albeit just in a plain-text file.
I uploaded it all and it worked (well, I don't know that. I'm hoping).
Tuesday, April 04, 2006:
I spent a lot of time trying to finish up my web site, but failed. I had to fix a couple of bugs in the JS. If there were no cookies set, the page defaulted to the goth style. Ugh.
I wanted to set the radio button on the front page to tell which style had been chosen, but failed to succeed in this endeavor. That's because I forgot that the checked property of a radio button is a boolean. I had this problem before. One would think I would learn.
I tried to make sure that all pages had the proper style sheets and js files linked.
Sunday, April 02, 2006:
Well, I think I got it mostly done. My style changer appears to persist. For the longest time, it kept defaulting to the goth style. I also got the individualized greetings to show up on all the first-level pages.
Saturday, April 01, 2006:
Well, I had a time with the cookies. I had a hellish time setting the expiration date. I still don't really understand the issues. My recollection from Java is that the Date() objects are excruciatingly difficult to figure out. They can do everything but tie your shoes, but certainly are user hostile.
Then I had lots of issues with my cookie setting. The main problem was that once I had set the visual style, it screwed up the lay-out style and vice versa. Eventually, I learned to make tags that discriminated. All visual style sheets had names prefixed by "vis_". So then I could ignore those particular sheets in the lay-out routing and focus only on them in the visual style routine. Now, I just need to move it all across all pages, and work in the special greetings.
I may want to rethink my file naming structure as well. Should I put both sets of style changing functions into the same .js file, or should I leave well enough alone given that I'll probably get rid of the visual style changes when I put my site up for real?
Wednesday, March 29, 2006:
I feel like such a moron. I did it again! I did a text-align: right; on my large-size 3-column style sheet when, naturally, I meant text-align: left;. I wonder if I'll ever learn the difference between right and left. I suppose not at my age. Whatever, I'm humiliated that I claimed to have made my "classmates" page look less stupid, when in fact, it probably looked more stupid.
I worked out the basic style-sheet switcher code. Now I just need to work on the cookies thing. Well, there's another problem. The large-font styles screw up my dynamic page layout. If the center container lops over onto the style-switcher box, the radio buttons can no longer be selected. I'm now sure how I'll deal with that one. Of course in the end, I won't have the style-sheet switcher on my real site.
Sunday, March 26, 2006:
I started working on a style-sheet switcher. I decided to have some different page styles that one could choose. Then the chosen style would persist through out the site with cookies. It shouldn't be hard.
Well, I didn't get too far before I discovered my main page wasn't resizing itself properly. After wasting lots of time, I discovered I'd never put an onload handler into the body tag for that page. How come? Perhaps it got lost in one of my updates.
Wednesday, April 05, 2006:
I worked some more on my fly-out menu. The trick, thanks to a tip in Zytrax.com was to position the nested <ul> absolutely and then the <li>s off that were positioned relatively. Before I did the <ul> absolute positioning trick, the vertical block for the fly-out <li>s was preserved and I got huge gaps in things. The next trick was to get the flyout bits positioned so that I could mouse over them before they disappeared. It took a while to get them close enough to the main button and also to themselves. There's still a problem that too many fly-out elements cause the next lower primary element not to be selectable. I need to come at things from below. I'm sure I'll get it in a while, but first I need to redo all this in JS for the class project.
I struggled mightly to make a graphic, rollover menu. I struggled considerably to make "buttons" that looked more of less like the ones I made with css styling. Yeah, perhaps they look a bit better, but not much. Then I struggled to make the images change. Several things are required:
  • you need to remember to put quotation marks around the urls to the gifs in the pre-loading phase
  • you need to have your file names the same in the preloader and the regular calls as they are on the hard drive. For some reason, my first button sprouted a space in the file name and I didn't catch that for hours. I never put spaces in my file names. It's almost a moral issue with me.
  • Althouth the "name" attribute is technically defunct, it can be used to select images from the document.images array. OTOH, you cannot do that with ids. Seems dumb to me, but what do I know. I should rewrite things with some kind of getDocumentById thingie. Of course, then I'll have to remember to change the names back.
Whatever, I got it to work the hard way.
As nearly as I can tell, there's no good way to tell where you've been. I wanted to write a script that would make the buttons on already visited sites different from the non-visited ones. I couldn't seem to access the urls in my history via the window.history object. I'll have to learn to do it with cookies.
I found some rather bizarre formatting problems with my About and DesignGoals pages. I hope they're fixed now.
Wednesday, March 22, 2006:
I worked to make a css fly-out effect. Of course it won't work in IE, but the point for me is to learn proper css. IE will catch up eventually. Whatever, I got the basic nestec uls working and the links flew out. The positioning and styling wasn't right.
Monday, March 20, 2006:
I finished preliminary versions of my "About" and "Design Goals" pages. I should have been working on my roll over navigation, but I didn't.
I also did the annotations on my 2-column and 3-column layout pages. So now, one hopes, the preliminaries have been finished and I can get on to the damn web site.
Sunday, March 19, 2006:
I redid the pop-up project. I wrote the whole page from scratch with document.write() statements, including the header, call to style sheets, DTD, you name it. It took a while, but it works. I also added contingencies for cases in which people didn't bother entering anything, or hit cancel at the prompt.
Wednesday, March 15, 2006:
I updated my form validation script to put the focus back in the element that failed the test. For example, if the e-mail address were invalid, then the focus went back to the e-mail address field after one closed down the alert() box..
I added all the appropriate style-sheet calls to all the primary pages for my size-changer script.
Still no progress on the pop-up issue. If there's an alert() box before the winPop.document.getElementById('xxx') thingie, it works. No alert() box, it doesn't work. HUH?
Tuesday, March 14, 2006:
I spent my time trying to track down the problem with the pop up. So I managed to get the getElementById thing working in the popup and could change the text with innerHTML, until I deleted all the alert() boxes I'd used to track things. For some reason, the alert() box was needed for the program to be able to find the reference to winPop.document.getElementById(xxx). What's up with that? I went to be totally dejected.
Sunday, March 12, 2006:
I spent a ton of time on my automated resizing problem. I thought I had the script worked out, but it didn't seem to work. The two-column resizing was fine. It was the three-column design that had problems. The center_content div was hanging outside its borders in both Opera and FF. Then, when I came back to it, it was working. I have no idea what changed. It also seemed to work in IE, although I had to make the width of the column for the medium content a bit smaller. I just went down to 24em from 25. It should be ok. We'll see.
Saturday, March 11, 2006:
I spent entirely too much time again trying to reorganize my greeting pop-up. This time, I wanted to have radio selection buttons set so one could either have or not have a personalized greeting. If the person selected "no", then text would replace the radio buttons and tell the anonymous person that I hoped they had fun. If the person selected "yes", then the prompt popup would ensue and all the rest. The problem was that I wanted to make it all work in an external .js file, and for some reason, when I do the coding in an external file, I lose all reference to the opener window. Thus the value entered at the prompt doesn't appear in the pou-up greeting. It just says, "... undefined ...." I wasted entirely too much time. There's no reason I shouldn't be able to do all this off the main page. None of my Googling bore fruit.
Then I spent a bunch of time working on getting my dynamic style-sheet switching laid out. I have two situations, a two-column set up and a three-column set up. I figured out that for IE to work, I need a fluid right column below 800 px. For 2-column, the content can be fixed at 32em for IE to work above 800 px and a full 35em above 900 px. For the 3-column, I worked out 25em in the 800 to 1000 px range, and a full 35 em above that. None of this would be necessary, of course, if IE supported min-width and max-width, or if IE knew how to deal with overflow (i.e. throw in a horizontal scroll bar -- instead it just makes things disappear).
I started on my script, but didn't get it to work properly. I forgot that I need a "persistent" style sheet that is always working to handle the colors and basic lay out and then just a set of mini style sheets for the variations in the column widths.
Sunday, March 05, 2006:
I spent a ton of time on my e-mail validation. I am now able to use a regular expression pattern to see if the format of the e-mail address is valid. The one thing (I think) that I didn't work out was the issue of quotation marks. I tried to copy from someone else, but that didn't seem to work. I've put my notes on what makes a valid e-mail address in a plain text file.
I fixed an error in my contact style sheet that FF found for me.
I spent entirely too much time futzing around with the introductary comments for project 3 and the layout of the stupid ContactThanks page that doesn't work anyway.
Saturday, March 04, 2006:
I spent entirely too much time trying to reorganize my greeting pop-up. I wanted to have a pop-up form that would then send data to another pop-up or back to the main page. I got hung up on the damn form parts. For some reason, when I made the form before, I could access it with the form's id, i.e. "contact". For some reason this wasn't working today (I should have rebooted to see if my browser were being poo-headed). So in the end, I accessed the form with forms[0], which worked just fine. The weird thing is that I know my contact form worked just fine the other way prior to this fiasco.
I gave up on redoing the pop-up greeting and focused on my contact form. The problem I got into here, other than the one mentioned above, was myriad problems with names and such (I know that lastAT is different from lastAt, but couldn't seem to find that problem in my code for the longest time). Then I tried relearning enough about regular expressions so that I could parse the e-mail address to see if it had a valid format. I didn't get all that far, but made a little progress. In the end, I'm going to have to back off, I think.
I also added onfocus="this.select();" to each of the fields, and fixed a missing name in one of the <label> tags.
Sunday, February 26, 2006:
I completely reorganized the file structure for my vanity web pages. Now I have each major topic in a subdirectory. The subdirectory is named according to the subtopic and the main file on each of those pages is called index.html. So now, I can set up my site to deal with subdomains if I so wish. It's a bit of a pain to get all the ../s straight, but I'm sure it will work out in the end. It also makes group changes more difficult since I can't load all pages into TextPad in one fell swoop anymore.
I redid the pop-up test page a bit to indicate more explicitly allowing or forbidding some subjects. It's a real pain to test in IE now because IE views all JS as hostile, eventhough there would be no security threats were there not the basically flawed MS Windows design that basically invites everyone in for ease of use, and the gets surprised when scoundrels abuse that privilege. It's a bit of a surprise, actually, given that Mr. Bill isn't exactly a model of moral decorum (at least based on his company's predatory business practices). I really don't understane why anyone uses IE. It was a fine browser back in the late 1990s when it was developed, but is so dated that I'm surprised MS doesn't consider it an embarrassment.

I'm not sure I understood the second project correctly. I thought one was supposed to make a pop-up that asked for info, and then display that info on the front page. One of my classmates, however, used a window.prompt() function to get a name and then displayed the results from the prompt in a pop up. So I figured out how to do that. I've put the name both in a pop-up and on the regular page.

I wanted to make a pop-up form to retrieve the data, but didn't succeed in getting the info tranferred properly. I need to learn more about the get method.

Then too, I wanted to do all the work without having embedded scripts in any given page, but I didn't makage to do that either. Perhaps I'll manage it eventually, or perhaps it's a dumb idea.

I took down all my previous pages and uploaded the new set up.
Wednesday, July 11, 2007:
I worked away at setting up a format for my vapid, vanity pages.
I tried doing the pop-up thing, but it wasn't working. At least not the way I wanted to do it. I wanted to make a separate pop up with entry fields and retrieve the things people put in the fields. I didn't manage it. Naturally, I was able to get something simple from a prompt() pop-up.
Monday, February 20, 2006:
I figured out how to do my dynamic placement of the pop ups. I dont' have it fully worked out yet, but Opera moves things according to the dimensions of the document window, but IE and FF appear to use the screen area. So something centered over the open browser screen in Opera will still be off to the side and high in IE and FF. I don't suppose that much matters. At least it's visible in those browsers. And now in Opera as well.

I noticed that IE seemed a bit slow. Actually, my whole computer got slow after I was forced to upgrade to IE6 from my defective version of IE5. Anyway, I got out a timer and timed the time between clicking a link to one of the choices on my pop-up test page and the time the pop-up appeared. Opera and FF displayed all pop-ups within a second. IE, otoh, took 7–10 seconds to display a pop-up. Actually, I did have one test in which it took a whopping 27 seconds to display the default pop-up.

This is silly. Yes, I'm hardware limited, but I do have a 550 MHz PIII processor and 320 MB RAM. It's not like I'm running a 486 or something.

Sunday, February 19, 2006:
I figured out a solution to the three-column problem that will allow my page to render better in standards-compliant browsers and work in IE as well. Now all I need to do is I figure out how to serve up style sheets based on the visitor's useful viewport.

The problem is that if I fix the width of the center content, IE will make it disappear if the view port gets too small. That's because IE doesn't handle overflow correctly. So the solution, naturally, is not to specify width for the center content. This situation can get ridiculous, so standards compliant browsers allow one to specify minimum widths, but not IE (and from what I've read, IE7 won't support this property either).

Anyway, my previous approach was to fix the width of the center content block to a very small value so that IE would render properly in screens down to about 400 px wide. One problem with this is that my small content block was centered incorrectly in standards compliant browsers.

The reason it was centered incorrectly was that the container that held the content block expanded across the screen to encompass the right block. It is supposed to do this. But then the centering of the content block was to the margin, not between the two columns (i.e. within the expanded container block -- the container block was required so I could have my content block centered in IE5). To center the content block between the two columns, I needed to pull in the right margin of the content container so that it would keep the content container from expanding across the left column. This approach, however, caused IE to blank out my content when I had a fixed-width content block.

So the solution is to have a style sheet for small screens, say below 600 or 700 px in which the content block has no width at all. That means it can get ridiculously small, but people will have to cope. The upside is that I can now pull in the right margin so that the content block will be centered between the columns.

The downside of all this, of course, is that in wide screens, the content will get too wide. That's why I'll need to serve up a different style sheet for people with high screen resolution. But with high screen resolution, IE won't make my content disappear if I fix the width of the content block appropriately.

I began to make layout pages to descripe my two basic layouts. I have all the boxes outlined appropriately, I just need some text and proper links. I'm waiting to make sure I have a final design approach before I finish these pages.
I made a page to do some pop-up tests. The behavior is different in Opera than in IE. IE is also an amazing pig. It takes forever to load a new pop-up (well compared to Opera). Clearly, I don't understand this stuff. Opera isn't responding to dimensions and IE won't change them from one pop-up to the next.

Nope, I'm reusing the same window. When I load a new pop-up into an existing window, it retains the dimension it had before.

IE won't scroll the content without scroll bars. Opera will allow me to scroll with the mouse wheel or cursor keys.

I still need to figure out how to place it. IE places the pop up fairly high on the screen, but Opera centers the tot of the pop up on the center of the useful viewing area. That's not much use to me. Then I have to move things to see things. So that's why IE folks don't squawk. They don't see what I see. Not a surprise, really.

Wednesday, February 15, 2006:
I spent entirely too much time working on position issues. Damn IE.
Sunday, February 12, 2006:
I added an explanation for the funny rendering on my Classmates' pages to the "nav" box.
To make the above change, I had to alter the style sheet to allow the height of the "nav" box to vary according to content.
I added due dates to the list of projects.
I worked on figuring out how to get JS to tell me the size of the useful area of the browser window. It turns out it varies from one browser to another. Not surprisingly, IE doesn't fully support the DOM standards on this.
Wednesday, February 08, 2006:
I added two more folks to my classmates page.
Sunday, February 05, 2006:
I fixed a couple of typos on my Oops page.
I updated my me.js file so it had the proper e-mail address (it still had Yahoo!).
I changed munging of my e-mail address in the "To:" field of the contact form. Since nothing is actually posted from that field, it's ok for me to use NCRs.
Saturday, February 04, 2006:
I reformatted all my pages to be xhtml 1.0 strict DTD
I spent entirely too much time nesting my logo inside a header div with the <h1> off to the side. The problem for me was to get the logo inside a yellow box with the rest of the stuff in the sepia box with yellow printing. The final result is not flexible, so I'm not happy.
I moved the introductory content on the Classmates' projects page to a side bar and labeled it the "blather box". No one is going to read it, and by moving it I made the actual links more accessible.
Naturally, with all the changes I had to revalidate things. It turns out my contact page was invalid because I had a "name" attribute in the <form> tag. I changed that to an id.
Re-upload all the pages
I added a couple classmates and did some annotations
I had to make up a special style sheet for the ClassmatesProjects page to accommodate IE which doesn't understand min-width and max-width. Interestingly, once the boxes get fixed width so that they can all appear on my screen, IE positions them very differently from Opera. The IE implementation actually looks a bit better, but is technically incorrect. Of course if IE supported min-width and max-width, the page would look fine everywhere. Firefox renders the page correctly, so it doesn't look so good as it would in IE.
Tuesday, January 31, 2006:
upload dummy page

© 2003–2006 by Lawrence G. Piper
e-mail me: larry@lgpiper.net
Or use my contact form

Last update: Wednesday, April 02, 2008