Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
wants to merge 2 commits into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f363ef6
adding testcase showing the problem with not probing the real content…
marc-portier Feb 13, 2012
8b3ed95
marc-portier's change to fix the scrolling width resizing issue was i…
troycobb Apr 23, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
172 changes: 172 additions & 0 deletions dynamic_contentH.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
27 changes: 15 additions & 12 deletions script/jquery.jscrollpane.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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)
{

Expand Down Expand Up @@ -143,26 +152,20 @@
}

// 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);

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;
Expand Down