Dynamic web page...filling in data on the page when a link is clicked

Question

I want to implement a web page (using HTML/PHP, whatever else), that will populate data int the top half of the page (seem image below). The top half will contain links. When the user clicks on the links, I want to populate the bottom half of the page with detailed information about the item clicked on in the link in the upper half of the page. Also, when I populate the upper half of the page, if there is more data than will fit on the upper half of the page, I want to be able to allow the user to scroll the upper half of the page while the lower half of the page remains static. I know frames are very old school. I'm experienced at general programming, software engineering, and databases, but my web development experience is limited. However, don't limit your response based on my lack of experience in any technology...I can always learn. I'm just wondering the following:

1. How would I implement a "split window" (upper and lower half)?
2. How would I implement scrolling of data in the upper half without reloading the page everytime?
3. How would I invoke populating the bottom half of the page when a link is clicked on in the upper half of the page?

Would I use Javascript, CSS, what? Advice is appreciated.

Answer 1

This is not really an answer, just a pointer: this page on JavaScript grid editors could give you some components that work out of the box. You'll only have to adapt them to your purpose, which could be anywhere between ten minutes and ten years of work.

Answer 2

You can have divs do scrolling. Checkout overflow

For the bottom content you can use Ajax.

There are also libraries you can use to simplify the implementation of much of this functionality. One big one is called jQuery (which also has a large plug-in community that may provide even more targeted solutions).