Response title
This is preview!
Weird header movement issue / flash issue on a normal single page .html link
in jQuery Mobile
•
10 years ago
Hi JQM,
Upgrading my project to 1.7.1 / 1.1.0 and hitting a weird issue when a page is linked from another page. The fixed header seems to push down then once the page content loads, it pushed back into position. I am testing on an iPhone 4, Xcode 4.3.2. I do not have this problem with 1.6.4 / 1.0.1. Could someone take quick peek and see if I have anything wrong here with how I have link the pages. This problem does not happen in the links in the navbar - only if I put a regular a href link to another page ---> a href="about.html". THANK YOU!
contact.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>JQuery Testing</title>
<link rel="stylesheet" href="css/jquery.mobile-1.1.0.css">
<script src="cordova-1.7.0.js"></script>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" class="page-header" data-position="fixed" data-id="foo">
<div data-role="header" data-transition="none" data-position="fixed" class="page-header" data-add-back-btn="true" data-id="foo" data-prefetch >
<a href="index.html" data-icon="arrow-l" data-iconpos="notext" data-direction="reverse" data-rel="back">Back</a>
<div class="logo"></div>
</div>
</div>
<div data-role="content">
<div class="content-left">
<h3>Client Services</h3>
PT customer service representatives are here to help. Click an icon to reach out:<BR><BR>
<table style="width:100%">
<tr>
<td style="width:25%;">
<a href="tel:+18778783600"><img src="images/new_phone.png" width="57" height="57"></a><BR><BR></td>
<td style="width:75%;">Call us toll free, <a href="tel:+18778783600">1-877-878-3600</a>. Our office hours:<BR>
Mon - Thurs 9am - 8pm EST<BR>
Friday 9am - 7pm EST<BR>
Saturday 10am - 3pm.<BR><BR></td>
</tr>
<tr>
<td style="width:25%;">
<a href="mailto:support@PT.com"><img src="images/new_email.png" width="57" height="57"></a><BR><BR></td>
<td style="width:75%;">Send email to us at <a href="mailto:support@PT.com">support@PT.com</a>. Your email is important to us and will be answered promptly.<BR><BR> </td>
</tr>
<tr>
<td style="width:25%;">
<a href="about.html" data-transition="none"><img src="images/new_about.png" width="57" height="57"></a><BR><BR></td>
<td style="width:75%;">PT is the national leader in mortgage education.
<a href="about.html" data-transition="none"><BR>Read More...</a><BR><BR> </td>
</tr>
<tr>
<td style="width:25%;">
<img src="images/new_mail.png" width="57" height="57"><BR><BR></td>
<td style="width:75%;">Physical Mail Address:<BR>
5455 McCormick Road<BR>
Plaza 2<BR>
Sixth Floor<BR>
Huntsman, MO 21031<BR><BR></td>
</tr>
</table>
</div>
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar" class="custom-icons" data-grid="d">
<ul>
<li><a href="index.html" id="home" data-icon="custom" data-theme="a" data-transition="none" data-prefetch>Home</a></li>
<li><a href="download.html" id="download" data-icon="custom" data-theme="a" data-transition="none" data-prefetch>Buy</a></li>
<li><a href="social.html" id="chat" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>News</a></li>
<li><a href="calc.html" id="calc" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>Calc</a></li>
<li><a href="contact.html" id="cell" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
about.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>JQuery Testing</title>
<link rel="stylesheet" href="css/jquery.mobile-1.1.0.css">
<script src="cordova-1.7.0.js"></script>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" class="page-header" data-position="fixed" data-id="foo">
<div class="logo"></div>
</div>
<div data-role="content">
<div class="content-left">
<h3>About TP</h3>
<p>Since its establishment in 1999, TP has been a pioneer in navigating the
changing licensure environment of the automotive industry and nimbly adjusting its business
to accommodate the compliance needs of its clients. From training automotive professionals in
only two states that required education in 1999 to becoming a nationally accredited provider
in all 50 states and territories, TP has become a resource and a partner for automotive
companies of all sizes.</p>
<p>TP’s timely course curriculum and practical compliance tools have ensured proper
licensure for automotive loan originators across the country. Providing training in every format
allowed by the Nationwide automotive Licensing System (NMLS), TP offers a comprehensive
solution to training that caters to individual learning styles. TP’s course catalog is
the most inclusive in the industry, and its exam prep product line has helped thousands of automotive
loan originators pass their national and state licensing exams. </p>
</p>With its robust Tracking and Reporting System, TP is able to take its education platform
to the next level of service by filling a critical need for automotive compliance teams nationwide. For
more information on why TP should be your education partner, visit www.TP.com or
call 877-878-9001.<BR><BR><BR></p>
</div>
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar" class="custom-icons" data-grid="d">
<ul>
<li><a href="index.html" id="home" data-icon="custom" data-theme="a" data-transition="none" data-prefetch>Home</a></li>
<li><a href="download.html" id="download" data-icon="custom" data-theme="a" data-transition="none" data-prefetch>Buy</a></li>
<li><a href="social.html" id="chat" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>News</a></li>
<li><a href="calc.html" id="calc" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>Calc</a></li>
<li><a href="contact.html" id="cell" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
1