I am trying to get a website that runs fullscreen for all pages, I have looked over here: iPad WebApp Full Screen in Safari and followed that and my index page fills the screen just nicely, but whenever I click a link to another page even though that page is all setup with the meta tags it pulls the chrome bar back in and all the alignment goes out.
There must be a way or is that a limitation of safari that will be fixed in a later revision.
I have written a jQuery plugin for this exact purpose: https://github.com/mrmoses/jQuery.stayInWebApp
Include the plugin somehow , then run it like so:
$(function() {
$.stayInWebApp();
});
By default it will attach to all <a /> elements. You can pass a different selector to attach it to specific links. For example, $.stayInWebApp('a.stay'); will attach to all links that have class="stay"
Because its so small, I usually just copy the minified version into one of my other external javascript files to include it, rather than having to add another external js reference.
Also available on plugins.jquery.com
You can try something like this:
if ((navigator.userAgent.indexOf('iPad') != -1)) {
// for standalone (app) fulscreen mode
if (window.innerHeight == 748 || window.innerHeight == 1004) {
var a = document.getElementsByTagName("a");
for (var i = 0, len = a.length; i < len; i++) {
if (a[i].getAttribute("href");) {
a[i].onclick = function() {
window.location = this.getAttribute("href");
return false;
}
}
}
}
}
Related
I have a jQuery mobile panel which slides in from the side, it works great.
But lets say you have a login page, that redirects to a main page with a panel. Now if the user opens the panel, and then clicks the back button, he expects the panel to close. But instead the browser navigates back to the login page.
I´ve tried adding something to the url:
window.location.hash = "panelOpen";
But that just messes up the jQuery mobile history state pattern. I´ve also tried to listen to the navigate event, and prevent it if a panel is open:
$(window).on('navigate', function (e, hans) {
var panels = $('[data-role="panel"].ui-panel-open');
if (panels&&panels.length>0) {
e.preventDefault();
e.stopPropagation();
$('#' + panels[0].id).panel('close');
return false;
}
});
This kind of works, except that the url is changed, and I cannot grab the event that changes the url. Furthermore, it also messes up the jQuery mobile history pattern.
So how does people achieve this expected 'app-like' behaviour with a jQuery mobile panel; open panel > history back > close panel. And thats it.
Thanks alot!
Updated
Instead of retrieving current URL from jQuery Mobile's history, It is safer to retrieve it from hashchange event event.originalEvent.newURL and then pass it to popstate event to be replaceState() with that URL.
Instead of listening to navigate, listen to popstate which fires before. The trick here is manipulate both browser's history and jQuery Mobile's history by replaceState() and reload same page without transition.
var newUrl;
$(window).on("hashchange", function (e) {
/* retrieve URL */
newUrl = e.originalEvent.newURL;
}).on("popstate", function (e) {
var direction = e.historyState.direction == "back" ? true : false,
activePanel = $(".ui-panel-open").length > 0 ? true : false,
url = newUrl,
title = document.title;
if (direction && activePanel) {
$(".ui-panel-open").panel("close");
$(".ui-header .ui-btn-active").removeClass("ui-btn-active");
/* reload same page to maintain jQM's history */
$.mobile.pageContainer.pagecontainer("change", url, {
allowSamePageTransition: true
});
/* replace state to maintain browsers history */
window.history.replaceState({}, title, url);
/* prevent navigating into history */
return false;
}
});
This part is meant to maintain same transition used previously as transition is set to none when reloading same page.
$(document).on("pagebeforechange", function (e, data) {
if (data.options && data.options.allowSamePageTransition) {
data.options.transition = "none";
} else {
data.options.transition = $.mobile.defaultPageTransition;
}
});
Demo - Code
I am a little bit late on the party, but i had recently the same requirements and i would like to share how i did it. So, i extended the requirement in the original question to Panels, Popups and Pages:
...an expected 'app-like' behaviour, history back > close
whaterver is open. And thats it.
In .on("panelopen"), .on("popupafteropen") and .on("pagecontainershow") i simply add another entry to the window history, by using the HTML5 API (https://developer.mozilla.org/en-US/docs/Web/API/History_API) (I believe there is no need to use the JQM navigate browser quirks for that):
window.history.pushState({}, window.document.title, window.location.href);
After that, i'm using more or less Omar's function to intercept the popstate event:
$(window).on("popstate", function (e) {
var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
var pageOpen = (pageId != "page-home");
var panelOpen = $(".ui-panel-open").length > 0;
var popupOpen = $(".ui-popup-active").length > 0;
if(pageOpen) {
$.mobile.pageContainer.pagecontainer("change", "#page-home", {reverse: true});
return false;
}
if(panelOpen) {
$(".ui-panel-open").panel("close");
return false;
}
if(popupOpen) {
$(".ui-popup-active .ui-popup").popup("close")
return false;
}
});
As you see, the is just only one level to the home-page, but this can be easily extended by using JQM history implementation to get the previous page:
var activeId = $.mobile.navigate.history.activeIndex;
var jqmHistory = $.mobile.navigate.history.stack; // array of pages
and use pagecontainer to change to the active entry - 1.
As last note, this works well also by completely disabling the built-in JQM Ajax navigation system:
/* Completely disable navigation for mobile app */
$.mobile.ajaxEnabled = false;
$.mobile.loadingMessage = false;
$.mobile.pushStateEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.changePage.defaults.changeHash = false;
$.mobile.popup.prototype.options.history = false;
(Tested in Browser, on real Android and iOS devices)
Is there any way to handle back button (device backbutton) as default functionality to move back page? I need to implement the same functionality on back button goes to previous page. If there is no previous page (first page) it exit the application. Is this possible in PhoneGap?
I also need to pop page before going to push another page is this posible in jQuery?
Checking window.location.length would be the easiest way to determine if you're on the first page, but this isn't available in Phonegap.
But since you're using JQM, you can either use the navigate event as Omar suggests or could manually count the number of pages shown and the number of pages gone back (same thing) and use this to determine if the first page is being shown and whether to exit the app. Something like this would work:
var pageHistoryCount = 0;
var goingBack = false;
$(document).bind("pageshow", function(e, data) {
if (goingBack) {
goingBack = false;
} else {
pageHistoryCount++;
console.log("Showing page #"+pageHistoryCount);
}
});
function exitApp() {
console.log("Exiting app");
navigator.app.exitApp();
}
function onPressBack(e) {
e.preventDefault();
if(pageHistoryCount > 0) pageHistoryCount--;
if (pageHistoryCount == 0) {
navigator.notification.confirm("Are you sure you want to quit?", function(result){
if(result == 2){
exitApp();
}else{
pageHistoryCount++;
}
}, 'Quit My App', 'Cancel,Ok');
} else {
goingBack = true;
console.log("Going back to page #"+pageHistoryCount);
window.history.back();
}
}
function deviceready() {
$(document).bind('backbutton', onPressBack);
}
$(document).bind('deviceready', deviceready);
As for the second part of your question:
Secondly i need to pop page before going to push another page is this
posible in jquery ?
It's not clear what you're asking here. Do you mean you want to show some kind of popup content like a dialog between every page change? Please clarify then I can help you :-)
If a user visits my websites example, from Safari Mobile how could I place there a blank page that says "Add To Homescreen."? Once added it would show different content.
You'll want to check two things. First, is it running on an iOS device? Second, is window.navigator.standalone == true?
window.navigator.standalone is primarily used by Webkit browsers to indicate the app is in fullscreen (or standalone) mode. Plenty of devices (like phones running Android), support this property, but don't have the option to 'Add to Homescreen' like iOS devices do, so you need to check both.
Demo:
Javascript:
function isIOS() {
var userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test( userAgent );
};
function isStandalone() {
return ( isIOS() && window.navigator.standalone );
};
window.onload = function () {
if( isStandalone() || !isIOS() ) { //either ios+standalone or not ios
//start app
} else {
//display add to homescreen page
};
};
Check window.navigator.standalone.
Slight slight different code, based on #ThinkingStiff solution, and this other question on this Post, to support IOS7 detection to provide CSS interface to add more padding-top in case of transparent app title.
isIOS7 = function() {
return navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i);
};
isStandaloneAndIOS7 = function() {
return isIOS7() && window.navigator.standalone;
};
if (isStandaloneAndIOS7()) {
body = document.getElementsByTagName("body")[0];
body.className = body.className + " standalone";
}
I am using wall.plasm.it and would like to use slimbox to open the images in fullscreen http://www.digitalia.be/software/slimbox
But when I add the slimbox script to my website and click on an image, it just opens the image and redirects me to the image on the server but doesnt start slimbox
Ah, so it seems you would have to do something like the following:
Use wall.setCallOnUpdate( myFunctionUpdate ); (this) to update all newly generated images so that they have the rel=lightbox attribute set.
Reinitialize slimbox.
--OR--
You could simply use the CallOnUpdate to directly enable the slimbox on items using the API
I think you need to use Event Delegation - this is how I got my wall working with lightbox. I called this after the initWall() method and also the changeOnUpdate() so the new events would be added.
var boundClicker;
$$('div.tile a').each(function(button) {
var linkDest = button.get('href');
var title = button.get('data-title');
var type = button.get('rel');
var clicker = function(event)
{
event.stop();
Mediabox.open(linkDest, title, '470 290');
};
boundClicker = clicker.bind(button);
button.addEvent('click', boundClicker);
});
Add a "click" event handler and use the getMovement function.
items.each(function(item) {
item.addEvent("click",function(e){
if( wall.getMovement() ){
e.stop();
}
else {
Mediabox.open(...);
}
}); }
Firefox has a native notification box system:
https://developer.mozilla.org/en/Code_snippets/Alerts_and_Notifications#Using_notification_box
I'd like to use this system in a way that it appears in all opened tabs when it is supposed to appear. The code I have only warns you in the currently opened tab.
var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor).getInterface(Components.interfaces.nsIWebNavigation).QueryInterface(Components.interfaces.nsIDocShellTreeItem).rootTreeItem.QueryInterface(Components.interfaces.nsIInterfaceRequestor).getInterface(Components.interfaces.nsIDOMWindow);
var nb = mainWindow.gBrowser.getNotificationBox();
//...
outdatedNotification = nb.appendNotification("Your information outdated",
'outdate-warn',
'chrome://checksistem/skin/checksistem.png',
priority, buttons);
Each tab has it's own notification box. You just need to loop over all the browsers and add the notification to each one. One thing you should know is the gBrowser.getNotificationBox can take a browser element:
http://mxr.mozilla.org/mozilla-central/source/browser/base/content/tabbrowser.xml#337
If you don't pass a browser, the code returns the notification box for the active tab.
Try this:
var browsers = mainWindow.gBrowser.browsers;
for (var i=0; i<browsers.length; i++) {
var nb = mainWindow.gBrowser.getNotificationBox(browsers[i]);
outdatedNotification = nb.appendNotification("Your information outdated",
'outdate-warn',
'chrome://checksistem/skin/checksistem.png',
priority, buttons);
}