Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to scroll up and down an I-Frame 2

Status
Not open for further replies.
Placido

Placido

MIS
Mar 13, 2002
105
IT
Hi everybody-

I'm trying to figured out how to scroll an I-Frame from the main document...

I have this snippet below, but I can't figured out how to address the I-Frame...

<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
<!--
function scrolldown(){
for (I=1; I<=500; I++){
parent.scroll(1,I)
}
}
function scrollup(){
for (I=500; I>=1; I--){
parent.scroll(-1,I)
}
}
//-->
</script>

Thanks in advance
Placido
 
Sort by date Sort by votes
supposing you name the iframe &quot;foo&quot;, like so:
<iframe name=&quot;foo&quot;>

and it is in the document that your script resides in, then:
parent.foo.scroll(1,I); =========================================================
while (!succeed) try();
-jeff
 
Upvote 0 Downvote
Hi Jeff-

I already tried that before posting my question and it doesn't work... I tried again after your answer and it still doesn't work...

Placido
(Knowledge will give you the mean to see the door...
Wisdom will give you the key to open it...)
 
Upvote 0 Downvote
try this instead:

<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
<!--
function scrolldown(){
parent.frameName.scrollBy(0,10)
}
function scrollup(){
parent.frameName.scrollBy(0,10)
}
//-->
</script>


keep in mind this will only work if the iframe's document is in your domain. =========================================================
while (!succeed) try();
-jeff
 
Upvote 0 Downvote
Hi Jeff-

I get the same error... &quot;object doesn't support this property or method&quot;
 
Upvote 0 Downvote
try this. it may work. I encounter that kind of errors so many times that I rarely use dot(.) notation now. Instead, I name all the variables using id attr, i.e.
<iframe id=&quot;frmName&quot;>
</iframe>
and use getElementById method to retrieve that particular object.

hence try this:-

//assuming frame name is frmName
var z = document.getElementById(&quot;frmName&quot;);

//if you want, you can check the tagname of the object
//for instance (NOTE! Check the correct tag name for IFRAME
//I know for input box, it is &quot;INPUT&quot;

<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
<!--
function scrolldown(){

//assuming frame name is frmName
var z = document.getElementById(&quot;frmName&quot;);

//make sure it is a tagname object
if (z.tagName == &quot;IFRAME&quot;) {
z.scrollBy(0,10)
}


}


good luck
 
Upvote 0 Downvote
same error maxpower1... thanks for trying

Placido
 
Upvote 0 Downvote
then your page structure is different...this is what i'm using as a test:

page1.html
Code: 
<html>
	<head>
		<title></title>
		<script type=&quot;text/javascript&quot;>
			function d() {
				parent.foo.scrollBy(0,10);
			}
			function u() {
				parent.foo.scrollBy(0,-10);
			}
		</script>
	</head>

	<body>
		<form>
			<iframe src=&quot;page2.html&quot; name=&quot;foo&quot;></iframe>
			<br/>
			<input type=&quot;button&quot; value=&quot;D&quot; onclick=&quot;d();&quot; />
			<input type=&quot;button&quot; value=&quot;U&quot; onclick=&quot;u();&quot; />
		</form>
	</body>
</html>

page2.html
Code: 
<html>
	<head>
	</head>

	<body>
		<form>
			foo<p/>
			foo<p/>
			foo<p/>
			foo<p/>
			foo<p/>
			foo<p/>
			foo<p/>
			foo<p/>
			foo<p/>
			foo<p/>
			foo<p/>
			foo<p/>
			foo<p/>
			foo<p/>
			foo<p/>
			foo<p/>
			foo<p/>
			foo<p/>
			foo<p/>
			foo<p/>
			foo<p/>			
		</form>
	</body>
</html>



=========================================================
while (!succeed) try();
-jeff
 
Upvote 0 Downvote
I got it... Sorry if I'm a little slow... Thank you very much Maxpower1 and Jemminger. Especially you jemminger that pointed out in your second answer that the page displayed in the I-Frame needs to be in the same domain...
Problem is that the first page I display in the I-Frame is not in the same domain...

Is there a way around the domain limitation?

Ciao
Placido
 
Upvote 0 Downvote
you can simulate it. here, i've put the iframe in a very tall <div>, then clipped the display down with another <div>. then i use script to scroll the inner div.

it only seems to work properly in IE though:
Code: 
<html>
	<head>
		<title>scroller</title>
		<script type=&quot;text/javascript&quot;>
			var timer, loaded;
			
			function d() {
				if (loaded) {
					var d = document.getElementById(&quot;container&quot;);
					var newTop = isNaN(parseInt(d.style.top))?-3:parseInt(d.style.top) - 3;
					d.style.top = newTop;
				}
			}
			function u() {
				if (loaded) {
					var d = document.getElementById(&quot;container&quot;);
					var newTop = isNaN(parseInt(d.style.top))?3:parseInt(d.style.top) + 3;
					if (newTop <= 0) d.style.top = newTop;
				}
			}
			function startScroll(s) {
				if (s == &quot;d&quot;) timer = window.setInterval(&quot;d();&quot;,20);
				else timer = window.setInterval(&quot;u();&quot;,20);
			}
			function stopScroll(s) {
				window.clearTimeout(timer);
			}
			function init() {
				if (document.body) loaded = true;
				else window.setTimeout(&quot;init();&quot;,5);
			}
			init();
		</script>

		<style type=&quot;text/css&quot;>
			#viewer {
				overflow:hidden;
				clip:rect(0 100% 300 0);
				position:absolute;
				top:5px;
				left:5px;
				height:300px;
				width:100%;
				border:1px inset threedface;
			}
			
			#container {
				position:absolute;
				top:0px;
				left:0px;
				height:500%;
				width:100%;
				overflow:hidden;
			}
			#content {
				width:99%;
				height:100%;
			}
			#controls {
				position:relative;
				top:300px;
				text-align:center;
			}
		</style>

		<meta http-equiv=&quot;Pragma&quot; content=&quot;no-cache&quot;>
	</head>

	<body>
		<form>
			<div id=&quot;viewer&quot;>
				<div id=&quot;container&quot;>
					<iframe src=&quot;[URL unfurl="true"]http://www.microsoft.com/&quot;[/URL] name=&quot;foo&quot; id=&quot;content&quot; frameborder=&quot;0&quot;></iframe>
				</div>
			</div>
			<div id=&quot;controls&quot;>
				<input type=&quot;button&quot; value=&quot;D&quot; onmousedown=&quot;startScroll('d');&quot; onmouseup=&quot;stopScroll();&quot; onmouseout=&quot;stopScroll();&quot;/>
				<input type=&quot;button&quot; value=&quot;U&quot; onmousedown=&quot;startScroll('u');&quot; onmouseup=&quot;stopScroll();&quot; onmouseout=&quot;stopScroll();&quot;/>
			</div>
		</form>
	</body>
</html>

=========================================================
while (!succeed) try();
-jeff
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
703
Rayj0000
Rayj0000
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
755
rogerte
rogerte
TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
439
gmmastros
gmmastros
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
1K
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top