/    Sign up×
Community /Pin to ProfileBookmark

IFrame

Copy linkTweet thisAlerts:
May 22.2009

Hello all, I have 2 questions related to IFrame element:

<iframe src=”?????” allowtransparency=”true” name=”myframe” width=”633″ height=”476″ frameborder=”0″></iframe>

  • 1. allowtransparency=”true” works only for Mozilla, how can I get transparent iframe in IE, Opera, etc..?

  • 2. what should be instead of ????? in src=”?????” if I want to keep the same page after refresh? In other words when I refresh, the page becomes blank.

    • Thanks a lot ?

    to post a comment
    HTML

    4 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @skilled1May 22.2009 — taken from another webforum

    I found it..

    The solution is this:

  • 1. First Give your iframe the allowtransparency="true" tag.

  • 2. Make sure the source page's content has NO background color specified... not in the page itself, and not in any stylesheet linked to the page! This will make the body color pure white.

  • 3. Add this to your iframe tag:

    style=filter: chroma(color="#FFFFFF");


    • Step 1 and 2 makes the iframe transparent in netscape/mozilla/firefox. As long as the page has no other background specified, the transparency works... but if you specify a background color, the transparency is lost.

    Step 3 makes it work in Internet explorer, ie's filter:chroma nukes the white background. That means you must make sure no other part of your page (or at least nothing in that iframe) has pure white, or it will be made invisible. That's pretty easy, if something is even slightly differently colored (for example #FFFFFD) then it won't be transparent.

    So the example code:

    <iframe src="anything.htm" frameborder="No" style="FILTER: chroma(color=#FFFFFF)" allowtransparency="true">

    </iframe>

    And "anything.htm" must not have any bgcolor specified in its body tag, or in a style section, or in any CSS that it's linked to.

    Hope this was helpful to someone other than me. [/quote]

    as far as the iframe src=

    that src is the link to the page you are referencing eg, src="http://www.google.com" or http:www.yourwebsite.com/filename.html"
    Copy linkTweet thisAlerts:
    @harevik85authorMay 25.2009 — Thank you sooo much it worked, you are the best ?

    Sorry but perhaps you could know the solution to my second question, that is when I refresh the page, current page becomes blank.

    <iframe src="javascript:updateFrame()" frameborder="No" style="FILTER: chroma(color=#FFFFFF)" allowtransparency="true" name="myframe" width="633" height="476" ></iframe>
    Copy linkTweet thisAlerts:
    @donatelloMay 25.2009 — Don't know if this is any help, but here is a small page on iFrame navigation menus, or how to make a mini-browser using an iFrame...

    http://www.createbutton.com/iframe.html

    For refresh, they have an absolute URL, but you can probably use the same javascript they used in the address field to display a static page or the most recently entered page.

    Hope this helps. ?
    Copy linkTweet thisAlerts:
    @skilled1May 26.2009 — i have used a refresh in this instance

    [CODE]<script type=text/javascript>
    // The time out value is set to be 10,000 milli-seconds (or 10 seconds)
    setTimeout(' document.location=document.location' ,10000);
    </script>[/CODE]

    i used that code on the page that is being used in the iframe, not on the parent document. 10 seconds is far too fast in your case, but you can edit that, the code is to be placed in your <head>
    ×

    Success!

    Help @harevik85 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...