4thorder(TM) - Code Snippets and Full Scripts

Using Bookmarks and JavaScript

Question:

I'm working on a page that has a navigation list made up of images that link to corresponding pages which appear in an inline frame lower on the page. Right now they link just fine with the html I'm using, but the inline frame is so low on the page that its not visible without scrolling down. When an image is clicked, I need the page to 'jump' down to the spot where the inline frame is located. I don't think there's any way I could do this with html but I was thinking javascript could possibly work. Any suggestions??

Answer:

I think this is what you are asking to do. I used a bookmark within the page to refernece the iframe. I created three pages for this demo:
1) demo.htm - Main page containing iframe and JavaScript
2) Page1.htm - initial page loaded into iFrame
3) Page2.htm - page loaded into iFrame when image is pressed

CLICK HERE FOR DEMO

Explanation: loadiFrameAndJump() loads the url (u) into the iframe and then jumps to the bookmark on the webpage. Place whatever url you wish into the function. In this case you can see that page2.htm is being loaded.

demo.htm

Code:

<HTML>
<HEAD>
<TITLE>Bookmarks and JavaScript</TITLE>
<SCRIPT language="JavaScript" type="text/javascript">
function loadiFrameAndJump(u)
{
document.getElementById('iFrameSample').setAttribute('src',u)
window.location.href="#iframe"
}
</SCRIPT>
</HEAD>
<BODY>
<P>
<A href="javascript:loadiFrameAndJump('page2.htm');">
<IMG border="0" src="4thorderScriptavatar.jpg" width="75" height="75"></A>&nbsp; 
</P>
<P>
Click image to load the new url into the iFrame at the bottom of the page and 
jump to it.</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>
<A name="iframe"></A>
<IFRAME id="iFrameSample" src="page1.htm">
</IFRAME></P>
</BODY>
</HTML>

Page1.htm

Code:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<P>Page 1 content</P>
</BODY>
</HTML>

Page2.htm

Code:

<HTML>
<HEAD>
<TITLE>Newly loaded page</TITLE>
</HEAD>
<BODY>
<P>Page 2 content</P>
</BODY>
</HTML>

Top of Page