Detecting If Scrolling Required In IFRAME

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
furiousweebee
Forum Commoner
Posts: 69
Joined: Sun Jul 11, 2004 7:38 am
Location: Brisbane, Australia
Contact:

Detecting If Scrolling Required In IFRAME

Post 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?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

yes, there is a way to do it.. I can't remember the code exactly, but it involves offsetHeight properties..
User avatar
Vincent Puglia
Forum Commoner
Posts: 67
Joined: Thu Sep 04, 2003 4:20 pm
Location: where the World once stood

Post 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
furiousweebee
Forum Commoner
Posts: 69
Joined: Sun Jul 11, 2004 7:38 am
Location: Brisbane, Australia
Contact:

Post 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()&#123;
if (window.parent.scrollspeed!=0)&#123;
speed=window.parent.scrollspeed
scrollwindow()
&#125;
&#125;

function scrollwindow()&#123;
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)
&#125;

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.
Post Reply