How to make links in one column appear in the other column on screen

JavaScript
1

I have two columns, one with navigation, and the other with content. These are both divs. How do I refresh the content column upon clicking on a link in the links column? Should work in various screen sizes in a fluid layout (columns will stretch and squeeze).

I know I can make each link a separate HTML page and just repeat the navigation over and over on each page, but the number of links will get too long for that, making it a chore to update the links on every page with each change.

Maybe this belongs in the CSS column; I’m not sure.

Thanks!

2

Normally the menu would be brought in from a separate file, by server-side code, so that updates to the menu have to occur only from that one location.
That is the easiest solution.

3

I have adapted DeathShadow60’s fluid layout template and it nearly works for all screen sizes.

As you can see from the script below the left and right sidebars are the include files of links.

http://cutcodedown.com/codeExamples/fluidDemo/template.html

My template:



<! doctype>
...
...
<body>

  <div id="pageWrapper" class='bgf rnd'>
    <?php include VIEWPATH .'ds/_ds_smiling.php';?>  

    <div id="columnWrapper">
      <div id="contentWrapper" ><div id="content">

        <h3>3 x Funny Jokes for <?php echo date('l, F jS  Y');?></h3>
        <br />
        <?php require VIEWPATH .'ds/_ds_three_jokes.php';?>

      <!-- #content, #contentWrapper --></div></div>
      
      <div id="sideBarWrapper" class=''>
        <div id="firstSideBar" class=''>
          <?php if(1){include VIEWPATH .'ds/_ds_right.php';}?>
        <!-- #firstSideBar --></div>
        
        <div id="secondSideBar" class=''>
          <?php if(1){include VIEWPATH .'ds/_ds_left.php';}?>
        <!-- #secondSideBar --></div>
      <!-- #sideBarWrapper --></div>

    <div id="footer" class='tal'>
      <?php include VIEWPATH .'ds/_ds_footer.php';?>
    </div>
    
    <!-- #columnWrapper --></div>
  <!-- #pageWrapper --></div>
</body></html>
4

My solution will have to be client-side, unfortunately. I have an idea of borrowing a CSS slideshow framework to update content at right by clicking on a button at left.