All geek questions in one place

Sometimes persistent footer also moves during page transition in jquerymobile

This is the html code I have

<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> <script> $('#home, #page2, #page3').live('pagebeforeshow',function(event){ $('#' + $(this).attr('id') + '_link').addClass('ui-btn-active'); }); </script> </head> <body> <div data-role="page" id="home"> <div data-role="header" data-theme="b"> <h1>Test</h1> </div> <div data-role="content" data-theme="b"> Home Page </div> <div data-role="footer" data-position="fixed" data-id="pFooter"> <div data-role="navbar"> <ul> <li><a href="#home" data-icon="custom" class="ui-btn-active" id="home_link">Home</a></li> <li><a href="#page2" data-icon="grid">Second page</a></li> <li><a href="#page3" data-icon="star">Third page</a></li> </ul> </div> </div> </div> <div data-role="page" id="page2"> <div data-role="header" data-theme="b"> <h1>Test</h1> </div> <div data-role="content" data-theme="b"> Second page </div> <div data-role="footer" data-position="fixed" data-id="pFooter"> <div data-role="navbar"> <ul> <li><a href="#home" data-icon="custom">Home</a></li> <li><a href="#page2" data-icon="grid" class="ui-btn-active" id="page2_link">Second page</a></li> <li><a href="#page3" data-icon="star">Third page</a></li> </ul> </div> </div> </div> <div data-role="page" id="page3"> <div data-role="header" data-theme="b"> <h1>Test</h1> </div> <div data-role="content" data-theme="b"> Third page </div> <div data-role="footer" data-position="fixed" data-id="pFooter"> <div data-role="navbar"> <ul> <li><a href="#home" data-icon="custom">Home</a></li> <li><a href="#page2" data-icon="grid">Second page</a></li> <li><a href="#page3" data-icon="star" class="ui-btn-active" id="page3_link">Third page</a></li> </ul> </div> </div> </div> </body> </html>

The problem I am facing is that sometimes when I change the navbar selection, the footer also slides left or right along with the page. You can reproduce the problem by constantly changing the button selection on the navigation bar.

You can see it here - http://jsfiddle.net/tKMgd/5/

+6
source share
3 answers

I did not do anything specific to solve this problem. But over time, the problem does not arise. Between me, I updated the versions of JQM that I used and now I use JQM 1.1

+1
source

If the problem is related to the header / footer, and not using data-position = "fixed" in your newly set html position: fixed in your css and gives the element a high z-index - alt, no more "blinking"

+2
source

Someone was discussing this problem and had a temporary solution, maybe this could work for you too?

https://github.com/jquery/jquery-mobile/issues/2226

Reply excerpt

When you quickly switch between pages using a persistent footer (with the same data identifier), the source code does not identify the previous footnote page. The problem is due to setTimeout (line 5812 - jquery.mobile-1.0b2). If you quickly switch between pages, the footer will not be there due to a delay of 500 ms. If you choose this setTimeout or set it to zero, this problem will not happen again, but I'm not sure about the consequences of this.

I was able to reproduce this problem in Safari and iOS (I have not tried other devices / browsers)

+1
source

Source: https://habr.com/ru/post/892131/

More articles:


All Articles