Question

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.

Answer 1

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