Skip to main content

Posts

Showing posts with the label data-title

jQuery Mobile Recommendations for Page Title

In my previous two posts, I outlined how page titles are picked up in jQuery Mobile in a single-page and in a multi-page template scenario. Read them here:  jQuery Mobile data-title behavior with multi-page template jQuery Mobile data-title behavior in single-page template Though its a very trivial thing, it is important that the right titles are shown on your pages as you navigate through your mobile HTML5 app. So we see that there are 3 options available to set the page title,  The <title> tag The data-title attribute of the page container The header text in the header container Now the question is which one to use?  And here are my recommendations, For the landing page for any app, use the <title> tag, that always is the primary one to use. The document.title gets populated first and use the same. For multi-page template, use data-title for every page container, including the first container in the document. After first load, every subsequent Ajax

jQuery Mobile data-title behavior in single-page template

In my previous post , I had visited the behavior of the jQuery Mobile library data-title attribute under different scenarios when using a multi-page template.  In this post, I will outline the behavior when using a single-page template. Consider the below single-page template code. Click here to launch the below code in a separate browser. Launch mainpage-title.html <!DOCTYPE html> <html>   <head>     <title>Main Page</title>     <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />      <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>     <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>   </head>   <body>     <div id="page1" dat

jQuery Mobile data-title behavior with multi-page template

The jQuery Mobile library comes with wonderful Ajax page transition capabilities. But you have to keep a look on the Page title as you navigate between the various pages and I have tried to document the behavior under different scenarios in this blog. Consider the below code, click the below link to launch the code in a separate window. Launch <!DOCTYPE html> <html>   <head>     <title>Main Page</title>     <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />      <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>     <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>   </head>   <body>     <div id="page1" data-role="page" data-title="p