www.webdeveloper.com
Results 1 to 14 of 14

Thread: js opacity of transparent png

  1. #1
    Join Date
    Sep 2010
    Posts
    6

    js opacity of transparent png

    Hi evryone,
    i want to show and hide transparent picture(png) slowly and smooth (opacity form 0% to 100%),
    it is working in all browsers except ie, there i have got black border ...

    my examle: http://www.jsfiddle.net/PVRty/

  2. #2
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    Sorry - can't help too much

    I have IE9 and nothing on the main content of the page lays out correctly and it's impossible to see any of your code or functions given the heavy use of iFrames and dynamically generated content.

    BUT

    *IF* you are using an IMG tag or a small div with a background image then
    you may want to make sure all borders/margins/paddings are set to 0;

  3. #3
    Join Date
    Sep 2010
    Posts
    6
    Here is my example without frames

    http://brodnik.soft.si/test.php
    for source -> right click -> View page source -> there is all code

    I try set border/padding/margin to 0px, but nothing...

    slaughters thanks for now.

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by slaughters View Post
    Sorry - can't help too much

    I have IE9
    Not a wise movement. You should have wait till the version 9 will bypass the beta stage.

    On the other hand: what prevents you from installing in parallel another browser. FF, Chrome, Opera ?

  5. #5
    Join Date
    Jul 2010
    Posts
    135
    Quote Originally Posted by jaka88 View Post
    Here is my example without frames

    http://brodnik.soft.si/test.php
    for source -> right click -> View page source -> there is all code

    I try set border/padding/margin to 0px, but nothing...

    slaughters thanks for now.
    Jaka88,
    interesting piece of code, may I to save it to my PC?

  6. #6
    Join Date
    Sep 2010
    Posts
    6

    Smile

    Quote Originally Posted by crazy boy View Post
    Jaka88,
    interesting piece of code, may I to save it to my PC?
    of course

  7. #7
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    Quote Originally Posted by Kor View Post
    Not a wise movement. You should have wait till the version 9 will bypass the beta stage.

    On the other hand: what prevents you from installing in parallel another browser. FF, Chrome, Opera ?
    It's a netbook. Which currently has IE9, Firefox, Safari, Chrome, and Opera on it.

    But the original poster said there was a problem with IE(8?) - I was letting him know there is also a problem with his page in IE9

  8. #8
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    Quote Originally Posted by jaka88 View Post
    Here is my example without frames

    http://brodnik.soft.si/test.php
    for source -> right click -> View page source -> there is all code

    I try set border/padding/margin to 0px, but nothing...

    slaughters thanks for now.
    Here's a fade function which I wrote which I remember working in IE for png, divs, etc..

    Code:
    //////////////////////////////////////////////////////////////////////////////////////////
    // fadeOutFn
    //		Note: When used as an attribute in a tag it is called fadeOut
    //
    //		A transition effect that fades out an object by changing it's opacity
    //		from 100% to 0%.
    //
    //		It can be used as an attribute in a html tag (ex: <div fadeOut=2...>) to fade 
    //		out that element when the page loads - OR it can be used in as a function 
    //		in an onclick condition to fade itself, or any other element on the page
    //		(ex: <div onlick="fadeOutFn();"..> or <div onclick="fadeOutFn('otherId');"..>)
    //
    //  @param   objId - Id of object to fade in. - *optional* defaults to current    
    //  @param   incOpacity -  amount to decreament opacity - *optional* defaults to 10  
    //  @param   currOpacity - Initial opacitiy to set object to  - *optional* defaults to 100 
    //  @return  void
    //////////////////////////////////////////////////////////////////////////////////////////
    
    function fadeOutFn(objId, incOpacity, currOpacity) {
    
        // Set default value for objects Id if it is undefined 
        // (only happens if function called by an onclick event)
        if (typeof objId == 'undefined') {
            // Get object reference to element which triggered this event
            var event = (this.event) ? this.event : fadeOutFn.caller.arguments[0] || window.event;
            var obj = event.target ? event.target : event.srcElement;
    
            // If object does not have an ID value - then give it one
            var d = new Date();
            if (!obj.id) obj.id = 'obj' + d.getTime();
    
            objId = obj.id;
        }
    
        // Set default value for opacity increment if it is undefined
        if (typeof incOpacity == 'undefined') incOpacity = 10;
    
        // Set default value for current opacity if it is undefined
        if (typeof currOpacity == 'undefined') currOpacity = 100;
    
        // Get object and set opacity
        var obj = document.getElementById(objId);
        obj.style.filter = "alpha(opacity=" + currOpacity + ")"; // IE
        obj.style.opacity = currOpacity / 100; // Firefox, etc..
        obj.style.display = '';
    
        // Decrease Opacity and keep calling fadeOutFn until you go below 0
        currOpacity -= incOpacity;
        if (currOpacity > 0) {
            cmd = "fadeOutFn('" + objId + "'," + incOpacity + "," + currOpacity + ")";
            fadeOutFnTimer = setTimeout(cmd, 50);
        } else {
            // Make sure 0% visible
            obj.style.filter = "alpha(opacity=0)"; // IE
            obj.style.opacity = 0; // Firefox, etc..
            window.clearTimeout(fadeOutFnTimer);
        }
    }

  9. #9
    Join Date
    Sep 2010
    Posts
    6
    I have IE7

    @slaughters:

    both script do same thing. problem is on beggining...

    if u set opacity to 100&#37; or 99% or anything else picture lost his initial opacity.

    so problem is in using
    alpha(opacity=xx)

  10. #10
    Join Date
    Sep 2010
    Posts
    1
    Thanks all.... Really your reply is very useful..... I don't have any knowledge about this topic..

  11. #11
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    @jaka88

    This is a known IE7 .png transparency bug.

    If there is any transparency in the png itself the filter in IE 7 does not behave correctly.

    http://blogs.msdn.com/b/ie/archive/2...26/412263.aspx

    "... alpha blending of a transparent PNG with non-binary transparency may lead to unexpected results. For example, applying a BasicImage filter with an opacity attribute to an IMG element with a transparent PNG will fill the work surface with the transparent PNG alpha alpha blended with a solid gray background. The work surface will then be alpha blended at the specified opacity level with whatever is under the filter."

  12. #12
    Join Date
    Sep 2010
    Posts
    6
    @slaughters:
    thank u.

    Is it possible to fix it?
    my English is bad so i cant read all this blog (on your link)

  13. #13
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    Sorry - not in IE7 when a PNG has any transparency in it.

    I think GIF images are OK though. From what I've seen of the images you have Adobe Photo Shop should be able to make good GIF's from your PNG's. Just use the "Save for Web & Devices..." option

  14. #14
    Join Date
    Sep 2010
    Posts
    6
    Thanks all.

    I made GIF with "Save for Web & Devices..." option and it is OK

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles