h1 not showing in iPhone web app
<p><strong>Update:</strong> problem was caused by loading wrong page in browser. Solved now. </p>

<p>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</p>

<p>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. </p>

<pre><code>var title = $('h2').html() || 'Hello!';
    $('h1').html(title);
    $('h2').remove();
    $('#progress').remove();
    }
</code></pre>

<p>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. </p>

<p>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. </p>

<p>Can you tell me why?</p>

<p><img src="http://i.stack.imgur.com/6rXd7.png" alt="iphone with no headers"></p>

<p>HTML</p>

<p><strong>iphone.html</strong></p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Jonathan Stark&lt;/title&gt;
        &lt;meta name="viewport" content="user-scalable=no, width=device-width" /&gt;
        &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
        &lt;meta name="apple-mobile-web-app-status-bar-style" content="black" /&gt;
        &lt;!-- &lt;link rel="apple-touch-icon" href="myCustomIcon.png" /&gt; --&gt;
        &lt;link rel="apple-touch-icon-precomposed" href="myCustomIcon.png" /&gt;
        &lt;link rel="apple-touch-startup-image" href="myCustomStartupGraphic.png" /&gt;
        &lt;link rel="stylesheet" href="iphone.css" type="text/css" media="screen" /&gt;
        &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="iphone.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="header"&gt;
            &lt;h1&gt;Jonathan Stark&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div id="container"&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>index.html</strong></p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Jonathan Stark&lt;/title&gt;
        &lt;meta name="viewport" content="user-scalable=no, width=device-width" /&gt;
        &lt;link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" /&gt;
        &lt;link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" /&gt;
        &lt;!--[if IE]&gt; 
        &lt;link rel="stylesheet" type="text/css" href="explorer.css" media="all" /&gt; 
        &lt;![endif]--&gt;
        &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="iphone.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="container"&gt;
            &lt;div id="header"&gt;
                &lt;h1&gt;&lt;a href="./"&gt;Jonathan Stark&lt;/a&gt;&lt;/h1&gt;
                &lt;div id="utility"&gt;
                    &lt;ul&gt;
                        &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="blog.html"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
                &lt;div id="nav"&gt;
                    &lt;ul&gt;
                        &lt;li&gt;&lt;a href="consulting-clinic.html"&gt;Consulting Clinic&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="on-call.html"&gt;On Call&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="development.html"&gt;Development&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div id="content"&gt;
                &lt;h2&gt;About&lt;/h2&gt;
                &lt;p&gt;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. ...&lt;/p&gt;
            &lt;/div&gt;
            &lt;div id="sidebar"&gt;
                &lt;img alt="Manga Portrait of Jonathan Stark" src="images/manga.png"/&gt;
                &lt;p&gt;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.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div id="footer"&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="services.html"&gt;Services&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="blog.html"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;p class="subtle"&gt;Jonathan Stark Consulting, Inc.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;     
</code></pre>

<p>CSS</p>

<pre><code>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;
    color: #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;
}
</code></pre>

<p>JQuery </p>

<pre><code>if (window.innerWidth &amp;&amp; window.innerWidth &lt;= 480) {
    $(document).ready(function(){ 
        $('#header ul').addClass('hide'); 
        $('#header').append('&lt;div class="leftButton" onclick="toggleMenu()"&gt;Menu&lt;/div&gt;');
    }); 
    function toggleMenu() {
        $('#header ul').toggleClass('hide'); 
        $('#header .leftButton').toggleClass('pressed');
    }
}

$(document).ready(function(){
loadPage();
});
function loadPage(url) {
$('body').append('&lt;div id="progress"&gt;Loading...&lt;/div&gt;');
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();
}
</code></pre>

<p>RE: Is this how I'd use setTimeout starting from $(document) ready until it removes the h2?</p>

<pre><code>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();
    }
</code></pre>
