opening apage within a page or just loading part of a page

Discussion in 'HTML & Website Design' started by msbigbad, Jul 29, 2006.

  1. #1
    I have a new website at the following url: http://loveunchained.com

    The problem I have is that i have a sidebar that has information that changes monthly (i.e. site of the month, vid of the month, fiction of the month, site news,etc.)

    I would like to be able to change this info only once and not once for every page!!!

    You see my dilema.

    I have read about i frames and ajax pages but am not sure if that is the way to go.

    Please can someone please help me!!
     
    msbigbad, Jul 29, 2006 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    What you need are includes. SSI tutorial. That's for a web server include. For your favorite server side language, RTFM for that language.

    cheers,

    gary
     
    kk5st, Jul 29, 2006 IP
  3. msbigbad

    msbigbad Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    um I'm sorry I'm new to all this coding and stuff.

    The website I had before was a tripod one with one of those easy site builders!!

    So I'm just learning how to do these things

    Is there a simpler way to explain this in stupid just starting out webmiss terms?
     
    msbigbad, Jul 29, 2006 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    OK, we're talking about server side includes, SSI. The basic premise is that the server or the server side scripting language you're using will take a bit of code that's been saved in a file, and paste the file's content into the page. For example, let's say this is a representative page on your site:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xml:lang="en"
          xmlns="http://www.w3.org/1999/xhtml"
          lang="en">
    <head>
      <meta name="generator"
            content=
            "HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" />
            
      <meta name="editor"
            content="Emacs 21" />
      <meta name="author"
            content="Gary Turner" />
      <meta http-equiv="content-type"
            content="text/html; charset=utf-8" />
    
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    html, body {
        margin: 0;
        padding: 0;
        }
    
    
    /*]]>*/
    </style>
    </head>
    
    <body>
      <div id="wrapper">
        [color=blue]<div id="topbanner">
          <img src="logo.jpg" alt="xyz corp" />
          <p><a href="sitemap.html" title="a floor plan of the site">sitemap</a></p>
        </div> <!-- end topbanner -->[/color]
    
        [color=red]<div id="nav">
          <ul>
            <li>link</li>
            <li>link</li>
            <li>link</li>
            <li>link</li>
          </ul>
        </div> <!-- end nav -->[/color]
    
        <div id="main">
          <h1>main stuff</h1>
          
          <p>blah, blah, blah</p>
        </div> <!-- end main -->
      </div> <!-- end wrapper -->
    </body>
    </html>
    Code (markup):
    Take the colored portions, and save to plain text files named, say, topbanner.inc and nav.inc. The .inc extension is a common protocol, but it could be anything.

    Now, if the pages were to use an include tag, the content of the file would replace the tag.
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xml:lang="en"
          xmlns="http://www.w3.org/1999/xhtml"
          lang="en">
    <head>
      <meta name="generator"
            content=
            "HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" />
            
      <meta name="editor"
            content="Emacs 21" />
      <meta name="author"
            content="Gary Turner" />
      <meta http-equiv="content-type"
            content="text/html; charset=utf-8" />
    
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    html, body {
        margin: 0;
        padding: 0;
        }
    
    
    /*]]>*/
    </style>
    </head>
    
    <body>
      <div id="wrapper">
        <!--#include virtual="topbanner.inc" -->
    
        <!--#include virtual="nav.inc" -->
    
        <div id="main">
          <h1>main stuff</h1>
          
          <p>blah, blah, blah</p>
        </div> <!-- end main -->
      </div> <!-- end wrapper -->
    </body>
    </html>
    Code (markup):
    As you can see, a change in the nav.inc file would be applied to every page that had the <!--#include="nav.inc" --> tag—all in one fell swoop.

    cheers,

    gary
     
    kk5st, Jul 29, 2006 IP
  5. TechnoGeek

    TechnoGeek Peon

    Messages:
    258
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hello, msbigbad.
    Depending on what kind of software you are using, there may be different solutions to you problem. The HTML approach you may use also differs according to your tastes and your knowledge. The SSI (server side includes) approach that Gary suggested is the easiest way if it is supported by your host and you are not so expert with HTML and JavaScript. You will have to replace in all pages the sidebar markup with something like the following:

    <!--#include virtual="/sidebar.inc" -->

    "sidebar.inc" is an include file that will contain the code you pulled out of the pages, i.e., it won't be a stand-alone page.
     
    TechnoGeek, Jul 30, 2006 IP