Okay guys, got an interesting one for you:
I'm designing a site for my college band program. You can view it here:

http://www.wm.edu/CAS/music/band/new/

That's what I have so far.

What I need help with is this: for some of the links that will be in the bar on the left, I want the info to come up in the table on the right, without loading a new page. Does it make any sense to do it like that? I only say because the amount of info that will show up won't be worth a whole new page.

So what would I need for this to happen? All that the stuff there right now is tables. Nothing fancy.

Hi.

Just trying to see if I understand you correctly:

All you want to do is to replace whatever is in the right "frame" (which is actually a table field containing a table with a single field) with some new content?

There are two ways to achieve this that I know off:

1. use javascript and a < div name="" > < /div > part to encapsulate the part you want to replace


2. use frames

I would prefer the second solution. Sure, it is slower, and it doesn't necessarily work with all text-based clients (lynx in particular) all that well, but at least it does work with them to some extend. Also, the "slowness" factor isn't _that_ big considering that you probably only want to load some text.

cu,
sven

Thanks for the reply. Yes, I had thought about frames. But I relly don't want to lay that out. I just thought it would be neat to do it the other way. Where would I find such a script?

DIV has no NAME property. It has ID instead for this purpose.

What you want to do requires DHTML and is a btich to get working in both IE and Netscape. I've done it before, but I was luck and knew what my audience was using. The only sure way to get to to work smoothly requires I.E. 5.0 or Netscape 6.0 or better. I've attached a sample that should work in IE 5.0 and Netscape 6.0 or better. I tested it with IE 5.5 and Netscape 6.2.

P.S. I'm pretty sure this does what you want....dynamically change the page without reloading anything...great for mouseovers...my samples use actual links, but you could just as easily put the function in the onmouseover event.

Thanks a lot! I'll try that out. I particularly like the Old Macdonald part

IE 5.0 or later, huh? Hmmm, that may be an issue. I'll try it for now and see what happens.

Is there something that I can write to place on a page that will store a bit of info on a user in a file on the site? In other words, is there something that can sit on the page and tell me how many people are using which version of IE? Or do you guys think that would be too invasive? If otherwise, I can always get some kind of free form for people to fill out.

Nah...there's boatloads of Browser sniffers out there. It is totally common to detect the users browser without telling them. Hell, that JS I wrote for you did it...it just didn't log it. But, in order for you to capture it to a file, you have now moved into CGI's. This is really easy and totally doable, but you might just want to talk to your web-host and see if thier logs have that info (chances are they do unless they are doing no logging at all for you).

If you want to do it yourself. PERL makes this really simple...

#!/path/to/perl

open (LOG, ">>/path/to/your/file.log");
print LOG "$ENV{USER_AGENT}\n";
close (LOG);
exit;

(Save this to a file of course...this has to run on the server)

You will need to probably execute this with an SSI command wich means that you need to be able to use Server Side Includes on your server. You can also use and image source to fire it. Do a Google search for browser detection, I'm sure you;ll find a solution that is good for your situation.

Thanks again! I think that CGI is a bit beyond me. That's where I get off the boat

Anyway, I'm glad to see that I can use some HTML in the text that gets popped up in the table (it's working now, check it out!), but anything that requires " or ' characters will, of course, mess it up. Is there any work-around for this? I'd like to at least use links in these text popups as well.

Thank you so much for the help! It's greatly appreciated!

You just need to "escape" the special characters.

i.e. If you want to send:

Check out "This New CD" from <i>The Band</i>

Write it like this:

Check out \"This New CD\" from <i>The Band</i>

There is something else that you can do with DHTML which is create "layers". Basically what you do is create a bunch of DIVs one after the other. You then use the Javascript to change the "visibility" of the layers. That way you don't have to put all the HTML you want into a single line inside a function call. This is a little more involved, and has equal browser trouble implications, but is something to think about. I'll post a code sample for that in a bit.

It's been a little bit...enjoy (see the attachment in the post below.).

Here is the div layer thing example. Check out the source. There are some comments that you should read. If you can't figure it out, let me know.

Oh my God. I owe you, man. This is fantastic stuff! I only had troubles adding more DIV layers until I realized i copied and pasted something wrong It's very cool stuff. And it works sooo well. I definitely like this way the best. The other way, the only way I could see to get back to the original DIV layer was to refresh the page, so I created a "Home" button that simply linked to the parent frame. With this code the "Home" link now loads the top DIV layer! Woohoo!!

Hehe, sorry to sound so excited, but this is cool stuff

Again, thank you sooooo much!

Glad someone pointed out the cooler way of doing this. There were plenty of less-cool alternatives that would allow you to get the same effect, but with a refresh of the entire page. Using SSI or even a bit of PHP and a few datafiles for the content you wanted to be dynamic.

With the jscript and frames you're knocking out people with Lynx, but I'm sure that doesn't matter to you.

Bruno

Hehe, nope. Not too many band parents using Lynx. On the other hand, there might be a group who don't even have IE5+ That's what I'm worried about now. But 5.0 has been out since '99 hasn't it?? I'd think it's likely that most people have it by now, don't you? I'd think they would have a lot of problems otherwise.

Anyway, I seem to be having one small problem with the script. All in all, CSS works fine with it. However, I seem to have problems with the mousehover event. I have it set so that on a mouseover on a link, the text and background swap colors (bg turns green and text turns white). However, with links in the DIV tags, on a mouseover the text turns white, but the bg doesn't change, leaving you with white space! That doesn't look very good Anyway, is there anything I'm missing here?

Lastly, so I annoy you guys less often, could you perhaps point me to a good reference site? It's hard to find good ones on the net. For example, somehow I found www.w3schools.com, which tough me how to use CSS and in a very easy way.

I mainly need help on small issues, like the best way to create a password protected area for a site. Things like that.

Thanks again!

Oh my God. I owe you, man.

Yeah, Daniel (redbutt2) is our DHTML master at work. I don't think there's anything he can't do. If you want to see his work, just check out the MusicMatch Guide or Radio. Of course, his best work is on the tools for editing the Guide and Radio. He built an entire text editor/page builder in DHTML.

No problem. Like svferris said...this is what I do. You shouldn't have much of a problem with the browser versions. Anyone that downloads IE from the MS site will get 5.5 or 6.0beta, and 5.0 has been out for so long that most of your audience will have it.

The mouseover stuff is a bit tricky. It looks like you took it out of the page (which looks great by the way). Just a personal preference here, but I wouldn't do what you are talking about anyway. Changing the whole background is pretty disruptive. I would just leave it like you have it with the underline effect changing on mouseover...that is elegant and fits the page well.

To answer your question though, you are probably missing the CSS to change the background color of the DIV. What you were probably doing is trying to change the BGCOLOR of the table cell that the DIVs are in. Since the DIVs are on top, or actually in, the table cell, the BGCOLOR of the div is what you see. You would actually need a JS function to do what you want becuase you would have to tell the script which DIV you are on for that link.

As for websites...
http://www.devshed.com/ if pretty good.

Thanks, I kind of like it now too. I'm not sure we're thinking of the same thing, though. An example of how I wanted the links to work is like on my own site. Is that what you were thinking?

Anyway, I'd be interested in knowing how to fix it just to know. I like how it turned out too. Now to start the finish work on it!

And I can't tell you how cool I think this is. To pull of the same effect with frames would require up to 15 PAGES of HTML (frame page, at least 4 start pages, and all the content pages). This way, I only have ONE. It just boggles my mind

Hehe, you can see I'm excited about it

Ahh...I see now. You need the "hover" event in the the CSS set right. Assign a style to the href to keep it from getting confused with the styles in the DIV. See the attached example.

One more thing...Don't use BMP files on web pages. IE is the only browser that can see them. Only use GIF and JPG, and PNG (if you know everyone is using the most current browser).

If you really want to get nuts...there is some insane stuff that you can do to make the DIV contents scroll automatically. There is one other thing, that is PURE CSS that will let you add scroll bars to the DIVs, so that you can actually keep the HTML page the same dimensions no matter how much content there is. It all get pretty fun, but then you have to start asking yourself...when do I stop?

One more thing...do't use BMP files on the web. Only use GIF and JPG files. Netscape can't see the top image on that page.

Ah, thanks a lot. I didn't know that about bitmaps. I had gotten tired of how both GIFs and JPGs create artifacts even in white space. Why can't they just keep it the same, pixel for pixel? I would think a whole area of one color would create less space than the same area with a bunch of different shades of that color. Oh well. *edit* hmm, okay this time I saved the bmpas a gif and it turned out allright. I'll see what it gets me with my other files. *edit*

So, uh, mind sharing that code for the scroll bars? I understand what you mean about needing to know when to stop I found that I needed to start restraining myself when I first learned CSS. I wanted to have an effect on EVERYTHING!!! Haha. Anyway, thanks again for the advice. It's very appreciated. Our band president really liked the simplicity that this allowed, and I'm sure band parents will appreciate that as well.

Do you think you could direct me to someplace I can find a way to make an effective password-protected area?

Allright, the page is officially online! And I couldn't have done it without ya! Check it out here:

http://www.wm.edu/CAS/music/band/

I think it turned out well. I'm still going to be working on it, but the basics are there and looking good.

Scrollbars...

Set the style properties of the DIVs to a defined height and width, then add this property:

overflow:auto

That will force the DIVs to stay the same size. If the content exceeds that size, scrollbars will be added automatically just like an entire IE window.

EX:
style="position:relative; width:350; height:300; overflow:auto"

Something else that you will need to do to make the page look right is set the table cell widths that the DIVs are in to pixels, not %. That way the scrollbar will show up right on the edge of the table. Alternatively, you can leave the width setting out of the style, but I like setting the values absolutely...that way you minimize the wackyness between browser types.

Images:
The secret is pallete choice. For images like the title.gif, GIF is the best choice becauase there aren't a lot of fancy color effects, and limited colors. I attached a new version, where I droped the color pallet to 24 colors vs. the 131 that you saved it with. You'll notice that it looks the same, but the file size is now 3.70KB compared to yours which is 5.43KB. Also, gir GIF, set the "dither" type to diffusion...gives cleaner transitions if the image has gradients.

JPG should be used when you have lots of color depth. JPG is a bit more complicated, but PhotoShop makes it easy and does a really good job of eliminating artifacts. However, there are somethings that you should keep in mind. The higher the compression, the worse the image will look. The band photo could be reduced to about 14k (from 24K). It's all image specific, but you can get really good results if you just play around with the settings.

Thus ends this hours session of Web Site Design with RedButt.

oops forgot to attach the image

I forgot to address this question:
>>Do you think you could direct me to someplace I can find a way to make an effective password-protected area?

There is no real EASY way to do this. All "effective" solutions really require you to play with the server a bit. There are JavaScript implementations, but they are hoaky. Basically it involves creating a directory that is the same name as your desired password. Then, you make your form field have a submit function that tries to navigate to the directory with the name of what the user typed in. Like I said, this is hoaky. To make a bullet proof password area, you need to use your server's security files. There is a file called ".htaccess". That file contains permissions for accessing directories. You also specify another file that contains the username/password info.

Here are a few links for you to browse through:
http://faq.clever.net/htaccess.htm
http://www.boycottdaimlerchrysler.com/htaccess.html

And here are some free PERL scripts that will do what you want.
http://www.perlarchive.com/guide/Password_Protection/

There is one other option, but I don't know if your server supports FrontPage. MS FrontPage supports creating protected "Webs". Basically it manages the .htpaccess settings for you, but I would stay away from it.

PNG is the answer to that problem.

Not necissarily. Only newer browsers support PNG files. Granted PNG, gets you good results, but to be platform agnostic, you should stay away form PNG files.

True. But it's the best answer there is. GIF is only 8-bit. JPG introduces lots of artifacts into graphics. PNG is the best supported truecolor lossless image format out there.

I thought I was done with this, but apparently not. I finally got around to downloading the latest version of Netscape. To little suprise, I think it sucks. To my amazement, it still can't even handle simple tables correctly. But there's other problems.

The site for my band program is here now, and I think it turned out rather well. In IE, that is. In Netscape it seems that it can't handle the hidden DIVs and just displays them all. This is satisfactory, but not good. (also, Netscape screws up the table on the left. I can't believe it can't even handle cell heights).

So what is it about Netscape that makes it so terrible?

So what is it about Netscape that makes it so terrible?

Probably because you are running the latest version.

I find that I quite like Netscape 4.78, but the newest versions (aren't they up to six-point-something now?) I don't care for at all.

tanstaafl.

The tables are an easy fix. You got to put in blank gif spacers of the correct size, as it compresses empty tables. Sometimes a &nbsp; works too and is easier, but sometimes it doesn't.

Don't know about the Divs offhand, I don't have Netscape installed right now, and am in no hurry to do so.

I guess I should have looked at your page first, empty table cells are not your problem. It appears Netscape has trouble with the height attribute inside of a nested table. A spacer gif may still solve that problem though.

If DIVs didn't work right in Netscape 6, you aren't programming to the standard.

If they didn't work in NS 4.x, then you didn't program to the NS standard

Basically no browser complies to the standards completely. NS 6 (Mozilla) is the closest any one has come. IE has had it's own quirks with DHTML code (As seen by my old javascript statements on a few DHTML pages to detect and activate workarounds).

It appears Netscape has trouble with the height attribute inside of a nested table.

*snort*

Netscape has trouble with nested tables, full stop.

MSIE6 is better than the v4 which was current when I made those pages (jn a previous life as a browser architect) but still overplots images onto text in some of the harder cases.

Peter

Daniel, I am trying to do a very similar thing to what you posted an example of here. I want to click on a link on the left and have a section of the table on the right replaced with a different image for each link

Your examples work fantastic in Internet Explorer, but they do not work in Netscape 4.7 (one of my target browsers).

I know I could do it with frames, but that's not a possibility for my current application. Do you have a way to make your example work on Netscape?

I don't know if it helps or not, but I had problems with Netscape too. Which version are you using? I loaded the newest possible for testing, along with their "Sun Java" whatever, and it didn't work at first. Then I restarted and all of a sudden it started working. Not sure why. Now everything looks almost the same in both browsers.

I don't know why it should be any different for you then, if you're using the same code here.

I have some simple examples of what I think you are talking about on my (somewhat amature) site. It's not much, nor is it by any means finished. It's just a few things in my portfolio. The color photography page here is a decent example (i think) of what you are talking about. The pages use a layout with tables inside tables to get everything to stay as close to the way I want it without resorting to using frames, java, flash, etc... I am very big on simple accesible web design, although I did use a few png files just because some of the attributes are a bit better than other types of image files.

//matt

The pages use a layout with tables inside tables to get everything to stay as close to the way I want it without resorting to using frames, java, flash, etc.

If I understand correctly, you actually have a separate HTML page for each photo. Although this is a possibility for me, it makes updating the page a complete pain in the ass. So I would like to avoid doing that if possible.

I don't know if it helps or not, but I had problems with Netscape too. Which version are you using?

As I stated in the message, it was Netscape 4.7.

I loaded the newest possible for testing, along with their "Sun Java" whatever (...) Then I restarted and all of a sudden it started working.

Although this is nice, I cannot ask every other person on the internet to upgrade to those specifications.

Anyone have a better solution?

Anyone have a better solution?

How about the javascript I always see used on ebay to view multiple pictures?

Tom

How about the javascript I always see used on ebay to view multiple pictures?

can you link me to a specific example of this?

You know, I might also be able to use OverLib for this one, I think it's got this ability. I'll have to check it.

Tony,

Are you just replacing images in the same location? If so this is super easy.

it is possible to get the code I wrote for this DIV application to work in Netscape 4.7. I'll see if I can post an example. The problem is that Netscape 4.7 doesn't support the Document Object Model in the same way (w3c) that the newer browsers do, so you have to add special code just for Netscape 4.7

O.K. Here is the example. This should work in any browser, even AOL. I put the instructions in the HTML as comments.

[edit] Let me know if you have problems using this.

can you link me to a specific example of this?

Sure.

Suh-wheet. Thanks!

O.K. So, here is the best that you can really hope for that will work in Netscape 4.7x and up. I really wouldn't call this working, but it will at least function the same. The problem is that until Netscape 6, the positioning commands in Netscape were horrible. Notice how the divs still look like they are lined up one on top of the other? This is because interpretation Netscape 4.7x of "hide" this is simply don't display it...but still act like it is there...way lame. The W3C interpretation of "hide" is hide it...make it gone, bye bye, no more...etc. So, use this if you want, but you are better off just telling people to upgrade to a usable browser...that is really becoming an accepted thing to do..unless you are in a specific situation and that just isn't an option in which case...just make multiple pages or switch to a CGI templating method.

Sorry to bring this thread back, but I thought I'd raise an issue with the code. The code won't work if the page is loaded into a frame. There are frame-breakout codes, aren't there? Do you have one that you'd reccomend?

So yeah, you can use that, but I thought I'd make you guys aware of it if you're using redbutt's fantastic code. (I really like it, thanks a million!)

It should work in a frame with no issues. What is the problem that you are having? AS far as frame breakout scripts...one line will do ya...

if (window != top) top.location.href = location.href;

It's just that every time I open the page in a frame it displays all the DIVs at once. It's not too much of a concern to me, but if someone links in in a frame of their own, I don't want it to screw up.

At first I thought it was just my computer, but it happened in other places I've tried it.

Also, how do I use that code you wrote there? Sorry, I don't know too much about scripts.