How to make pull down Page refresh on Web app using jQuery Mobile or Javascript
Solution 1
This is on body
but you can have it in other elements of course. In this example html
and body
are with 100% height
and different background-color
s so you'll notice when dragging the body down. Mouse moves down more than 200px
and page will reload.
var mouseY = 0;
var startMouseY = 0;
$('body').on('mousedown', function (ev) {
mouseY = ev.pageY;
startMouseY = mouseY;
$(document).mousemove(function (e) {
if (e.pageY > mouseY) {
var d = e.pageY - startMouseY;
console.log("d: " + d);
if (d >= 200)
location.reload();
$('body').css('margin-top', d/4 + 'px');
}
else
$(document).unbind("mousemove");
});
});
$('body').on('mouseup', function () {
$('body').css('margin-top', '0px');
$(document).unbind("mousemove");
});
$('body').on('mouseleave', function () {
$('body').css('margin-top', '0px');
$(document).unbind("mousemove");
});
Solution 2
This is a great plugin for pull to refresh
https://github.com/luis-kaufmann-silva/jquery-p2r
add the js to your head
script
<script>
$(document).ready(function(){
$(".scroll").pullToRefresh({
refresh:200
})
.on("refresh.pulltorefresh", function (){
location.reload();
});
});
</script>
<div class="scroll">
<div class="refresh">
Pull To Refresh
</div>
<div class="container">
content
</div>
</div>
do a minus margin-top on the scroll class to make the pull to refresh to be hidden, change refresh:200 to how long the pull takes to refresh. e.g at the moment its set to refresh after its pulled for 200 pixels
Related videos on Youtube
Yasser B.
Updated on September 16, 2022Comments
-
Yasser B. over 1 year
I'm developing a simple web application, I want to give the ability to the user to refresh the page with pull down refresh thing like android or iOs.
the refresh it will only lead to reload the page nothing else :
location.reload();
I'd like to use jQuery Mobile or Javascript.
-
Yasser B. about 9 yearsThat's amazing !!! Thanks, But is there any way to pus instead an animated spinner ?
-
The concise over 2 yearsReally? This is not gonna work.