Menu bar that doesn't reload with the page - how to, without frames?

Discussion in 'Web Design and Development' started by Taustin Powers, Nov 12, 2007.

  1. Taustin Powers macrumors regular

    Joined:
    Apr 5, 2005
    #1
    I'm in the planning stages for my new band's website design. I would like to have a menu/logo/etc. area that is always there, and a content section that changes whenever something in the menu is clicked.

    On my old website, I did this with an iFrame:

    www.theletter3.com

    Is there a way I can have certain parts of the page always be there, and not reload the entire page with every click, without using frames?

    I thought I once heard someone mention an "include" function or something of the sort?
     
  2. janitorC7 macrumors 6502a

    janitorC7

    Joined:
    Feb 10, 2006
    Location:
    North Hollywood, CA
    #2
    well the one option that I see is having your site be on one page, and just using javascript to call certain Divs to be visible.

    You will need a good framework, I recommend Adobe Spry
    I believe that it is a good framework for what you are trying to accomplish
     
  3. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #3
    I was about to say that, but an easier framework would be jquery.
     
  4. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #4
    Just leave it the way it is with frames. Loading your entire site's content at one time just because you want to keep the navbar present is a bad idea, esp. if you have a good amount of content (which a good site always has).
     
  5. Taustin Powers thread starter macrumors regular

    Joined:
    Apr 5, 2005
    #5
    Yah, that doesn't sound like something I want to do....

    Let's say I am making separate pages then, with the menu stuff on all of them.

    If the menu/artwork itself never changes, can the browser somehow be prevented from reloading (as in transferring and processing the code and images from my server) that part of the page, since the data is already loaded with the first page? Awkward way to word it, I know... What I mean is, there is a certain amount of code/images (probably a few div sections) that are identical on every page. And it would be cool if the browser could realize (or be told) that it has already loaded these sections, thus making the pages load faster once the first one is open.

    Or are browsers these days already smart enough to realize that?

    Does that make sense at all? :confused:
     
  6. janitorC7 macrumors 6502a

    janitorC7

    Joined:
    Feb 10, 2006
    Location:
    North Hollywood, CA
    #6

    Yea, most, if not all browsers will cache it for you, and it will not load more than once.

    The advantages to using spry or similar framework however is that you will get some really nice effects, and its actually good for SEO because it gets all of your information on one page. Also, with more work there are ways to get the divs to not all load at the same time, if you are interested you will have to become familiar with a little more advanced scripting, which I recommend

    <sarcasm> or you could always do your site in flash. </ sarcasm>
     
  7. wheezy macrumors 65816

    wheezy

    Joined:
    Apr 7, 2005
    Location:
    Alpine, UT
    #7
    Includes are handy for using if you're going to have many many many pages and will have to update the Nav often enough. The advantage is you only update the one include file, (which is the source for all the pages) and instantly your nav is updated on the entire site. For a simple 5-10 page site, if you don't know how to do them, it's not worth learning how to.

    Frames are bad for SEO. I don't know what Spry does. Also, all your content on one page that gets displayed with hidden/visible divs isn't terrible for SEO, but it's by no means beneficial. Having just the page-relevant information on one page is much more beneficial for SEO.

    I would just build the site without frames using basic HTML, if the nav has to load on each page load it's not the end of the world, and using Browser Caching and High Speed, no one will really notice that it's not 'always' there.
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    If you're able to use PHP or SSI (Server Side Includes) then you can place the navigation code (as well as header and footer and whatever) in a file and have PHP or SSI toss in the code automatically. This would only require a small knowledge of PHP to do. This would be a better and easier solution than having just one page and trying to switch in/out content.
     
  9. Taustin Powers thread starter macrumors regular

    Joined:
    Apr 5, 2005
    #9
    This sounds interesting. I am only just starting to learn php....can you give me a few pointers on how to do this?
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    Say you have a file named index.php (generally the file will need to have the php extension for it to be processed correctly, but depends on server settings). Inside this file you can add a line like the following,
    PHP:
    <?php include "nav.php"?>
    This will take the contents of the nav.php file and place it directly in the index.php file where that line is located. The nav.php could also be nav.html or even nav.txt if you wanted. The include statement just takes the contents of the file and places it into the file that called it.

    The include statements can be anywhere in the index.php. I use them for creating the head section of the file, the header of the page, navigation, and my footer. As a note, the file that gets included should be in the same directory as the file calling it, or in a directory that is part of the PHP path variable, or you might have to use a static path. Give it a try and see what works for you. Here's a web page with some more details and example for using the include statement.

    If you go the SSI include path ask your service provider if it is supported. Likely it will. Here's the line that'll do essentially what the include did for PHP, and works essentially the same way,
    HTML:
    <!--#include file="includes/navigation.htm" -->
    The file attribute uses a relative path to the file. I only use this method when PHP isn't an option, but still works. Here's a decent page on using SSI on an Apache web server.
     
  11. Taustin Powers thread starter macrumors regular

    Joined:
    Apr 5, 2005

Share This Page