inuyaksa / jquery.nicescroll Goto Github PK

OR, provide a way to 'unbind' the scrolling from the element.

Great script otherwise

I just tried to scroll the content inside a container that is using Fixed CSS positioning. it works well but when the page is scrolled in general, the scrollbar is not sticking to the fixed positioned container as it should. It seems to be absolutely positioned and is scrolling with the document.

Can the scrollbar use fixed positioning when the container is using fixed positioning?

Hey, good plugin that of yours. But I'm trying to use it for a site I've just finished, and I was using another scrollbar, but my client insisted in using the iPad and scrolling with the finger. Anyway, I have a section where there are 3 columns. Each column is injected with content via Ajax, so when the content is changed (via sidebar menu), its internal size changes.
So, as the page doesn't reload, I had to reset the bar somehow, and I've made it using:
$(".scrollbar").getNiceScroll().remove()
$(".scrollbar").niceScroll({MY_PARAMS}); //MY_PARAMS are no important. Just to make code clearer.
I tried with "resize()" but it didn't work.

But then, when I scroll one column and I change contents, the content is already scrolled, so I thinks it'd be great to have a method to reset the position, something like $(".scrollbar").getNiceScroll().scrollTop(). I dived into your code but I'm afraid I wasn't able to find something similar, and I guess I'll have to resest positions making "jquery black magic" instead using some method. Am I wrong?

I got the following error when I viewed my project and your website - http://areaaperta.com/nicescroll/demo.html - on several mobiel devices. and via ripple (simulates many devices).

Error: jquery.nicescroll.min.js:35 TypeError: 'undefined' is not an object (evaluating 'b.touches.length')

Thanks for you wonderful plugin.

I'm trying to create a page with 2 div's next to each other that fill the entire page (so each div has a width of 50% and a height of 100%). Within each of these div's the content should be scrollable, so the scrollable area is 100%x100%, however this seems to give problems for this plugin.

Any suggestions on how to fix this?

If parent was moved scroll stay on fixed position, i added this changes

this.showCursor = function(py) {
this.updateScrollBar();

Is it IE7 compatible?
On IE7, it still shows the default scrollbar, though it does show the stylized black scrollbar as well on scrolling.
http://min.us/l6e7ISUisUYTr

Not so much as issue as a suggestion. Control of the scroll bars "snapping" to top/bottom of page would lovely!

Cheers.

If I try to change inside content of the DIV dynamic. After that, I cannot scroll or do something any more with th scrollbar. Is there nay way to update scrollbar like the first time?

Thanks a lot.

Looks like Scrollables Div are not working in IE8 (didn't test ie7 & 6) with the latest release, scrollbars do not show up or are placed somewhere outside.

Hi,

I like the script so much.
Unfortunately it breaks all other links on the page when the scrollable div has moved.

As long you move the div only with the mouse wheel, everything is fine.
After draging the div with the mouse pointer all links on this page are broken.

Please try it by your self.

http://devel3.mysoftmusic.com/tv/26-minutes-meditation

Here I have a list of images but seems that NS can't get content size.

http://jensstuart.com/demo.php

onResize() passing from window.resize event fix it. Alternatives?

This is the version 2.8.2.
I have a box with hidden content. I reveal it with a display:block and then resize nicescroll. It works as expected.
http://ericcoffman.net/panels/expand.html

With 2.8.6 the resize no longer works when the content changes size.
http://ericcoffman.net/panels/expand1.html

I think the fix for the "pill" issue caused this.

Hi your scroll looks great and solves my ipad two finger scroll problem. but it doesn't seem to work in conjunction with
jquery.ui.touch.js which we are using to convert tap on ipad to a right click.

Any ideas how we could haver both capabilities

Thanks

Finbar

Hi,
i see a strange effect when i resize/select a window in chrome 17.0.963.83 m on Win 7, with page loaded that uses nicescroll. During resize on the top and right side blue boxes blink. This effect is even present on your example page
http://areaaperta.com/nicescroll/demo.html if you quickly resize back and forth, but is even more visible when the page is more complex and needs more time to rerender.
This is somehow caused by the code that happens during this.onResize = function(e,page) {... call. I just tried commenting out everything there and blue boxes do not appear , nice scroll is of course not properly working then too :)
This effect does not appear in firefox or ie. Is this something known? Any workarounds?

It would be really helpful if I could set an option to render a scrollbar to the left (or default right) of a container. It looks like I can kind of do this with some calculations and railoffset, but I'm hoping for a simpler switch.

Im not able to select form elements if touchbehavior is set to true.

Is this usual behavior?

thanks.

On your site it says in capital letters that this has to ALWAYS be fired on document ready. I want to use it with jQuery mobile so I want to use pageinit- is that possible?

Also does this mean you cannot call the scroll bars on elements loaded with ajax?

Browser zoom causes hidden scrollbars to become visible. The results seem to occur across all modern browsers.

Is there any possibility to scroll horizontally with nicescroll?

Thanks!

I ran into some issues while trying to implement horizontally sliding navigation. That means there are side-by-side divs where only one is visible at the time and each one of them is scrollable using Nicescroll.

But when a div slides off the visible area, its scroll track still stays in the place.

I found nicescroll.remove() method, but it doesn't seem to do the job.
I even tried basic scenario where I initialized the nicescroll on an element and then removed it, but the track still stayed in the DOM and visible.

Could this be a mistake in my code? Is remove even supposed to be called from outside?
And most importantly - is there a way to completely remove all additional elements, bindings and all from an element?

1. Html include jQuery.js;jQuery.UI.js;jQuery.nicescroll.js.
2. Created a Dialog by jQuery.UI.
3. The Dialog can not to resize.

-------------Javescript--------------------------
$("

Hi,

I got a problem that is similar as: #29

but the problem now is that it's only not working well in Chrome I found so far.

here's an example: http://www.areaaperta.com/nicescroll/dev/issue29.html

links in the above page are not working are "HPIJS", "open-source driver", but "supported printer" is working. when I say not working, I mean I have to double click on a such link, the link then works.

it seems the pure links are working well but not those ones with extra attributes including this structure a img /a

hope this can be fixed soon.

Thanks!

Hello

The bug is very nasty, appears only in Chrome from what I can tell, so there it is :

• chrome latest version
• jquery 1.7.1 or 1.7.2
• latest version of nicescroll
• using $("html").niceScroll(); creates a Dom exception syntax error that freezes the page

Works even in the nicescroll downloadable demo, if jquery is updated.

I think (not sure) the trigger is the line
" self.autohidedom.stop().animate({opacity:self.opt.cursoropacitymin});" from onResize function

Hi,

I'm really loving your plugin, but I have a question. The scrollbar works perfectly in iframes, but when you click a link on the page, the scrollbar preserves its location even on the new page. I need it to scroll to the top, but I can't figure out how to do it.

Any help would be greatly appreciated.

Yvonne

This page as a bare implementation of jquery UI drag and drop panels.
http://ericcoffman.net/panels/working.html

This is the same page with nicescroll added.
http://ericcoffman.net/panels/iebug.html

The bug happens when nicescroll is added. Without nicescroll the panels in IE7 and 8 begin dragging on the handle as expected. When nicescroll is added the drag panel drops 50 pixels or so. The more panels you have the more pronounced it gets.

Here is a video of the problem on the basic layout using IE 8
http://screencast.com/t/cntQ4pf5yS

Here is IE9 toggling to compatibility mode on a more complex layout. As you can see drag and drop is very hard in IE 7/8 mode when nicescroll added.
http://screencast.com/t/7uVyUFdKWk

i am calling this line when slide down events happen.
$('.ContentScroll').getNiceScroll().resize().show();

I am seeing divs with scrollers applied that do not have height still show the scroller border resulting in small white dots appearing on hover.
http://screencast.com/t/mF27fKgzftN

This one is a bit harder to demonstrate but I think this video will help. If not I will be glad to make a public mockup of the issue.

i got various divs loaded, but i only display one on my page, the others have a display:none attribute. the scrollbar displays fine on the initial div, but not when i show the others, looks like it doesn't get initialized.

I'm experiencing strange scrolling behavior when I use the plugin. Most of the time it keeps sticking at the bottom of the page, or on the top. Also in the fullscreen view this issue appears.

Any suggestions?

Hi, first of all this is a really neat plugin and was exactly what I was looking for... thank you!

The issue I'm having is occurring whenever I resize the browser window (any browser window, have tried IE, FF, Chrome).

The scrollbar remains in the same place it was positioned on page load, regardless of whether the element it is scrolling has been resized or moved with the window.

Try the demo (http://areaaperta.com/nicescroll/demo.html) on any browser and change the width of the browser window and you'll see what I mean.

When i resize some div with zoom feature of CSS (style="zoom: 60%"), scroll keep in some strange positions. How I can "resize", "relocate" or "refresh" the scrollbar?

Thanks.

On Windows, Nicescroll appears to prevent Firefox find-on-page from scrolling to the found text. Chrome behaves as it should.

The scrollbars go over the text sometimes. I'm using the latest Google Chrome. I guess the problem is the text isn't always made smaller (in width). I've set a timeout of 150ms on the nicescroll. It helps a bit, but not always.

Hi inuyaksa,

I really love your plugin. I use it because I have animations that are based on the scroll speed and position of the user, your plugin makes those animtions smooth also, just great!

1 problem. I had a navigation with buttons, clicking on the buttons it would animate you up or down on the page to the right DIV. Combined with your plugin I can't get both seem to work. Is there a solution? Thanks in advance!

Regards,

Tim

Hi,

When you set touchbehavior:true and try and scroll, the scrolling works fine but for some odd reason it breaks all other links on that home page. Mostly all the HREF links or menus you may have on your page. So if you scroll down with touchbehavour:true and then go and try and click on a HREF link it won't work.

As soon as you remove or set touchbehavior:false you can scroll using the scrollbar or mouse wheel and the links all work fine then..

Any fix to this?

Thanks.

Hi, i have some issue with mousescrollstep, i may have misunderstood but this property should set the scrollstep of the scroll, mousewheel too so if i scroll down i could be able to scroll by 32px for example...but setting it like this

$("#squares").niceScroll({cursoropacitymin : 0, cursorwidth:"10px",cursorborderradius : "0px",cursorborder :"none",cursorcolor:"#ccc",boxzoom :true,mousescrollstep:"32px"});

makes me unable to scroll using mousewheel. How can i solve this? i need the scrollstep of 32px since i need to set squares inside a div which are 32px tall

Following line (464 in jquery.nicescroll.js) gives an out of range error in IE9 in 7 modus using jquery 1.7

if (!self.win.attr("tabindex")) self.win.attr({"tabindex":(new Date()).getTime()});

Maybe (new Date()).getTime()}) isn't a good way to generate a tabindex.

This doesn't work well with resizing, or when element changes width.

Wish this was fixed, launching a massive site in 4 hours and I just noticed it :(

I was trying to embed another website ex:- http://www.example.com in src and put touchbehaviour to be "true". But then i loss the scrollbar and touchbehavior never work.

But if I switch back to the demo putting "iframe/blablabla.html" in src . Its working fine.

So any solution to this ?

First of all thank you for this wonderful jQuery plugin.
I'm missing only one feature in it. Every time we call the niceScroll() we create an <div/> with unique ID at the end of <body/> it would be great if every created <div/> had a shared class, to gain the simple ability to select them all in CSS styles or JS scripts.
I'm hiding about 10-14 scrolls simultaneously and it's rather inconvenient to do it by using getNiceScroll() method.

Thanks, veritas

Hello,
I have a div with a fix height: 150px. Inside this div I have a JQuery accordion. At the beginning the accordion fits on the div so I don’t need the scroll but when I open a node the accordion grows and when using nice scrolling the scroll is not appearing…
I’ve tried to recall niceScroll when the accordion changes but nothing…

accordion.accordion({
collapsible: true,
autoHeight: false,
navigation: true,
changestart: function (event, ui) {
$('#notifCont').niceScroll({
cursorcolor: '#492682',
cursoropacitymin: '0.5'
});
}
});

Do you have any idea?

Thanks a lot for your time.

Kr, Jose

Mimicking browser scrolling behaviour on spacebar would be a nice touch :-)

Hi,

First thanks for script, but now, i see some problems with firefox and chrome (working fine at firefox), when i click in container of nicescrool at chrome, the container showme one orange border.

Do you know anythink about it?

Thanks

I have setup nicescroll and all is working except when the content changes dynamically.

The content div re-sizes the scrollbar changes size but the new content is not reset to the top it stays in the same position I had the previous content scrolled to.

Structure;

I am using .getNiceScroll().resize();

Please help!

first, thanks a lot.
in screen shot every thing is clear:
http://i.imgbox.com/aagcadOw.jpg

Hi i noticed that with IE9 and Chrome 16.0.912.63 when focus the "nicescrolled" area is aplied a border "yellow" ring

in chrome the useragent.css has

:focus { outline: auto 5px -webkit-focus-ring-color }

so it can be fixed using in our website stylesheet

:focus { outline: none }

Maybe in a new version can have this option to be configured or removed

Very nice script and have a happy new year!

As the title say... when the mouse is over the "nicedscroll area" and the content do not overflow, the hotkeys and the mouse scroll wheel does not work.

You have to mouseout the area.

Is there a way to solve this issue?

Thanks!

this.isie = (document.all && !document.opera); is an utterly hideous sniff.

Not only does document.opera not exist in Opera, but your current sniff will return the document.all HTMLCollection if it exists. I don't think you realize how costly that is. That's every single element node in the DOM. On a large site, this is murder.

You're looking for window.opera. Even then, that's a proprietary property that could be removed at any time. It's fallacious to rely on it.

Thirdly, (document.all && !document.opera) will return undefined rather than a boolean if document.all or document.opera doesn't exist. You would want implicit boolean conversion via the !! technique or explicit conversion via the Boolean constructor.

Please do your homework on the DOM and realize that object inferences such as these are monumentally stupid.

Here's a start:

1. http://www.fortybelow.ca/hosted/comp-lang-javascript/faq/notes/detect-browser/
2. http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting

Seems like there is outdated version. Could you update the script?
Because I'm having problems with two sites, which are showing different symptoms. Twitter seems to be completely broken, but www.forumcinemas.lv seems to freeze, unable to scroll with a scrollbar.
Thanks