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 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy iframe transparency problem? impared backgrounds of pictures?

    Hi all,
    I want my iframe to be tranparant and this is my code for this purpose included in the <iframe></iframe> line:

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

    This works well, but the backgrounds of jpg pictures on the page are viewed with blacks instead white, which is the original color, and this is very bad How can I prevent backgrounds of pictures displayed in the iframe to be not transparent? What is the style for <img></img> tag for this problem? Please help..

  • #2
    New Coder
    Join Date
    Sep 2007
    Posts
    16
    Thanks
    0
    Thanked 1 Time in 1 Post
    i've dealt with transparency a lot. especially semi-transparency and have a thread open in another forum where i got a lot of help and suggestions and possily like 3 or so diffrent methods of attacking the problem depending on the situation. but i am not familiar with filter: chroma at all.

    i did a search for it and got this

    http://www.fred.net/dhark/demos/css/..._examples.html

    also. i tested these in opera and FF and they only work in IE.

    so aside from that, my only guess is getting rid of the filter: chroma

    try this example isntead which i just found right now using keywords "transparent iframe"

    http://www.huntingground.freeserve.c...rame_trans.htm

  • #3
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Convert the jpg's to png's which support transparent backgrounds, but IE6 and earlier do not support png's natively, so you will need to include a js routine so they work properly in those browsers.

    Code:
    var arVersion = navigator.appVersion.split("MSIE")
    var version = parseFloat(arVersion[1])
    
    if ((version >= 5.5) && (document.body.filters)) 
    {
       for(var i=0; i<document.images.length; i++)
       {
          var img = document.images[i]
          var imgName = img.src.toUpperCase()
          if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
          {
             var imgID = (img.id) ? "id='" + img.id + "' " : ""
             var imgClass = (img.className) ? "class='" + img.className + "' " : ""
             var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
             var imgStyle = "display:inline-block;" + img.style.cssText 
             if (img.align == "left") imgStyle = "float:left;" + imgStyle
             if (img.align == "right") imgStyle = "float:right;" + imgStyle
             if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
             var strNewHTML = "<span " + imgID + imgClass + imgTitle
             + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
             + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
             + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
             img.outerHTML = strNewHTML
             i = i-1
          }
       }
    }
    Save this as "png.js" and reference it from your html page with the following:
    Code:
    <script defer type="text/javascript" src="../../png.js"></script>

  • #4
    New Coder
    Join Date
    Sep 2007
    Posts
    16
    Thanks
    0
    Thanked 1 Time in 1 Post
    holy moly this will make png's work in ie6? >.< the holy grail!

    *saves this right away*

    ty so much. i'm glad i came here now. i needed this so badly.

  • #5
    New Coder
    Join Date
    Sep 2007
    Posts
    16
    Thanks
    0
    Thanked 1 Time in 1 Post
    ok. i'm trying to apply your suggestion, jlhaslip, and i'm not sure if i'm doing it correctly.

    i copied all the stuff in the first code box into notepad and saved as png.js. then i typed and pasted the code in the second box in the html page i want to use it on. i change the src to the correct location that i uploaded the png.js file to. so it's pointing to the correct file. and i tried entering that code within the header at first, got nothing, then took it out of the header ands till got nothing.

    am i doing it wrong? i'd love to get this to work.

    thank you.

  • #6
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    try this link in ff and then IE6

    http://www.jlhaslip.trap17.com/snews/forum/index.php

    It takes a second pass for the png to become transparent, but it works.
    I re-located the png.js file so the double back reference is no longer there, but that is all I changed, besides adding the second header image. It is a transparent background png. Snag it to confirm that.

  • #7
    New Coder
    Join Date
    Sep 2007
    Posts
    16
    Thanks
    0
    Thanked 1 Time in 1 Post
    that looks fantastic. but i'm still stuck making it work on my site. >.<

    i tried to apply that here

    http://www.legionofangels.net/angelarchive.php

    and if it works. i'm going to apply it to 5 of the styles here

    http://www.legionofangels.net/forum

    all the styles that end with the word "sky" are ff only which i am hoping to make work for IE with this.

    but i can't figure out what i'm doing wrong. perhaps my png's are not correct? or this script cant' do semi-trans only full trans?

  • #8
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    One thing I noticed is that your site has all of those images as background images declared in the css file. I believe the script I posted works on the images in the HTML page only, so perhaps you need to declare the images as inline css styles?
    Only thing I can think of...

  • #9
    New Coder
    Join Date
    Sep 2007
    Posts
    16
    Thanks
    0
    Thanked 1 Time in 1 Post
    that's good enough for me. i will try that out immediately.

    ty. i'll post back with results.

  • #10
    New Coder
    Join Date
    Sep 2007
    Posts
    16
    Thanks
    0
    Thanked 1 Time in 1 Post
    ok now i'm stumped for sure. it still didn't work! >.<

    i tried it here this time

    http://www.legionofangels.net/gm/arc...ve-092007.html

    it's a whole month of archives.

    so wierd. i hope when/if i figure this out, it won't be a pain when i attempt it in my forums.

  • #11
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Code:
    <div class="entrybox" style="background-image:url(http://www.legionofangels.net/forum/images/styles/darksky/darkbg1.png)">
    remove that bg image and see what happens in ie6. it appears to be a 5 x 5 pixel grey repeating image.

  • #12
    New Coder
    Join Date
    Sep 2007
    Posts
    16
    Thanks
    0
    Thanked 1 Time in 1 Post
    remove it? with nothing in it's place? how will it know what to use?

    darkbg1.png is indeed a 5x5 pixel semi transparent png. i made it in photoshop with a setting of i think 50% opacity. i could make it bigger but i thought there was no need and i should save on file sizes so i made it teeny. it tiles anyay so it makes no diffrence.

    in firefox, the semi-transparency looks so awesome.

    i am not sure what i would gain by removing the line entire. i would most likely have a completely transparent bg that shows the sky background perfectly. but that isn't what i want. i'm sorry if i diddn't understand your purpose for it. i don't mean to question you. >.< could you perhaps clarify how removing the background png would help?

    cause that png file is the one i'm trying to make work with the script.

  • #13
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Sorry about being late getting back to you. Life stuff.

    I thought maybe the solid coloured background was affecting the transpaency/opacity of the images.

    Did you try my suggestion? And did it work?


  •  

    Posting Permissions

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