Display a html file within a <div>?

HTML & CSS
1

I’ve finally managed to get the hang of CSS (I think anyway!) and I was wondering if this is possible:

I have a number of different div’s on my page, including a navigation div and a content div. Am I able to include a link in the navigation div to a html file (that contains different content) and have that load into the content div when it’s clicked? So, it would basically work similar to a frames page, where your links are in one frame and the content all displays in another but doesn’t have to reload the whole index page over and over.

And just so you know, I’m not that advanced in any form of scripting languages, aside from a little tweaking, trail and error in Javascript… :slight_smile:

Any help would be appreciated, thanks!

2

Do you know whether your server allows you to use PHP or SSI?

-Sam

3

Thanks for your response!

I do have access to PHP but I have no idea what SSI is and I’m pretty sure I can’t get that anyway…

What do you suggest?

4

Well if you have PHP (which is faster than SSI), try something like this


<div class="classname">
    <?php include("/path/to/file.html"); ?>
</div>

:slight_smile:

5

have a look at this:
http://javascript.internet.com/page-details/dhtml-scroll-demo.html

6

Thanks guys, I’ll give both methods a go when I get a chance and let you know how it turns out.

7

Ok, I’ve been messing around with the PHP solution and can get the include function to display the file in the content div but…

How do I change what html file appears in the content div when I click a link? Here’s a snippit of what I have so far:

<div id=“content”>
<?php include(“home.html” ); ?>
</div>

<div id=“navigation”>
<a class=“nav” href=“##”>Home</a>
<a class=“nav” href=“##”>About</a>
</div>

What do I insert in place of the ## (they’re there for appearances sake just because I don’t know what to use) Obviously if I put home.html or about.html they will just open up as a normal separate page and won’t be inside the content div like I want them to be.

Hope that made sense! Thanks :slight_smile:

8

An IFRAME would be more suited for this type of endeavor.

Skip the <div>, just use <iframe src=“bar.html” width=“x” height=“y”>Sorry, your browser doesn’t support inline frames. <a href=“bar.html”>See the page that should be here.</a></iframe>.

You can run a search on google and find out how to use iframes (because I’m going on memory here) but basically if the browser supports it (IE4+, NS6+, Mozilla, Opera, etc.) then it will display the document in a frame. If not, it displays what’s between the <iframe> and </iframe> tags.

9

PHP code is only actioned on the server, therefore you would have to refresh the page after selecting a link for the new content to be displayed.

How much information will you be displaying on each page? It’s not a practical solution for a large site as there’s a real overhead on initial loading, but if it’s a relatively small site with limited graphics, I like to use hidden divs. Example.

Assuming you have SSI supported, you can then use includes from external files to populate your page on loading. I note that you say that you don’t think that you have SSI, but it’s definitely worth checking with a simple SHTML page.