views:

509

answers:

1

I use Jscrollpane for my new project. which works great on the page.

The page works fine but when it is called inside the qtip, the customized bar disappears.

See the customized scroll bar 81.171.199.24/qtip/scrollpanel.html

See qtip example (click snowy Owl link): 81.171.199.24/qtip/index.html

The developer from qtip suggest I should include the scroll script on your qTip page, and call the jScrollPanel method within the onRender callback of your tooltip otherwise won't work since it's simply retrieving the HTML from the page, not parsing the JS on it too.

So I tried to put the code in the onRender function like

onRender: function(){
   $Q('#pop-panel').jScrollPane({scrollbarWidth:15,scrollbarMargin:0});
}

I also tried to use

onRender: function(){
   this.elements.content.jScrollPane({scrollbarWidth:15, scrollbarMargin:0});
}

But I still can't get any luck.

The reason I think is not working are:

  1. I think the two script got conflict,which means I need to use jquery noconflict inside the onRender function.
  2. the scrollbar div is in the scrollpanel.html not on the index.html. If I use this.elements.content.jScrollPane.... , should this only affect the element inside "#report_main_content a[rel]".

Please give some suggestions, thank you so much for the help.

tanya

+1  A: 
api: {
    onRender: function(){
     alert("here");
    }
}
`api` is an option to the `qtip` call. `$(..).qtip({ content: 'My text content in tooltip', api: { onRender: function(){ alert('onRender'); } } });`
Znarkus