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) <[email protected]>
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.
