RC3: Last page doesn't show when using "new Dragend". #80

ergose · 2016-02-08T20:06:19Z

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>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RC3: Last page doesn't show when using "new Dragend". #80

RC3: Last page doesn't show when using "new Dragend". #80

ergose commented Feb 8, 2016

RC3: Last page doesn't show when using "new Dragend". #80

RC3: Last page doesn't show when using "new Dragend". #80

Comments

ergose commented Feb 8, 2016