dragend
dragend copied to clipboard
Stereobit
RC3: Last page doesn't show when using "new Dragend".
I ran into this trying to add a button that would scroll to the last page, however many there were. If I use the jQuery style then the last page will show "Page 6 (Last)" without issue, but I couldn't figure out a way to get at the page total for a "Scroll to End" button. If I instead do "new Dragend" style, then I can get the total, and the sixth page can be scrolled to, but there will be no text.
I also noticed that when using the "new Dragend" style and the page is first loaded, I have to press "Swipe Left", or "Scroll to Page5", or "Scroll to End" twice before it will work. If I go back to the jQuery style it works correctly on the first click. The two may or may not be related.
I commented out the stuff for "Scroll to End" since it's not needed to see the last page missing it's text.
JavaScript
$(function() {
var dragendOptions = {
scribe: "20px",
direction: "horizontal",
borderBetweenPages: 0, // CSS can affect functionality of this.
afterInitialize: function() {
this.container.style.visibility = "visible";
}
};
// ------ Swap these comments out to see the bug ------------
//$("#demo").dragend(dragendOptions); // jQuery style.
var dragend = new Dragend(document.getElementById('demo'), dragendOptions);
// ----------------------------------------------------------------------------
//var pages = $(dragend.pageContainer).find("." + dragend.settings.pageClass);
//console.log(pages.length); // should be 6
$('.jumpToBeginningButton').on('click', function() {
$('#demo').dragend({ jumpToPage: 1 });
});
$('.scrollTo5Button').on('click', function() {
$('#demo').dragend({ scrollToPage: 5 });
});
/*
$('.scrollToEndButton').on('click', function() {
//console.log('".scrollToEndButton" was clicked. "pages.length"=' + pages.length);
var lastPage = pages.length
$('#demo').dragend({ scrollToPage: lastPage }); // scrollToPage: 6
});
*/
$('.swipeLeftButton').on('click', function() {
$('#demo').dragend("left");
});
$('.swipeRightButton').on('click', function() {
$('#demo').dragend("right");
});
});
HTML
<!DOCTYPE html>
<html>
<head>
<title>Dragend JS simple demo</title>
<link rel="stylesheet" href="dragend_tests.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Arvo:400,700" rel="stylesheet" type="text/css">
</head>
<body>
<div id="demo">
<ul>
<li class="dragend-page">
<p>Page 1 (First)</p>
</li>
<li class="dragend-page">
<p>Page 2</p>
</li>
<li class="dragend-page">
<p>Page 3</p>
</li>
<li class="dragend-page">
<p>Page 4</p>
</li>
<li class="dragend-page">
<p>Page 5 (Next to Last)</p>
</li>
<li class="dragend-page">
<p>Page 6 (Last)</p>
</li>
</ul>
</div>
<div id="demoControls">
<button class="jumpToBeginningButton">Jump to Beginning</button>
<button class="swipeLeftButton">Swipe Left</button>
<button class="swipeRightButton">Swipe Right</button>
<button class="scrollTo5Button">Scroll to Page5</button>
<button class="scrollToEndButton">Scroll to End</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="dragend-0.2.0_rc3.js"></script>
<script src="dragend_tests.js"></script>
</body>
</html>
