7

I was like on every question about this on the net, tried like 50 diff methods, first i tried to scroll the div - then when its not worked i've tried to iframe the file with the div and scroll the iframe.. nothing just works!

Look on the last script i have set up:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var t = 100; //arbitrary time in ms
$("#frame").animate({ scrollTop: $("#frame").height()}, t);
});
</script>

<center><iframe id="frame" src="xxx.php" frameborder="0" width="630px" height="500px"></iframe></center>

I tried both #frame and frame without the (#), both with (document).ready and without it. Nothing seems to work on the page and its driving me nutz.

Thanks. :)

Andre Holzner
  • 18,333
  • 6
  • 54
  • 63
Ricardo
  • 1,653
  • 8
  • 26
  • 51

3 Answers3

16

With jQuery you need to use .contents() to access whatever's inside the iframe. You also need to use either the window load event, or the iframe's document ready event.

$(window).load(function ()
{
    var $contents = $('#frame').contents();
    $contents.scrollTop($contents.height());
});

Demo: http://jsbin.com/ujuci5/2

I would recommend going back to the div structure you mentioned, since it sounds like what you're trying to do doesn't require an iframe. You'll find that it's a lot less headache to work with a div than an iframe.

$(function ()
{
  var $mydiv = $('#mydiv');
  $mydiv.scrollTop($mydiv.height());
});

Demo: http://jsbin.com/ujusa4/2

how can i launch the scroll function like 3 seconds after the page loads?

Use setTimeout.

$(window).load(function ()
{
    setTimeout(function ()
    {
        var $contents = $('#frame').contents();
        $contents.scrollTop($contents.height());
    }, 3000); // ms = 3 sec
});
Matt Ball
  • 354,903
  • 100
  • 647
  • 710
  • Thanks but seems like i need to run the function only after 1-2 seconds cause there is a shout box and it takes like 1-2 seconds before it loads so it basically goes down and then the shoutbox loads and its going up again, any suggestions? – Ricardo Jun 11 '11 at 15:06
  • What shoutbox are you using? Ideally you'd be able to pass a callback to the shoutbox which runs after the shoutbox loads. – Matt Ball Jun 11 '11 at 15:09
  • Yshout 5. ( – Ricardo Jun 11 '11 at 15:13
  • Hm, I can't find any actual API docs for Yshout. If there's an option for it, the setup code would be something like `new YShout({... onLoad: function () {...}, ...});` – Matt Ball Jun 11 '11 at 15:22
  • this shoutbox is pretty unstable so i would better implement the idea with the iframe, so how can i launch the scroll function like 3 seconds after the page loads? – Ricardo Jun 11 '11 at 15:26
8

If you have access to the source code of the iframe contents, one easy trick is to add an <a name='end'>&nbsp; (or the last line of your content)</a> (not sure if you really need anything in the <a> tag).

Add #end to the iframe source, e.g.

http://www.yourdomain.com/file.php#end

and it will automatically scroll to the end, no javascript/jquery required

Ben Holness
  • 2,457
  • 3
  • 28
  • 49
  • 1
    This is a nice solution, but I think it can be any element (span, div, a, etc) with attribute `id="end"` – jperelli Apr 09 '15 at 21:56
1

If the current document is ready, this means that the DOM is ready, but the document inside the iframe has to be loaded too.

<script type="text/javascript">
$(document).ready(function() {
  $("#frame").load(function(){this.contentWindow.scrollBy(0,100000)});
});
</script>
Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
  • Thanks this is exactly the thing i've asked in the comment to Matt Ball, however like i said there is a shoutbox that loads 1-2 seconds after, anyway your code didn't worked too. :\ – Ricardo Jun 11 '11 at 15:12
  • 1
    So take a look at the YShout-documentation and search if there is a possibility to use a callback-function when the shoutbox has been loaded. If yes, call `window.scrollBy(0,100000)` – Dr.Molle Jun 11 '11 at 15:33