Table with "tabs"

[matthew911]

On my site, I have a table with scrolling news. There are links located in the table which change what information is shown. At the moment, each link takes you to a new page, but I'd like to change that. I want those links to act like tabs and keep everything on the same page (index.shtml). I know there's a way to do this with Javascript/AJAX, but I don't know how to go about it. Can anyone tell me the easiest way to get this to work how I want it? Thanks for any help.

[edited by: DrDoc at 3:28 am (utc) on Sep. 24, 2006]
[edit reason] TOS #13 [/edit]

[DrDoc]

If you are familiar with how AJAX itself works, you should be able to request the content from your server ... your server responds with content, and you update the element's

innerHTML

property.

[daveVk]

The easiest way, is to include a iframe in page source where replacement content is to go.

eg <iframe src="/original.html" name="exchange" ></iframe>

Links to change content become

<a href="#" onclick="document.getElementById('exchange').src='/otherpage.html'" >...</a>

[DrDoc]

... but then no JS or AJAX is needed.

[matthew911]

Thanks for the suggestions guys. Unfortunately I really don't know anything about AJAX, so it could take quite a while to get that figured out. I also can't get the iframes to work all that well, either. Is there a way to get rid of the border around the iframe? I tried border="0", but that didn't seem to work. Also, do iframes work in Firefox? If they don't, I definitely won't be using them. So far clicking the links doesn't change what's in the table.

[penders]

You'll need

frameborder="0"

to turn off the border around the IFRAME (certainly for IE6 - I can't seem to do it using CSS alone in IE6?! **) - then you can style the border using CSS for both FF and IE6. Yes, it works in Firefox OK.

You can turn off the scrollbars with

scrolling="no"

(again, with IE6 I can't seem to do it with CSS alone, as you can with FF... overflow:hidden) - although probably best to make sure your iframe is big enough in the first place.

** In IE6, the border you set with CSS, seems to be on the outside of the default frameborder?!

[DrDoc]

The "default frame border" comes from the document loaded in the iframe itself.

html, body {
border: none;
}

[daveVk]

but then no JS or AJAX is needed

Is not "document.getElementById('exchange').src='/otherpage.html" a JS statement

[DrDoc]

Yes, but it isn't needed.

<a href="/otherpage.html" target="exchange" >...</a>

[daveVk]

Thats a cool way of doing it, dont even need javascipt enabled!

[matthew911]

Thanks for all the tips guys. It's working well for the most part, but I just have one problem. I use skins on my site, and I was wondering if there was a way to get the pages inside the table to automatically adjust colors when I change skins.