Need to display an html page triggered by a list item in the left 'div' in the center 'div'

Question

I have a menu of list items in the left 'div' of my web page. I am currently selecting one of the list items and opening a new web page.

I would like to have the content displayed in my center 'div' when the list item in the left 'div' is selected.

How can I accomplish this?

I have the list items in 'col2' (on the left) and I'm posting the html page to 'col1' (in the center). This will currently only post one of the html pages (if I could get it to work). So, I need to fix this script and modify it to load one of three html pages.

Script:

<script type="text/javascript">
    $(document).ready( 
function(){ 
    $('a.openInThisPage').click( 
        function(){ 
            $('#col1').load('.\listOfServices.htm'); 
            return false; 
        }); 
}); 


    </script>

Html:

<div class="col2">
                    <!-- Column 2 start, left side -->
                    <ul class="slidedoormenu">
                        <li><a href="#">» List of Services</a></li>
                        <li><a href="#">» Pricing Stucture</a></li>
                        <li><a href="#">» About Me</a></li>
                    </ul>
                    <!-- Column 2 end -->
</div>

Answer 1

If you really want to do that, you have two basic options.

1. Frames, which cause problems with bookmarking, link sharing, printing, and search engine indexing.

2. Faking frames using JavaScript (and Ajax techniques) which have different problems with bookmarking, linking sharing and search engine indexing along with a dependency on JavaScript.

You are almost always best off just having multiple pages, and including common content in each. A templating or include system can help you with that. I prefer Template-Toolkit which includes the ttree utility for generating static pages from templates but can also be used to generate pages dynamically from Perl. TT has a simple include directive and a more powerful wrapper directive (the site has good examples of both in action). PHP is a popular option and has an include directive.

Answer 2

This is relatively easy, using jQuery (which you included in your tags, so I'm assuming you're okay using it for this):

$(document).ready(
function(){
    $('a.openInThisPage').click(
        function(){
            $('#newContent').load('path/to/htmlFile.html #idOfTheContentYouWantToLoad');
            return false;
        });
});

with the mark-up

<a href="path/to/htmlFile.html" class="openInThisPage">Click to view new content</a>

<div id="newContent">
</div>

I've got a demo of this on my own site, since it gave me an excuse to do something with Doctor Who.

this uses jQuery's load() to load the remote content into the named div; load() takes a string of two items:

1. The URL to the page you want to load into the current page, and
2. A selector to identify which part of that page you want to load into the current page.

The usual JavaScript caveats apply, of course, you're restricted to pages from the same (sub-) domain, and it can cause issues with bookmarking (unless you reflect the new content in the URL in some way).

---

Edited in response to OP's posted code.

Given that your posted (x)html doesn't feature any a elements of the class I posted, you'd need to adapt your jQuery to the following:

$(document).ready(
function(){
    $('#slidedoormenu a').click(
        function(){
            $('#col1').load('.\listOfServices.htm');
            return false;
        });
});

Be aware that the \ in the URL might cause problems (I'm not entirely sure, but it's the first time I've seen it used in a URL, so I'm not sure if it's valid or not).

---

Edited in response to comment from OP:

@David, I have one more question on this thread. How do I have one of the pages 'defaulted' to appear in the right column (i.e., before the link is clicked by the user)? Thanks again, jmac

You could simply use the $(document).ready():

$(document).ready(
function(){
  $('#newContent').load('path/to/htmlFile.html #idOfTheContentYouWantToLoad');
}
);

Answer 3

Be sure when using David Thomas' code (which is the proper and easy way to do this) to include the jquery file on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"&gt;&lt;/script&gt;
<!--  Fallback for CDN -->
<script>!window.jQuery && document.write('<script src="/js/jquery.js"><\/script>')</script>

Or simply:

<script src="/js/jquery.js"></script>