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?
Detecting If Scrolling Required In IFRAME
Moderator: General Moderators
-
furiousweebee
- Forum Commoner
- Posts: 69
- Joined: Sun Jul 11, 2004 7:38 am
- Location: Brisbane, Australia
- Contact:
- Vincent Puglia
- Forum Commoner
- Posts: 67
- Joined: Thu Sep 04, 2003 4:20 pm
- Location: where the World once stood
-
furiousweebee
- Forum Commoner
- Posts: 69
- Joined: Sun Jul 11, 2004 7:38 am
- Location: Brisbane, Australia
- Contact:
In the main HTML page:
Beneath that:
Footer of page:
Then, inside the tour_summary.php page (after all HTML content, at the very end of the document):
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.
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>Code: Select all
<img src="images/tour_buttons.jpg" width="269" height="30" border="0" usemap="#tour_scroller">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>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>