QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Pull To Refresh For Phonegap App

Pull To Refresh For Phonegap App

pull-to-refresh

In this post we will learn how to implement pull to refresh using web technologies. This comes handy when we create mobile apps using phonegap. pull to refresh was invented by Twitter. After it was a success every other app started implementing this feature.


View Demo

Before reading further please read my earlier post on Detecting End Of Scrolling In HTML Element. In that post I have explained many properties and functions related to scrolling.

Implementation of Live Preview

<!doctype html>
<html>
<head>
    <title>Detect End Of Scrolling</title>
    <script type="text/javascript">
        window.addEventListener("load", function() {
            window.scrollBy(0, 100);
        }, false);

        window.document.addEventListener("scroll", function(){
            if(window.pageYOffset == 0)
            {
                alert("Loading data using AJAX");
                window.scrollBy(0, 100);
            }            
        }, false);

    </script>
    <style type="text/css">
        body
        {
            height: 6000px;
            background-color: grey;
        }

        span
        {
            font-size: 100px;
        }
    </style>
</head>
<body>
    <span>Pull to refresh</span>
</body>
</html>

Apr 20, 2014Narayan Prusty
Detecting End Of Scrolling In HTML ElementMonitoring and Intercepting all AJAX Requests

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago Cordova, Web Developmentapp, phonegap, pull to refresh
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Making a phonegap app look like native app
  • Debugging Phonegap Apps
  • Create a Intel XDK APP with PHP and MySQL Backend
  • Detecting End Of Scrolling In HTML Element
  • Creating a Percentage of Webpage Scrolled Indicator
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license