Forum Moderators: open

Message Too Old, No Replies

Setting scrollbar location in iframe

iframe scrollbars

         

mattmonahan

1:56 am on Jun 17, 2006 (gmt 0)

10+ Year Member



Hi, I have a webpage that shows an iframe of an external website. I need the iframe to automatically set the "scrollbars" to scroll down and to the right - about 100px each.

How can I write the iframe code to scroll the page over? I don't have control over the external webpage so I can't use anchor tags.

Thanks,
Matt

vincevincevince

3:23 am on Jun 17, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



In previous experiments I have not been able to do this, but I have been able to load a larger IFRAME without any scroll-bars and hide the top part under something else or move the top of the IFRAME off the top of the page, creating the same visual effect.

A neat way to do this is to nest IFRAMES. Make one IFRAME which contains just a big table with anchors spaced vertically on the left in a 0px column, and one big cell on the right containing another IFRAME - rather large and long - which has your final target page.

You can now use ANCHORS on the first IFRAME to move the second IFRAME.

mattmonahan

1:05 pm on Jun 17, 2006 (gmt 0)

10+ Year Member



Great idea, I sincerely appreciate your help. Do you have any sample code I could peek at?

vincevincevince

3:05 pm on Jun 17, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'm not using that method any more I'm afraid, but it would be something like:

Your main page


<iframe src="scrollframe.html#40percent" style="width:800px;height:200px"></iframe>

The intermediate page


<body style="margin:0px">
<table style="width:100%" cellpadding="0" cellspacing="0">
<tr>
<td style="width:0px;height:20%"><a name="top"></a></td>
<td rowspan="5">
<iframe src="http://some.other.domain.foo/page" scrolling="no" style="width:100%;height:3000px"><iframe>
</td>
</tr>
<tr><td style="width:0px;height:20%"><a name="20percent"></a></td></tr>
<tr><td style="width:0px;height:20%"><a name="40percent"></a></td></tr>
<tr><td style="width:0px;height:20%"><a name="60percent"></a></td></tr>
<tr><td style="width:0px;height:20%"><a name="80percent"></a></td></tr>
</table>