Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to show iframe scrollbars only on mouseover ?

    I have an iFrame on which I wish to display scrollbars ONLY when the mouse is over the iFrame AND the source of the iFrame is larger than the iFrame can display

    I am using the following code for the iFrame but believe that I need to add some script to make it work:

    Code:
    <iframe src="http://www.mhgoebel.com" frameborder="0" id="frame" width="320" height="356" scrolling="no">
    onmouseover="setScrolling('auto')" onmouseout="setScrolling('no')"
    </iframe>

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    <style type="text/css">
    .scroll { overflow: auto; }
    .noscroll { overflow: hidden; }
    </style>
    <iframe src="http://www.mhgoebel.com" frameborder="0" id="frame" width="320" height="356" onmouseover="this.className='scroll'" onmouseout="this.className='noscroll'" class="noscroll">
    </iframe>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thankyou

    Thankyou so much :-)

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,300
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Quote Originally Posted by harbingerOTV View Post
    Code:
    <style type="text/css">
    .scroll { overflow: auto; }
    .noscroll { overflow: hidden; }
    </style>
    <iframe src="http://www.mhgoebel.com" frameborder="0" id="frame" width="320" height="356" onmouseover="this.className='scroll'" onmouseout="this.className='noscroll'" class="noscroll">
    </iframe>
    Does not work in IE9.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New Coder
    Join Date
    Jan 2011
    Posts
    52
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by MichaelHGoebel View Post
    I have an iFrame on which I wish to display scrollbars ONLY when the mouse is over the iFrame AND the source of the iFrame is larger than the iFrame can display
    IE doesn't seem to style overflow for iframes; perhaps for security reasons.
    This works for same-domain iframes. Don't style overflow:hidden using CSS.
    Code:
    <iframe id='myIframe' src='iframesource.htm' ></iframe>
    
    <script type='text/javascript'>
    
    (function( id )
    {
      function noBars( elem, action )
      {
        try
        {   
          elem.contentWindow.document.body.style.overflow = ( action ? 'hidden' : 'auto' );  
        }
        catch( e ){}
      }
    
      var ifr = document.getElementById( id );
    
      ifr.onload = function(){ noBars( ifr, true ); };
    
      ifr.onmouseover = function(){ noBars( ifr, false ); }
    
      ifr.onmouseout  = function(){ noBars( ifr, true ); }
    
    })( "myIframe" ); 
    
    </script>

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,300
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Quote Originally Posted by Calvert Tripesi View Post
    IE doesn't seem to style overflow for iframes; perhaps for security reasons.
    This works for same-domain iframes. Don't style overflow:hidden using CSS.
    But only for same-domain iframes.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •