website coding question

So..

Lets say I have a simple web site. It consists of a div that contains links, and a div that contains content. I want to load specific content into the main div depending on which link they click. Is JavaScript capable of this? Or what would be the best thing to use? PHP? Something else?

I've only briefly looked at a few JavaScript things (I'll be taking a JS class in the spring), and I have never seen any PHP stuff before.

If JS is out, how easy would it be to do that in PHP? Or whatever else would work...

(Sean I see you spying on my thread.)

I would think JS should be capable of that, i know it can do a lot of stuff. im not entirely sure however what u mean by "div". are u meaning frames?

im assuming the first one is gonna be a menu bar that you dont want to change no matter what is clicked on, and the other will display the content. I would be very surprised if JS couldnt do it in this case, and i know for a fact php can. I did this once (albeit very clumsily) using plain old html, so the more powerful scripts should be able to do it, and do it much cleaner.

No frames. Just <div> </div>s.

I talked with one of my teachers today and he said I could do that easily using the JQuery library. I know PHP can do it as well, but I figured PHP would be more confusing to learn than JS/JQuery.

You can implement that either on the server side using a language such as php, or on the client side using javascript. Doing it on the server side would be better, but is more complex.

Here's a quick breakdown of the two.

Option 1 : Server Side
If this is for a "real" webpage you are going to post to the internet then it is best if each of the pages has a separate url, that way you can provide direct links to the individual pages and search engines such as Google will properly index your content. The quickest method is just to create a separate html file for each page and copy your links into each page. A more advanced way is to use a language such as php create a single file with your links that you include into each page. The most advanced way is to create a template that includes your navigation and page framework, and then have each of the individual content pages only contain the html for the content div on that page. These solutions are more complex because not only will you need to learn some php but you'll have to have a hosting environment that includes a php interpreter.

Option 2 : Client Side
The client side option is much faster to implement, but has the downsides of not being able to directly link to a page, and it will not be indexed by web spiders properly. It's very easy if you use JQuery. Here's an example.

Let's say your divs looks like this.

<div id="links">
<a href="page1.html">page1</a>
<a href="page2.html">page2</a>
<a href="page3.html">page3</a>
</div>

<div id="content></div>

As you can see each link points to the html document for that page. Then you would link to the JQuery library at the top of the file, the easiest way is to link to it off the Google CDN. Your JQuery in the page would then look like.

<script type="text/javascript">
$(function()
{
$("div#links a").click(function(e)
{
e.preventDefault();
$("div#content).load($(this).attr("href"));
});
});
</script>

This is off the top of my head and probably has some small typos, but it should get you started. Check out the documentation at JQuery.com for details. Here's a quick overview.

1. $(function()) causes this setup code to be run when the page is loaded.
2. $("div#links a") selects all anchors (links) in the link div.
3. click(function(e)) specifies what to do (event handler) when those links are clicked.
4. e.preventDefault() prevents the default event so that the default link behavior (go to page) is disabled.
5. $("div#content).load() loads html into the content div using ajax.
6. $(this).attr("href") gets the href from the anchor tag. Since the selector in #2 is for anchors that means that $(this) is a reference to the current anchor.


Wow, I didn't intend to type that much. Hope it helps.

- Matt

Yeah.. I figured PHP would be the best route, and also the more difficult of the two to implement. The server I'm on would handle it fine though.

Thanks for posting the JQuery walk-through. I'll probably implement that for the time being, and then convert it over to just use PHP later.