using JS to create frame-life effects

[BabyJenk5]

I have heard that you can use javascript to create frame-like effects, more specifically, load another page into the current page. So, clicking on a link will open a page on the same window (obviously, the size and location must be prest). All this without using the HTML frame function. Can someone please tell me how? Thanks a lot.

[korkus2000]

Welcome to the board BabyJenk5,

So you are asking how to do it without using an iframe?

[DrDoc]

No JavaScript is needed (and, in fact, it's better to avoid a pure JavaScript solutions since it will stop working completely if the user turns JavaScript off). Why not consider a CSS solution instead?

[webmasterworld.com...] (message 12)

[BabyJenk5]

thanks DrDoc, but what i'm looking for is, a page is divided into A and B. if i click on a link in A, a new page will load in B.

the link you provided gives the code where if i click on a link in A, a new page loads that overtakes both A and B.

I've seen a website where in the HEAD tag, the following is included:

<script type="text/javascript" src="load.js"></script>

and for the link in the body of the page, the following is used:

<a href="javascript:PageManager('load_page','news.html')">home</a>

now, there are no other javascript codes found anywhere else in the code of the page, so i'm assuming that "load.js" is an external file that manages the "pageManager" and the "load_page".

if there are ways to get the effect i want without using javascript, that'd be great too. whatever can be done, i'd be happy with. =)

[MonkeeSage]

Give this a shot...

 <style type="text/css">
 .wrap {
  position: absolute;
  top: 4px;
  right: 2px;
  bottom: 2px;
  left: 4px;
 }
 #nav {
  width: 21.2%;
  height: 99.5%;
  float: left;
 }
 #main {
  width: 78%;
  height: 99.5%;
  float: left;
 }
 iframe {
  margin: 0;
  border: none;
 }
 </style>
 
 <script type="text/javascript">
 <!--
 var warn = "Your browser doesn't support or hasn't enabled iframes!<br />" +
     "View the iframe content directly: ";
 function loaded() {
  document.getElementById("nav").src = "blah.htm";
  document.getElementById("nav").innerHTML = warn + '<a href="blah.htm">Here</a>';
  document.getElementById("main").src = "f1.htm";
  document.getElementById("main").innerHTML = warn + '<a href="f1.htm">Here</a>';
 }
 function loadNav(uri) {
  document.getElementById("nav").src = uri;
  document.getElementById("nav").innerHTML = warn + "<a href=" + uri + ">Here</a>";
 }
 function loadMain(uri) {
  document.getElementById("main").src = uri;
  document.getElementById("main").innerHTML = warn + "<a href=" + uri + ">Here</a>";
 }
 window.onload = loaded; 
 //-->
 </script>
 
...
 
<div class="wrap">
 <iframe id="nav"></iframe>
 <iframe id="main"></iframe>
</div>

Then you can call

parent.loadMain("http://somewhere.blah");

from a link in the nav "frame" to change the page displayed in the main "frame" (or the other way).

Hope that helps
Jordan