Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Small fix for reinitialisation in combination with strict horizontal scrolling of a growing pane #130

Open
wants to merge 2 commits into from

4 participants

@marc-portier

As commented in the code on
1ec254c#commitcomment-959306

There is a small issue with the testcase for contentWidth == previousContentWidth and the action to return and thus never update the contentWidth any more: as such all following calls to reinitialise will have the same effect (no scrollbars added because the contentWidth never gets updated)

I think isolated the problem with the new test-case page, and like to believe I also have an elegant fix for it.
I hope you can consider adding it into trunk.

The fix just doesn't use contentWidth but a new probeWidth() function that actually checks down on the content-level if there is more (or less) required space.

Kind regards,

-marc=

@vitch
Owner

Thanks for the pull request :)

It looks good - I remember being a bit dubious about the code in 1ec254c when I accepted it.

Unfortunately I'm a bit snowed under at the moment so might not be able to integrate this too soon but I will try to ASAP.

Thanks again!

@marc-portier
@marc-portier

just fyi I've recently published the project I mentioned at https://github.com/marc-portier/jquery-planboard

@vitch
Owner

Nice work - it looks good :) I still haven't had a chance to properly look at your change to pull it I'm afraid...

@troycobb

Note, this appears to be the same issue I'm running into with issue #148, just submitted.

@troycobb troycobb marc-portier's change to fix the scrolling width resizing issue was i…
…ncomplete -- it didn't correctly catch subsequent changes in size. My change removes the previousContentWidth variable because the contentWidth variable contains the previous content width on a re-initialization. It is the right comparison to make against the new probed width.
8b3ed95
@marc-portier

verified and added troycobb's additional fix

@mohoch1

Hi Guys.
I am stuck in exactly the problem marc described in the comments in his code changes.
My width and previousWidth are the same.
I was wondering - why cant we do the calculation of contentWidth just before checking if anything has changed? This will give us a correct indication if the current situation is different than the previous.

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 13, 2012
  1. @marc-portier

    adding testcase showing the problem with not probing the real content…

    marc-portier authored
    …-dimensions
    
    including the fix to get around it.
Commits on Apr 23, 2012
  1. @troycobb

    marc-portier's change to fix the scrolling width resizing issue was i…

    troycobb authored
    …ncomplete -- it didn't correctly catch subsequent changes in size. My change removes the previousContentWidth variable because the contentWidth variable contains the previous content width on a re-initialization. It is the right comparison to make against the new probed width.
This page is out of date. Refresh to see the latest.
Showing with 187 additions and 12 deletions.
  1. +172 −0 dynamic_contentH.html
  2. +15 −12 script/jquery.jscrollpane.js
View
172 dynamic_contentH.html
@@ -0,0 +1,172 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+
+<!--REMARK: solution in https://github.com/vitch/jScrollPane/pull/81/ doesn't help either -->
+
+<html>
+ <head>
+
+ <title>jScrollPane - dynamic content demo page - Horizontal variant</title>
+
+ <!-- styles specific to demo site -->
+ <link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
+ <!-- styles needed by jScrollPane - include in your own sites -->
+ <link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
+
+ <style type="text/css" id="page-css">
+ /* Styles specific to this particular page */
+
+ .scroll-pane
+ {
+ width: 100%;
+ overflow: auto;
+ height: auto;
+ }
+ .strip {
+ height: 36px;
+ max-height: 36px;
+ }
+ .strip div {
+ float: left;
+ border: 1px solid black;
+ height: 18px;
+ text-align: center;
+ }
+ .strip div {
+ width: 198px;
+ }
+ </style>
+
+ <!-- latest jQuery direct from google's CDN -->
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <!-- the mousewheel plugin -->
+ <script type="text/javascript" src="script/jquery.mousewheel.js"></script>
+ <!-- the jScrollPane script -->
+ <script type="text/javascript" src="script/jquery.jscrollpane.js"></script>
+ <!-- scripts specific to this demo site -->
+ <script type="text/javascript" src="script/demo.js"></script>
+
+ <script type="text/javascript" >
+ function reload(hash) {
+ var ts = new Date().getTime();
+ var wl = window.location;
+ window.location=wl.protocol + "//" + wl.host + wl.pathname + "?ts=" + ts + "#" + hash;
+ }
+
+ function newStyle(str){
+ var pa= document.getElementsByTagName('head')[0] ;
+ var el= document.createElement('style');
+ el.type= 'text/css';
+ el.media= 'screen';
+ if(el.styleSheet) { el.styleSheet.cssText= str;// IE method
+ } else { el.appendChild(document.createTextNode(str));// others
+ }
+ pa.appendChild(el);
+ return el;
+ }
+ $(function(){
+ var sp = $('span#testsizes');
+ var testsizes=[800,760,400,380,300,250,200,100,20];
+ var ht = [];
+ $(testsizes).each(function() {
+ ht.push("<a href=javascript:reload("+this+")>" + this + "</a>");
+ });
+ sp.html(ht.join(" - "));
+ });
+
+ var w = window.location.hash.substring(1) || 200;
+ newStyle(".strip > div {width: " + (w-2) + "px; }");
+ </script>
+ <script type="text/javascript" id="sourcecode">
+ $(function()
+ {
+ var settings = {
+ showArrows: true
+ };
+
+ var pane = $('.scroll-pane');
+ var pw = pane.width();
+
+ var strip = $('.strip');
+ strip.css('min-width', pw + 'px');
+ pane.css('width', '');
+
+ pane.jScrollPane(settings);
+ var api = pane.data('jsp');
+
+ function setStripWith(i) {
+ var wset = w*i;
+
+ strip.width(wset);
+ api.getContentPane().width(wset);
+ }
+
+ var i = 1;
+ setStripWith(i);
+
+ function add() {
+ strip.append('<div>'+ (i++) +'</div>');
+ setStripWith(i);
+ api.reinitialise();
+ }
+
+ // Every second add some new content...
+ var period = 1000, interv, $sb = $('#stopstart');
+ function launch() {
+ interv = setInterval(add, period);
+ $sb.html('Stop');
+ }
+ function terminate() {
+ clearInterval(interv);
+ $sb.html('Start');
+ }
+
+ launch();
+ $sb.toggle(terminate, launch);
+ });
+ </script>
+ </head>
+ <body>
+ <div id="top-nav">
+ <img src="image/logo.png" width="196" height="69" alt="jScrollPane">
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="index.html#examples">Examples</a></li>
+ <li><a href="index.html#themes">Themes</a></li>
+ <li><a href="index.html#usage">How to use</a></li>
+ <li><a href="faqs.html">FAQs</a></li>
+ <li><a href="known_issues.html">Known issues</a></li>
+ <li><a href="index.html#support">Support</a></li>
+ <li><a href="index.html#download">Download</a></li>
+ </ul>
+ </div>
+ <div id="container">
+ <h1>jScrollPane - dynamic content demo page</h1>
+ <p>
+ This demonstration shows how you can manually reinitialise jScrollPane when new content is added to it.
+ Every time you hit the button a new block of content is added to the scrollpane and then
+ <a href="api.html#reinitialise">reinitialise</a> is called on the scrollpane.
+ As the <a href="settings.html#maintainPosition">maintainPosition</a> setting is true by default then
+ the position of the scrollpane is maintained even if we are scrolling while the update happens.
+ </p>
+
+ <p>Test this page with different unit sizes: <span id="testsizes"></span></p>
+ <p>Every second an extra element is added. You should see the scrollbar appear and shrink.
+ Push this <button id="stopstart">Stop</button> to stop/start the adding.</p>
+
+ <div class="scroll-pane">
+ <div class="strip" ><div>0</div></div>
+ </div>
+
+
+ <h2>Page javascript</h2>
+ <div id="sourcecode-display">
+ <p>The contents of this div will be replaced by the javascript added to this page</p>
+ </div>
+ <h2>Page CSS</h2>
+ <div id="css-display">
+ <p>The contents of this div will be replaced by the CSS added to this page</p>
+ </div>
+ </div>
+ </body>
+</html>
View
27 script/jquery.jscrollpane.js
@@ -65,7 +65,7 @@
verticalDragPosition, horizontalDrag, dragMaxX, horizontalDragPosition,
verticalBar, verticalTrack, scrollbarWidth, verticalTrackHeight, verticalDragHeight, arrowUp, arrowDown,
horizontalBar, horizontalTrack, horizontalTrackWidth, horizontalDragWidth, arrowLeft, arrowRight,
- reinitialiseInterval, originalPadding, originalPaddingTotalWidth, previousContentWidth,
+ reinitialiseInterval, originalPadding, originalPaddingTotalWidth,
wasAtTop = true, wasAtLeft = true, wasAtBottom = false, wasAtRight = false,
originalElement = elem.clone(false, false).empty(),
mwEvent = $.fn.mwheelIntent ? 'mwheelIntent.jsp' : 'mousewheel.jsp';
@@ -77,6 +77,15 @@
originalPaddingTotalWidth = (parseInt(elem.css('paddingLeft'), 10) || 0) +
(parseInt(elem.css('paddingRight'), 10) || 0);
+ function probePane() {
+
+ pane.css('overflow', 'auto');
+ var w = s.contentWidth || pane[0].scrollWidth, h = pane[0].scrollHeight;
+ pane.css('overflow', '');
+
+ return {width: w, height: h};
+ }
+
function initialise(s)
{
@@ -143,11 +152,10 @@
}
// If nothing changed since last check...
- if (!hasContainingSpaceChanged && previousContentWidth == contentWidth && pane.outerHeight() == contentHeight) {
+ if (!hasContainingSpaceChanged && contentWidth == probePane().width && pane.outerHeight() == contentHeight) {
elem.width(paneWidth);
- return;
+ return;
}
- previousContentWidth = contentWidth;
pane.css('width', '');
elem.width(paneWidth);
@@ -155,14 +163,9 @@
container.find('>.jspVerticalBar,>.jspHorizontalBar').remove().end();
}
- pane.css('overflow', 'auto');
- if (s.contentWidth) {
- contentWidth = s.contentWidth;
- } else {
- contentWidth = pane[0].scrollWidth;
- }
- contentHeight = pane[0].scrollHeight;
- pane.css('overflow', '');
+ var p = probePane();
+ contentWidth = p.width;
+ contentHeight = p.height;
percentInViewH = contentWidth / paneWidth;
percentInViewV = contentHeight / paneHeight;
Something went wrong with that request. Please try again.