hmm, here's the thing: jScrollPane needs the height and width of the element it's being applied to in order to work. By setting #containerContent display:none in your CSS your effectively giving it 0 height and width, and jScrollPane keeps those measures after being applied.
What I came up with is this: remove #containerContent's display:none from CSS, add visibility: hidden, then use the following JS: $('.scroll-pane').jScrollPane(); $ ("#containerContent").css({visibility:'visible',display:'none'}).fadeIn(2000); - ricardo On Sep 22, 11:29 am, RitchieTheBrit <[EMAIL PROTECTED]> wrote: > Thanks for your reply dude. > > I actually had the scripts grouped like that, but I wasn't sure if > that was causing the problems, so I split them again, cheers for > clarifying that for me. > > Anyway, I still have the same problem. If the contentContainer DIV is > set to fadeIn, it will render any contents within it fine, until the > jScrollPane class is applied to the child DIV (mainContent). This > causes mainContent not to render. I have tried setting mainContent to > display:block and that had no effect. > > Conversly, if I disable the fadeIn effect on the contentContainer DIV, > the mainContent DIV displays fine, and CSS scrollbars render fine. > > I have uploaded all three configurations to my server... > > http://graham-russell.co.uk/misc/newSite/index_1.html <- jScrollPane > Disabled, fadeIn > Enabledhttp://graham-russell.co.uk/misc/newSite/index_2.html <- jScrollPane > Enabled, fadeIn > Disabledhttp://graham-russell.co.uk/misc/newSite/index_3.html <- jScrollPane > Enabled, fadeIn Enabled > > Any ideas? I'm going to carry on experimenting myself, I'll repost if > I find a solution. > > Cheers guys! > > -R. > > On Sep 21, 10:46 pm, ricardobeat <[EMAIL PROTECTED]> wrote: > > > You should apply the fadeIn effect to the element that contains both > > the content DIV and the jScrollPane controls, either > > #jScrollPaneContainer or #containerContent. Applying the effect to the > > DIV in use by jScrollPane will override it's changes. > > > Also, jQuery provides a function for use in place of the window.onload > > event, and there's no need to keep your scripts separate. > > > <script ..> > > $(document).ready(function(){ > > > $('.scroll-pane').jScrollPane(); > > $("#containerContent").fadeIn(2000); > > > }); > > > </script> > > > On Sep 21, 6:56 am, RitchieTheBrit <[EMAIL PROTECTED]> wrote: > > > > Hey guys! I've searched everywhere before posting here, but I've > > > found nothing. > > > > Anyway, I have a page that fades in a DIV on page load using fadeIn. > > > I tried to apply the jScrollPane effect to the div, but it seems that > > > the fadeIn effect breaks it. > > > > Is there a way around this? Below is the way I have applied the code: > > > > <script type="text/javascript"> > > > $(function() > > > { > > > $('.scroll-pane').jScrollPane(); > > > > }); > > > > </script> > > > <script type="text/javascript"> > > > window.onload = function() > > > { > > > $("div#mainContent").fadeIn(2000);} > > > > </script> > > > > I'm a totaly newb, so I'm not too sure if I am calling the functions > > > incorrectly. I have tried the opposite order as well. A demo of the > > > page can be found athttp://graham-russell.co.uk/misc/newSite/ > > > > I am running jQuery 1.2.6 minified. > > > > Many thanks guys! > > > > -Ritchie.