vitch / jscrollpane Goto Github PK
View Code? Open in Web Editor NEWPretty, customisable, cross browser replacement scrollbars
Home Page: http://jscrollpane.kelvinluck.com/
License: GNU General Public License v2.0
Pretty, customisable, cross browser replacement scrollbars
Home Page: http://jscrollpane.kelvinluck.com/
License: GNU General Public License v2.0
jScrollPane should fire events to allow other scripts to hook up to it nicely. Ideas for events:
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)
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!!!
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?
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.
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.
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)
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.
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.
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.
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?
So that when the pane is focused the keyboard can be used to scroll it
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...
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.
As implemented in previous version of jScrollPane
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).
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.
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.
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(?)
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
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
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
Not yet implemented for new version of jScrollPane...
As reported by Rob Lifford on the mailing list:
http://groups.google.com/group/jscrollpane/browse_thread/thread/a5955d3b77d56afb
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/
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.
Similar to overflow: scroll - you should be able to make scrollbars appear even if they aren't necessary...
Has anyone had any success with GWT and this JScrollPane plugin working together.
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.
As reported on the mailing list:
http://groups.google.com/group/jscrollpane/browse_thread/thread/09d5097b536d7064
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.
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
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.
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
I have:
and a simple $('.container').jScrollPane();
Did anyone face this problem?
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/
To allow greater control of appearance when using transparency
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.
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
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.
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/
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 ..
...this was previously working, maybe it is something to do with adding horizontal scrolling or with adding the "end of track" events?
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.
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?
As reported on the mailing list:
http://groups.google.com/group/jscrollpane/browse_thread/thread/98efa9ded76d5729
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.
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?
< 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
When using the plugin in RTL contexts (Arabic and Hebrew are examples), the following problems occur.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.