/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Load html page to specific div id?

My question isn’t necessarily how to do this, but what the preferred method is.
I’m building a personal page for a musician. The background is fairly image heavy so I don’t want it to have to reload when a link is clicked, and the content area is in an absolute positioned div. All content, including the nav bar is in this area. Nothing else on the page needs to change. I have been experimenting with iframes, but the problem is the frame height needs to change page to page. I looked at fixes for this, but it seems nothing works when the links and content are both inside the iframe. I also looked at some ajax scripts, but my knowledge of ajax and javascript is limited (although I am willing to learn).

My question is this: What is the best way to do this? I have come across many sites like the one I’m trying to build, but of course now that I need to find them, I can’t. Do I need to have the nav bar outside of the content div no matter what? And if so, how do I add down-states to the links if the parent page is not reloading?

I hope I explained this correctly. I know I can do this with some modification, but I guess I just want to know how the pros would handle this. Thanks in advance.

to post a comment
HTML

3 Comments(s)

Copy linkTweet thisAlerts:
@CentauriJun 16.2008 — If all presentational graphics are applied as background images via an external common css file, then the graphics and the css will be cached by the browser and will not reload with each page, allowing normal separate pages without trying to load content separately. Have a look at this site I did for instance - even though all the backgrounds, navigation etc are graphic intense, it does not reload the graphics.
Copy linkTweet thisAlerts:
@davidrusauthorJun 17.2008 — Well... that's is easy. Thanks for the response. It's kind of hard to find the "simple" answers sometimes. Now I can go build my site!
Copy linkTweet thisAlerts:
@donatelloJun 18.2008 — If all presentational graphics are applied as background images via an external common css file, then the graphics and the css will be cached by the browser and will not reload with each page, allowing normal separate pages without trying to load content separately. Have a look at this site I did for instance - even though all the backgrounds, navigation etc are graphic intense, it does not reload the graphics.[/QUOTE]

HEY! COOL!

I like that. That would be a good idea for a tee-shirt site I want to put up. Except I don't have that many tee-shirt designs yet...

Nice job!
×

Success!

Help @davidrus spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...