I'm using tinyscrollbar to show a nice scrollbar.
Part of my content is hidden (display:none), and only shown after a button is clicked, in a slideDown()/slideToggle() animation.
When I reveal the extra content, the scrollbar does not update, and part of the content is now unreachable. Is there a solution that updates smoothly with the animation?
FYI, here is a non-smooth solution (just call .tinyscrollbar() again after the animation finishes):
$(".toggler").slideToggle().promise().then(function(){
$("#scrollbar").tinyscrollbar()
});
Use the the tinyscrollbar_update() method. Thats a lot cleaner then initializing the scrollbar again.
$(".toggler").slideToggle().promise().then(function(){
$('#scrollbar').tinyscrollbar_update();
});
Maybe use 'relative'
$('#scrollbar').tinyscrollbar_update();
There will be no need to animate scrollbar after toggle content. This solution has helped in my issue.
Related
Hay,
I'm using jquery.fullpage.min.js plugin in my site for fullpage and scrolloverflow.min.js for scroll inside divs. I set autoScrolling:false, scrollOverflow:true because i I don't want auto scrolling, and I want overflow scroll inside div.
The problem is that when I scroll the overflowed div, the whole page scrolled too.
I tried use normalScrollElements:"my-div", but it works only when autoScrolling:true.
how can I avoid page scroll when user scroll the overflowed div?
Thank for help!
Few things:
autoScrolling:false, scrollOverflow:true are not compatible options. You can probably see an error message saying exactly this in your JS console. So expect problems in different browsers :)
normalScrollElements won't have any effect when using autoScrolling:false.
normalScrollElements won't have any effect inside scrollOverflow
I have this little jQuery slideDown effect http://jsfiddle.net/Gg4eP/2/
But the animation isn't smooth? What I am doing wrong?
Thanks for your time.
You just need to add the width to each expandable div.
http://jsfiddle.net/BpMam/
To explain:
jQuery doesn't know the dimensions of your hidden div until it's displayed. So when it's clicked on it actually pulls it out of position to measure it before quickly replacing it. This often has the side effect of causing some jumpiness. Setting the width on the element prevents jQuery from pulling it out of position.
Some browsers don't particularly like text that is automaticly wrapped when animating, and it gets a little jerky when it tries to figure out the height of the element.
Try formatting the text to fit the element and see if that helps.
I actually did it for you, check if this FIDDLE solves it ?
Would probably work to give the slided elements a fixed height aswell ?
FIDDLE
I had this problem, because the div to be animated had an animation-time.
transition-time: all 1s;
Deleted it and got a smooth animation.
I've already managed to succeed in doing the same task with the horizontal scrollbar visible when resizing the window (as you can see at click here #1) but now I want to avoid this undesidered behaviour. I thought to replace the "left" property with "background-position:" in the css and in the js file, but the animation doesn't work at all.... has anyone a clue?
Here is my last version: click here #2
You need to put the animating elements inside a div container that has the CSS property overflow:hidden
I'm looking for a way to do an effect which is most likely a combination of things, the base of it would be something like this:
http://nikestadiums.com/
As you can see, when you scroll down, a div is actually sliding up. I am not sure there is such a plugin, and if there is, is it possible to resize and maybe re-position elements as you scroll down?
I've seen the post:
How to make div scroll down with a page once it reaches top of page?
and I know of sticky elements http://imakewebthings.github.com/jquery-waypoints/sticky-elements/
Is it even possible to do something like this? If yes, can you give me links/examples please?
And of course I need to make it super super smooth like the Nike one...ha
Here is a jsfiddle, but I can't get it to work right.
http://jsfiddle.net/3U2Gj/65/
Thanks.
I've modified your JSFiddle. I tested it in Chrome, Firefox, and IE7+.
http://jsfiddle.net/t0nyh0/aMXRq/3/
I've cleaned it up a bit and moved all your "states" into classes. On scroll, it simply uses JQuery to add and remove classes based on the scroll position.
Note that there is no animation, if you wish to animate it, you can use class transitions to animate. See more here: http://docs.jquery.com/UI/Effects/ClassTransitions.
In regards to entering full mode on keydown, you can again create an "expand" class and apply it upon keydown. You can then structure your CSS as follows:
.minState3.expand { }
and to show the button again
.minState3.expand button { display:block; }
Doing it this way allows you the flexibility to define how it looks based on the different states.
I'm using mootools to create a scrollbar for content example code can be seen here
http://jsfiddle.net/scottmwilliams1/jSZDJ/1/
At the moment the scrollbar appears whatever the length of the content. I need to change the code so that the scrollbar disappears if the content is short and doesn't require scrolling. Mootool version needs to remain the same. Can anyone help. Thanks
Like this? http://jsfiddle.net/CqrFp/
I updated your fiddle implementing that feature.
Try to remove some text and see how the scrollbar disappears.