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: https://www.experts-exchange.com/questions/27842358/Mobile-menu-navigation-with-jQuery.html
CSS3 for mobile navigation
The HTML:
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: https://www.experts-exchange.com/questions/27842358/Mobile-menu-navigation-with-jQuery.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;
}
}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>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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?
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?
ASKER
Is the code alright?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That is fine. No worries. ;-)
ASKER
It is solved.
The solution:
<script src="js/1.7_jquery.min.js"
instead of
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
The solution:
<script src="js/1.7_jquery.min.js"
instead of
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
ASKER
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.
Accepted answer: 0 points for Redscrapbook's comment #a38352539
for the following reason:
It is solved.
ASKER
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.
thanks :)
ASKER
I've posted a new question on https://www.experts-exchange.com/questions/27849680/Loading-is-visible-on-iOS-Simulator.html
It is same code but with 'Loading' are visible on iPhone and iOS simulator? Is it your area?
It is same code but with 'Loading' are visible on iPhone and iOS simulator? Is it your area?
ASKER
Open in new window