Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do?

Status
Not open for further replies.
Benluke

Benluke

Technical User
Apr 2, 2004
112
GB
How do i achieve the following

I have a header and a footer and in the middle the page content. Currently in tables

In the header is the nav bar.

What is the best way to set the page up so when i click on a nav button only the page content changes and the header and footer dont have to reload.

Java script? frames? What would be you reccomendation and how do i do it.

Thanks for any help

Ben
 
Sort by date Sort by votes
It will probably take a long time to see the page. Maybe make a test version first to check?

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
No, if you're going to use my suggestion, I urge you to use my last post, as it allows you to store all pages in separate files and load them into an iframe.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
What's the problem with having the page reload in its entirety, anyway?

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
The header has five heavy images that i didn't want to keep having to load. Thanks for the help

ben
 
Upvote 0 Downvote
They're only loaded once, then cached into the user's machine. The only heavy loading being done on the majority of users machines is the first load, which you'll be doing anyway.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
do! thats right. I also just like the way it does it!

Is it possible to get rid of the shadow effect the iframe has.
thanks ben
 
Upvote 0 Downvote
maybe:
<iframe style="border: none;">
?

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
<iframe src="sub1.html" id="the_iframe" frameborder="0"></iframe>

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
Thanks for all the help.

Your probs not that interested but ill leave a post when i finished the site on this thread

cheers

ben
 
Upvote 0 Downvote
How do i position the Iframe, say 200 px from the left?

everything im doing just isnt working

thanks

Ben
 
Upvote 0 Downvote
#the_iframeid {
left: 200px;
}

Depending on your actual code, this may not work. Let me know.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
I still cant get it in position. As anybody any ideas

thanks Ben
 
Upvote 0 Downvote
We would need some of your other code.

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
No problem, just sorted it out and everythings working fine.

Thanks

Ben
 
Upvote 0 Downvote
Out of curiosity, why are we relying on javascript for the page to work if it uses frames (iframe) anyway?
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
<head>
<title>new document</title>

<script language="javascript" type="text/javascript">
<!--

-->
</script>

<style type="text/css">

#header {
    font-size: 36px;
    text-align: center;
    width: 600px;
    border: 5px solid red;
}

#nav {
    text-align: center;
    width: 600px;
}

#nav ul, li {
    display: inline;
    margin: 0;
    padding: 0;
    color: #339;
    font-weight: bold;
}

#footer {
    font-size: 18px;
    text-align: center;
    width: 600px;
}

#the_iframe {
    width: 600px;
    border: 5px solid black;
}

</style>

</head>

<body>
<div id="header">This is the header</div>
<div id="nav">
    <ul>
        <li><a href="sub1.html" target="the_iframe">show body 1</a></li>
        <li><a href="sub2.html" target="the_iframe">show body 2</a></li>
        <li><a href="sub3.html" target="the_iframe">show body 3</a></li>
    </ul>
</div>
<div>
    <iframe src="sub1.html" id="the_iframe" name="the_iframe"></iframe>
</div>
<div id="footer">This is the footer</div>
</body>

</html>
 
Upvote 0 Downvote
Darn it, Vragabond, you beat me to it!

Bear in mind that if you use any kind of framed solution - be it normal frames or iframes - there's a good chance that search engines will direct people to (in this case) sub1.html, sub2.html and sub3.html rather than your main page, since that's where the content is.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
ChrisHunt

Is there anything you can do to stop that happening?

cheers

Ben
 
Upvote 0 Downvote
Yeah, don't use frames of any variety.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
thought so

was thinking of changing it

thanks

Ben
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
tyutghf
  • Locked
  • Question
Which website accessibility tool do you use?
Replies
0
Views
124
tyutghf
tyutghf
SitesMasstec
  • Locked
  • Question
How to have an HTML opened automatically in an e-mail
Replies
3
Views
245
spamjim
spamjim
stephane.bouchard2
  • Locked
  • Question
How can you find the html version from source code. 2
Replies
6
Views
342
stephane.bouchard2
stephane.bouchard2
lupidol
  • Locked
  • Question
Positioning elements, how do I do it ?! 2
Replies
2
Views
156
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top