Jquery Tools overlay not working in IE7

Question

I'm using Jquery tools overlay that allows me to load external pages - http://flowplayer.org/tools/demos/overlay/external.html

I've run into an issue in IE7 (works fine on IE8/chrome etc.)

When I click the that calls the overlay I'm sent to the actual external file rather than stay on the page and have an overlay that includes the external file.

Here's the jquery:

<script>

$(function() {

    // if the function argument is given to overlay,
    // it is assumed to be the onBeforeLoad event listener
    $("a[rel]").overlay({

        mask: {
        color: '#000',
        loadSpeed: 200,
        opacity: 0.8,

    },


        onBeforeLoad: function() {

            // grab wrapper element inside content
            var wrap = this.getOverlay().find(".contentWrap");

            // load the page specified in the trigger
            wrap.load(this.getTrigger().attr("href"));

        }

});
});

$('.close').live('click', function() {

        $("#overlay").fadeOut('slow', function() {

          });

        $("#exposeMask").fadeOut('slow', function() {

          });

    });
</script>

And here's the HTML:

<!-- overlayed element -->
<div id="overlay" class="apple_overlay">

<!-- the external content is loaded inside this tag -->
<div class="contentWrap"></div>

</div>

<a href="Overlay_Login.php" rel="#overlay" class='button button_small_grey'>Login</a>

If you hadn't already guessed my knowledge with jquery isn't great. So if anyone could shed some light on the problem it'd be much appreciated.

You have not mentioned, is this a new issue? Like since you updated something? Or is this a new installation you just can't get working with IE7? — Sparky, Sep 25 '11 at 16:15

score 3 · Accepted Answer · edited May 23 '17 at 09:59

IMHO, and speaking from experience, I'd stay away from jQuery Tools especially if you don't have a good working knowledge of jQuery. With the large amount of required markup and strange methodology, it's not like any other jQuery plugin you'll likely encounter. If you really want to learn more about how to properly use jQuery, stick with plugins that employ more reliable, commonly accepted, and standard methods.

jQuery Tools has not been updated in over a year (since jQuery 1.4.2) and has lots of problems with IE9 & jQuery 1.6 as reported in the Flowplayer forums. The developer, Tero, has been quite flaky about it over the past year. He has spent almost zero time interacting with his community, and by his own words, has talked recently about his distractions with other projects and family. He also cannot seem to get enough other people involved in order to make this a community project or more self-sustaining.

Although a new release is supposedly imminent (since June 2011?), it won't be backward compatible with any of your old code so you'll have to rewrite everything anyway. And who's to say you won't be rewriting this code again in a year when Tero decides to take another long hiatus while newer jQuery and browsers are being released.

jQuery Tools Alternatives?

As far as your particular problem, I see a "trailing comma of death" after the opacity: 0.8 line below:

$("a[rel]").overlay({    
        mask: {
          color: '#000',
          loadSpeed: 200,
          opacity: 0.8,    
        },
....

Certain versions of Internet Explorer will choke on commas when nothing comes after them.

Remove it and see if that helps:

$("a[rel]").overlay({    
        mask: {
          color: '#000',
          loadSpeed: 200,
          opacity: 0.8    
        },
....

Jquery Tools overlay not working in IE7

1 Answers1