Page 1 of 1
Detecting If Scrolling Required In IFRAME
Posted: Tue Jul 13, 2004 8:34 pm
by furiousweebee
I have an IFRAME of absolute dimensions on my site, containing dynamic PHP code. Outside the frame I have two buttons. When hovering over the buttons ("up" and "down"), the content in the IFRAME will scroll accordingly.
It would be handy if I could hide those two buttons when no scrolling is required - i.e. if there is only a very small amount of content in the IFRAME. I was thinking DOM could detect the height of the content in the frame as well as the height of the frame, and show or hide the scroll buttons depending on the results. Is there any way to achieve this?
Posted: Tue Jul 13, 2004 9:26 pm
by feyd
yes, there is a way to do it.. I can't remember the code exactly, but it involves offsetHeight properties..
Posted: Tue Jul 20, 2004 1:45 pm
by Vincent Puglia
Hi,
I'm slightly confused. Iframes add scrollbars by default when the content exceeds the frame's dimensions. So, are you setting it with scrollbars=no and using your own buttons for the scrolling? If so, post some relevant code, and I'll see what I can do.
Vinny
Posted: Tue Jul 20, 2004 6:52 pm
by furiousweebee
In the main HTML page:
Code: Select all
<iframe id="tour_frame" src="tour_summary.php" width=207 height=186 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></iframe>
Beneath that:
Code: Select all
<img src="images/tour_buttons.jpg" width="269" height="30" border="0" usemap="#tour_scroller">
Footer of page:
Code: Select all
<layer visibility=hide>
<div style="width:150px;" align="right">
<map name="tour_scroller" id="tour_scroller">
<area shape="rect" coords="122,3,188,23" href="#" onMouseover="scrollspeed=-1" onMouseout="scrollspeed=0">
<area shape="rect" coords="188,3,266,23" href="#" onMouseover="scrollspeed=1" onMouseout="scrollspeed=0">
<area shape="rect" coords="38,3,117,23" href="tour.php" target="main_content" alt="click for all tour dates">
</map>
</div>
</layer>
Then, inside the tour_summary.php page (after all HTML content, at the very end of the document):
Code: Select all
<script language="JavaScript1.2">
var speed, currentpos=curpos1=0,alt=1,curpos2=-1
function initialize(){
if (window.parent.scrollspeed!=0){
speed=window.parent.scrollspeed
scrollwindow()
}
}
function scrollwindow(){
temp=(document.all)? document.body.scrollTop : window.pageYOffset
alt=(alt==0)? 1 : 0
if (alt==0)
curpos1=temp
else
curpos2=temp
window.scrollBy(0,speed)
}
setInterval("initialize()",1)
</script>
I hope that makes sense. I haven't looked at doing it since my original post because it's not of too much importance, but it would be cool to know so that I can update the site with it later / use it on future sites.