Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

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

T

Taustin Powers

macrumors 6502
Original poster
Apr 5, 2005
269
599
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?
 
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
 
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).
 
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:
 
Taustin Powers said:
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:
Click to expand...


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>
 
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.
 
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.
 
angelwatt said:
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.
Click to expand...

This sounds interesting. I am only just starting to learn php....can you give me a few pointers on how to do this?
 
Taustin Powers said:
This sounds interesting. I am only just starting to learn php....can you give me a few pointers on how to do this?
Click to expand...

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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back