SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,807
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by StevenHu View Post
    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!
    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/.../template.html

    My template:

    PHP Code:

    <! 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. #4
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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.
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •