...

View Full Version : opening up a webpage within a div tag



lucromick
09-09-2011, 10:12 PM
Hello all,

I'm trying to open up an internal link from my leftnav div into my content div. I used the following JS code from my book but im not quite sure how to make it all work.

Any thoughts appreciated.
Thank you





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!--header script starts here -->
<script type="text/javascript">

window.onload = initlinks;

function initlinks() {
for (var i = 0; i < document.links.length; i++) {
document.links[i].onclick = setContent;
}

}

function setContent() {
document.getElementById("content").contentWindow.document.location.href = this.href;
return false;

}


</script>
<style type="text/css">

html, body
{
margin: 0;
padding: 0;
}

#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#header
{
height: 60px;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#leftnav
{
float: left;
width: 160px;
height: 380px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
height: 380px;
}

</style>

<title>JavaScript</title>
</head>

<body>
<div id="container">

<div id="header">
<h1>JavaScript</h1>
</div>
<div id="leftnav">

<p>
<a href='#'>Load Content</a> <br /><br />
<a href='#'>Load Content</a> <br /><br />
<a href='#'>Load Content</a> <br /><br />
<a href='#'>Load Content</a> <br /><br />
<a href='#'>Load Content</a> <br /><br />
</p>
</div>

<!--Div to load content into-->
<div id="content">
<h2>Subheading</h2>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel erat volutpat.
</p>
</div>
</div>
</body>
</html>

Old Pedant
09-09-2011, 10:27 PM
This kind of reference:

document.getElementById("content").contentWindow.document.location.href = this.href;

only applies to an <iframe>.

Only frames and iframes have a contentWindow property.

A simple <div> can't hold a full document and doesn't have a location.href property.

lucromick
09-09-2011, 10:41 PM
This kind of reference:

document.getElementById("content").contentWindow.document.location.href = this.href;

only applies to an <iframe>.

Only frames and iframes have a contentWindow property.

A simple <div> can't hold a full document and doesn't have a location.href property.

Thank you sir,:)

Does the JavaScript look okay? I guess all I have to do is set up an iframe..

Old Pedant
09-09-2011, 10:55 PM
Assuming you replace the href="#" with a real URL, then I think so.

At least worth trying.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum