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 a similar type of functionality to your web page in desktop view.
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.
Contents
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 a Mobile web browser like reload functionality in your Desktop Web browser.
You can change the max height of reloading and the minimum height of the container for release according to your need in your project.
If you found this tutorial helpful then don't forget to share.