Ignore that last message, it was an issue caused by having TEXT
ALIGN:RIGHT set on the main container DIV (that holds the hold page in
the center). For some reason, after I finally got rid of the
offending code, everything worked the way it should in both IE and FF.
Again, many thanks Ricardo!
-R.
On Sep 22, 11:09 pm, RitchieTheBrit <[EMAIL PROTECTED]> wrote:
> 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:jScrollPaneand fadeIn
>
> > hmm, here's the thing:jScrollPaneneeds 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, andjScrollPanekeeps 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
> > >jScrollPaneclass 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 thejScrollPanecontrols, either
> > > > #jScrollPaneContainer or #containerContent. Applying the effect to the
> > > > DIV in use byjScrollPanewill 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 thejScrollPaneeffect 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.
>
>
