<file_sep>;(function($) {
    var attempts = 0,
        limit    = 10,
        delay    = 250;
        
    var dp = document.createElement('script');
    dp.setAttribute('src', 'https://github.com/ericclemmons/de-pagify/raw/master/depagify.jquery.js');
    document.getElementsByTagName('head')[0].appendChild(dp);
    
    var checkForDepagify = function() {
        setTimeout(function() {
            if (++attempts === limit) {
                alert('Could not load De-Pagify after ' + attempts + ' attempts.');
                return false;
            }
            
            if (typeof $.fn.depagify === 'undefined') {
                checkForDepagify();
            } else {
                $('<div>De-Pagify Loaded!</div>').css({
                    'position': 'fixed',
                    'display': 'inline',
                    'top': '1em',
                    'right': '1em',
                    'padding': '2em',
                    'color': 'white',
                    'border': '0.25em solid rgba(100%, 100%, 100%, 0.25)',
                    'background': '#000',
                    'box-shadow': '0 0.25em 1em rgba(0, 0, 0, 0.5)',
                    '-moz-box-shadow': '0 0.25em 1em rgba(0, 0, 0, 0.5)',
                    '-webkit-box-shadow': '0 0.25em 1em rgba(0, 0, 0, 0.5)',
                    'border-radius': '1em',
                    '-moz-border-radius': '1em',
                    '-webkit-border-radius': '1em'
                }).hide()
                  .appendTo('body')
                  .fadeIn('slow')
                  .animate({opacity: 1.0}, 3000)
                  .fadeOut('slow', function() { $(this).remove(); });
            }
        }, delay);
    };
    
    checkForDepagify();
})(jQuery);<file_sep># De-Pagify v2.0 (Infinite Scroll)

De-pagify let's you easily enable [endless scroll][el] for paged sites such as
[fmylife][fml], [digg][digg], [failblog][fb] to enable functionality similar to
[Bing image search][bing] on any site that has a *More &raquo;*, *Next &raquo;*
or similar link.

The latest code & documentation will *always* be available at
[http://github.com/ericclemmons/de-pagify](http://github.com/ericclemmons/de-pagify),
but is also available at
[http://plugins.jquery.com/project/de-pagify](http://plugins.jquery.com/project/de-pagify)

## [Infinite Scroll Demo][demo]

## Usage

Typical usage will follow the pattern:
    
    jQuery(container).depagify(trigger, options);
    
* __container__:    Container for content on the remote page and where it will be
placed on the local page.

* __trigger__:      Link to "click" for the next page's content

### Options

* __find__:         (_defaults to `*`_) Selector or function to filter remote content

* __threshold__:    (_defaults to `0.90`_) Float, integer, string or function to
determine when to load remote content. The default is `0.90`, which is `90%`.  You can use `167`,
for example, to load content when the user scrolls within `167px` of the bottom of the page.
Also, you can specify a selector (such as `#footer`) to load content when the `#footer` element
scrolls into view. Finally, you can write your own function that returns `true` whenever you'd like
load the next page's content.

* __effect__:       (_defaults to `$(this).show()`_) Function to transition newly
loaded content.  (New content is wrapped by `$('<div />).hide()`)

* __events__:       `request` & `success` events are triggered before and after the GET request.

## Bookmarklets

* [jQuerify Bookmarklet][jq] which will inject jQuery into the page
* [De-pagify][dpbm] bookmarklet will inject the latest De-Pagify into the page

## Conclusion

If you can help in any way, please fork this project or provide feedback.

[demo]: http://uxdriven.com/static/js/uxdriven/jquery/de-pagify/demo.php "De-Pagify Demo"

[el]:   http://uipatternfactory.com/p=endless-scrolling/ "Endless Scroll"
[fml]:  http://www.fmylife.com "F My Life"
[digg]: http://digg.com "Digg"
[fb]:   http://failblog.org "Failblog"
[bing]: http://www.bing.com/images/search?q=jquery "jQuery Images"
[jq]:   http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet "jQuerify"
[dpbm]: https://github.com/ericclemmons/de-pagify/raw/master/bookmarklet.jquery.min.js



[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/ericclemmons/de-pagify/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

<file_sep>;(function($) {
    $('.nextprev:last').depagify({
        trigger: '#footer',
        container: 'div.main',
        filter: '.news-summary',
        request: function(options) {
            jQuery('.pages', options.container).remove();
        }
    });
})(jQuery);<file_sep><?php
    $page = (int) $_SERVER['QUERY_STRING'];
    
    if (empty($page)) {
        $page = 1;
    }
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>De-Pagify Demo</title>
    <link rel="stylesheet" href="http://uxdriven.com/static/blueprint/screen.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="http://uxdriven.com/static/blueprint/print.css" type="text/css" media="print">
    <!--[if lt IE 8]><link rel="stylesheet" href="http://uxdriven.com/static/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
    <link rel="stylesheet" href="http://uxdriven.com/static/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://github.com/ericclemmons/de-pagify/raw/master/depagify.jquery.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        var depagify = function() {
            jQuery('#content').depagify('#pages a:last', {
                delay:      500,        // Wait 500ms between subsequent requests
                filter:     '.post',    // Only include .post objects
                threshold:  '#footer',  // When #footer is in view
                effect:     jQuery(this).slideDown,
                events: {
                    request:    function() {
                        // Remove the navigation
                        jQuery('#pages', this).remove();
                    },
                    success:    function() {
                        console.log('Another page loaded!');
                    }
                }
            });
        };
    </script>
</head>

<body>

    <div class="container">
        <h1>Welcome to the De-Pagify Demo</h1>

        <button onClick="javascript:depagify();">De-Pagify</button>

        <div id="header">
            <blockquote>
                <p>I'm tons of filler, like very other site, so we can enjoy sexy scrolling.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </blockquote>
        </div>
        
        <hr />
        
        <div id="content">
            <div class="post">
                <h3>
                    Imagine I'm the #<?= $page ?>
                    post on the page
                </h3>

                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
            </div>

            <div id="pages">
                    <strong><?= $page ?></strong>
                    
                    <?php if ($page < 10) : ?><a href="?<?= ++$page ?>">Next &raquo;</a><?php endif; ?>
                </script>
            </div>
        </div>

        <hr />
        
        <div id="footer">
            <blockquote>
                <p>I'm the site's footer.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </blockquote>
        </div>
    </div>
</body>
</html>
