• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1012
  • Last Modified:

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

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
Redscrapbook
Asked:
Redscrapbook
  • 8
  • 4
3 Solutions
 
Kyle HamiltonData ScientistCommented:
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
 
RedscrapbookAuthor Commented:
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
 
Kyle HamiltonData ScientistCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
RedscrapbookAuthor Commented:
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
 
RedscrapbookAuthor Commented:
Is the code alright?
0
 
Kyle HamiltonData ScientistCommented:
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
 
RedscrapbookAuthor Commented:
That is fine. No worries. ;-)
0
 
RedscrapbookAuthor Commented:
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
 
RedscrapbookAuthor Commented:
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
 
RedscrapbookAuthor Commented:
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
 
Kyle HamiltonData ScientistCommented:
thanks :)
0
 
RedscrapbookAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 8
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now