Making a HTML page display in a DIV container...

partthethird · Aug 22, 2006

I have what is essentially a 2 column layout, with a large content area on the right, and some links on the left. The CSS and HTML are shown below.

Basically, when a link is clicked, I want to be able to make the relevant page show in the content section on the right. This is probably really easy, but I haven't been able to figure it out...

-----------------------------------------------------

THE HTML -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="

http://www.w3.org/1999/xhtml">

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="testcss.css" type="text/css" rel="stylesheet" />
<style type="text/css">

</style>
</head>

<body>
<div id="header">
<div id="title">thethird's place</div>
</div>

<div id="nav">
<a href="

http://somelink">Link</a>

<a href="

http://somelink">Link</a>

<a href="

http://somelink">Link</a>

<a href="about_me.htm">About the author</a>
</div>

<div id="content">
<div id="sidecontent">

<h1>Obligatory links</h1>
You might like these sites I frequent.

<p>
<a href="

http://www.partthethird.deviantart.com">My

deviantart account</a>
</p>

<p>
<a href="

http://www.lolfaggot.com">My

regular forums</a>
</p>
<p>
<a href="

http://www.customize.org">Customize</a>

</p>

</div>

<div id="maincontent">
<h1>Site live in update shocker </h1>

<p> If you're reading this, it means that my website is finally available for all the web (or at least 3 people) to see! </p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent diam magna, ultrices ac, accumsan eget, elementum id, sapien. Proin ligula mi, molestie sit amet, dapibus id, tincidunt a, odio. Mauris sit amet augue vel eros molestie adipiscing. Ut varius luctus velit. Cras sit amet eros a purus posuere cursus. Phasellus vel urna. Sed ac nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Proin vitae ligula sit amet ligula porta mollis. Morbi dui augue, luctus sit amet, dictum ut, euismod eu, risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean in nibh at erat elementum auctor. Nunc gravida dignissim erat. Curabitur aliquet turpis sit amet justo. Ut ac risus. Sed fermentum massa nec tortor.
</p>
</div>

</div>

<div id="footer">

<div id="copyrightdesign">
Copyright John Antony Barnes (partthethird)

</div>

<div id="footercontact">
<a href="mailto:johnbarnes666@hotmail.com">Contact me</a></div>

</div>

</body>
</html>

-------------------------------------------------

-The CSS

* {
padding:0;
margin:0;
}

body {
color: #000000;
background-color:#99cccc;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.83em;
margin:20px auto;
width:760px;
}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl,
fieldset, address { margin:1em 0;}

h1 {font-size:1.67em;}

h2 {font-size:1.39em;}

h3 {font-size:1.2em;}

h4 {font-size:1em;}

li, dd { margin-left:5%; }

fieldset { padding: .5em; }

a {
color: #FF0000;
background-color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}

a:hover {
color: #33cc99;
background-color: #FFFFFF;
font-weight: bold;
text-decoration: underline;
}

#header {
background-color: #333333;
width:1044px;
clear:both;
}

#title {
color:#CC0000;
background-color:#99cccc;
font-size:3em;
font-weight:bold;
padding:0px 0px 0px 0px;
float:left;
}

#nav {
padding:2px 0px 2px 0px;
margin:0 0 5px 0;
width:760px;
clear:both;
}

#nav a {
color: #000000;
background-color:#99cccc;
font-weight:bold;
text-decoration:none;
padding:4px 20px 4px 20px;
}

#nav a:hover {
background-color:#DD0000;
text-decoration:none;
}

#content {
border-top:1px solid #CC0000;
width:760px;
clear:both;
}

#sidecontent {
font-size:0.83em;
padding:5px 0px 0px 0px;
width:195px;
float:left;
}

#maincontent {
font-size:1.0em;
padding:0px 5px 0px 0px;
width:550px;
border-left:1px solid #CC0000;
float:right;
}

#footer {
color: #FFFFFF;
background-color:#333333;
font-size:80%;
line-height:1.5em;
width: 760px;
clear:both;
}

#footer a {
color: #FFFFFF;
background-color: #333333;
text-decoration: none;
font-weight: bold;
}

#footer a:hover {
text-decoration: underline;
}

#copyrightdesign {
color:#FFFFFF;
background-color:#333333;
padding:5px 0px 5px 20px;
width: 580px;
float:left;
}

#footercontact {
color:#FFFFFF;
background-color:#333333;
padding:5px 0px 5px 50px;
width:110px;
float:right;
}

Vragabond · Aug 22, 2006

You would copy all this structure to all of your pages and then change the text in the main area to make it different for each page.

Of course, if you have any server-side language or SSI available, you could just include the menu code on each page and make everything easier.

There are other solutions to what you want, but they bring more problems than solutions.

MrGTheBeast · Aug 22, 2006

The easiest way to do this would be to use an iframe instead of a div for your maincontent

otherwise you would have to use some kind of script to change the inner html which would probably be quite clumsy.

Rieekan · Aug 22, 2006

Of course, iFrames have their own problems, such as not being able to effectively bookmark pages, SEO issues, etc.

- George

vacunita · Aug 22, 2006

I think what you are attempting is better suited for a Server-Side language. As including a predefined html page into a DIV using a server-side language is pretty simple and offers a lot of flexibilty.

It can become clumsy, but if coded right. it can be veru usefull, and allows for sitewide changes to be done on a single page.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

dkdude · Aug 22, 2006

I'm thinking : ajax!

Try out this package I just made - requires php support on the host.

[tt]index.html[/tt]
The main index af your page. Loads page001.html at startup.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
  <title>Powered by &quot;AJAX&quot;</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <script type="text/javascript" src="ajax_lib.js"></script>
  <style type="text/css">
    #menu {
      width        : 100px;
      float        : left;
      line-height  : 150%;
    }
    #contents {
      float        : left;
    }
  </style>
</head>
<body onload="send_request('page001.html')">
  <div id="menu">
    <a href="javascript:send_request('page001.html')">Page 1</a><br />
    <a href="javascript:send_request('page002.html')">Page 2</a>
  </div>
  <div id="contents">
  </div>
</body>
</html>

[tt]ajax_lib.js[/tt]
My ajax core library.

Code:

function createRequestObject() {
  var ro;
  var browser = navigator.appName;
  if(browser == "Microsoft Internet Explorer")
    ro = new ActiveXObject("Microsoft.XMLHTTP");
  else
    ro = new XMLHttpRequest();
  return ro;
}

function send_request(html_file_name) {
  server_side_script = 'html_loader.php?filename=' + html_file_name;
  http.open('get', server_side_script);
  http.onreadystatechange = handle_response;
  http.send(null);
}

var http = createRequestObject();

function handle_response() {
  if(http.readyState == 4){
    var response = http.responseText;
    document.getElementById('contents').innerHTML = response;
  }
}

[tt]html_loader.php[/tt]
A server side script, that loads a html file and only returns the code between [tt]<body>[/tt] and [tt]</body>[/tt]

Code:

<?php
$default = "default.html";

$file_name = $_REQUEST["filename"];

if(isset($file_name)!==true)
  $file_name = $default;

$html_file = file($file_name);

$body_contents = false;

foreach($html_file as $lineno => $line) {
  if(strpos($line, "</body")!==false)
    $body_contents = false;
  if($body_contents)
    echo $line;
  if(strpos($line, "<body")!==false)
    $body_contents = true;
}
?>

[tt]page001.html[/tt]
Sample page 1

Code:

<html>
<head>
  <title>The first page</title>
</head>
<body>
  <h3>Page 1</h3>
  Crazy stuff you can do with ajax, huh?
</body>
</html>

[tt]page002.html[/tt]
Sample page 2

Code:

<html>
<head>
  <title>The second page</title>
</head>
<body>
  <h3>Page 2</h3>
  What's next? Well, that all up to you ...
</body>
</html>

This but is one way of making html, css, javascript and php come together ... do you get the gist of it?

Regards

dkdude · Aug 22, 2006

Footnote :

The name "AJAX" is simply shorthand for Asynchronous JavaScript and XML...

Regards

ChrisHunt · Aug 22, 2006

I'm thinking : ajax!

I'm not. If you want to put a page in a frame, use a frickin' frame. Don't write your own frames code in Javascript and add a scripting dependency to all the other disadvantages of frames.

Vragabond & Vacunita are on the right track, IMO: do it all server side.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

vacunita · Aug 22, 2006

Why so complex when a simple

Code:

<?

include("\source\folder\page1.html");

?>

In PHP could do the trick?
You can code your links to looke like:

Code:

<a href="[URL unfurl="true"]http://www.mysite.com/index.php?pagetoinsert=1">[/URL] Welcome</a>
<a href="[URL unfurl="true"]http://www.mysite.com/index.php?pagetoinsert=2">[/URL] Mission</a>
<a href="[URL unfurl="true"]http://www.mysite.com/index.php?pagetoinsert=3">[/URL] Links</a>

Your PHP code would be:

Code:

if($_GET['pagetoinsert']==1)
{
include("source/folder/firstpagetoinclude.html");
}
if($_GET['pagetoinsert']==2)
{
include("source/folder/secondpagetoinclude.html");
}
if($_GET['pagetoinsert']==3)
{
include("source/folder/thirdpagetoinclude.html");
}
etc...

It could be done with a switch if you want it to look nicer, but its still as efficient.

Its transparent to the user. and its done on the fly as the site is served.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

dkdude · Aug 22, 2006

Yeah, server side IS the best solution. No doubt about that! That's what I do. Always.

And, I don't recall reading anything saying that partthethird wanted to exclude any specific solution approaches - my suggestion is just one of many... that's why we're all in here in tek-tips - to help us think out of the box ... well, that's why I'm here anyway

partthethird, you can use iframes, just like MrGTheBeast suggest - requires no knowledge/server side php-support. Just plain olde html...

Just put an iframe and name it, then add a target to your links:

Code:

<iframe name="maincontents"></iframe>

...

<a href="somepage.html" target="maincontents">Some Page</a>

Like Chris points out - my initial suggestion requires javascript to be enabled to work - should have stated that.

Regards

Vragabond · Aug 22, 2006

The question that I am asking myself is, should we provide all suitable solutions or should we just limit ourselves to the ones that are reasonable. Now, here's what we should think about:

1. The user's code looks like one for a small website that only has a couple of pages.
2. The user indicated no availablility of server-side coding.

So, this is a simple and shut case to me.
1. The best way to solve this is to use the server side includes or includes provided by any server-side language OP has available.
2. The only other reasonable solution for this is to copy the code that the OP has to all their pages and then manually change the content. This might be a bit awkward, but for a couple of pages it shouldn't matter.
---
3. Another solution is to go fully out with frames, but this brings a lot more problems than the little issue of reusing the code for the menu.
4. OP could opt for iframe, but that has similar disadvantages to frames (since it is a framed solution) and only a slight advantage over using regular frames. Another disadvantage is confusing scrolling for the user.
5. AJAX is a powerful method that can help us a lot in certain circumstances, but like any other buzz word technology it is being over(ab)used at the moment. And a great example of abuse is a full AJAX navigation system, mainly because people will not expect it. If I click on the link on the left and I see no indication of a new page loading (the top right graphic moving on the browser) and I am just looking at a page not changing (since content is still being pulled out) I will simply assume that the page is not working and leave. I don't think losing customers that way is worth having almighty AJAX on your site.

partthethird · Aug 23, 2006

Wow! Thanks to all that replied!

I have looked at them all, and decided that Vragabond's idea of making multiple pages with the same layout and changing the text seems most viable to me. The reason I think this is, firstly, I have no idea what AJAX is, and I've never used php. Secondly. this is the first website I've attempted properly (I've messed around with them before) and as such, I've had no experience with uploading files to the web, or using server side languages.

I have attempted to create the website using frames, but found them cumbersome, to be honest. It was only a chance dabble in CSS that I happened to make this layout.

Whilst I will attempt to understand what has been said, in the short term, I will use Vragabond's idea. It may be considered less professional, but the site is merely for holiday snaps at the moment =)

In time, I will return to this post and consider implementing new designs, incorporating PHP and etc.

Thankyou all for taking the time to reply to my (admittedly slightly 'noobish') question.

theniteowl · Aug 23, 2006

dkdude, have you considered modifying your code to include any script or style tag data that resides outside of the body?
I am looking to do the same thing including a content page within my template page and want to strip out any tags that would be inappropriate within an existing page but script and style tags may be important to the function of the page and may not have been set in the body.

At my age I still learn something new every day, but I forget two others.

dkdude · Aug 23, 2006

Hey theniteowl,

Great challenge [smarty]

So let's get on the same thinking-page then.

Two topics to be included from the "external page": styles and javascript ... or? Both internal and external ... or?

Included "external pages" - would they have any body-styles that would need need to be excluded?

Again - great challenge. Let's get going!

Regards

theniteowl · Aug 24, 2006

EEEK! The thought of going to sub-includes and the whole cascading effect is frightening.
I think we could assume the page we are parsing to be properly formatted but complete HTML and any includes they made to be proper includes not containing the extra tags.
It's the difference between what we are doing and what they did. Our code would work including that page and if anything in that page failed to render due to it's own includes it is because that author made mistakes and not us.

I did something very similar in Javascript.
I got tired of manually generating seperate HTML formatted copies of a submitted form to send as email so I wrote code that grabbed the current HTML page and parsed it out for the sections I needed.
Since the page was already rendered all includes were embeded in the page so I used all on-page and included styles. I then parsed out all the form elements and modified them so the output version would be disabled and did some funky modifications to any select boxes so they would display all selections appropriately.
The goal was to generate the HTML email with an exact copy of the completed form but locking the fields so they could not be readily modified by the client later on. I also hide any buttons so they are no longer available but still occupy the same space they had previously so formatting of the page is not distrubed.

It works quite well and now all I need to send a near exact duplicate of the completed form as an email is a call to the function which stores the modified page code in a hidden field to pass on to my server-side email code.

I suspect that parsing out tags of an entire page would not be as difficult since the content of the tags is either kept or discarded without having to be modified.

This would work perfectly in the templated school web site I have created so that a content page will load into my template page and not have to worry about the duplicate tags or make the teachers create their content with a special template.

My PHP is very weak as I am not familiar with most of the commands but I am learning and it sounds as if your code is a pretty good start on the project already. If we do not have to traverse multiple files it should be pretty straightforward.

At my age I still learn something new every day, but I forget two others.

dkdude · Aug 24, 2006

Yeah, kinda frightening [evil]

Let me make sure I get it right. The steps you're looking for are (and do correct me if I'm wrong):

1. You've got a html form (please post that here)

2. User fills in the form -> submit

3. Submit will "ajax" that to a server side script

4. The server side script will do two things:

a) send the form as a html email
b) return a read-only version

And you want to ommit any tags (styling) in the html form page, right?

And keep any internal/external javascripts, right?

IF my assumptions are correct, are you then looking for a generic "form-stripping" server side script?

Given, that this is kinda off the topic, I suggest that you post a new thread in the javascript forum, and then we'll take it from there - and welcome anyone who want to participate in the solution ;-)

I find this very interesting! Like that kind of challenges

Regards

theniteowl · Aug 24, 2006

No, that form script is one I already wrote in Javascript.
It analyzes the current HTML page and generates a modified version of it for emailing so you end up with an email version that looks just like the original without having to do any extra work. It's pretty slick.

My current need is for a different application in PHP to read in an HTML file and strip out any tags necessary to safely plop the rest of the code into the middle of the template page. I would want to do the entire thing server-side with PHP rather than using Javascript to AJAX the page though. Then the content would need the <html>, <head>, <body> tags stripped but optionally keep content for <style> or <script> tags as they may be needed for proper display of the page when it is rendered.

At my age I still learn something new every day, but I forget two others.

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!

Making a HTML page display in a DIV container...

partthethird

Technical User

Vragabond

Programmer

MrGTheBeast

Technical User

Rieekan

Programmer

vacunita

Programmer

dkdude

Programmer

dkdude

Programmer

ChrisHunt

Programmer

vacunita

Programmer

dkdude

Programmer

Vragabond

Programmer

partthethird

Technical User

theniteowl

Programmer

dkdude

Programmer

theniteowl

Programmer

dkdude

Programmer

theniteowl

Programmer

Similar threads

Part and Inventory Search

Sponsor