Page 1 of 1

Expanding iFrame View your site without leaving the index!

Posted: Sat May 30, 2009 4:56 am
by iFlex
Im not too good with JavaScript but this code will create a iFrame, good for if you want to load a new page with out having to refresh everything. What I mean is if you click a special link (Ill post at the bottom) it only changes the iFrame's content.

iFrame Code. (Put this into index.html where you want the frame to be e.g in a middle DIV)

Code: Select all

<script  type="text/javascript">  //<![CDATA[  window.onload = function() {  var f = document.getElementById("mainframe");//Sets iframe id  function resize() { //Starts resize function  var h = "";  var w = "";  if (f.contentDocument) {  h = f.contentDocument.documentElement.offsetHeight + 20 + "px";  // can't find anything for Opera and Firefox that works for the width.  OffetWidth doesn't work right  either.(f.contentDocument.documentElement,"").getPropertyValue("width");  }  else if (f.contentWindow) {  h = f.contentWindow.document.body.scrollHeight + 5 + "px";  } else {  return;  }  f.setAttribute("height",h);  f.parentNode.setAttribute("height",h);  }  if (window.addEventListener) {  f.onload = resize;  } else if (f.attachEvent) {  f.attachEvent("onload", resize);  } else {  return;  }  resize(); //starts resize function that was coded further up the code  }  //]]>  </script><iframe name="mainframe" id="mainframe"  src="home.html" width="100%" frameborder="0" allowtransparency="yes"  scrolling="No"></iframe>
You need to create a file called home.html and put some content into that file. When you load the page with the frame in you will load the content of home.html into the frame.

Now create a new file called about.html and in it put some info about your site.

Okay now on the index put this link
<a href='anout.html' target='mainframe'>About</a>

That targets the frame and forces it to view that file.

Well there you go :P.

~ flex