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 Enabled http://graham-russell.co.uk/misc/newSite/index_2.html <- jScrollPane Enabled, fadeIn Disabled http://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. > >
