Expanding iFrame View your site without leaving the index!
Posted: Sat May 30, 2009 4:56 am
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)
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
.
~ flex
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>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
~ flex