I'm currently working on another mobile website which has the mmenu installed, all works fine as far as the scroll opens to show the menu, but all the menu items are external links. When I tap/click an external link the page will hyperlink to the page selected without closing the menu first. Is there anyway of making the menu close before loading the external links?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<script type="text/javascript" src="../js/jquery.mmenu.min.all.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="../css/jquery.mmenu.all.css" />
<link type="text/css" rel="stylesheet" href="../css/main.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#menu").mmenu({
classes: "mm-zoom-panels",
counters: true
});
});
</script>
</head>
<body>
<div id="page"><a href="main.asp">
<img border="0" src="../images/header.png" width="100%"></a>
<div class="header">
</div>
<div class="content">
<div align="center">
</div>
</div>
<nav id="menu">
<ul>
<li>Today</li>
<li>Times</li>
<li>Settings</li>
<li>Log out</li>
</ul>
</nav>
</div>
</body>
Thanks in advance!!
try this code
$("#menu").mmenu({
classes: "mm-zoom-panels",
counters: true,
onClick: {
close: true
}
});
for more info see this:-http://mmenu.frebsite.nl/documentation/options/
thanks
Related
This is what I want: when I click the username (in header), show the sidebar. This only works out of the nav label and I must use a label. In a button not works.
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/icon.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/materialize.min.css">
<title>Dashboard</title>
</head>
<body>
<ul id="side-setting" class="side-nav">
<li>ver perfil</li>
<li>editar perfil</li>
<li>cerrar sesion</li>
</ul>
<nav class="teal" role="navigation">
<div class="nav-wrapper container-fluid">
<ul class="hide-on-med-and-down">
<li>Inicio</li>
<li>Grupos</li>
</ul>
<ul class="right hide-on-med-and-down">
<li>
username
</li>
</ul>
</div>
</nav>
here
<button class="btn" data-activates="side-setting" class="button-coll">sidenav</button>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
</body>
</html>
init.js code
(function($){
$(function(){
$('select').material_select();
$('.button-collapse').sideNav();
$('.parallax').parallax();
}); // end of document ready
})(jQuery); // end of jQuery name space
how I add this sidebar? I want this float to the right when I click in a button or username that is positioned in header (nav)
I'm using Zurb's Foundation, attempting to build a FAQ page using the accordion js. But it's not working and I have no idea why. All the js files are in the js folder. Here's my whole page:
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row row-padding">
<div class="small-12 columns">
<h1>FAQ:<h1>
</div>
</div>
<div class="row row-padding small-12">
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
Question
<div id="panel13a" class="content">
Answer
</div>
</li>
</ul>
</div>
<script>
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>
</body>
</html>
I'm brand new to HTML websites, so sorry if it's something stupid.
You are targeting your accordion with an id that doesn't exist in your HTML.
You'll need to add the id to your HTML like this:
<div class="row row-padding small-12">
<ul id="myAccordionGroup" class="accordion" data-accordion>
<li class="accordion-navigation">
Question
<div id="panel13a" class="content">
Answer
</div>
</li>
</ul>
</div>
Also change the order of your scripts so that your custom accordion loads after everything else.
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>
<script>
$(document).foundation();
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
Here is a working CodePen: http://codepen.io/anon/pen/jPmRyB
You forgot about $(document).foundation();
http://foundation.zurb.com/docs/javascript.html - Initialize Foundation
I've a problem with prettyphoto and a simple jquery script in a PrettyPhoto inline box.
Why I can't hide the div in this prettyphoto box? I don't understand why this is not working...
<!DOCTYPE html>
<html>
<head>
<title>Pretty photo test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<li>Inline content 1</li>
<div id="inline_demo" style="display:none;">
<div id="testje" style="display:block">this is a test</div>
<a onclick="$('#testje').hide(); return false">Close test div</a>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
</html>
No need to add [inline] :
<li>Inline content 1</li>
<div id="inline_demo" style="display:none;">
<div id="testje">this is a test</div>
<a onclick="$('#testje').hide(); return false;">Close test div</a>
</div>
I am trying to build a Web application using jQuery Mobile.
When testing on my desktop everything works as expected.
On Android (both 3.2 and 4.0.3) seems like JavaScript is disabled after navigating to second page.
My first page looks like:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h3>Jetty experiments:</h3>
</div>
<div data-role="content">
<ul data-role="listview">
<li>Hello World</li>
<li>Sample Form</li>
<li>Test JSP</li>
</ul>
</div>
<div data-role="footer">
<button id="jquery-test">JQuery Test</button>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$("#jquery-test").click(function(event) {
alert("OK");
});
});
</script>
</html>
My second page (that is sample-form.html):
<!DOCTYPE html>
<html>
<head>
<title>Collects text into a database</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
src="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="script/tempo.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h3>Enter some text:</h3>
</div>
<div data-role="content">
<form id="searchForm" method="get" action="SampleForm"
data-ajax="false">
<input type="text" name="text" /> <input type="submit"
value="Submit" />
</form>
<ul id="names" data-role="listview">
<li data-template>{{name}}</li> <!-- the template here does not work on Android -->
<li data-template-fallback>Sorry, JavaScript required!</li>
</ul>
</div>
<div data-role="footer">
<button id="jquery-test">JQuery Test</button>
</div>
</div>
</body>
<script>
var names;
$(document).ready(function() {
$("#jquery-test").click(function(event) {
alert("OK"); // the alert here does not work on Android :(
});
names = Tempo.prepare("names")
});
// this binding does not work on Android
$("#searchForm").submit(function(event) {
event.preventDefault();
$.getJSON("SampleForm", function(data) {
names.render(data);
});
});
</script>
</html>
Any idea what am I doing wrong?
BR,
Adrian.
In jQuery Mobile the document ready event is called once. Linked pages are loaded in same DOM and page init is triggered.
http://jquerymobile.com/test/docs/api/events.html
Here is another question:
jQuery Mobile delegate vs live vs bind
So I have a listview in which each component wired to an on click function which looks like this:
function launchNewPage() {
$.mobile.changePage( "newPage.html", { transition: "slide"} );
}
The problem I am encountering has to do with the next page. The page shows up just fine, but none of the resources are loading. When I inspect the page in firebug, none of the necessary JS files are loaded. On top of this, it doesn't seem like the $(document).ready function is ever getting executed. Does anyone have any insight as to what I am doing wrong? Sorry, I am a bit new to JQ... Thanks in advance.
Requested HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="CSS/JqueryMobile.css" />
<link rel="stylesheet" href="CSS/theme.css" />
<link rel="stylesheet" href="CSS/JQM-DatePicker.css" />
<script type="text/javascript" src="JS/jquery-1.6.2.js"></script>
<script type="text/javascript" src="JS/JqueryMobile.js"></script>
<script type="text/javascript" src="JS/JQM-DatePicker.js"></script>
<script type="text/javascript" src="JS/mockjax.js"></script>
<script type="text/javascript" src="JS/soyutils.js"></script>
<script type="text/javascript" src="JS/fields.js"></script>
<script type="text/javascript" src="JS/JSDictionaryObject.js"></script>
<script type="text/javascript" src="JS/AddingForm.js"></script>
</head>
<body>
<div id="page" data-role="page" data-theme="x">
<div class="ui-body-x" data-role="header" data-position="fixed">
<h1 class="ui-header-style" style="text-align:left; margin-left:10px;">Add New Record</h1>
<div data-type="horizontal" class="ui-btn-right ui-button-group">
<a id="cancelButton" href="http://www.google.com" data-role="link" data-ajax="false">Cancel</a>
<a id="submitButton" form="f" class="ui-btn-up-x" onClick="javascript:return submitPressed();"data-role="button" data-icon="" data-ajax="false">Submit</a>
</div>
</div><!-- /header -->
<div data-role="content" data-theme="x">
<form id="f" src="#"></form>
</div><!-- /content -->
</div><!-- /page -->
</body>
You cannot start the jQuery mobile with $(document).ready() you should started like this:
try to work with this in the first HTML
$("div[data-role*='page']").live('pageshow', function(event, ui) {
document.location.href="newPage.html";
});
Geoff, if you are using the Beta 3 version of the JQM framework, read this. It will help shed light on the DOM and $(document).ready(). You may want to consider the "pagecreate" and "pagebeforecreate" events. They are delineated in the doc referenced in the above link.