vitch/jscrollpane

Pretty, customisable, cross browser replacement scrollbars

jscrollpane's Issues

Initial click on scroll bar is ignored if click duration does not exceed trackClickRepeatFreq

The setup routine initClickOnTrack() sets up onclick listeners for the scroll bars. The mouseup bindings are setup to cancel a click state. Due to the way this was done, the initial scroll jump will not occur until after the trackClickRepeatFreq timeout expires, but if the click duration does not exceed this timeframe, the event for mouseup occurs prior to the time out and cancel click is called.

Automation tools and those with fast fingers (or mice) find it difficult or inconsistent to use the scroll pane in this circumstance. Using 2.0.0 B5 for testing.

Keyboard scroll is odd and buggy

The fix for FF/OSX keyboard scroll broke for other browsers that fire both keypress and keydown. Now the initial scroll on keydown is doubled.

More testing revealed that the problem occurs in FF. Chrome and IE7 seem ok, haven't tested others.

And there is another problem with using native key down repeat. Now it's difficult to set the scrolling speed, because repeat speed is different. It is faster that the frequency of arrow buttons so the scroll speed should be lowered. But that also makes initial scroll slower and then the whole experience seems a little odd.

My previous implementation that used easily controllable speed and frequency was much more consistent. The only problem was FF/OSX and that it doesn't reflect default repeat speed and initial delay. But I think that those are not that important on scrolling. jScrollPane doesn't reflect default mouse scroll properties either, why should it for keyboard. Overall look and feel is more important. When native is so important, jScrollPane wouldn't be used in the first place.

I recommend going back to the setTimeout implementation to gain more control over scrolling speed and avoid the problems with keypress/keydown inconsistencies. The FF/OSX problem could be solved otherwise.

clickOnTrack should jump in chunks of just under the height of the viewport

This seems to be how native scrollbars behave. So you can easily click once on the track and it will jump down a page and you can carry on reading from where you had got up to.

Strange behavior with multiple scrollbars and links

I have a situations where I have a list of items in one DIV section with a scrollbar with anchors in the text and another DIV section with a scrollbar with links to those anchors. When I click a link to a section in the first DIV, this scrollbar breaks as if the nested hyperlinks option wasn't turned on. If I take the section DIV and remove the scrollbar option, everything works fine. I just can't have two sections link to each other and both be scrollpane sections.

Trigger default scroll event for other plugin integration

I am trying to use jScrollPane with an infinite scroll plugin which binds to the scroll event, however jScrollPane doesn't trigger the scroll event.

I can modify the infiinite scroll plugin but would prefer to use it as is to be able to easily upgrade to another version without having to modify it the whole time.

Is there a specific reason for not triggering scroll?

Make it possible to tell a scrollbar to be "always on"

Similar to overflow: scroll - you should be able to make scrollbars appear even if they aren't necessary...

animateScroll in conjunction with a full page scroll resets the scroll position on browser resize

I'm using the full-page scrolling demo as a base, but when I set 'animateScroll' to true, the scroll position resets to zero whenever the browser is resized. I've found an untested fix by making sure animate is not triggered in the initialise function:

if (isMaintainingPositon) {
  scrollToX(lastContentX, false);  // explicitly declare false
  scrollToY(lastContentY, false);  // explicitly declare false
}

This works for me but might break other animate uses(?)

Problems with width after reinitialisation

As reported by Rob Lifford on the mailing list:
http://groups.google.com/group/jscrollpane/browse_thread/thread/a5955d3b77d56afb

apply Math.ceil() to drag sizes

< div class="jspDrag" style="height: 40.8px; top: 259.2px" >

original:
vitch-jScrollPane-db8e996
455 > horizontalDrag.width(horizontalDragWidth + 'px');
466 > verticalDrag.height(verticalDragHeight + 'px');

- invalid drag size - no 1px on end.

edited:
vitch-jScrollPane-db8e996
455 > horizontalDrag.width(Math.ceil(horizontalDragWidth) + 'px');
466 > verticalDrag.height(Math.ceil(verticalDragHeight) + 'px');

- ok.

only Math.ceil() fix it. not Math.round();
( only vertical drag tested / with no arrows / on all popular browsers )

screenshots: http://code.google.com/p/jscrollpane/issues/detail?id=226

UL Lists not showing properly

Hello guys,

First of all, thank you guys for this great plugin.
I've been facing an annoying problem: whenever I try to put some

inside the container where the scroll appears, the symbol in front of the

disappears.

I have:

• Test

and a simple $('.container').jScrollPane();

Did anyone face this problem?

Respect overflow-x and overflow-y settings to prevent scrolling in a given plane regardless of content

On native overflowed elements it is possible to set either or both of overflow-x and overflow-y to hidden. This should also be allowed in jScrollPane as a way to restrict scrolling to a given plane even if the content is wide/ tall enough to trigger scrolling in the other plane...

dynamic width not working with display: table elements

Tried to use jScrollPane with a div contained in a parent whose width changes dynamically. Used the workaround listed in the known issues by setting the div's width to 100% in css. This made everything work except that the jScrollPane div would not shrink when its partent's width was decreased. We accidentally discovered that this was due to that fact that one of jScrollPane div's parents, a certain div between the jScrollPane div and the one that was resized, had display: table set in css. Everything worked fine after removing display: table from this div.

Flickering scrollbar (redraw) when using autoReinitialise and mouse over scrollbar.

Hi,

I've noticed seleveral different scenarios where using the autoReinitialise feature, that the scrollbar will flicker/redraw to the default state and then to the mouse over state - when the mouse is over the scrollbar.

I guess this has to do when the initial drawing is being made it is drawing the default (mouse out) state for the scrollbar, then the mouse over state kicks-in and draws - this cause the flicker.

You can see the more clearly when the contrast between mouse-out and mouse-over graphics is high. Or if you have quick & sharp eyes :)

Thanks.

Script tags fire twice when initializing jScrollPane

Not sure if anything can be done about this, but if you have an embedded script tag in the content that gets scrollpaned (I was trying to use an email obfuscation script), the script will run again when it's inserted into the jScrollPane wrappers.

Perhaps there's a way to filter out script tags when copying everything over. Not sure. Worth pointing out anyway.

Hijack links doesn't work where there is more than on jScrollPane on the page

As reported on the mailing list:
http://groups.google.com/group/jscrollpane/browse_thread/thread/9dff99a704bb5b49

See example showing the problem here:
http://www.jsfiddle.net/Ncv4R/10/

autoReinitialise & .jspDrag:hover issue

When having autoReinitialise set to true and specified drag:hover bg color drag div blinks every time autoReinitialise is called (every 500ms).

I guess this can be solved by resizing jspDrag every 500ms instead of redrawing it.

Add keyboard scrolling support

So that when the pane is focused the keyboard can be used to scroll it

Make mouseWheelSpeed not dependant on the amount of content

So that when you scroll one click of your mouse wheel it always moves by the same amount, regardless of the amount of content available.

jScrollPane doesn't work on Android or iOS browser

It correctly creates the scrollbars but there is no way to scroll. Not sure if drag is going to be possible but clicking on the arrow buttons should at least work (and did work in the old version of jScrollPane)

scrollToX not working

Under Firefox 3.6.8, I noticed the following:

var foo = jQuery("#target").data();

// Works
foo.jsp.scrollTo(0,0);

// Not working
foo.jsp.scrollToX(0);

If you need a test case, please go to http://home.emiliopucci.com/perfume/find-us, select a country, scroll down the pane and issue the following code through the Firebug console:

var foo = jQuery("#target").data();
foo.jsp.scrollTo(0,0);

...then change to

var foo = jQuery("#target").data();
foo.jsp.scrollToX(0);

Best,
Corrado Fiore

Container width issues when using CSS3 box-sizing:border-box

This issue only occurs when using the CSS3 box-sizing:border-box property.

If the scrollable container has padding applied to it, the calculated width is more than the original width due to the fact that padding doesn't increase an element width when using CSS3 border-box sizing property.

Example:
Before initialisation my container has a width of 400px and padding left and right of 5px, giving it a total width of 400px and not 410px as would be the case if the box-sizing was set to content-box.
After initialisation my container is given a width of 410px.

Solution:
Adjust width calculations to cater for containers using the box-sizing:border-box property.

MSIE Warning

i had an error in MSIE browsers with hidden elements (display:none)
problem string is
percentScrolled = destX / dragMaxX.
when destX == 0 && dragMaxX == 0 the result is NaN.
then this result go to jQuery, and try call style.left = NaNpx;

and MSIE return error in jQuery file:

Webpage error details
Message: Invalid argument.
Line: 4618
Char: 4
Code: 0

my fix is
percentScrolled = (isNaN(destX / dragMaxX)) ? 0 : destX / dragMaxX

but, maybee there is another way?

PS Sorry for may English

jScrollPane and jQuery 1.5 Selectable plugin

I just updated to the latest jQuery build and noticed that my jQuery selectable items don't work. By chance, I noticed that without jScrollPane script included in my app the selectables seem work fine...

Can anyone else confirm a similar problem or do I need to dig a little deeper here?

Implement support for "click on track to scroll"

Not yet implemented for new version of jScrollPane...

<br> tags within a jScrollPane seem to get lost?

As reported on the mailing list:
http://groups.google.com/group/jscrollpane/browse_thread/thread/16d185ac94665db0

And verified with a simple example on jsfiddle:
http://www.jsfiddle.net/j3nE3/

Content hidden if scrolled down when reinitialising and content height no longer requires scrollbars

I am using jScrollpane to wrap a jsTree element, and I have it set to reinitialize the jScrollpane every time a tree node is expanded or collapsed.

I have noticed that if you expand nodes so that a scrollbar is needed, then scroll down in the jScrollpane, and collapse a few nodes so that a scrollbar is no longer needed, the scrollbars disappear but the top position of the scrollpane is not reset to zero, cutting off any content above the initial scroll point.

I was able to correct this specific issue in my case by making the following code addition to the initialise() function in the else block around line 186 (v2.0.0b10 2011-02-04*):

if (isMaintainingPositon) {
    lastContentX = contentPositionX();
    lastContentY = contentPositionY();
    if (!isScrollableV) pane.css("top",0); // Added
}

It would be helpful if someone more familiar with the project could review this and see if that is the best way to resolve the issue and commit it. It also does not resolve the same issue with the horizontal scrollbar.

Scrollbar doesn't follow tab key navigation

Hi,

So the entire scrollbar moves up and disappears completely as a user navigates with tab key. This issue was corrected with jscrollpane V1, but still present (or reintroduced ?) in V2.

You can check the official demo where the bug is active (just press the tab key several times and you'll see the scrollbar disappear) : http://jscrollpane.kelvinluck.com/focus.html

Split the drag up into three seperate parts

To allow greater control of appearance when using transparency

autoresize problem

Autoresize does not work, if jscrollpanne is inside jquery tabs .. It cause, to dissappera all content after reclick on tab ..

There would be nice to have, as in old version, an unload destroy funtion.

And there would be nice to have the option, to set the width of the scroller as in v1. And the feature with sided scrollbar is still missing in this new version. Hurry up :-)

btw great plugin, but still sticking with old version doue this issues ..

No events fired when by jScrollPane

jScrollPane should fire events to allow other scripts to hook up to it nicely. Ideas for events:

• initialisationComplete
• scroll (with parameters currentPostionX, currentPositionY, isAtTop, isAtBottom, isAtLeft, isAtRight)

Webkit Not Working Properly

I just launched a site (http://ranchershorses.com/). Followed the webkit browser note but it looks like the jscrollpane is not loading all the information, it tend to cut off 1/4th of the way. Can any one help?

Problem with percentage height/ absolute positioning and webkit browsers

As reported on the mailing list:
http://groups.google.com/group/jscrollpane/browse_thread/thread/98efa9ded76d5729

IE6. jScrollPane breaks the script DD_belatedPNG.fix

Hi!
If use PNG pictures in the block with id of jScrollPane (pane1) in ie6 all PNGs images show on white background, even though the script DD_belatedPNG.fix works. If i delete jScrollPane.js — everything's good, all PNGs are transparent.

How to solve this problem?

Cannot detect contentHeight

When I run jScrollPane on a hidden panel, contentHeight is always detected as 0px, and it doesn't let scrollbar to appear.

I wonder why the "width trick" wasn't used for height too during initialization. In fact commenting:
//contentHeight = pane.outerHeight();

and inserting:
contentHeight = Math.max(pane.outerHeight(), clonedElem.outerHeight());

right before the temporary wrapper deletion:
tempWrapper.remove();

makes all my stuff working as well.

Drag not stopping

This may just be me, but when I mouse down on the drag-handle, start dragging, then mouse up NOT over the drag-handle, the dragging action never stops.

I haven't looked at the code, but it is as if the drag start is on the drag handle's mouse down, and the drag stop is on the drag handle's mouse up. But instead the drag stop should be on the window's mouse up, so that you can mouse up anywhere and stop the drag animation.

Using jScrollPane - v2.0.0beta5 - 2010-10-18

content clipped in safari

This plugin works great, except for one thing. In safari the content is clipped about 60px from the bottom. Every other browser I've tested (opera, firefox, IE8) show the content correctly.

It seems like it has to do with the two floating images I have in the content. If I set a fixed size for them in the css, it works fine. If I omit it, the entire thing fails.

Here's a testcase:
http://www.testako.nl/jscroll.html

This was tested using Safari 5.0.3 (and on the iPhone aswell, not sure what version that is)

Items in viewport

Pass context/selector to jsp API that is set on items that are in the viewport (removed from items outside the viewport).

For example API: elementInViewport('img','.myclass') - adds class="myClass" to images in viewport, removes myclass from images outside viewport.

elementInViewport('.class1','.class2') - adds class="class2" to elements with class="class1", removes class2 from elements outside viewport.

Alternative: add css display:block to elements in viewPort and css display: hidden to elements outside viewport. Using jquery these elements can easily be selected using :visible filter.

This will allow items to be loaded on demand. However it is different to infinite scroll solutions. For example you may jump to a specific item using scrollToElement() and then only load the resulting items that appear in the viewport - in other words not all the items before.

I have done outside of jScrollPane this using jsp-scroll-y, viewport heigth() and offset() to determine if items are inside the viewport, but think it would be a very useful feature to add.

IE scroll problem

only happens in IE (7,8, maybe 6 and 9)
its happening on my site but i found another user with the same problem at stackoverflow, his link is: http://demo.2klika.net/home.php#!pages/prodavaonice.html

wait the page load, drag the scrollbar to the top or to the bottom then click on the content. you`ll get scrolled. also happens when you do alt+tab after hitting max top or bottom of the scroll (switch the windows a few times and you sell the scroll moving)
this only happens when you use the mouse click and drag, mouse wheel is not affected.

wrong link

http://jscrollpane.kelvinluck.com/examples

Add methods to API: positionDragX, positionDragY, getContentHeight

As prompted by this support request:
http://groups.google.com/group/jscrollpane/browse_thread/thread/26d15010b75f80dc

I realise that the following methods should be added to the API:
positionDragX, positionDragY, getContentHeight

Add support for scrolling by dragging over the text within the scrollpane

As implemented in previous version of jScrollPane

divide by 0 error

In _positionDragX, there appears to be a divide by 0 error on the following declaration:

percentScrolled = destX / dragMaxX.

As far as I can tell, this appears only in IE8 (could be in other IE versions as well).

Reinitialising causes extra growth issues when the target element has padding.

When reinitialising the scroll pane, you perform a statement to see if the containing space has changed with this line:

hasContainingSpaceChanged = elem.innerWidth() + originalPaddingTotalWidth != paneWidth || elem.outerHeight() != paneHeight;

However, during initialization, the element's padding has been consumed into the element's innerWidth, moved to the jspPane, and the element's padding is set to 0. Therefore, I believe this line and the subsequent line should be changed to (With the assumption that no other external forces re-added the padding back into the element):

hasContainingSpaceChanged = elem.innerWidth() != paneWidth || elem.outerHeight() != paneHeight;

if (hasContainingSpaceChanged) {
    // paneWidth = elem.innerWidth() + originalPaddingTotalWidth;
    // Change to
    paneWidth = elem.innerWidth();
    paneHeight = elem.innerHeight();
    container.css({
        width: paneWidth + 'px',
        height: paneHeight + 'px'
    });
}

On the note of padding consumption, when destroying the scroll pane, we should re-add the padding back in and re-size the original element as well as removing the 'jsp' from the data. Therefore I propose adding these line to the destroy method.

elem.css('padding', originalPadding);
elem.width(paneWidth - originalPaddingTotalWidth);
elem.data('jsp', null);

I was creating a ui combobox that uses your scrollbar instead of the native one. However when the results returned something that didn't need scrolling, I would just destroy the scrollbar if there was one. The padding is used to allow the browser
to render a border radius-correctly.

BTW, this is a wonder plugin, thanks!!!

Problem with inputs in content parts

Hello I have some problems with inputs within content part. When you click on input at first time, it scrolls content to the top, but when we click one more time on input, it works properly. Tried to put inputs in examples (jScrollPane). There wasn't any scrolling to the top of the content.

In my example:

http://www.pizza-sushi.net/index.php?option=com_catalog&task=lunch&company_id=2

We have radio button control, in my local version I added different types of inputs: checkbox, text and etc.

Does JScrollPane work with GWT?

Has anyone had any success with GWT and this JScrollPane plugin working together.

Add support for touchscreens (e.g. iOS, android etc)

A solution as reported by Alex over email:

what i did to add iPad functionality to jScrollPane was to

1. catch up the 'touchend' in addition to the 'mouseup' event, the
'touchmove' in addition to the 'mousemove' event, and the 'touchstart'
in addition to the 'mousedown' event.
2. add to every function with an event parameter: if(isIPad)
{ event.preventDefault(); event = event.originalEvent.touches[0]; }
3. extend the jScrollPane settings by the variable isIPad which was
set by the expression (navigator.userAgent.match(/iPhone/i)) ||
(navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/
iPad/i)).

Like this i managed to use the dragger on the iPad.

Scroll bar does not appear to support RTL languages

When using the plugin in RTL contexts (Arabic and Hebrew are examples), the following problems occur.

• The vertical scroll bar does not correctly switch to the opposite side of the scrolling area
• The horizontal scroll bar does not correctly align to the opposite side of the scrolling area
• The horizontal scroll bar incorrectly sets the initial scrolling region to the wrong side of the scrolling area

The positioning of the vertical and horizontal scroll bar can be corrected via CSS, but the initial scroll location must be solved in another way (and built support for RTL language would be preferable.

Arrow buttons aren't disabled on initial page load...

...this was previously working, maybe it is something to do with adding horizontal scrolling or with adding the "end of track" events?

Cannot reinitialise jScrollPane with changed settings

As reported on the mailing list:
http://groups.google.com/group/jscrollpane/browse_thread/thread/f79a637fb21e567f

And confirmed by this demo:
http://www.jsfiddle.net/fASTd/

When applying jScrollPane to an element with side padding which doesn't require scrolling the width is calculated incorrectly

As reported on the mailing list:

http://groups.google.com/group/jscrollpane/browse_thread/thread/09d5097b536d7064