Scroll to bottom of iFrame?

angst · 11-23-2007, 03:08 PM

Hello,

I'm trying to figure out how to scroll right to the bottom of an iFrame.

I found an old post on this site via google:

http://www.codingforums.com/archive/...p?t-21379.html

there there is an example of this:

PHP Code:


			
function scrollme(){

dh=document.getElementById("frame1").document.body.scrollHeight

ch=document.getElementById("frame1").height

if(dh>fh){

moveme=dh-fh

frame1.window.scrollTo(0,moveme)

}

}

but i can't seem to get that to work.

this is my updated copy:

PHP Code:


			
function scrollme(){

    var ObjChat = document.getElementById("ChatFrame");

    var dh = ObjChat.document.body.scrollHeight;

    var ch = ObjChat.height;

    if(dh>ch){

        moveme = dh-ch

        ObjChat.window.scrollTo(0,moveme)

    }

}

any idea what i've done wrong here?

thanks in advance for your time!

coothead · 11-23-2007, 07:58 PM

Hi there angst,

you can see an example here...

http://mysite.orange.co.uk/azygous/i...To_bottom.html

...and the code here...

iframe_scrollTo_bottom.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#go {
    width:220px;
    padding:5px 0;
    text-align:center;
    border:3px double #999;
    cursor:pointer;
 }
#container {
    width:600px;
    height:260px;
    border:3px double #999;
    margin:auto;
 }
#myiframe {
    width:100%;
    height:100%;
 }
</style>

<script type="text/javascript">
window.onload=function() {
document.getElementById('go').onclick=function() {
   divscroll();
  }
 }
function divscroll() {
   obj=document.getElementById('myiframe');
   num=obj.contentWindow.document.getElementById('lorem').offsetHeight;
   obj.contentWindow.scrollTo(0,num);
 }
</script>

</head>
<body>

<div id="go">click - go to the bottom</div>

<div id="container">
<iframe src="lorem.html" id="myiframe" frameborder="0"></iframe>
</div>

</body>
</html>

lorem.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
    margin:8px;
    padding:0;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:1em;
    line-height:1;
 }
#lorem p {
    text-align:justify;
    padding:10px;
    margin:0;
 }
#lorem p:first-letter{
    font-size:200%;
    color:#600;
 }
</style>

</head>
<body>

<div id="lorem">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</p><p>
Quisque nec enim. Nullam elementum. Quisque rhoncus. Ut cursus, pede sit amet facilisis pretium, 
est erat congue tortor, eget tincidunt metus augue in mauris. Sed id pede. Nam varius faucibus massa. 
In orci. Suspendisse metus nunc, egestas non, porta a, fermentum interdum, mi. Nulla vel tellus nec 
erat consectetuer molestie. Vivamus turpis erat, rhoncus sed, ornare vel, volutpat sagittis, nibh.
</p><p>
Nulla libero. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis 
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut id mauris eget felis laoreet 
semper. Maecenas venenatis erat et orci. Aenean interdum ligula sed nisi. Nulla vel lectus eu dolor porttitor 
tempus. Proin at nisi fringilla pede feugiat luctus. Aenean id risus. Vestibulum a erat ac ipsum fringilla 
feugiat. Cras mauris.
</p><p>
Donec lobortis, odio non ultrices commodo, urna eros ornare lectus, quis faucibus nisi nibh sit amet lectus. 
Nam tristique, velit ac ullamcorper adipiscing, ligula justo ullamcorper augue, ut ullamcorper sem nisi sed 
dolor. Proin at lectus. Nam sagittis euismod lorem. Vestibulum lobortis viverra sapien. Phasellus euismod, 
nulla quis posuere convallis, tellus urna tincidunt augue, at gravida nisl diam non mi. Sed at metus. Mauris 
risus augue, viverra non, varius a, ornare sit amet, dolor. Pellentesque sed est vel nulla dictum pretium. 
Suspendisse potenti. Quisque rutrum pulvinar magna.
</p><p>
Morbi blandit, elit interdum suscipit hendrerit, arcu pede auctor nulla, vel cursus odio sapien sit amet nibh.
 Fusce nibh elit, tempus in, convallis id, tristique quis, sapien. Aenean pellentesque nunc in justo. 
Suspendisse a orci. Nullam metus mi, congue id, nonummy sit amet, pretium ac, metus. Nullam adipiscing.
 Praesent eros mauris, viverra vitae, posuere nec, commodo a, lacus. Donec imperdiet, lorem eu fermentum 
semper, risus turpis mattis urna, vel mollis ligula lorem ut dolor. Donec pharetra sem vitae erat. Class aptent 
taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean eros lorem, semper a, 
ultricies quis, euismod sed, ipsum. Duis condimentum, diam vitae laoreet ultricies, mauris libero accumsan purus, 
semper volutpat diam nulla at augue.
</p>
</div>

</body>
</html>

coothead