Jscrollpane & animated tabs not working together.

[LindsayannG]

Hi there
I am trying to maje the Jscrollpane plugin work with the animated tabs
plugin and its just not happening

I have the page that I would like to add it on here:
http://bscphoto.com/testing/weddings/index3.html

I have a slider slideshow and the tabbed animation.. The content that
will be inside of those tabs will possibly go beyond the size of the
box, and i HATE the look of the generic scrollers.. So i figured
JScrollpane would work perfectly

The problem happens when I add the panel4 id (at the moment that div
doesnt have an id, just a class). When that happens, the tabs don't
work anymore. I can't click on the tabs to make it work.

Do you have any suggestions on how to work the source to make both
plugins work together?

[Kelvin Luck]

Hi,

The problem is probably because jScrollPane doesn't work when it is
initialised on an element which is hidden. This is because it can't
calculate the height correctly. There is some discussion on this and
possible workarounds here:

http://code.google.com/p/jscrollpane/issues/detail?id=30

There is also an example of using jScrollPane with the jQuery UI tabs
plugin here:

http://www.kelvinluck.com/assets/jquery/jScrollPane/tabs_example.html

Hope it helps,

Kelvin :)

On Tue, 15 Dec 2009 23:03:42 -0000, LindsayannG <linds...@gmail.com>
wrote:

> --
>
> You received this message because you are subscribed to the Google
> Groups "jscrollpane" group.
> To post to this group, send email to jscro...@googlegroups.com.
> To unsubscribe from this group, send email to
> jscrollpane...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/jscrollpane?hl=en.
>
>

[LindsayannG]

Kevin thank you SOO much for posting this!! I have managed to get some
stuff working. You can see the examples here:
http://bscphoto.com/testing/Website_NEW/testingtabs.html
(please ignore the sloppy styling on the top of the tabs - its a work
in progress).

So as you can see, the scroll pane is working, but I have two
problems. When you visit the page, the first tab is clicked (which is
perfect) but you notice that there is a full browser scroller on the
left. The scroller stays there until you click the third tab. I really
do not understand why is is tossing up a scroller bar for the entire
page, its definitely not bigger than the width of my monitor, so this
has me pretty confused.

The other problem (which isnt a scroll pane problem but maybe you can
help me) is I can not get the tabs to animate. I tried to add the
following:
$(function()
{
$('.scroll-pane').jScrollPane();
$('#tabmain').tabs(2, { fxFade: true,
fxAutoHeight: true});
});

To the header and I know that my tabs are contained by the tabmain div
id, but its just not working!! Any thoughts? Thanks so much again..
this is seriously the MOST support I have ever gotten from a jquery
plugin guy! Thanks

On Dec 18, 6:45 am, "Kelvin Luck" <kel...@kelvinluck.com> wrote:
> Hi,
>
> The problem is probably because jScrollPane doesn't work when it is  
> initialised on an element which is hidden. This is because it can't  
> calculate the height correctly. There is some discussion on this and  
> possible workarounds here:
>
> http://code.google.com/p/jscrollpane/issues/detail?id=30
>
> There is also an example of using jScrollPane with the jQuery UI tabs  
> plugin here:
>
> http://www.kelvinluck.com/assets/jquery/jScrollPane/tabs_example.html
>
> Hope it helps,
>
> Kelvin :)
>

> On Tue, 15 Dec 2009 23:03:42 -0000, LindsayannG <lindsaya...@gmail.com>  

[LindsayannG]

So you got any more help for me for this??

[LindsayannG]

Nevermind.. i feel like an idiot.. All i had to do was give an
overflow:hidden to the main containing div and that removed the scroll
bar on the right that was produced by the browser for the entire page

[LindsayannG]

still haveing the problem with not being able to animate the tabs as I
had before.

[Kelvin Luck]

Hi,

I'm afraid I'm not familiar with the tabs plugin and how you tell it to
animate... Can you get an example of this working where jScrollPane isn't
involved?

Cheers,

Kelvin :)

On Tue, 29 Dec 2009 22:16:51 -0000, LindsayannG <linds...@gmail.com>
wrote:

[LindsayannG]

Sorry it took a while to respond, and thanks for your help.. Here is
the tab's demo screen
http://www.stilbuero.de/jquery/tabs/#fragment-11

I am hoping to probably use the slide or fade effect. I think that the
slide effect might be weird because the scroll bar might not slide
with it, i dont really know for sure.

On Dec 31 2009, 11:31 am, "Kelvin Luck" <kel...@kelvinluck.com> wrote:
> Hi,
>

> I'm afraid I'm not familiar with the tabs plugin and how you tell it to  
> animate... Can you get an example of this working where jScrollPane isn't  
> involved?
>
> Cheers,
>
> Kelvin :)
>

> On Tue, 29 Dec 2009 22:16:51 -0000, LindsayannG <lindsaya...@gmail.com>  

[Kelvin Luck]

Hi,

It look like the tabs plugin provides an "onShow" callback. You could try
reinitialising jScrollPane in this callback.

Hope it helps,

Kelvin :)

On Mon, 11 Jan 2010 14:34:20 -0800, LindsayannG <linds...@gmail.com>
wrote: