Geek Answers Handbook

How to disable page refresh in a web application using jQuery Mobile or Javascript

I am developing a simple web application, I want to give the user the opportunity to refresh the page using the refresh function down, like android or iOs.

an update will only reload the page:

location.reload();

I would like to use jQuery Mobile or Javascript.

+5
source share
3 answers

jsfiddle demo

This is on the body , but you can have it in other elements, of course. In this example, html and body are at 100% height and different background-color , so you will notice when dragging the body down. The mouse moves more than 200px and the page reloads.

 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"); });
+4
source

This is a great download plugin to upgrade

https://github.com/luis-kaufmann-silva/jquery-p2r

add js to the 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 minus margin-top in the scroll class to make pull to refresh be hidden, change the update: 200 to how long it takes to recover. for example, at the moment when its set is updated after it is stretched by 200 pixels

+2
source

First, your application can detect a scroll event. Do so.

 $(window).scroll(function() { if($(this).scrcollTop()>='somevalue may be your window height') location.reload(); });

I think this will work for you.

0
source

More articles:


All Articles