Triggering jquery overlay from html5 canvas

Question

I'm a total jQuery newbie, so I apologize for any glaring oversights. Right now I have a website where I am using jQuery Tools Overlay to load external html when certain links are clicked on (http://flowplayer.org/tools/demos/overlay/external.html). This works fine.

Where I am encountering trouble is when I try to trigger an overlay when an object I'm drawing in html5-canvas is clicked. Note: I am having no issue detecting when the object is clicked, the only issue I'm having is triggering the popup.

The following code is what I'm using currently to fill a div with the external page, I was wondering if anybody could point me in the right direction to make it not specific to links.

Thanks!

//make all links with the 'rel' attribute open overlays
$(function() 
{
    // if the function argument is given to overlay,
    // it is assumed to be the onBeforeLoad event listener
    $("a[rel]").overlay(
    {
        mask: 'darkgrey',
        effect: 'apple',

        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"));
        }
    });
});

Update: The solution I ended up with was just as the programmatic demo describes: turn your target div into an overlay, and set load to true. To load external html, just preserve the guts of the 'onBeforeLoad' function above.

Variant Variant · Accepted Answer · 2011-07-19T00:15:08

What you need in this case is to open the overlay programatically and not through a trigger element.

Follow the instructions and sample code in this demo: http://flowplayer.org/tools/demos/overlay/trigger.html

The important note is that in this case you select the overlay element and not the trigger element(s)

Also note the addition of the load:true configuration variable

Triggering jquery overlay from html5 canvas

1 Answers