Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Nir Benita
PLUS
Nir Benita
Courses Plus Student 3,905 Points
Posted by Nir Benita
Nir Benita
Courses Plus Student 3,905 Points

Going through pages but leaving some content static

Hey guys,

So I was wondering, I have this layout I designed and I was wondering how could I switch pages (using the menu) but without having to load the header image each time?

Thanks!

8 Answers

Matthew Mascioni
Matthew Mascioni
20,444 Points
Matthew Mascioni
Matthew Mascioni
20,444 Points

If you were looking to load just the content, you could switch the pages using jQuery. (there's probably a better way, though) There are some jQuery tutorials here. The layout looks great, by the way!

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

Is the header image the same on each page? If so this will already be cached in your browser so redrawing the next page wouldn't take as long as the first time.

If you want to minimally affect the redrawing you can use something like the jQuery load() method.

But there's a few things to consider when changing the content of say your "container" div. The page title will not update so you'll have to figure out a method to do that AND the URL at the top will say the same. You'll have to use history.pushState which isn't supported by IE9. This may be a problem if someone clicks on "Plans" but the URL stays on featureme.net and then they wanted to bookmark it or send it on to someone else and it's not the correct URL it can cause confusion.

If the header images are different from page to page you could use a number of image precaching strategies. The most common is using JavaScript:

var image = new Image(); image.src = "/path/to/your/image.png";

Hope this helps.

Nir Benita
PLUS
Nir Benita
Courses Plus Student 3,905 Points
Nir Benita
Nir Benita
Courses Plus Student 3,905 Points

Thanks a lot Matt! I am really happy with the layout as well! :)

A beast of an answer Andrew! (It's a good thing in case you were wondering) :) Thanks a lot!

Considering your explanation, I think the benefit of not loading the header image each time are inferior to not being able to deep link different pages.

P.S: If anyone has a spare Dribble invite and could consider inviting me, I would be honored :)

Nir Benita
PLUS
Nir Benita
Courses Plus Student 3,905 Points
Nir Benita
Nir Benita
Courses Plus Student 3,905 Points

I have another related question if I may:

What if I would like to inject the same header and footer to each of the pages (As they are the same on each page)?

I am talking about having the ability to change the color of the header title (for example) on one html document, and have it change on all pages.

I am thinking it will require some PHP (Which I know nothing about).

Is there an agreed method to achieve this?

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

Do you have some screenshots on what you want to happen?

Regards Andrew

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

So you basically don't want to repeat yourself? Keeping your site DRY?

So you could do PHP:

<html>
  <head>
    <title>Home</title>
  </head>
<body>
<?php include 'header.php' ?>
    <div>Content</div>
<?php include 'footer.php' ?>
</body>
</html>

Just put your HTML in your header and footer.

You could also look in to something like Jekyll that builds a static site from ERB templates and such.

Nir Benita
PLUS
Nir Benita
Courses Plus Student 3,905 Points
Nir Benita
Nir Benita
Courses Plus Student 3,905 Points

Thanks for putting me on the right direction, seems like you guys have made a daily habit out of it :)