first post here ever after MANY days saved by you guys
I'm developing my first ever mobile app (a type of calculator/converter) using PhoneGap (jquery + html). I'm primarily a .NET dev. with a few years exp.
All I want to do is hide the menu after clicking an item, eventually managed that after .toggle() and .slideToggle() didnt work correctly for me.
HOWEVER ,when I make my selection on the menu, it works correctly (in browser and phonegap) except after execution I have to give an extra click anywhere on the page as if focus is set elsewhere.
I thought it may have to do with &ui-state=dialog however I set changeHash to false on pageChange and that removed it from the URL but the behaviour stayed the same.
I've done my best in terms of searching past threads etc. Any assistance will be greatly appreciated :)
<a href="#hamburgerPopup" id="burgerLogo" data-rel="popup" data-transition="slide" aria-haspopup="true" aria-owns="popupMenu" aria-expanded="false">
<img src="hamburger.png" style="width:50%;" />
</a>
<div data-role="popup" id="hamburgerPopup" data-theme="a" >
<ul data-role="listview" data-inset="true">
<li data-icon="false">Calc Weight</li>
<li data-icon="false">FAQ's</li>
</ul>
</div>
and the jquery
$('#burgerLogo').on('click', function () {
$('#hamburgerPopup ul').css("display", "block");
});
function GoToCalc() {
$("#about").hide();
$("#divCalculator").show();
}
function GoToFAQ() {
$("#about").show();
$("#divCalculator").hide();
}
$(function () {
$("#hamburgerPopup li").click(function () {
$('#hamburgerPopup ul').css("display", "none");
//$("#logo").click(); - I tried this to simulate a click, does nothing
//$('#hamburgerPopup').trigger("click");
//$("#hamburgerPopup").hide();
})
});
I believe you need a simple example of navigating pages with a hamburger menu, so here is it:
$(function(){
$( "#hamburgerPopup" ).enhanceWithin().popup({
theme: "a",
transition: "turn",
history: false,
positionTo: "origin",
beforeposition: function( event, ui ) {
var currPageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
$("#hamburgerPopup li").removeClass("ui-state-disabled");
$("#hamburgerPopup a[href='#"+currPageId+"']").parent().addClass("ui-state-disabled");
}
});
$("[data-role='header'], [data-role='footer']").toolbar({
theme: "a",
position: "fixed",
tapToggle: false
});
});
$(document).on("pagecontainerchange", function() {
$("[data-role='header'] h2" ).text($(".ui-page-active").jqmData("title"));
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="header">
View
<h2>Header</h2>
</div>
<div data-role="page" data-title="Calculator" id="page-calculator">
<div data-role="content">
Calculate Weight
</div>
</div>
<div data-role="page" data-title="FAQ" id="page-faq">
<div data-role="content">
Read FAQ
</div>
</div>
<div data-role="footer">
<h2>Footer</h2>
</div>
<div data-role="popup" id="hamburgerPopup" data-theme="a">
<ul data-role="listview" data-inset="true">
<li data-icon="false">Calc Weight</li>
<li data-icon="false">FAQ's</li>
</ul>
</div>
</body>
</html>
Explanation:
Header, footer and hamburger menu are outside of all the pages, so we need to initialize the widgets by hand, in code. Instead of using data tags, i'm using the many options available at initialization of the widgets, so i removed some of the data tags in markup, as they aren't necessary anymore.
Page navigation & Popup close: is already handled by jQuery Mobile through the anchor tags, no need to write JavaScript code here to hide the popup nor to switching from one page to another.
Some simple additional nice-to have features:
Disabling the menu item of the page where we already are: this is done in Popup beforeposition by adding or removing the proper jQM classes to the listview which builds the hamburger menu.
Page title: as the header is common to all pages, we need to manually set the title. I'm using here a custom tag: data-title: which stores the information of the text to display at page switching.
Hope this helps!
Related
I am writing a phonegap application using Angular's ngRoute as an MVC. This all works beautifully, except for my top bar which includes the trigger button for the slide out menu. as it sits now, the top bar has the same title for every page, so to fix this I moved the top bar inside of the route view, which now stops my slide out menu from working.
How can i get the javascript trigger to actually run properly inside a route view (i understand this has to do with the page, and all of its JS, rendering before the route view is actually loaded) and I also would LIKE to execute other JS in a route view as well. for example, one of the views handles GPS location and NFC chip reading and i would love to only execute those scripts when that view is active rather than all the time, which chews up battery listening for NFC chips and GeoData even when that view is not in use.
if this isnt possible or is a serious pain then id just as soon go back to conventional page changes instead of views, im just hoping that there is a way to do this.
Here is the relevant code illustrating the issue:
index.html:
<script type="text/javascript">
$(window).load(function() {
$('#menutoggle').toggle(function() {
$('#right').animate({
left: 200
});
}, function() {
$('#right').animate({
left: 0
});
});
});
</script>
<div id="menu">
<span class="logo-bar"></span>
<ul id="sidenav">
<li>
<a href="#/Checkin">
<img src="img/home.png">Check In
</a>
</li>
<li>
<a href="#/logout">
<img src="img/logout.png">Logout</a>
</li>
</ul>
</div>
<div class="content view-animate-container">
<div id="contentcontroller" ng-view class="view-animate wrapper">
</div>
</div>
CheckIn.html
<div id="right">
<div id="menubar">
<div id="menutoggle">
</div>
<div class="title">
Check In
</div>
</div>
</div>
Now the toggle button works fine on whatever view is initially loaded, however as soon as a page change occurs the menu toggle simply stops.
is there any way to remedy this?
I'm new to web development and I dont have much experience. I have been trying to create a menu that becomes visible when the user clicks it. I have been able to make it pop-up but it doesnt stay visible. It becomes visible for a second and turns invisible again. I have tried this with the 'display' property as well. However, that has the same results. Here is my code:
<head>
<script type="text/javascript">
function opnmenu () {
document.getElementById("menu").style.visibility="visible";
}
</script>
</head>
<body onLoad="document.getElementById('menu').style.visibility='hidden';">
<div id="menubar">
<table>
<tr>
<td>
<div id="menuimg">
<form>
<input type="image" class="menubut" src="menu.png" alt="submit" onClick="opnmenu()">
</form>
</div>
</td>
</tr>
</table>
</div>
<br>
<h1> Entrepreneur</h1>
<hr>
<div id="menu">
<ul>
<li>Home</li>
<li>Motivation</li>
<li>Books</li>
<li>Videos</li>
</ul>
</div>
</body>
Any help will be appreciated.
Thank You.
Here is a sample using pure javascript (some code comes from the other comments) with more proper HTML5:
http://jsfiddle.net/59su4/1/
The problem with visibility: hidden is that the menu will take the place it would normally take if it was visible. Here is an example with visibility property:
http://jsfiddle.net/59su4/2/
(notice the empty space taken by the hidden menu)
[EDIT] after the author comment, I mixed the HTML, JS and CSS into a single code to show where each element goes in the page.
FULL PAGE
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My menu is ALIVEEEE</title>
<style>
.menu {
display: none;
}
.menu.opened {
display: block;
}
</style>
</head>
<body>
Toggle menu
<nav class="menu">
<ul>
<li>Home</li>
<li>Motivation</li>
<li>Books</li>
<li>Videos</li>
</ul>
</nav>
<p>
To facilitate the process, AI Lab hackers had built a system that displayed both the "source" and "display" modes on a split screen. Despite this innovative hack, switching from mode to mode was still a nuisance.
</p>
<script>
var openMenuBtn = document.getElementsByClassName('open-menu')[0],
menu = document.getElementsByClassName('menu')[0];
openMenuBtn.addEventListener('click', function ( e ) {
// We don't want the empty link to be followed
e.preventDefault();
// Toggle the menu
menu.classList.toggle('opened');
}, false);
</script>
</body>
</html>
I'm trying to change a part of a page, I know that this has been asked before but I cannot really find a good solution to my issue.
The red colour is the part of the page I want to change dynamically depending on what you click on the left side that is a panel.
Image: http://wstaw.org/m/2014/04/24/ask.png
HTML Code: http://pastebin.ubuntu.com/7322513/
<body id="framework">
<div data-role="page" class="page ui-responsive-panel">
<!-- header -->
<div data-role="header" data-theme="a">
<h1 id="titlepage">ICU</h1>
Menu
Add
</div>
<!-- /header -->
<!-- content that is replaced by ajax -->
<div id="content" data-role="content">
<h2>content</h2>
</div>
<!-- /content -->
<!-- Left menu panel -->
<div data-role="panel" data-position="left" data-position-fixed="false" data-display="overlay" id="nav-panel" data-theme="b">
<ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search" id="nav">
<li data-icon="delete" style="background-color:#111;" data-theme="b">
<!--Removed data-rel="close" since there is a bug in jquery mobile https://github.com/jquery/jquery-mobile/issues/1405 -->
Close menu
</li>
<li data-filtertext="Inbox">
<a href="html/dummy.html">
<span class="ui-mail-icon-blue nav-ui-thumbnail"></span>
<span class="ui-li-count ui-btn-up-a ui-btn-corner-all" id="mail#">2</span>
<h1 class="ui-li-headline">Inbox</h1>
<p class="ui-li-desc" id="gotMail">Du har mail!</p>
</a>
</li>
<li data-filtertext="Startsida">
<a href="html/dummy2.html">
<span class="ui-start-icon nav-ui-thumbnail"></span>
<h1 class="ui-li-headline">Startsida</h1>
</a>
</li>
<li data-filtertext="Översikt">
<a href="html/dummy2.html">
<span class="ui-overview-icon nav-ui-thumbnail"></span>
<h1 class="ui-li-headline">Översikt</h1>
<p class="ui-li-desc">Antal elever (2)</p>
</a>
</li>
<!--Nav list divider-->
<li data-role="list-divider" role="heading" class="ui-button ui-li-divider ui-bar-a ui-li-has-count">
Avdelningar
<span id="departments#" class="ui-li-count ui-btn-up-a ui-btn-corner-all">2</span>
</li>
<!--/Nav list divider-->
<!--Auto generated departments-->
<li data-filtertext="Testpage">
<a href="html/dummy.html">
<span class="ui-department-placeholder nav-ui-thumbnail"></span>
<h1 class="ui-li-headline">Avdelning 1</h1>
<p class="ui-li-desc">Antal elever (2)</p>
</a>
</li>
<li data-filtertext="Testpage2">
<a href="html/dummy2.html">
<span class="ui-department-placeholder nav-ui-thumbnail"></span>
<h1 class="ui-li-headline">Avdelning 2</h1>
<p class="ui-li-desc">Antal elever (3)</p>
</a>
</li>
</ul>
</div>
Jquery Code:
function loadPage(page, title) {
$.ajax({
url: page,
async: false
}).done(function (data) {
$("#content").html(data);
$("#titlepage").html(title);
}).fail(function () {
alert("Gick inte att ladda");
});
}
I have done my own ajax loadpage that works but is there a way to use the jquery mobile internal since it feels like a hack.
Conclusion, is there a way to do this better? and how should i load script for each page, using the main-page header to load all of them at once or is there a way to load the script when that content is loaded.
Im using
Jquery jquery-2.1.0
JqueryMobile jquery.mobile-1.4.2
Best Regards
I have done my own ajax loadpage that works but is there a way to use the jquery mobile internal since it feels like a hack.
jQuery Mobile is based on Ajax Navigation; it uses Ajax to retrieve pages, load them into DOM and then initialize them before showing them. This been said, when you use Ajax to load external data, you are doing it the right way.
You can use $.ajax(), .load() or $.get(). However, bear in mind that you need to manually initialize data retrieved - in case it contains jQM widgets - using enhancement methods e.g. .enhanceWithin().
Should I load script for each page, using the main-page header to load all of them at once or is there a way to load the script when that content is loaded.
As you're using Single Page Model, it is safer (maybe you should) load all JS libraries and style sheets in head for each and every page. Nevertheless, jQM will load those links only once on first page's initialization, the rest of pages will be loaded/retrieved via Ajax. jQM loads first data-role=page it finds in any external page and neglects any thing else.
Why to load all JS and style sheets? Is to get jQM working again in case a user refreshes current page. In this case, the current refreshed / reloaded page becomes first page.
Binding events and adding listeners:
When using jQM, you need to stay away from .ready() and/or $(function(){}) and use Page Events. Except for some cases e.g. using External toolbars, panels or popups. Those External widgets need to be initialized manually on first run before page is loaded.
$(function () {
$("#ExternalPanel").panel();
});
As for adding listeners, use pagecreate event.
$(document).on("pagecreate", "#pageID", function () {
$("foo").off("click").on("click", function () {
/* do something */
});
});
You need to remove .off() previous bindings and then .on() add them again, since external pages go through pagecreate whenever they are shown. Because jQM removes external pages from DOM once hidden.
One final point on appending elements to active page. You need to be specific as where you want to add those elements retrieved by Ajax.
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
$.get("URL", function (data) {
$("#foo", activePage).html(data).enhanceWithin();
}, "html");
Demo (1) - Code
(1) Click "inbox"
New to this forum so please be gentle! I have been having issues with jQuery Accordions which are inside a set of tabs. The tabs work fine and so does the Accordion, but... what I really would like is to be able to use a link from within part of the Accordion to go to another part of the Accordion. The Accordion will be used as an instruction manual so therefore in certain sections there will be a bit that basically says to the user to "see this section".
I have checked on here at certain answers such as: jquery ui accordions within tabs and http://jsfiddle.net/9nKZp/1/show/#1| and have checked all over the internet searching for Accordions with anchors as well as Nested Accordions in tabs but I have YET to come across this being done!! Can't really believe that no one has done this!
Here is the code I have so far:
<!-- tabs -->
<link rel="stylesheet" href="/resources/css/tabs.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="/resources/js/tabs.js"></script>
<!-- ENDS tabs -->
<!-- accordion -->
<link rel="stylesheet" href="/resources/css/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- ENDS accordion -->
<script>
$(function () {
$(".accordion").accordion({
collapsible: true,
heightStyle: "content",
active: false,
});
});
</script>
<!-- TABS START -->
<div class="tabs_wrapper">
<!-- 1st new tab design START -->
<div id="new_tabs">
<ul>
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>
<div id="new_tabs_content">
<div id="tab1" class="tab_content" style="display: block;">
<p>
Data on first tab
</p>
</div>
<div id="tab2" class="tab_content">
<h1>Tab2</h1>
<div class="accordion">
<h3><a id="#1">1</a></h3>
<div>
Content of 1
<div class="accordion">
<h3><a id="#1.1">1.1</a></h3>
<div>
Content of 1.1
<div class="accordion">
<h3><a id="#1.1.1">1.1.1</a></h3>
<div>
Content of 1.1.1, please see 2.1.2
</div>
<h3><a id="#1.1.2">1.1.2</a></h3>
<div>
Content of 1.1.2
</div>
<h3><a id="#1.1.3">1.1.3</a></h3>
<div>
Content of 1.1.3
</div>
</div>
</div>
</div>
</div>
<h3><a id="#2">2</a></h3>
<div>
Content of 2
<div class="accordion">
<h3><a id="#2.1.1">2.1.1</a></h3>
<div>
Content of 2.1.1
</div>
<h3><a id="#2.1.2">2.1.2</a></h3>
<div>
Content of 2.1.2
</div>
<h3><a id="#2.1.3">2.1.3</a></h3>
<div>
Content of 2.1.3
</div>
</div>
</div>
</div>
</div>
<div id="tab3" class="tab_content">
<h1>Tab3</h1>
<p>another load of data</p>
</div>
</div>
<!-- 1st new tab design END -->
</div>
<!-- TABS END -->
Please let me know if you require any further code that I am using such as the tabs.js etc.
Please help me! Is this at all possible?!
Many thanks and big hugs if you can help!!:-)
Here is the idea of how to get this one to work.
In the example http://jsfiddle.net/9nKZp/1/show/#1|1 it seems like the tabs linking works, but it only works when you load the page in a new tab, not from link.
You need your own jsfiddle (you already have one v.1), where you should place some example content WITH links from one tab/question to another pair tab/question (or there may have links to the same tab, but another question)! You also should implement the code from the semi-working example to your code.
Then the logic is as follows (examples using jQuery):
(1) Create on click event for each link you place inside the tabs, something like that:
$('#all_tabs_container a').click( function(){
checkInternalLinks();
});
In the function checkInternalLinks()...:
(2) You should check if the link is internal (#...) and if it is in a know format (like: #x|x or #x|x|x or both)
(3) When you validate this link you'll need to make the specific functionality to switch tabs and accordeons.
(4) The needed functionality already exists(!), but on page load, so you'll need to take some time on it and realize what is hapenning, so you can copy the same code to the onclick event function.
If you like the idea, you can start! Even if you can't complete it, I'm sure someone else will help :-)
I'm working on an app for learning purpose.
Theres a header, content and navbar with 2 buttons.
The body="onLoad()" function works really well when the app is starting, but when I click on another button at the navbar I would like to fire a function which is displaying the content for the page. But when I call a function in the new HTML file exactly the same way like on the index file (body="contentLoader()") it doesnt fire!
Heres the code from the index.html
<html>
<head>
<head>
</head>
<body onload="onBodyLoad()">
And now I would like to click on the "Listview"-Button at the navbar, which has a own HTML page, also with
<body onload="onListLoad()">
But my javascript function function onListLoad() { alert("test"); } is not fireing.
I can't figure out why. Isnt this the normal way?
Thanks in advance. Regards, john.
I'm pretty sure the tag within your sub page is stripped out within PhoneGap. Only the main index page will fire its onload method.
From what I gather, you're trying to fire some code as soon as one of your nav tabs is activated. I'm not sure I can tell you the 'proper' way to do it, but here is what I do:
<div data-role="page" id="reports-browse">
<div data-role="header"></div>
<div data-role="navbar">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
</div>
<div data-role="content">
<div id="tab1">This is my first tab</div>
<div id="tab2" style="display:none">This is my second tab.</div>
</div>
<script src="reports.browse.js"></script>
<script>reports_browse.init();</script>
</div>
My init() function then does:
$( document ).bind( "pagebeforeshow", function( prev_page ){
// Populate the two tabs here.
});
Hope this helps.