Results 1 to 3 of 3

Thread: Getting Rid of White Backgound Flash On Iframe With AJAXTABS

  1. #1
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Getting Rid of White Backgound Flash On Iframe With AJAXTABS

    http://www.dynamicdrive.com/forums/s...ad.php?t=38672

    Hi,

    I have a problem using Ajax Tabs. I am using the load Iframe instead of ajax. In some browsers (IE) before the content is displayed within the Iframe, it flashes to a white background and then the content is shown. Is there anyway to eliminate this? The website is to be black so the flash of white makes it look a bit crude.

    Any help would be greatly appreciated including any code as i am a bit of a newbie.

    Thanks

    Aphid

  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

    There may be no solution to this, as the default background color for an unloaded page is white, and it takes IE a little while to parse any style for a page loaded into the iframe.

    There are a number of things you can try.

    If you don't need iframe, don't use it.

    Other than that, I'd try setting the background color for the page in the iframe, do this with an on page stylesheet, right before the opening body tag on the page in the iframe. If there is no page in the iframe, make one for it.

    Code:
    <style type="text/css">
    body {
    background-color: #000!important;
    }
    </style>
    If that's no good, I would try setting the background color for the page in the iframe to transparent, do this with an on page stylesheet on the page in the iframe (as mentioned above):

    Code:
    <style type="text/css">
    body {
    background-color: transparent!important;
    }
    </style>
    At the same time set the allowtransparency attribute on the iframe to true. To do that, add the highlighted (in ajaxtabs.js):

    Code:
    	this.defaultIframe='<iframe src="about:blank" allowTransparency="true" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" class="tabcontentiframe" style="width:100%; height:auto; min-height: 100px"></iframe>'
    Last edited by jscheuer1; 01-26-2009 at 02:39 PM.
    - John
    ________________________

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

  3. #3
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile That Worked!

    I set the allow transparency for the iframe in the .js file and it now works!

    Thank you for the help!

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
  •