How to make Pull Down to Refresh Webpage with jQuery

You have seen on many Mobile apps when you pull down from the top and release it the content is been refreshed.

The common example of this you see in Chrome, Opera mini browser for mobile.

In this tutorial, I show How you can add the similar type of functionality to your web page in desktop view.

What in the demonstration?

I will create two examples,

  • Reload page when the user pulls down the button at the specified height.
  • Reload page when the user releases the button.

How to make Pull down to refresh webpage with jQuery


Contents

  1. Layout
  2. At specified Height
  3. Release
  4. Conclusion

1. Layout

First start with creating HTML layout.

HTML

Create a <div class='pulldown-content'> which content a <img> and a button.

<!-- Pull down (start) -->
<div class="pulldown-content">
 <div>
  <img src='reload.gif' width='32px'><br/>
  <input type='button' id='pulldown' value='Pull down to Refresh'>
 </div>
</div>
<!-- Pull down (end) -->

<div class='container'>
 <div class='content'>
  <p>Content</p>
 </div>
</div>

CSS

I positioned the <div> loader image and button to absolute.

.pulldown-content{
 position: absolute;
 background: transparent;
 width: 100%;
 margin: 0 auto;
 text-align: center;
 top: 0;
 left: 0;
 min-height: 20px;
}

/* image */
.pulldown-content img{
 margin-bottom: 25px;
 margin-left: -15px;
}

/* Pull down button */
.pulldown-content input[type=button]{
 background: gold;
 border: 0; 
 color: white;
 font-size: 16px;
 width: 100%;
 left: 0;
}

.pulldown-content img,.pulldown-content input[type=button]{
 bottom: 0;
 position: absolute; 
}

2. At specified Height

Increase and decrease the height of <div class='pulldown-content'> when the user pressed Left-click and mouse move in up and down direction.

When the <div> height reaches 150 then refresh the web page.

Reset the <div> height when the user leaves the mouse and also remove mousemove event handler from document with off() method.

Completed Code

var height = 0; var previousY = 0;
$(document).ready(function(){
 
 $("#pulldown").mousedown(function(e){
 
  height = 0;
  previousY = 0;

  $(document).on('mousemove',function(e){
   var mouseButton = e.which;

   if(previousY == 0){
    previousY = e.pageY;
   }

   var Y = e.pageY;
 
   // When Mouse Left button pressed
   if(mouseButton == 1){

    // Check mouse movement up or down
    if( Y < previousY ){
     height -= 1;
    }else{
     height += 1;
    }
    previousY = e.pageY;
 
    // Set height
    $('.pulldown-content').css('height',height+"px");
 
   }
 
   if(height > 150){
    location.reload();
   }
 
  });
 
 
 });
 
 // Remove mouse move Event and set height of .pulldown-content
 $(document).on('mouseleave mouseup',function(){
  $(document).off('mousemove');
  $('.pulldown-content').css('height',"0px");
 });
});

3. Release

For reloading the web page when the mouse pressed released, I added location.reload() in mouseleave mouseup Event handler of the document.

Which execute when the <div class='pulldown-content'> height greater than 20.

$(document).on('mouseleave mouseup',function(){

 if(height > 20){
  location.reload();
 } 
 $(document).off('mousemove');
 $('.pulldown-content').css('height',"0px");
});

Completed Code

var height = 0; var previousY = 0;
$(document).ready(function(){
 
 $("#pulldown").mousedown(function(e){
 
  height = 0;
  previousY = 0;

  $(document).on('mousemove',function(e){
   var mouseButton = e.which;

   if(previousY == 0){
    previousY = e.pageY;
   }

   var Y = e.pageY;
 
   // When Mouse Right button pressed
   if(mouseButton == 1){

    // Check mouse movement up or down
    if( Y < previousY ){
     height -= 1;
    }else{
     height += 1;
    }
    previousY = e.pageY;
 
    // Set height
    $('.pulldown-content').css('height',height+"px");
 
   }
 
   if(height > 150){
    location.reload();
   }
 
  });
 
 });
 
 // Remove mouse move Event and set height of .pulldown-content
 $(document).on('mouseleave mouseup',function(){

  if(height > 20){
   location.reload();
  } 
  $(document).off('mousemove');
  $('.pulldown-content').css('height',"0px");
 });
});

4. Conclusion

I showed how you can implement Mobile web browser like reload functionality in your Desktop Web browser.

You can change the max height of reloading and the minimum height of container for release according to your need in your project.

If you like this tutorial, feel free to share with others and subscribe to the email list.

Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *