changing content of a div via another div that has menu items

[jasonc]

i wish to have two divs a left and right and a top and bottom frame and when the menu items in the left menu is clicked it changes the content of the center div to display the contents related to the hyperlink clicked.

 

how can i do this please without having the whole page reloaded.

 

thanks

 

 

<div id="Layer1" style="position: absolute; left: 12px; top: 14px; width: 639px; height: 21px; z-index: 1; vertical-align: middle"><div align="center">header</div></div>
<div id="Layer2" style="position: absolute; left: 12px; top: 37px; width: 105px; height: 21px; z-index: 2; vertical-align: middle">
  <div align="center">menu</div>
</div>
<div id="Layer3" style="position: absolute; left: 121px; top: 37px; width: 531px; height: 21px; z-index: 3; vertical-align: middle">
<div align="center">main page</div></div>

 

[haku]

It will require javascript one way or another. You can do it in one of two ways:

 

1) Load all the potential contents of the div at load, and use javascript do display whichever set of contents is appropriate at a given time, using javascript to change the contents as links are clicked

2) Don't load the contents at load time, and use Ajax (which is just a javascript method) to dynamically pull the data from the server and load it into your page when it's returned.

 

If the potential contents are not too large in volume, the first option is preferable, but if you have a lot of questions with a large volume of potential contents, the second option is preferable.

 

[beebum]

I'm using an iframe to do this.

 

http://tyson.homeunix.org/

[haku]

Yuck, iframes. Bad programming.

[beebum]

Why is it bad programing?  ???

[haku]

They are just outdated thats all. They worked back when they were all that we had to work with, but the times, they are a' changing. They are bad for a number of reasons. My main dislike just comes from how they look though, they generally look old and out-of-date. They also don't work well with SEO - search engines cant index them. Anyways, here's some stuff to read:

 

http://friendlybit.com/css/frames-or-iframes-with-css/

 

Actually, google will give you a bunch on this:

 

http://www.google.com/search?hl=en&q=why+are+iframes+bad&btnG=Google+Search

[beebum]

Well, that explains allot. Back to the drawing board. 

[haku]

Haha! Sorry to rain on your parade. But hey, never too late to learn! It happens to all of us so don't worry about it.

[fenway]

They are just outdated thats all. They worked back when they were all that we had to work with, but the times, they are a' changing. They are bad for a number of reasons. My main dislike just comes from how they look though, they generally look old and out-of-date. They also don't work well with SEO - search engines cant index them.

That's like saying TABLEs are outdated.  They don't have to "look" like anything, they're invisible, remember?  And since when does AJAX work with SEO?

[haku]

Heh, tables ARE outdated, at least as far as design goes. They are only supposed to be used for tabular data. Its fine to use them for that, but using them for design is an incorrect use of tables.

 

And before you go on about how 'they work' and its all 'personal choice', well consider this:

 

I could cut my front lawn (if I had one) with scissors, and I could play golf with a hockey stick. They would both work, and they would both be a personal choice.

 

But they wouldn't be the best choice. People used to use tables to lay out pages, because we didn't have any other options. CSS didn't exist. Tables were a band-aid solution basically. Now that CSS exists, and the internet is turning into a semantic place instead of just one that is thrown together, tables are outdated.

 

People used to shìt in outhouses back in the day too. Just like they are outdated, so is using tables for layout.

[fenway]

I *really* don't want to get into the table thing... simply stating that IFRAMEs are prefectly reasonable as an alternative to AJAX (in fact, there are many things that AJAX can't do than IFRAMEs) can.  But I agree with you that using frames for layout is a poor design choice.

[haku]

You're right, when you are speaking of iframes as an alternative to ajax, SEO isn't going to matter, as robots dont use javascript. So neither of them will be indexed by the search engine.

 

That being said, good ajax programming will add the ajax as an enhancement, not as the core. The site will still work even with javascript turned off. In such a case, ajax is preferable over iframes as the information can still be indexed, whereas with iframes it wont be indexed at all.

[beebum]

I've been thinking this over and I'm not sure I really need the ajax for my home site. However, should I decide that I do want to go the ajax method, could you point me in the right direction for a reference or tutorial or some other appropriate documentation?

 

Thanks

[haku]

This site has good tutorials (not just Ajax) with well formed code. I recommend it:

 

http://www.tizag.com/ajaxTutorial/

 

And for direction and help, there is an AJAX section on this forum.

[beebum]

Thanks for the pointers. I figured I was going to have to learn javascript sooner or later. Now seems to be the time.

 

The iframe is going to have to stay for now till I can learn enough to replace it with ajax (if I decide to do that).

 

Thanks again for the help.

[haku]

You will probably also want to look at some DOM scripting tutorials (I'm sorry, I don't have any recommendations for those, although there may be some on that site I linked to earlier). It is really important for using Javascript effectively. Good luck!

 

And by the way, once you get a hang of javascript you will love it! You can really enhance a site with it.