h1 not showing in iPhone web app
Update: problem was caused by loading wrong page in browser. Solved now.
In the image you can see the front page of an iPhone webpage I am developing using the O'Reilly book by Jonathan Stark. The image shows iphone.html (see below) which is just a bunch of links, which, when clicked will load the content from index.html (see below) using the ajax in the jquery.js (see below). A live version of the site is available at www.quoraquora.com
At the very bottom of the jquery file, there is a function which removes the content of the h2 and puts it in the h1. The operative code is this.
var title = $('h2').html() || 'Hello!';
$('h1').html(title);
$('h2').remove();
$('#progress').remove();
}
So if you were to click "About" link, then "About" will appear in the toolbar. On the first page, it's supposed to show "hello" because none of the links will be clicked.
However, as you can see in my image, there is no "h1" saying "hello" and when I click on the links, there is no "h1" showing the "About" in the header etc.
Can you tell me why?
HTML
iphone.html
<html>
<head>
<title>Jonathan Stark</title>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- <link rel="apple-touch-icon" href="myCustomIcon.png" /> -->
<link rel="apple-touch-icon-precomposed" href="myCustomIcon.png" />
<link rel="apple-touch-startup-image" href="myCustomStartupGraphic.png" />
<link rel="stylesheet" href="iphone.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iphone.js"></script>
</head>
<body>
<div id="header">
<h1>Jonathan Stark</h1>
</div>
<div id="container"></div>
</body>
</html>
index.html
<html>
<head>
<title>Jonathan Stark</title>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="explorer.css" media="all" />
<![endif]-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iphone.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="./">Jonathan Stark</a></h1>
<div id="utility">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="consulting-clinic.html">Consulting Clinic</a></li>
<li><a href="on-call.html">On Call</a></li>
<li><a href="development.html">Development</a></li>
</ul>
</div>
</div>
<div id="content">
<h2>About</h2>
<p>Jonathan Stark is a web developer, speaker, and author. His consulting firm, Jonathan Stark Consulting, Inc., has attracted clients such as Staples, Turner Broadcasting, and the PGA Tour. ...</p>
</div>
<div id="sidebar">
<img alt="Manga Portrait of Jonathan Stark" src="images/manga.png"/>
<p>Jonathan Stark is a mobile and web application developer who the Wall Street Journal has called an expert on publishing desktop data to the web.</p>
</div>
<div id="footer">
<ul>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
<p class="subtle">Jonathan Stark Consulting, Inc.</p>
</div>
</div>
</body>
</html>
CSS
body {
background-color: #ddd;
color: #222;
font-family: Helvetica;
font-size: 14px;
margin: 0;
padding: 0;
}
#header {
background-color: #ccc;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
border-color: #666;
border-style: solid;
border-width: 0 0 1px 0;
}
#header h1 {
color: #222;
font-size: 20px;
font-weight: bold;
margin: 0 auto;
padding: 10px 0;
text-align: center;
text-shadow: 0px 1px 0px #fff;
max-width: 160px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
ul {
list-style: none;
margin: 10px;
padding: 0;
}
ul li a {
background-color: #FFFFFF;
border: 1px solid #999999;
co开发者_如何学JAVAlor: #222222;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
}
ul li:first-child a {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
}
ul li:last-child a {
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}
ul li a:active,ul li a:hover {
background-color: blue;
color: white;
}
#content {
padding: 10px;
text-shadow: 0px 1px 0px #fff;
}
#content a {
color: blue;
}
#progress {
-webkit-border-radius: 10px;
background-color: rgba(0,0,0,.7);
color: white;
font-size: 18px;
font-weight: bold;
height: 80px;
left: 60px;
line-height: 80px;
margin: 0 auto;
position: absolute;
text-align: center;
top: 120px;
width: 200px;
}
#header div.leftButton {
font-weight: bold;
text-align: center;
line-height: 28px;
color: white;
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
position: absolute;
top: 7px;
left: 6px;
max-width: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-width: 0 8px 0 14px;
-webkit-border-image: url(images/back_button.png) 0 8 0 14;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#header div.leftButton.clicked {
-webkit-border-image: url(images/back_button_clicked.png) 0 8 0 14;
}
JQuery
if (window.innerWidth && window.innerWidth <= 480) {
$(document).ready(function(){
$('#header ul').addClass('hide');
$('#header').append('<div class="leftButton" onclick="toggleMenu()">Menu</div>');
});
function toggleMenu() {
$('#header ul').toggleClass('hide');
$('#header .leftButton').toggleClass('pressed');
}
}
$(document).ready(function(){
loadPage();
});
function loadPage(url) {
$('body').append('<div id="progress">Loading...</div>');
scrollTo(0,0);
if (url == undefined) {
$('#container').load('index.html #header ul', hijackLinks);
} else {
$('#container').load(url + ' #content', hijackLinks);
}
}
function hijackLinks() {
$('#container a').click(function(e){
var url = e.target.href;
if (url.match(/quoraquora.com/)) {
e.preventDefault();
loadPage(e.target.href);
}
});
var title = $('h2').html() || 'Hello!';
$('h1').html(title);
$('h2').remove();
$('#progress').remove();
}
RE: Is this how I'd use setTimeout starting from $(document) ready until it removes the h2?
function hijackLinks() {
$('#container a').click(function(e){
var url = e.target.href;
if (url.match(/quoraquora.com/)) {
e.preventDefault();
loadPage(e.target.href);
}
});
var title = $('h2').html() || 'Hello!';
$(document).ready
(
function()
{
setTimeout
(
function()
{
$('h1').html(title);
},
5000
);
}
);
$('h2').remove();
$('#progress').remove();
}
Try having such code instead:
function hijackLinks() {
$('#container a').click(function(e) {
var url = e.target.href;
if (url.match(/quoraquora.com/)) {
e.preventDefault();
loadPage(e.target.href);
}
});
window.setTimeout(function() {
alert("delayed function started");
var title = $('h2').html() || 'Hello!';
alert("title: " + title);
alert("H1 count: " + $('h1').length);
$('h1').html(title);
$('h2').remove();
$('#progress').remove();
}, 500);
}
Reason behind this: maybe jQuery didn't have chance to process the new DOM of the container so give it some time.
Edit: alerts added for debugging the problem.
加载中,请稍侯......
精彩评论