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.
