PDA

Click to See Complete Forum and Search --> : window.scrollto() problems

lmpb17
February 17th, 2009, 10:08 PM
I am trying to use the window.scrollto() function with iframes but the code doesnt scroll. I am testing it with yahoo and since this is not a page on my server i have to use the method to have one iframe go through another.

Page1:

<html>
<head>
</head>
<body>
<iframe src="iframe1.html"
frameborder="0" scrolling="no" width="450" height="500">
</body>
</html>


iframe1.html

<html>
<head>
<script type='text/javascript'>
function scroll() {
window.scrollTo(400,350);
}
</script>
</head>
<body onload='scroll()'>
<iframe src="http://yahoo.com"
frameborder="0" scrolling="no" width="450" height="500">
</iframe>
</body>
</html>


Could it be the fact that Im trying to use this onload?
PeejAvery
February 18th, 2009, 09:31 AM
Two things...

1. You have scrolling set to no.
2. You are using window and not the handle for the iframe.
lmpb17
February 18th, 2009, 12:39 PM
So I would change it to iframename.scrollTo(x,y)? And as far as having scrolling to no, I just dont want there to be the scroll bar inside the frame, or is that not an option?
PeejAvery
February 18th, 2009, 01:16 PM
So I would change it to iframename.scrollTo(x,y)?
Yes, or you could give it an ID and reference it with document.getElementById()...

And as far as having scrolling to no, I just dont want there to be the scroll bar inside the frame, or is that not an option?
Sorry, that's the price you will have to pay if you use an iframe.
lmpb17
February 18th, 2009, 01:20 PM
Sorry, that's the price you will have to pay if you use an iframe.

Any alternatives to the iframe that would allow me to accomplish the same thing?
PeejAvery
February 18th, 2009, 03:36 PM
You could create a div and put the contents in there. Just set the overflow property to hidden. Then, instead of using scrollTo(), you would just change the position of the sub content.
lmpb17
February 18th, 2009, 08:46 PM
You could create a div and put the contents in there. Just set the overflow property to hidden. Then, instead of using scrollTo(), you would just change the position of the sub content.

So something like:

<div overflow:hidden;
height:100%;
width:100%;
position:relative;
top:-277px;
left:-400px;><iframe src="http://yahoo.com"></div>
PeejAvery
February 18th, 2009, 10:39 PM
No. The div would be instead of the iframe.
lmpb17
February 19th, 2009, 10:29 AM
No. The div would be instead of the iframe.

Im a little confused now. How would I load another website between the div tags? The only way I could think of is with a frame, or I guess a function but I have a feeling youre talking about something completely different.
PeejAvery
February 19th, 2009, 10:34 AM
I'm talking about using AJAX and displaying the content in a div tag.

EDIT: AJAX cannot be used to load other domains than your own domain. See following posts.
lmpb17
February 19th, 2009, 11:01 AM
I found the following code ( I do not really know ajax) after a little searching but the problem is I dont think it loads external pages.


function ahah(url, target) {
document.getElementById(target).innerHTML = ' Fetching data...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req != undefined) {
req.onreadystatechange = function() {ahahDone(url, target);};
req.open("GET", url, true);
req.send("");
}
}

function ahahDone(url, target) {
if (req.readyState == 4) { // only if req is "loaded"
if (req.status == 200) { // only if "OK"
document.getElementById(target).innerHTML = req.responseText;
} else {
document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
}
}
}

function load(name, div) {
ahah(name,div);
return false;
}
PeejAvery
February 19th, 2009, 11:17 AM
ARG! Sorry, I totally forgot about cross domain issues. Yeah, you cannot use AJAX for this. If you are going to be loading a page from a different domain than your own site's domain, you will have to use an iframe.

EDIT: But, on second thought...You could use an iframe in a div so that the the scrollbar is hidden be cropping the right 20 or so pixels. The amount of pixels to crop would depend on the operating system + browser combination.
lmpb17
February 19th, 2009, 11:19 AM
Oh okay.. i guess ill have to play around with the iframes then. Thanks for your input
PeejAvery
February 19th, 2009, 11:21 AM
We were posting at the same time. Read the edit on my previous post.
lmpb17
February 19th, 2009, 11:36 AM
Im still having problems getting it to scroll to the position I want. With the below code it just loads yahoo.com cropped by my frame.

Site1:

<html>
<head>
</head>
<body>
<iframe id="frm1" src="frame.php" frameborder="0" height="400" width="400">
</body>
</html>


frame.php

<html>
<head>
<script type='text/javascript'>
function scroll() {
document.getElementById('frm1').scrollTo(400,350);
}
</script>
</head>
<body onload="scroll()">
<iframe id="frm1" src="http://yahoo.com" height="100%" width="100%" frameborder="0">
</body>
</html>
PeejAvery
February 19th, 2009, 12:43 PM
No wonder! Why are you loading an iframe within the iframe? Just load yahoo.com and control the scrolling from the main page.
PeejAvery
February 19th, 2009, 12:46 PM
Also, you need the onload event to be tied with the iframe. As you have it now, it is tied to the page with the iframe, not the iframe. So, at the point of loading, the iframe has no dimensions and therefore it will not scroll.
lmpb17
February 19th, 2009, 01:09 PM
Still not working...


<html>
<head>
<script type='text/javascript'>
function scroll() {
document.getElementById('frm1').scrollTo(400,120);
}
</script>
</head>
<body>
<iframe id="frm1" onload="scroll()" src="http://yahoo.com" frameborder="0" width="400" height="400"></iframe>
</body>
</html>
PeejAvery
February 19th, 2009, 02:10 PM
Well, you are close.

<html>
<body>

<iframe id="frm1" src="http://www.yahoo.com" frameborder="0" width="400" height="400"></iframe>

<script type="text/javascript">
var iframe = document.getElementById('frm1');
iframe.onload = function() {
iframe.contentWindow.scrollTo(400, 120);
}
</script>

</body>
</html>

However...apparently you cannot use the scrollTo() method here due to those cross domain security issues I already mentioned. If you were loading an html page from your own domain, the above code would do it for you.
lmpb17
February 19th, 2009, 02:26 PM
However...apparently you cannot use the scrollTo() method here due to those cross domain security issues I already mentioned. If you were loading an html page from your own domain, the above code would do it for you.

So if in page1.html I changed the frame src from yahoo.com to frame.html(on my domain) and have frame.html load a full iframe of yahoo.com then the scroll function from pag1.html should work correct?
something like this:
[b]-> represents iframe[b]
page1.html->frame.html->yahoo.com
PeejAvery
February 19th, 2009, 02:45 PM
The theory of it sounds correct to me. Mix my post #19 with your post #15 and see what happens.
lmpb17
February 23rd, 2009, 08:41 AM
Got it to work with the above method (Page A->frame1->frame2(yahoo.com)) :)

I have another question. Now that the frame is working I would like to be able to change my code on frame1 when the user clicks on a link in yahoo. Would this be done with a body unonload event?
PeejAvery
February 23rd, 2009, 08:56 AM
You could use onBeforeUnload. However, many browsers block it's functionality if it causes a page to redirect without user prompt.
lmpb17
February 23rd, 2009, 09:41 AM
I have this in frame1 but it does not work:

<html>
<head>
<script type='text/javascript'>
var ifr1= document.getElementById(frm1);
function leavef()
{
return "You are leaving the page";
}
</script>
</head>
<body onbeforeunload='leavef()'>
<center>
<iframe src="frame2.php" frameborder="0" scrolling="no" width="231" height="378" name="noname"> </iframe>
</center>
</body>
</html>
PeejAvery
February 23rd, 2009, 09:46 AM
The onBeforeUnload even must be specified for the window it is supposed to affect. In this case, that would be the frame inside of the other frame. You simply have it as the first frame.