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 5 of 5
  1. #1
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts

    DOM and IE Filter Opacity

    Ok so I am playing with the "motion tween" lib that utilizes FF and IE css opacity's to fade in or out elements.

    problem is that if I use DOM to insert my opacity styles:

    Code:
    element.style.opacity="0"; FF
    element.style.opacity="alpha(opacity='0')";IE
    onto my elements before preforming my fade calls, IE throws an error at me in the middle of the fading:

    Line 51
    Char: 16
    Error:'filters.alpha' is null or not an object
    Code: 0
    However if I leave the opacity css style inline with out DOM inserting them, then I get no error and everything is fine.
    My rock and a hard spot is that if I leave the opacity styles inline on each element then people who have JavaScript turned off will never see my content fade in.

    So my question is, am I setting the IE opacity with DOM incorrectly or what?
    BTW line 51 is in the actual opacityTween.js lib:

    Code:
    if(t.filters) t.filters.alpha['opacity'] = v;

    Here is my site:
    http://www.devinrolsen.com

    NOTE: the fade in effect is a based on a cookie session so you will only see the fade in effect on the first time you enter the site, unless you delete your cookies (IE also requires you to restart the browser).

    Thanks!

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Replace highlighted:
    Code:
    element.style.opacity="alpha(opacity='0')";
    ...with filter

    For further reading
    http://www.w3schools.com/Css/css_image_transparency.asp

    Hope that helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    ubh (10-09-2008)

  • #3
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    sorry that was a typo.

    it in fact is
    element.style.filter="alpha(opacity='0')";//For IE

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Which is the typo? Did'nt the suggestion met your desire?
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    ubh (10-09-2008)

  • #5
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Sorry, I made a typo in my first post.
    I indeed did have it setup like:

    Code:
    element.style.opacity="alpha(opacity='0')";
    Either way, looks like unless you declare the opacity's inline you will be getting an error from IE not matter what.

    So what I did was, declared them inline and set them to 100.
    If the user has JavaScript enabled we then while the page is loading use DOM to reach in and set them all down to 0 and preform our fade in effect.

    Of course the fade in effect only happens if the user also has cookies enabled.
    If not we avoid the fade in effect.

    If so, we set a cookie, this way the next time the user visits/hits refresh we avoid the fade in effect altogether.

    Wow see what a little sleep can do for a guy!

    Thanks rangana for your time on this one!


  •  

    Posting Permissions

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