It seems that there is some issues with this under Internet Explorer.
The DIVs load fine, but the text is missing from the scroll pane, and
there is no actual slider (although the scroll track is present).
It's a bit late for me to look into it now, but if look at the above
page using FF, it render fine, then check it in IE, and you'll see
what I mean.
-R.
On Sep 22, 8:43 pm, Richard Brier <[EMAIL PROTECTED]> wrote:
> 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.
>
>
