jquerytools overlay function doesnt seem to exist

Question

Hi there

im using overylay from jquery tools, however I cant seem to get the example working

I get the following error:

"$("a[rel='overlay']").overlay(function() {" is not a function

In my HTML file i have the jquery/overlay package then i have "common.js" where I call overlay for all links with rel=overlay

    // jQuery functions go in here
if (typeof(jQuery) != "undefined") {
    /* Pops overlay windows for links with rel="overlay" */
     $(function() {
     $("body").append("<div class='overlay' id='overlay'><div class='overlay-wrap'></div></div>");
     // if the function argument is given to overlay, it is assumed to be the onBeforeLoad event listener 
     $("a[rel='overlay']").overlay(function() {  
      // grab wrapper element inside content 
      var wrap = this.getContent().find("div.overlay-wrap"); 
      // load only for the first time it is opened 
      if (wrap.is(":empty")) { 
       wrap.load(this.getTrigger().attr("href")); 
      } 
     }); 
    });
}

any idea where im going wrong?

Answer 1

Are you completely sure the overlay JavaScript file is included in your page?

I was checking this Minimal setup tutorial and the link that they provide for the JavaScript file is broken...

I recommend you to download and host the .js and .css files on your server...

Check the minimal setup working with another file...

Answer 2

Thanks CMS,

I also discovered the example with loading external pages into the overlay doesnt work for external links i.e. it worked for /blah.html but not http://www.google.com. I assume i'll just have to tweak the script a bit to leverage iframe's whenever the href is external