Maphilight clash with Jquery tabs in IE9

Question

Anybody? Any clue??

I am trying to create two maps with hilightable features on the same page. This works well with all modern browsers (IE11, Chrome, etc) but does NOT work with IE9. You can evidence this with the following fiddle: http://jsfiddle.net/Guill84/Sws2T/13/

The script that launches the plugin I paste below for ease of reference. Is there a reason why this gets loaded properly in all browsers but not in IE9? Or is there an issue with my code? The plugin used is 'Maphilight' (https://github.com/kemayo/maphilight)

Thanks in advance, G

$(function () {
    $('.map').maphilight({
        stroke: false,
        fillColor: 'D2D2D2',
        fillOpacity: 1
});
    $('.map2').maphilight({
        stroke: false,
        fillColor: 'D2D2D2',
        fillOpacity: 1
});

    //light up first element
    //this code is repeating below but not sure how to make more condensed
    var data = $(this).data('maphilight') || {};
    data.alwaysOn = true;
    $('.map, .map2').data('maphilight', data).trigger('alwaysOn.maphilight');
    // initialize tabbing
    $(".tabs area:eq(0)").each(function () {
        $(this).addClass("current");
    });
    $(".tab-content").each(function () {
        $(this).children(":not(:first)").hide();
    });
    $(".tabs area").each(function (o, i) {
        var d = $(this).data('maphilight') || {};
        d.fillOpacity = 1;
        d.alwaysOn = true;
        $(this).attr("rel", d.fillColor);
        $(this).data('maphilight', d).trigger('alwaysOn.maphilight');
    });
    $(".tabs area").hover(function () {
        var d = $(this).data('maphilight') || {};
        //d.fillOpacity=0.6;
        d.fillColor = "A0A0A0";
        $(this).data('maphilight', d).trigger('alwaysOn.maphilight');
    }, function () {
        var d = $(this).data('maphilight') || {};
        //d.fillOpacity=0.6;
        if (typeof d.clicked === "undefined" || d.clicked == false) {
            d.fillColor = $(this).attr("rel");
        } else {
            d.fillColor = "379ee0";

        }
        $(this).data('maphilight', d).trigger('alwaysOn.maphilight');
    });
    //map clicks
    $(".tabs area").click(function () {
        //areas loop:
        $(".tabs area").not(this).each(function (o, i) {
            var d = $(this).data('maphilight') || {};
            d.clicked = false;
            d.fillColor = $(this).attr("rel");
            if (d.alwaysOn === false) {
                //d.alwaysOn = false;
                $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
            }
        });

        var data = $(this).data('maphilight') || {};
        data.alwaysOn = true;
        data.fillColor = "379ee0";
        data.clicked = true;
        $(this).data('maphilight', data).trigger('alwaysOn.maphilight');

        if ($(this).hasClass("current") === false) {
            var thisTarget = $(this).attr("href");
            $(this).parents(".tabs").find('area.current').removeClass('current');
            $(this).addClass('current');
            $(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function () {
                $(thisTarget).fadeIn("normal");
            });

        }
        return false;
    });
});

Answer 1

The problem as I see it is not the plugin jQuery Maphilight, but with the other one - the jQuery Panzoom, it appears that Internet Explorer versions below v.9 are not supported:

Panzoom uses CSS transforms and matrix functions to take advantage of hardware/GPU acceleration in the browser, which means the element can be anything: an image, a video, an iframe, a canvas, text, WHATEVER. And although IE<=8 is not supported, this plugin is future-proof.

See here for details - https://github.com/timmywil/jquery.panzoom/blob/master/README.md

You say however, that you test with IE 9, how exactly do you perform the tests, is this genuine IE 9 or you run IE 11 in simulated version mode? I can confirm, that jsfiddle code works just fine under IE 9 in simulated mode, EXCEPT the zooming with the mouse wheel, it works only with the buttons Zoom In / Zoom Out.