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
    New Coder
    Join Date
    Jun 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need help modifying this script!

    Hello everyone - I have a horizontally scrolling site with a fixed position menu. The menu has a .png background image set with CSS with some transparency. I'm using jQuery to fade the menu out and then back in again while the page scrolls. It works beautifully in FF and Chrome, but in IE, when the fadeOut starts, and just before the fadeIn ends, the area that should be transparent becomes black. It's only for a split second but it ruins the effect and its very noticeable.

    After hours of searching and trying different solutions for IE png problems, I finally found one that solves my issue. The code was written by this genius and here it is below:

    Code:
    var i;
      for (i in document.images) {
        if (document.images[i].src) {
            var imgSrc = document.images[i].src;
            if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
                document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
            }
        }
    }
    However, this script searches for ALL .png images on my page and applies the filter. I'm worried this will cause some performance issues as there are a LOT of .png files on my page, but I only need to apply this to one image.

    Can anyone help me modify this function so that I can just have it applied to the one image? Again, this is a div background image, not just a normal image on the page. The div ID is #menu. I'm not sure if that makes a difference in getting the src. Also, I'm not sure if absolute or relative paths are required so...

    /index.php -> the webpage
    /js/functions.js -> the js file with the javascript code
    /images/design/menu.png -> the path to the .png file I want to apply this filter to

    Any help would be greatly appreciated!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,985
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Presumably

    Code:
    document.getElementByid("theimageID").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey Philip,

    Thanks for the answer. However, as I said, the image is a div background image set in CSS. Therefore, the image itself has no ID, only the div. If I put the ID of the div in, that doesn't work, of course. I guess I have to save the src of the background image in a variable and and apply the filter to that variable? Any ideas?

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    have you tried applying the filter to the div with CSS?

  • #5
    New Coder
    Join Date
    Jun 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DanInMa View Post
    have you tried applying the filter to the div with CSS?
    Just tried....that didn't work either. The only thing that seems to work is that script, but that's applying the filter to ALL of my .png images. I only need to use it on 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
    •