new look to JavaRanch

[paul wheaton]

Anybody notice the new home page and all of the other pages outside of the forums?

[Ray Marsh]

Looks good, Paul.

[Jim Yingst]

Eh? You mean there's a site outside of the forums? (fora?)

[Angela Poynton]

Ooooh I like it ... much nicer!!

[Angela Poynton]

Actually though it means you can answer a question i've been asking myself.
When you hold the mouse over one of the toolbar buttons a nice little description comes up underneath ... how do you do this??

[Frank Carver]

I'm still puzzled as to why you set the widths of all your tables. This fixes the width of the text and has three essential drawbacks:
1. If I use a wide browser window, it looks tall and thin, and forces me to scroll down to see it all.
2. If I use a narrow browser window, it forces me to have to continually scroll sideways to ever read it. Yuck!
3. It can screw up the printing system in Netscape, and make the page basically unprintable.
Why not just remove all the widths from table and td tags, and let it adjust to the user's choice of browser width? Most browsers are pretty sensible, and fix the widths of columns with sized images in anyway.
I've done this and put a copy at http://www.io.com/~efficacy/ranch/ . I had to strip out the JavaScript to stop the server moaning about missing files, but otherwise it is the same. I've adjusted the link list at the bottom a little, but The logo-and-buttons at the top still imposes a bit of a width restriction.
Have a look with different browsers set at different widths, and let me know if you think it is any better.

[paul wheaton]

I'm sorry I can't answer the "how" and "why" questions. A friend of mine did all of this for me. I've sent him an e-mail asking him to come talk to us ...

[Frank Carver]

I can answer Angela's "how". This is how modern browsers respond to the ALT attribute of the IMG tag.
If you "view source" on the front page you'll see twenty lines or so of HEAD stuff (META tags and the like) followed by the BODY tag, then a thick clump of table. This table is the layout for the button bar at the top. If you look at any of the IMG tags, you should see an ALT attribute with the text which you see as a floating tooltip.

[Angela Poynton]

No I meant the text that appears under the table ... the long description of what the button links to. Surely that wasn't done by ALT was it? Looks like Javascript to me, an onMouseOver event, but I can't figure out how it's done!

[Frank Carver]

Err, I don't get anything except the ALT text. I'm using Nescape 4.7, are you using IE?
If it is browser-dependent, it's no wonder I wasn't very impressed; I can't see any of teh fancy features! The only changes I can actually see are minor layout changes - which is why I asked about layout.
Anyway, all the code is in the javascript file referenced near the top of the page. Look in your browser cache - there was only one .js file in mine, and that was it. The "text" images all come from the images directory - look at:
http://www,javaranch.com/images/ to see them all listed.

[Frank Carver]

Oh yes; while we're on the subject, what does "it's always open-mic" mean? It baffles me. Is it a typo? an Americanism? a joke?

[paul wheaton]

"Open-mic" must be an americanism I guess. It means that anyone can use the microphone. Sometimes you go to a bar and rather than have a band, they let anybody go up and try to entertain the crowd.

[Tom P]

The text is done with JavaScript. The "text" is actually an image. Which is a problem with the way that it was implemented. Instead of pre-loading the images, you only get the image from the server when the user moves the mouse over the button. This causes a delay since it has to go back to the server to get the new image. If your server is slow, that can take awhile and totally negate the effect. You should pre-load all the images into an array and then you will get instant displaying of the image when the user moves the mouse over the button. Much more effective!

[Frank Carver]

OK, I've looked at it in IE and it sure is "purty", but remember that anyone using netscape won't see a thing. Also note that the sneaky trick with the JavaScript to allow the images to be available anywhere on the site defeats the browser cache in both browsers.
Server-side pre-processing is a much better solution for that problem, and provides a much quicker and nicer experience for all users, but especially those on modems or other slow links. Try it, and watch the images get loaded again each time you change page.
About the "open-mic". I guess it was my assumptions tripping me up. Over here we don't have much to do with modern cowboys, so the natural tendency when you mention anything like this is to think in terms of the old west. Microphones, except in the Wild Wild West, don't really fit into that image, so it hadn't occurred to me.

[David Rizzi]

Thanks for the comments and suggestions. Since I'm the one who did most of the rework (under Paul's direction), I'll try and answer some of the questions that have been raised.

Omitting the width tags on the tables will allow the pages to expand on higher resolutions (above 800x600 - the design point) but won't do anything for lower res because the menu images won't fit anyway; you'd still have to scroll horizontally. For consistency and readability, I prefer having things as fixed on the pages as possible. And most people find large blocks of text easier to read if it doesn't spread too wide. Obviously, the trade off is vertical scrolling but you've got that anyway because of the amount of stuff that Paul has to say on each page
Yes, the menu thing is done with javascript using mouseover events but there are no "sneaky tricks" that defeat browser caching. I can connect via 28.8 modem and quite painfully notice when things don't cache! There was a problem with the script working properly in Netscape but I have corrected that. Thanks for pointing it out.
As for pre-loading the images into an array, a quick look at the javascript source will show that this is exactly what is being done. I have tested this by starting with a cleared cache and disconnecting the modem before rolling over any images and it works fine.
We looked into server side processing and I agree that it may have been a better solution but apparently Paul's web provider does not support what we wanted to do. Paul could comment on that angle more as he talked to them, not me.

[paul wheaton]

My ISP sold me this account promising JSP support. I asked three times with three different people just to make sure. Then when I need it, they say "we don't support JSP." I argued with them for days and days and still no JSP!

[Tony Alicea]

I'm not surprised. They will tell you anything that you want to hear, sometimes because they expect the feature to be supporterd in the very near future, or sometimes just a lie to be able to NOT SAY NO to a customer...


Oh well...

[Angela Poynton]

Ahh the text was an image ... that's cheating!!! I've been trying to get text to appear on the same page after a onMouseOver event for a while and just can't do it ... can't really use images either. When I saw what happens on the new menubar I thought i'd finally get the answer ... oh well the struggle goes on!!!

[David Rizzi]

Angela, You can make text (intead of images) appear on mouse over. Takes a level 4 browser, though.
check out:
http://www.bosrup.com/web/overlib/
for info and downloadable stuff. It's pretty nice :cool

[David Rizzi]

oh no, my smiley suffered from typo,
was supposed to be

[Angela Poynton]

Thank you!!