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.
Related
I would like the vertical scrollbar to be displayed when I call element.scrollTop = <somePosition>;
Here is an example of what I'm trying to achieve: https://plnkr.co/edit/0ls05cCa3XrvrWPO?open=lib%2Fscript.js&preview
If that example is loaded on iOS, when the left box is scrolled, the right box should sync with it. That works just fine, but I need a way for the scrollbar to also show up.
I think your issue is that division being scrolled via Javascript is not recognized as active, to keep scrollbar visible.
I would suggest to try any custom Scrollbar library, they manage scrollbars with divisions rather than browser's.
Many such would allow you to configure scrollbar to be shown and hidden using Javascript.
It would add additional work for you, but it can be a solution to go with.
Here are few you can try with: https://www.jqueryscript.net/blog/Best-Custom-Scroll-Bar-jQuery-Plugins.html
You could dynamically add a css class to the container when performing scrollTop().
Try a class that implements overflow-y: scroll when applied. That should yield the desired effect.
Please take a look at this site: removed per request
When you click Learn More, the Fancybox lightbox window pops up and looks fine, but when you click the right arrow on the lightbox, a scrollbar shows up for just an instant (it reaches all the way to the top of the doctor's picture). This is happening on Chrome and Safari.
I can't figure out what code to write to not show that scrollbar. The content will never be long enough to need a scrollbar (except on mobile, etc). Another option would be to just have the scrollbar stop at the top of the content container (not go all the way up to the top of the dr's picture). Please help if you can; it would be much appreciated!! I'm a newb to jQuery/Javascript. Thank you!!
You can try to solve this with CSS. Set overflow: hidden on the container div. This will hide any content that overflows the container, so use with care.
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.
We're using this autoscroller script: http://scripterlative.com/files/autodivscroll.htm (the bottom version).
However, we got really stuck since we don't know how to replace the moving "scrollbar" on the scroller side with a pure and simple line with up arrow on top and bottom arrow on bottom.
Functions wise we want this sidebar to behave exactly like the original sidebar and of course be cross browser compatible. We just want to get rid of the original scrollbar and replace it with a much cleaner and more stylish style.
Is this doable?! How?
Best regards Stefan
Just found jScrollPane on AjaxRain.
Implementing an autoscroll would take some coding, but should definitely be possible by just sending the click messages to the div manually so that it would do the scrolling. If it looks like this will suit your needs, I'd chip in with some additional implementation code. That topic may actually be better suited for another question, if you decide on jScrollPane.
Edit: updated link above. also, there are demos there for scrolling on hover and clicking on a link to jump to an anchor. Custom code for an autoscroll should be relatively simple to write from there.
I've got my GridView inside another Panel and I got scrollbars but GridView is to big even with paging. So user needs to scroll down to scroll horizontal (to see horizontal scrollbar).
How can I add any horizontal scrolling trick for my GridView in the Panel. Maybe something from javascript ? My js knowledges is still being poor.
I really hard thinking on what that could be, maybe floating horizontal scrollbar ?
Thank you.
This can be done with the CSS Overflow property, see: http://www.w3schools.com/Css/pr_pos_overflow.asp
You may be able to add this to your asp Control, or see how the <asp:Panel> is rendered (I haven't used WebForms for a while, but I think it's a HTML <span>) and give it an appropriate element Id/class and set the CSS property in a seperate stylesheet.
I think this is what you are searching for? :
scrollLeft