iframe navigation scrolling [Archive]

View Full Version : iframe navigation scrolling

TNeston

10-07-2002, 07:25 PM

Hello,

I am trying to create a navigation system that acts like a <a name> tag, but goes from left --> right, is this possible???

I have included an example for reference...

Any help, would be greatly appreciated.

Tom

beetle

10-07-2002, 08:04 PM

Well, this cat can be skinned many ways. Here's 1 idea...(note: this one has degrading links...)

temp.htm<html>
<head>
<title>Iframe scroller</title>
<script>
function jumpIframe(link) {
var ifr = document.frames['myIframe'];
var aID = link.substring(link.indexOf('#')+1);
var a = ifr.document.getElementById(aID);
ifr.scrollTo(absLeft(a.parentElement)-10);
}

function absLeft(o) {
var t = 0;
while (o.parentElement) {
t += o.offsetLeft;
o = o.parentElement
}
return t;
}
</script>
</head>

<body >
<iframe name="myIframe" src="temp2.htm" width="500" height="300"></iframe>
<a href="temp2.htm#1" target="myIframe" onClick="jumpIframe(this.href); return false;">1</a>|
<a href="temp2.htm#2" target="myIframe" onClick="jumpIframe(this.href); return false;">2</a>|
<a href="temp2.htm#3" target="myIframe" onClick="jumpIframe(this.href); return false;">3</a>
</body>
</html>
temp2.htm<HTML>
<HEAD>

</HEAD>

<BODY >
<table width="1500" border="1">
<tr>
<td><a name="1" id="1"></a>1</td>
<td><a name="2" id="2"></a>2</td>
<td><a name="3" id="3"></a>3</td>
</table>
</BODY>
</HTML>

adios

10-07-2002, 09:10 PM

Why not just use...an anchor ('<a name> tag')? These work from left-to-right as well.

TNeston

10-07-2002, 09:18 PM

Thank You very much, this will work perfectly....

BTW, I tried using an anchor tag, but it was jumping out of the iframe...

Tom

beetle

10-07-2002, 09:35 PM

Originally posted by adios
Why not just use...an anchor ('<a name> tag')? These work from left-to-right as well. FYI, I tested that, and the Iframe move just so that the anchor is within view....and doesn't move it to the upper-left as one would hope....

adios

10-08-2002, 06:47 AM

Not sure how portable this is:

<html>
<head>
<title>untitled</title>
<style type="text/css">

a {
font: 200 12px verdana;
color: orange;
text-decoration: none;
margin-right: 32px;
margin-left: 32px;
padding: 3px;
background: black;
}

</style>
</head>
<body>
<iframe name="IF" width="394" height="184" src="IF.htm" scrolling="yes" marginwidth="0" marginheight="0" vspace="10"></iframe><br>
<a href="javascript:;" onmouseover="frames['IF'].location.hash='#page1'">page 1</a>
<a href="javascript:;" onmouseover="frames['IF'].location.hash='#page2'">page 2</a>
<a href="javascript:;" onmouseover="frames['IF'].location.hash='#page3'">page 3</a>
</body>
</html>

[IF.htm]

<html>
<head>
<title>untitled</title>
</head>
<body style="overflow-x:scroll;overflow-y:hidden;">
<table cellspacing="0" cellpadding="0" border="0"><tr>
<td valign="top" bgcolor="tan"><a name="page1">
<p style="width:390px;padding:6px;"><b>PAGE 1:</b><br>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p></td>
<td valign="top" bgcolor="pink"><a name="page2">
<p style="width:390px;padding:6px;"><b>PAGE 2:</b><br>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p></td>
<td valign="top" bgcolor="skyblue"><a name="page3">
<p style="width:390px;padding:6px;"><b>PAGE 3:</b><br>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p></td></tr></table>
</body>
</html>