Hi there!

I've been playing once again with CSS (I promise I will learn it someday), and so far I have this:

http://goto.glocalnet.net/torch

it looks bad, I know. The problem is, I want to simulate frames. So far, it is working fine. I'm having problems adding a header/footer, but I will get to it later.

What I want to do, however, is something like this: If the visitor clicks on the link "about", instead of reloading the whole page, only the content should change. I know I have to use the target-switch and I have even done it once before, but I can't get it right.

Does anyone have an example how I may accomplish this? Nothing fancy or over complicated. I've been trying to find this info on google for a while, but it is not so easy to find as I thought.

Anyway, thanks in advance!

Do you mean the target attribute for anchor elements? This isn't a part of the strict XHTML standards "because frames and windows are outside the scope of pure document markup" (Danny Goodman, Dynamic HTML, O'Reilly). I'm not sure it would work anyways, since you're using a DIV (not a frame) to contain the stuff you want to change.

You could use some AJAX magic, which is really geared towards this sort of problem, but then it wouldn't work in all browsers.

Sorry, but you simply can't do that. CSS can simulate the look and visual behavior of frames, but not the reloading aspect. You'll have to either use frames or live with the full page reload.

Thanks guys!

Heck, I wonder how I've managed to do that. Maybe I used a jsp include before or something like that. Sad I've lost all my work and did have backup. Our SVN server is down, otherwise I could check how I have done that.

Mega Man X, I am not sure I completely understand what you want as I was unable to browse your site. But, I would suggest you have a look at my site (http://www.linuxlala.net) The buttons that you see were made in CSS. When you click on any button, the page doesn't reload, but the specific content is displayed. Please try it.

It is possible using simple CSS and javascript. Maybe you want to do this.

LinuxLala: I hope you don't mind that I make two comments about the method that you use to change content without reloading. (Please don't take this as an insult; I just want to point them out for the sake of argument.) First is that while the user never has to reload the page, all the content that can possibly be viewed has been downloaded to the client at once. If you had a very large website this could be somewhat troublesome, especially to those on slow connections. Second is the use of JavaScript, which is not inherently bad, but one does have to keep in mind the capabilities of the client. Some people may have JS turned off, especially for sites they don't know well or trust fully. Or some clients might not have JavaScript available to them.

You've gotten around some of the problems with JavaScript wonderfully by using visibility settings, which makes your site look just fine in Lynx. But then if you had a large site this could again cause problems. AJAX can help get around that issue of having the client downloading everything on the site at once. The problem then becomes that AJAX relies on JavaScript which if disabled will pose a greater problem when the client can't see anything at all.

Mega Man X: In light of the above, I'd recommend trying this if at all possible -- (I used to use this on my blog and I've tested it from as many angles as I could so it should work.) Use AJAX to change the content in the DIV using JavaScript and some server-side scripting. That way the client only downloads what they need. Then if the client has JS disabled, you can provide a <noscript> block which will alternatively be a set of normal links to the content pages. If you use server-side scripting like PHP to generate your pages, you can do this without having duplication of your content (on the server). And you can generate fully standards-compliant XHTML and CSS.

Thanks again for the replies and sorry for my late reply ^_^;

@LinuxLala

Very nice mate. This is actually what I'm trying to accomplish. It sounds ratter complicated for my limited knowledge of Jscript and CSS though, but I will give it a shot. I will have to wait until the weekend though

@taylor_venable

Thanks for pointing the drawbacks of using Javascript. I personally never tried Javascript for more than a day myself ^_^. I don't think it would affect me much, since it is not (going to be) an important site, nor I believe that the visitors (if any, really) will have js disabled

taylor_venable: you are absolutely right. The entire page needs to load before one can start browsing. The place I learned this trick from (http://www.cssinsider.com) actually also mentioned this as a hassle. But, I used it anyway as my page only has text, and not too much of it

I too would like to try this with AJAX. That'd be fun.

megaman: not complicated at all. About 4 lines is all it needs.

P.S. I didn't get any notification mail when you replied on the 13th. Just got one today when megaman replied. I'd wait a while and then maybe post this in WQnA.