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
The possibilities:
1. Put the same header and footer on each page (recommended but requires reload)

2. Server-side page (i.e. pagedisplay.php?page=home echoes the home page, ?page=contact echoes the contact page, etc.)

3. Frames/ IFrames

4. Javascript (requires the content of each page to be loaded into the document and will not work for all users; not recommended).

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
Number 1 is recommended; see this thread: thread215-935410.

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
i havn't got ssi capabilities on the site im building.

Is templates fine?
 
Upvote 0 Downvote
Templates?

I use copy+paste.

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
My recommendation:

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">
<!--
function show(id) {
    var e;
    for (var i = 1; i < 4; i++) {
	    e = document.getElementById('body' + i);
	    if (i == parseInt(id))
		    e.style.display = '';
		else
		    e.style.display = 'none';
	}
}
-->
</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;
}

#body1, #body2, #body3 {
    padding-top: 20px;
    padding-bottom: 20px;
	border: 5px solid black;
	width: 600px;
	text-align: center;
}
</style>

</head>

<body>
<div id="header">This is the header</div>
<div id="nav">
    <ul>
        <li><a href="#" onclick="show('1'); return false;">show body 1</a></li>
        <li><a href="#" onclick="show('2'); return false;">show body 2</a></li>
        <li><a href="#" onclick="show('3'); return false;">show body 3</a></li>
	</ul>
</div>
<div id="body1" style="display: '';">body 1</div>
<div id="body2" style="display: none;">body 2</div>
<div id="body3" style="display: none;">body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 body 3 </div>
<div id="footer">This is the footer</div>
</body>

</html>

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
templates would work... just copying and pasting means that anytime you have to make a change - you have to change all of the pages...

[conehead]
 
Upvote 0 Downvote
...depending on the site size- that could produce a lot of wasted time when there are more efficient ways...

[conehead]
 
Upvote 0 Downvote
thanks clflava, It works just how i want.

really appreciate it.

Will that work with no problems across differnt browsers?

thanks

Ben
 
Upvote 0 Downvote
cLFlaVA:
That requires all of the pages to be stored in one page. That means an immense file, assuming there are more than three or so fully-developed pages.

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
Theres about twenty pages.

any ideas??

thanks

ben
 
Upvote 0 Downvote
I agree completely. It answers the question that was asked.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
Now, to please the masses:

main.html:
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">
<!--
function show(id) {
    document.getElementById('the_iframe').src = 'sub' + id + '.html';
}
-->
</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="#" onclick="show('1'); return false;">show body 1</a></li>
        <li><a href="#" onclick="show('2'); return false;">show body 2</a></li>
        <li><a href="#" onclick="show('3'); return false;">show body 3</a></li>
	</ul>
</div>
<div>
    <iframe src="sub1.html" id="the_iframe"></iframe>
</div>
<div id="footer">This is the footer</div>
</body>

</html>

sub1.html
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">

</style>

</head>

<body>
body 1
</body>

</html>


sub2.html
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">

</style>

</head>

<body>
body 2
</body>

</html>


sub3.html
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">

</style>

</head>

<body>
body 3
</body>

</html>

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
Worked identically in IE 6, FF, Netscape 7.2

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
Also, some people may have Javascript disabled (I believe about 10%) and will not be able to see your page. Include something like this in the page:

Code: 
<noscript>
This page requires Javascript to view the pages. Please visit our <a href="/noscript/index.html">javascript-free page</a>.
</noscript>

and include each of the pages in separate files under the /noscript/ directory.

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
Thanks for all the help

So this will be fine this way?

Just write all pages within the same page.

Ive never done this before, will it affect the download time alot? If it is going to mean waiting ages for customers to view the page i might just do it using plates?

what do you think?

thanks again

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