Fantastic work! For posterity, to help any noobs (like me!), here is the way the script is used in its entirety...
<script type="text/javascript"> $(document).ready(function(){ $('.scroll-pane').jScrollPane(); $("#containerContent").css({visibility:'visible',display:'none'}).fadeIn(2000); }); </script> http://graham-russell.co.uk/misc/newSite/ (this link may disappear once the new site is launched) -r. ----- Original Message ---- From: ricardobeat <[EMAIL PROTECTED]> To: jQuery (English) <jquery-en@googlegroups.com> Sent: Monday, 22 September, 2008 19:01:33 Subject: [jQuery] Re: jScrollPane and fadeIn 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.