0

I have a data list and inside them anchors that contain images. On image hover, they should tint with a certain color. So I have it so that the image changes opacity on hover and add the tint color as the background color of the container anchor. Of course I have to change the anchor to display:block to do this. I did just this, but the container of the anchor is too wide and I don't want to have the anchor background show next to the images that can be different sizes. So I came up with this Jquery, and it works perfectly in every browser, but IE. I've tried IE6-10. Chrome and Firefox works fine.

jQuery(document).ready(function(){
if(jQuery(".posters").length>0){
    jQuery(".posters img").bind('load', function() {
        var anchor = jQuery(this).parent('a');
        var image = jQuery(this);
        var imageWidth = image.width();
        var imageHeight = image.height();

        anchor.css({
            "background": "#767676",
            "display": "block",
            "width": imageWidth+"px",
            "height": imageHeight+"px"
        }) 
    });
};
});

Can you help me?

user2791747
  • 143
  • 1
  • 1
  • 9
  • 1
    Getting any errors in IE? – j08691 Sep 18 '13 at 14:01
  • 1
    Why do you need `display:block` just to set a background colour? Or are you referring to the width and height, in which case `display:inline-block` would be much better? – Niet the Dark Absol Sep 18 '13 at 14:01
  • No, it just wouldn't execute. I tested with an alert and it is not working after "jQuery(".posters img").bind('load', function() {" – user2791747 Sep 18 '13 at 14:02
  • I need display:block because without it an anchor doesn't get the size of the picture inside. And I can't use inline-block because I need IE7 compatibility. Hence this script. – user2791747 Sep 18 '13 at 14:03
  • What version of jQuery are you using? In jQuery v1.7+, you should be using [`.on()`](http://api.jquery.com/on/) instead of [`.bind()`](http://api.jquery.com/bind/). – ajp15243 Sep 18 '13 at 14:05
  • 1
    [jQuery's docs specifically warn against using the `load` event with images](http://api.jquery.com/load-event/). Your question might be a duplicate of [this one](http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached). – Blazemonger Sep 18 '13 at 14:05
  • Caveats of the load event when used with images : A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are: It doesn't work consistently nor reliably cross-browser, It doesn't fire correctly in WebKit if the image src is set to the same src as before, It doesn't correctly bubble up the DOM tree, Can cease to fire for images that already live in the browser's cache. – Milche Patern Sep 18 '13 at 14:08
  • I use jQuery 1.10, but .on() has also failed. – user2791747 Sep 18 '13 at 14:14
  • Thanks @Blazemonger and Milche Patern – user2791747 Sep 18 '13 at 14:15
  • This is definitely the cached image issue. You can solve it by preloading the image rather than using .bind("load" on an image already attached to the dom. – Kevin B Sep 18 '13 at 14:37

0 Answers0