Results 1 to 7 of 7

Thread: iframe scrolling attribute

  1. #1
    Join Date
    Apr 2006
    Location
    Johannesburg, South Africa
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question iframe scrolling attribute

    Hi,

    I am trying dynamically modify the scrolling attribute of an iframe, in order to get rid of the buggy horizontal scrollbar that appears in IE when the scrolling is set to 'auto' but disappears when it is set to 'yes'. Details here.

    Basically I have different links that have content that either fits snuggly into the iframe or has (vertical) overflow. The scripts on the links call the following function from the anchor tag:

    Code:
    onclick="hscroller('yes');" //if there is overflow
    
    onclick="hscroller('no');" //if there is no overflow
    The actual function looks like this:

    Code:
    // Iframe Scrollbar controller
    function hscroller(switcher){
    	//Check if IE
    	if (navigator.appVersion.indexOf("MSIE")>0){
    		alert (switcher);
    		//modify scrolling attribute
    		window.frames[0].scrolling = switcher;
    	}
    }
    The scrolling attribute does change, but I see no visible results. Does anyone know of a way around this?
    Last edited by entity; 04-10-2006 at 08:07 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    This is a real mess in the various browsers, this works for IE6 and FF1.5, but not in Opera8:

    HTML Code:
    <iframe style="overflow:auto" src="text.htm" width="250" height="200" scrolling="yes" frameborder="1"></iframe>
    However, since virtually all other browsers recognize scrolling="auto" correctly but many (including IE) do not accept its dynamic assignment in a practical fashion, you might be better off using conditional document.write lines or comments to create the iframe in the first place as well.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    To elaborate, this sort of arrangement works well:

    HTML Code:
    <!--[if IE]>
    <script type="text/javascript">
    document.write('<iframe id="ie" name="ed" src="text.htm" width="250" height="200" scrolling="yes" frameborder="1">')
    </script>
    <![endif]-->
    <script type="text/javascript">
    if (!document.getElementById('ie'))
    document.write('<iframe name="ed" src="text.htm" width="250" height="200" scrolling="auto" frameborder="1">')
    </script>
    </iframe><br>
    <a href="text2.htm" target="ed">ed</a>
    With the caveat that on content pages to be loaded into the iframe that you do not want even the empty vertical scrollbar to appear in IE, use this style in the head:

    Code:
    <style type="text/css">
    html, body {
    overflow:hidden;
    }
    </style>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Apr 2006
    Location
    Johannesburg, South Africa
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks! The way I eventually got around it, with some help from codingforums.com was to apply the following style to the page with overflow in the iframe

    Code:
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    border:0;
    width:279px;
    }
    </style>
    The beauty of this approach is that I didn't have to use JavaScript at all.

    Where the frame width was actually 296 (it seems IE needs 17 pixels). I liked your conditional document.write approach, but in this particular example the iframe would have to change its scrolling property depending on the content it loads. I suppose I could change the innerHTML of a DIV each time a link is clicked...

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That solution is very good but allows for no decent looking frameborder in IE. I think you got it wrong on my solution though. As long as the content that you do not want to have scrollbars has the style I indicated in my post, no changes to the iframe are required.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Apr 2006
    Location
    Johannesburg, South Africa
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by jscheuer1
    That solution is very good but allows for no decent looking frameborder in IE.
    That's true. However, in this case I didn't want borders.

    Quote Originally Posted by jscheuer1
    I think you got it wrong on my solution though. As long as the content that you do not want to have scrollbars has the style I indicated in my post, no changes to the iframe are required.
    I tried your solution out (the overflow style part) and I see what you mean. Your solution actually works great (in IE6 and FF1.5 at any rate) without having to resort to the JavaScript.

    Thanks!

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I also tested it in Opera, worked fine. But, if you don't want borders and are not using javascript otherwise for the page, the CF solution would be better.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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