Thursday, May 21, 2015

Auto load content on scroll down

First Special Thanks to --- Adam Khoury @ www.DevelopPHP.com - https://www.developphp.com/video/JavaScript/Scroll-Load-Dynamic-Content-When-User-Reach-Bottom-Ajax

I extended this a bit to include some back to top feature.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="JavaScripAutoScroll.aspx.vb" Inherits="JavaScripAutoScroll" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>JavaScript Auto Populate the page | MMWebs.biz</title>
    <style type="text/css">
        div#statuspositionfixed;font-size24px;}
        div#wrapwidth800pxmargin0 auto}
        div.newDataheight1000px;background#09F;margin10px 10px;}
        .back-to-top {
                        positionfixed;
                        bottom2em;
                        right0px;
                        z-index999;
                        text-decorationnone;
                        color#000000;
                        background-colorrgba(235, 235, 235, 0.80);
                        font-size12px;
                        padding1em;
                        displaynone;
                    }
 
.back-to-top:hover {    
                        background-colorrgba(135, 135, 135, 0.50);
                    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function yHandler() {
            var wrap = document.getElementById('wrap');
            var contentHeidht = wrap.offsetHeight; // Gets page content height
            var yOffset = window.pageYOffset; //Gets the vertical scroll position
            var y = yOffset + window.innerHeight;
            if (>= contentHeidht) {
                wrap.innerHTML += '<div class="newData"></div>';
                // Ajax call to get more dynamic data goes here
            }
            var status = document.getElementById('status');
            status.innerHTML = contentHeidht + " | " + y;
        }
        window.onscroll = yHandler;
    </script>
</head>
<body>
    <a href="#" class="back-to-top">Back to Top</a>
    <form id="form1" runat="server">
    <div>
        <div id="status">0 | 0</div>
        <div id="wrap"><img src="framework/images/tempMatrix.gif" width="800px" height="1200px" /></div>
    </div>
    </form>
</body>
</html>
<script type="text/javascript">
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.back-to-top').fadeIn(duration);
        } else {
            jQuery('.back-to-top').fadeOut(duration);
        }
    });
 
    jQuery('.back-to-top').click(function (event) {
        event.preventDefault();
        jQuery('html, body').animate({ scrollTop: 0 }, duration);
        return false;
    });
</script>

No comments: