?
Solved

Mobile (menu) navigation with jQuery not showing on iPhone as app.

Posted on 2012-08-26
12
Medium Priority
?
999 Views
Last Modified: 2012-08-31
I got this mobile navigation from http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial/comment-page-5#comments

Mobile (menu) navigation with jQuery not showing on iPhone as app. It does work as web app e.g. safari on iPhone but not as iPhone app via phonegap / xcode. The layout is in HTML5.

I'm using JQuery 1.7

See relevant post for code sample: www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27842358.html

CSS3 for mobile navigation
/************************************************************************************
GENERAL
*************************************************************************************/
body {
	font: 10px Arial, Helvetica, sans-serif;
	color: #666;
}
a {
	text-decoration: none;
	color: #39C;
}
h1, h2 {
	line-height: 120%;
	margin: 0 0 10px;
	color: #000;
}
/*header {
	display: table; 
}

/************************************************************************************
STRUCTURE
*************************************************************************************/
/* #pagewrap {
	width: 960px;
	max-width: 94%;
	margin: 0px auto 0;
}*/
/*#content {
	clear: both;
	border-top: solid 1px #ccc;
	padding-top: 20px;
	margin: 20px 0;
} */

/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap {
/*	margin-top: 20px;*/
}

/* menu icon */
#menu-icon {
	display: none; /* hide menu icon initially */
}

#nav, 
#nav li {
	margin: 0;
	padding: 0;
}
#nav li {
	list-style: none;
	float: left;
	margin-right: 5px;
}

/* nav link */
#nav a {
	padding: 4px 15px;
	display: block;
	color: #000;
	background: #ecebeb;
}
#nav a:hover {
	background: #f8f8f8;
}

/* nav dropdown */
#nav ul {
	background: #fff;
	padding: 2px;
	position: absolute;
	border: solid 1px #ccc;
	display: none; /* hide dropdown */
	width: 100px;
}
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}
#nav li:hover > ul {
	display: block; /* show dropdown on hover */
}

/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 5000px) {

	/* nav-wrap */
	#nav-wrap {
		position: absolute;
        padding:5px 0; /* This is added in for padding from very top of header page. */
/*		margin: -34px 0 -0px 23px;*/
		width: 96.7%;
		max-width: 500px;
	}

	/* menu icon */
	#menu-icon {
		color: #000;
		width: 35px;
		height: 20px;
		background: #a5cd4e url(../images/menu-icon.png) no-repeat 5px center;
		padding: 8px 2px 0px 30px;
		cursor: pointer;
		/* border: solid 1px #666;*/
		display: block; /* show menu icon */
		font: 12px Arial, Helvetica, sans-serif;
	}
	#menu-icon:hover {
/************************************************************************************
GENERAL
*************************************************************************************/
/*body {
	font: .9em/150% Arial, Helvetica, sans-serif;
	color: #666;
}
a {
	text-decoration: none;
	color: #39C;
}
h1, h2 {
	line-height: 120%;
	margin: 0 0 10px;
	color: #000;
}
header {
	content: " "; 
	display: table; 
}*/


/************************************************************************************
STRUCTURE
*************************************************************************************/
/* #pagewrap {
	width: 960px;
	max-width: 94%;
	margin: 30px auto 0;
}
#content {
	clear: both;
	border-top: solid 1px #ccc;
	padding-top: 20px;
	margin: 20px 0;
} */

/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap {
	margin-top: 20px;
}

/* menu icon */
#menu-icon {
	display: none; /* hide menu icon initially */
}

#nav, 
#nav li {
	margin: 0;
	padding: 0;
}
#nav li {
	list-style: none;
	float: left;
	margin-right: 5px;
}

/* nav link */
#nav a {
	padding: 4px 15px;
	display: block;
	color: #000;
	background: #ecebeb;
}
#nav a:hover {
	background: #f8f8f8;
}

/* nav dropdown */
#nav ul {
	background: #fff;
	padding: 2px;
	position: absolute;
	border: solid 1px #ccc;
	display: none; /* hide dropdown */
	width: 100px;
}
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}
#nav li:hover > ul {
	display: block; /* show dropdown on hover */
}

/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 600px) {

	/* nav-wrap */
	#nav-wrap {
		position: relative;
	}

	/* menu icon */
	#menu-icon {
		color: #000;
		width: 42px;
		height: 30px;
		background: #ecebeb url(images/menu-icon.png) no-repeat 10px center;
		padding: 8px 10px 0 42px;
		cursor: pointer;
		border: solid 1px #666;
		display: block; /* show menu icon */
	}
	#menu-icon:hover {
		background-color: #f8f8f8;
	}
	#menu-icon.active {
		background-color: #bbb;
	}
	
	/* main nav */
	#nav {
		clear: both;
		position: absolute;
		top: 38px;
		width: 160px;
		z-index: 10000;
		padding: 5px;
		background: #f8f8f8;
		border: solid 1px #999;
		display: none; /* visibility will be toggled with jquery */
	}
	#nav li {
		clear: both;
		float: none;
		margin: 5px 0 5px 10px;
	}
	#nav a, 
	#nav ul a {
		font: inherit;
		background: none;
		display: inline;
		padding: 0;
		color: #666;
		border: none;
	}
	#nav a:hover, 
	#nav ul a:hover {
		background: none;
		color: #000;
	}
	
	/* dropdown */
	#nav ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit;
	}
	#nav ul li {
		margin: 3px 0 3px 15px;
	}

}

@media screen and (max-width: 5000px) {

	/* ensure #nav is visible on desktop version */
	#nav {
		display: block !important;
	}

}

		background-color: #3db8c8;
	}
	#menu-icon.active {
		background-color: #ffcb05;
	}
	
	/* main nav */
	#nav {
		clear: both;
		position: absolute;
/*		top: 28px; This is deleted too. */
		width: 100%;
		z-index: 10000; /* place overlay on top of other elements */
		padding: 5px;
		background: #ffcb05;  /* f8f8f8 */
		border: solid 1px #ffcb05;
		display: none; /* visibility will be toggled with jquery */
	}
	#nav li {
		clear: both;
		float: none;
		margin: 5px 0 5px 10px;
	}
	#nav a, 
	#nav ul a {
		font: inherit;
		background: none;
		display: inline;
		padding: 0;
		color: #666;
		border: none;
	}
	#nav a:hover, 
	#nav ul a:hover {
		background: none;
		color: #000;
	}
	
	/* dropdown */
	#nav ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit;
	}
	#nav ul li {
		margin: 3px 0 3px 15px;
	}

}

@media screen and (min-width: 600px) {

	/* ensure #nav is visible on desktop version */
	#nav {
		display: block !important;
	}
}

Open in new window


The HTML:
<!DOCTYPE html>

<!-- *********************************************************************************************

How to Create CSS3 + jQuery Accordion Menu [Tutorial]
"How to Create CSS3 + jQuery Accordion Menu" that was specially made for DesignModo by our friend Valeriu Timbuc. 

Links:
http://vtimbuc.net/
https://twitter.com/vtimbuc
http://designmodo.com/futurico
http://vladimirkudinov.com
http://rockablethemes.com

********************************************************************************************* -->

<html lang="en">

<head>
	<title>jQuery Accordion Menu</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /><!-- // Removing the device width and height from the meta tag will give us the fluid layout. http://css3wizardry.com/category/iphone/ -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="robots" content="noindex,follow" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<link rel="apple-touch-startup-image" href="images/splash.png" />
	<script src="js/jquery.mobile.js"></script>


	
	<!-- // Performance improve with accordion function improves with Phonegap scripts were added. Smooth ease in and ease out effect. It degrade gracefully with rollover effect of the content heading bars.-->
	<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
	<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
    <script type="text/javascript">


	// If you want to prevent dragging, uncomment this section
	/*
	function preventBehavior(e) 
	{ 
      e.preventDefault(); 
    };
	document.addEventListener("touchmove", preventBehavior, false);
	*/
	
	/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
	see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
	for more details -jm */
	/*
	function handleOpenURL(url)
	{
		// TODO: do something with the url passed in.
	}
	*/
	
	function onBodyLoad()
	{		
		document.addEventListener("deviceready", onDeviceReady, false);
	}
	
	/* When this function is called, PhoneGap has been initialized and is ready to roll */
	/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
	see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
	for more details -jm */
	function onDeviceReady()
	{
		// do your thing!
		navigator.notification.alert("PhoneGap is working")
	}
    
    </script>
    
    <!-- Header and footer style start -->
    <link rel="stylesheet" href="css/generic.css" type="text/css" media="screen" />
    <!-- Header and footer style end -->
    
    <!-- Accordian Start. http://designmodo.com/jquery-accordion-menu/ -->
	<link rel="stylesheet" href="css/accordionmenu.css" type="text/css" media="screen" />
	<!-- <style type="text/css">body{background:url(images/bg.png) repeat;}.footer{margin-top:50px;text-align:center;color:#666;font:bold 14px Arial}.footer a{color:#999;text-decoration:none}#wrapper-250, .accordion{width:94%; margin:0 auto; max-width:500px;}</style> -->

<!-- Accordian script start -->
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><!-- Change it to jquery1.7.2 from 1.7.1. It still works. Source: webdesignerwall.com/demo/mobile-nav/-->
<script type="text/javascript">

		$(document).ready(function() {

			// Store variables
			
			var accordion_head = $('.accordion > li > a'),
				accordion_body = $('.accordion li > .sub-menu');

			// Open the first tab on load

			// accordion_head.first().addClass('active').next().slideDown('normal');

			// Click function

			accordion_head.on('click', function(event) {

				// Disable header links
				
				event.preventDefault();

				// Show and hide the tabs on click

				if ($(this).attr('class') != 'active'){
					accordion_body.slideUp('normal');
					$(this).next().stop(true,true).slideDown('normal');
					accordion_head.removeClass('active');
					$(this).addClass('active');
				}else{
                                        $(this).next('.sub-menu').slideUp('normal');
                                        $(this).removeClass('active');
                                        }
			});


		});

	</script>             
<!-- Accordian script end -->




<!-- Coyer start -->
<link rel='stylesheet' href='css/style.css'>
<!-- Coyer end -->

<!-- Mobile navigation start -->
<script type="text/javascript">
jQuery(document).ready(function($){

	/* prepend menu icon */
	$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');
	
	/* toggle nav */
	$("#menu-icon").on("click", function(){
		$("#nav").slideToggle();
		$(this).toggleClass("active");
	});

});
</script>
<!-- Mobile navigation start -->

<!-- Mobile navigation start -->
<link href="css/mobile_navigation.css" rel="stylesheet" type="text/css">
<!-- Mobile navigation end -->



</head>

<body>
<!-- Header start -->

	<div id="header"><!-- cleaned up to include inner wrapper as of <header>. -->
            <div class="inner-wrapper">
            <h3 class="headerTitle">Heading</h3>
	
	
	
		<!-- Mobile navigation start -->
                <nav id="nav-wrap">
                <!--<div id="menu-icon">Menu</div>-->

                <ul id="nav">

                <table width="" border="0" cellspacing="5" style="width:100%">
                    <tbody><tr>
                        <td><li><a href="#">1</a></li></td>
                        <td><li><a href="#">2</a></li></td>
                        <td><li><a href="#">3</a></li></td>
                        <td><li><a href="#">4</a></li></td>
                        <td><li><a href="#">5</a></li></td>
                    </tr>
                    <tr>
                        <td><li><a href="#">6</a></li></td>
                        <td><li><a href="#">7</a></li></td>
                        <td><li><a href="#">8</a></li></td>
                        <td><li><a href="#">9</a></li></td>
                        <td><li><a href="#">10</a></li></td>
                    </tr>
                </tbody>
                </table>

                </ul>
                </nav>
                <!-- / Mobile navigation end -->
	
	</div>
	
	</div>
<!-- Header End -->

<!-- Body start -->
<!-- Accordion start -->
	<div id="wrapper-250">

		<ul class="accordion">
			
			<li id="one" class="files">

				<a href="#one">My Files<span>495</span></a>

				<ul class="sub-menu">
					
					<li><a href="#"><em>01</em>Dropbox<span>42</span></a></li>
					
					<li><a href="#"><em>02</em>Skydrive<span>87</span></a></li>

					<li><a href="#"><em>03</em>FTP Server<span>366</span></a></li>

					<li><a href="#"><em>04</em>Dropbox<span>1</span></a></li>
					
					<li><a href="#"><em>05</em>Skydrive<span>10</span></a></li>

				</ul>

			</li>
			
			<li id="two" class="mail">

				<a href="#two">Mail<span>26</span></a>

				<ul class="sub-menu">
					
					<li><a href="#"><em>01</em>Hotmail<span>9</span></a></li>
					
					<li><a href="#"><em>02</em>Yahoo<span>14</span></a></li>

				</ul>

			</li>
			
			<li id="three" class="cloud">

				<a href="#three">Cloud<span>58</span></a>

				<ul class="sub-menu">
					
					<li><a href="#"><em>01</em>Connect<span>12</span></a></li>
					
					<li><a href="#"><em>02</em>Profiles<span>19</span></a></li>
					
					
					
					
					
					
					
					<!-- coyer start -->
	<div id="page-wrap">
				
			<div class="module blue">
				<h2><em>03</em>Deaf person's attention <a href="#">1</a></h2>
				<ul>
				   <li>Take a step-by-step process.</li>
				   <li>Approaching a Deaf person may be enough and your approach may suggest your intention to communicate.</li>
				   <li>You can also wave to get eye contact or tap the person gently on the shoulder.</li>
				</ul>

				<h2><em>04</em>When is it my turn? <a href="#">2</a></h2>
				<ul>
				   <li>Set up a system in the surgery to that a visual indicator will allow a Deaf person to know when he or she is being called.</li>
				   <li>A monitor in the waiting room is a good idea.</li>
				   <li>If an interpreter is present, make sure you call the patient's name and not the interpreter's name.</li>
				</ul>

				<h2><em>05</em>Scheduling appointments <a href="#">3</a></h2>
				<ul>
				   <li>Ensure that email or text messages can be used to make an appointment.</li>
				   <li>Why not try an online booking system?</li>
				   <li>It is important that Deaf people manage their health and can book their own appointments.</li>
				</ul>
			</div>
	</div>
<!-- coyer end -->

					
					
					
					
					
					
					
					

					<li><a href="#"><em>03</em>Options<span>27</span></a></li>

					<li><a href="#"><em>04</em>Connect<span>12</span></a></li>
					
					<li><a href="#"><em>05</em>Profiles<span>19</span></a></li>

					<li><a href="#"><em>06</em>Options<span>27</span></a></li>

				</ul>

			</li>
			
			<li id="four" class="sign">

				<a href="#four">Sign Out</a>

				<ul class="sub-menu">
					
					<li><a href="#"><em>01</em>Log Out</a></li>
					
					<li><a href="#"><em>02</em>Delete Account</a></li>

					<li><a href="#"><em>03</em>Freeze Account</a></li>

				</ul>

			</li>
		
		</ul>
		
	</div>
<!-- Accordion end -->
<!-- Body end -->






<!-- Footer Start -->	
<div id="footer"></div>
<!-- Footer End -->	
	
</body>

</html>

Open in new window

Mobile-menu-naviagtion-WORK-NOT-.png
0
Comment
Question by:Redscrapbook
  • 8
  • 4
12 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 38335948
your scripts need to go in this order:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="js/jquery.mobile.js"></script>
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.4.1.js"></script>

Open in new window


If we're looking at the same code as your last post, you were also missing the js directory in the phonegap call.

there may still be other errors, but start with that.
0
 

Author Comment

by:Redscrapbook
ID: 38336124
Thank you for your reply, kozaiwaniec. Here it is as arranged accordingly. Still no luck as iPhone app via phonegap / xcode. It is clear that a js key is missing?

   <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /><!-- // Removing the device width and height from the meta tag will give us the fluid layout. http://css3wizardry.com/category/iphone/ -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="robots" content="noindex,follow" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<link rel="apple-touch-startup-image" href="images/splash.png" />
	<!-- Accordian script start -->
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><!-- Arrange in this order no1 --><!-- Change it to jquery1.7.2 from 1.7.1. It still works. Source: webdesignerwall.com/demo/mobile-nav/-->
	<script src="js/jquery.mobile.js"></script><!-- Arrange in this order no2 -->
	<!-- // Performance improve with accordion function improves with Phonegap scripts were added. Smooth ease in and ease out effect. It degrade gracefully with rollover effect of the content heading bars.-->
	<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
	<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script></script><!-- Arrange in this order no3 -->

Open in new window

0
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 2000 total points
ID: 38336398
the phonegap script in the files you sent me in the other post is inside the js directory. Also, you have two closing script tags on the last line.

change last line to:

<script type="text/javascript" charset="utf-8" src="js/phonegap-1.4.1.js"></script><!-- Arrange in this order no3 -->

Also, since this is html5, you can rewrite simply like this (you don't need any of the other attributes):

<script src="js/phonegap-1.4.1.js"></script>
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Redscrapbook
ID: 38338487
I've amended like you suggested. No luck. I didn't see a duplicate of </script> on phonegap.js

I'm really sure it something to do with JS or CSS/JS combined, that is why mobile navigation menu is not appearing on iPhone app? But I don't know what to look for?
0
 

Author Comment

by:Redscrapbook
ID: 38347573
Is the code alright?
0
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 2000 total points
ID: 38347644
Hi,

I got swamped with some other stuff and haven't been able to look at this. I might get some time later, but probably not until tomorrow. You might want to click the request attention button.

Cheers
0
 

Author Comment

by:Redscrapbook
ID: 38347709
That is fine. No worries. ;-)
0
 

Author Comment

by:Redscrapbook
ID: 38352539
It is solved.

The solution:
<script src="js/1.7_jquery.min.js"></script>
 
instead of
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
0
 

Author Comment

by:Redscrapbook
ID: 38356170
I've requested that this question be closed as follows:

Accepted answer: 0 points for Redscrapbook's comment #a38352539

for the following reason:

It is solved.
0
 

Author Closing Comment

by:Redscrapbook
ID: 38356171
Thank you for your efforts. Worth every points. It is not fully solved but getting there. I'll start with a new question afresh to fix the 'table'. I'll try with CSS to fix the table.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38356182
thanks :)
0
 

Author Comment

by:Redscrapbook
ID: 38356202
I've posted a new question on http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27849680.html

It is same code but with 'Loading' are visible on iPhone and iOS simulator? Is it your area?
1

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Learn to move / copy / export exchange contacts to iPhone without using any software. Also see the issues in configuration of exchange with iPhone to migrate contacts.
After hours on line I found a solution which pointed to the inherited Active Directory permissions . You have to give/allow permissions to the "Exchange trusted subsystem" for the user in the Active Directory...
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question