Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit a2364f3

Browse files
arschmitzarschmitz
committed
Init: add option to prevent hiding url bar
1 parent bcd97c9 commit a2364f3

File tree

5 files changed

+66
-7
lines changed

5 files changed

+66
-7
lines changed

‎demos/faq/how-do-i-load-a-page.php‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@
1010
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
1111
<script src="../../js/jquery.js"></script>
1212
<script src="../_assets/js/"></script>
13+
<script>
14+
$( document ).on( "mobileinit", function(){
15+
$.mobile.hideUrlBar = false;
16+
});
17+
</script>
1318
<script src="../../js/"></script>
1419
</head>
1520
<body>
@@ -25,15 +30,11 @@
2530
<div data-role="content" class="jqm-content">
2631
<h2>Question:</h2>
2732

28-
<h1>How do I load a page?</h1>
33+
<h1>How do I prevent jQuery Mobile from hiding the url bar?</h1>
2934

3035
<h2>Answer:</h2>
3136

32-
<p class="jqm-intro">To load an external page, enhance its content, and insert it into the DOM, use the <code>loadPage</code> method. There are a lot of methods and properties that you can set when loading pages, but here is a simple example:</p>
33-
<pre><code>
34-
//load the "about us" page into the DOM
35-
$.mobile.loadPage( "about/us.html" );
36-
</code></pre>
37+
<p class="jqm-intro"><code>Set $.mobile.hideUrlBar = false; </code> on mobileinit</p>
3738

3839
<a href="index.php" class="jqm-button" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-l" data-iconpos="left">All Questions &amp; Answers</a>
3940

‎demos/faq/how-do-i-turn-off-url-hiding.php‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Q&A - jQuery Mobile Demos - How do I prevent jQuery Mobile from hiding the url bar?</title>
7+
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
8+
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
9+
<link rel="shortcut icon" href="../favicon.ico">
10+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
11+
<script src="../../js/jquery.js"></script>
12+
<script src="../_assets/js/"></script>
13+
<script>
14+
$( document ).on( "mobileinit", function(){
15+
$.mobile.hideUrlBar = false;
16+
});
17+
</script>
18+
<script src="../../js/"></script>
19+
</head>
20+
<body>
21+
<div data-role="page" class="jqm-demos jqm-faq">
22+
23+
<div data-role="header" class="jqm-header">
24+
<h1 class="jqm-logo"><a href="../"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
25+
<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
26+
<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>
27+
<?php include( '../search.php' ); ?>
28+
</div><!-- /header -->
29+
30+
<div data-role="content" class="jqm-content">
31+
<h2>Question:</h2>
32+
33+
<h1>How do I prevent jQuery Mobile from hiding the url bar?</h1>
34+
35+
<h2>Answer:</h2>
36+
37+
<p class="jqm-intro"><code>Set $.mobile.hideUrlBar = false; </code> on mobileinit</p>
38+
39+
<a href="index.php" class="jqm-button" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-l" data-iconpos="left">All Questions &amp; Answers</a>
40+
41+
</div><!-- /content -->
42+
43+
<div data-role="footer" class="jqm-footer">
44+
<p class="jqm-version"></p>
45+
<p>Copyright 2013 The jQuery Foundation</p>
46+
</div><!-- /footer -->
47+
48+
<?php include( '../global-nav.php' ); ?>
49+
50+
</div><!-- /page -->
51+
</body>
52+
</html>

‎demos/nav-faq.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@
4242

4343
<li data-section="Questions & Answers" data-filtertext="ajax nav load page loadPage"><a href="faq/how-do-i-load-a-page.php">How do I load a page?</a></li>
4444

45+
<li data-section="Questions & Answers" data-filtertext="ajax nav load page loadPage hide url bar"><a href="faq/how-do-i-turn-off-url-hiding.php" data-ajax="false">How do I turn off the automatic hiding of the url bar?</a></li>
46+
4547
<li data-role="list-divider">Events</li>
4648

4749
<li data-section="Questions & Answers" data-filtertext="touch mouse events vmouseover, vmousedown, vmousemove, vmouseup, vclick, vmousecancel"><a href="faq/how-do-i-use-touch-mouse-events.php">How do I use touch and mouse events?</a></li>

‎js/jquery.mobile.defaults.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ define( [ "jquery", "./jquery.mobile.ns", "json!../package.json" ], function( jQ
2121
// hash segment before &ui-page= is used to make Ajax request
2222
subPageUrlKey: "ui-page",
2323

24+
hideUrlBar: true,
25+
2426
// Class assigned to page currently in view, and during transitions
2527
activePageClass: "ui-page-active",
2628

‎js/jquery.mobile.init.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,9 @@ define([
161161

162162
// window load event
163163
// hide iOS browser chrome on load
164-
$window.load( $.mobile.silentScroll );
164+
if( $.mobile.hideUrlBar ){
165+
$window.load( $.mobile.silentScroll );
166+
}
165167

166168
if ( !$.support.cssPointerEvents ) {
167169
// IE and Opera don't support CSS pointer-events: none that we use to disable link-based buttons

0 commit comments

Comments
 (0)