views:

114

answers:

2

I'm using the jquery-tools tabs and carousel in a page I'm working on. The carousel is embedded within a tab, and the tab is loaded in a beforeClick callback.

Normally, the carousel is initialized in the document ready function like so:

$(function() { 
        // initialize scrollable 
        $("div.scrollable").scrollable({ 
                size: 3, 
                clickable: true, 
                loop: false 
            }).mousewheel(); 

This doesn't work when the carousel is loaded via beforeClick, because it when the DOM is ready, this tab hasn't been loaded yet.

        $("ul.tabs").tabs("div.panes > div", {
          initialIndex: 0,
             onBeforeClick: function(event, i) {
                    // get the pane to be opened
                var pane = this.getPanes().eq(i);

                var src = this.getTabs().eq(i).attr("href");
                var langPattern = "/^" + getLang() + '/';
                var forceReload = false;
                if (src.match(langPattern) == null)
                {
                  src = getLang() + "/" + src;
                  forceReload = true;
                }
                if (pane.is(":empty") || forceReload) {
                    // load it with a page specified in the tab's href attribute
                    pane.load(src);
                    // initialize scrollable - ONLY SHOULD BE DONE ONCE
                $("div.scrollable").scrollable({ 
                    size: 3, 
                    clickable: true, 
                    loop: false 
                }).mousewheel(); 
                }
            }
      }).history();;

My question is a two-parter:

First, is there an event I can add a handler to to initialize the scrollable when it is first loaded? Second, if there isn't, is there a way I can find out if the scrollable has been constructed yet?

The idea behind this code is to load localized html fragments based on the user's language selection. This is for a catalog on a CD, not online.

+1  A: 

You might want to check out the jQuery live event. This event matches all current and future DOM matches.

EDIT 1 You want to bind to div.scrollable's onload event, correct?

$('div.scrollable').live('load', function() {
    // etc.
});
Jarrett Meyer
But what event would I bind to?
Jeff Paquette
see edit 1, thanks
Jarrett Meyer
This didn't work, I think because there are no scrollables in the dom at the time document ready was called. Though it's a good technique, thanks for showing it to me!
Jeff Paquette
It should work even if there are no matched elements at the moment of binding. Are you using jQuery 1.4?
Agos
Not yet. I'm using v1.3.2
Jeff Paquette
A: 

I solved my problem by attaching a callback to the load call:

pane.load(src, "", function(){
  $("div.scrollable").scrollable({ 
        size: 3, 
        clickable: true, 
        loop: false 
    }).mousewheel();    
});
Jeff Paquette