I have a webapp used by jquery mobile, there is lots of pages this webapp. also added home screen button its feel like native app fullscreen, so i used common header for each pages, i don't want duplicate header every pages. there is a "Back" button this header, used following codes
<div data-role="header" data-theme="g" data-position="fixed" data-tap-toggle="false">
<a onclick=history.back() data-icon="back" data-direction="reverse" data-role="button">Back</a>
</div>
i used php cookies store function also each pages, that point when user resume this webapp return to previous position...
my problem is when user come back previous position my back button not working, is it possible to fix.? or iPhone not allow this function for webapp.?
Why do you set onclick=history.back() manually?
The framework automatically generates a "back" button on a header when the page plugin's addBackBtn option is true.
Source: http://jquerymobile.com/test/docs/toolbars/docs-headers.html (jump to "Adding Back buttons")
My own experience
I never ran into trouble with automatically generates back buttons on iPhone in my jQuery Mobile projects.
Related
Right now I am developing PhoneGap app all functionality are successfully done which what client need but in my PhoneGap app I am using multiple html pages on click of one button index.html it will naviagte to another html but client need silder look when naviagte one page to another page..
Code is:
<li><a onclick="callFestvialinfo()"><img src="images/festival_info_button.png" width="123" height="123" alt="" /></a></li>
function callFestvialinfo()
{
window.location = "festival_info.html";
}
it will navigate festival_info.html normally but client need silder look from index to festival_info.html and festival_info.html to index when onclick back.
You can check this out. A very light weight solution to page transitions.
http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/
I am new to Jquery mobile I have develop a website that work fine in Iphone safari browser but when i make its home screen shortcut and run it as web app then if i move a step back its work fine but when i move two steps back its not working its refreshes the webpage.
e.g. I have three pages in my website A,B,C when I move from A to B and then going back to A its work fine same as when move from B to C and then going back to B its work fine. But when i move A to B and then C and then going back to B its work fine but when i move to A its refreshes the page rather than getting page from history. My back button code as below
<a href="SearchMembers.aspx" data-rel="back" direction="reverse" id="btnBackMemberDetail"
class="back-button" data-inline="true">Back</a>
Can anybody help me in this regard. Thanks in advance.
try to change href="SearchMembers.aspx" in to href="/"
edit:
<a href="/" data-icon="back" data-rel="back" class="ui-btn-left" data-role="button" data-iconpos="notext" >Back</a>
I use this and this works fine for me.. I use jquery.mobile-1.1.1.min.js
Ok, weird issue:
1) Go here on an iPhone (Safari browser): http://powellcreative.com/our-team/
2) Click any of the team images to get to the team member page
3) Click the back button on the browser
4) The image is disappeared on the Team page now
I know this question is kind of old, but I was looking for a solution to a similar problem and after searching, I found a solution. Hopefully this helps other people with the same problem. The problem is when you give iOS a javascript event like onmouseover or onmouseout it doesn't like it, mainly because when your finger is "mousing over" an element in iOS, you are actually clicking on it, so this is the solution I came up with that seems to reload images after hitting the back button in iOS.
Here it is:
Make sure all images are in their own separate div with a distinctive name.
Example:
<div name="div1"><img src="yourimage" onmouseover="javascript:this.src='yourimage2';" onmouseout="javascript:this.src='yourimage';"></div>
In the javascript head part of your page you want to insert this:
window.onpageshow =
function(event){
if (event.persisted){
//for every div and image you want changed back you can add a loop here to change all at once or just one div by name//
document.getElementById('div1').innerHTML = '<img src="yourimage" onmouseover="this.src="yourimage2";" onmouseout="this.src="yourimage";">';
}
}
This will check for page back since Mobile Safari uses bfcache and reload your image into the div. Hopefully this helps OP or someone else.
I'm building an offline tablet/phone app in HTML5 to collect data remotely in the field where there are no cell towers. It uses the offline application cache manifest to save the pages into the browser. I'm attempting to get it to work in Safari and Android.
Currently there are a multiple separate web pages for my site (index.html, load.html and sync.html). I want to be able to load each page in and run different javascript when each page has loaded.
Originally I had a main index page (which acted as the bootstrap for the application) and was using jQuery's .load() function to load the different page files (only snippets of html) into the main display div when a menu button was clicked. This worked pretty well with the iPhone. However when trying it on Android and the site was already cached and the device was in flight mode so it can't connect to the server, the page would fail silently to load in the HTML from the external page for some reason so I'd get a blank screen. I narrowed it down to jQuery's .load() function failing in Android when loading pages from the cache.
So then I tried keeping the individual pages separate and having all the HTML, JavaScript, CSS includes and header code mirrored on each page (not very efficient). So each page could run standalone by itself. This worked ok in Android and iPhone in the web browser when following a simple href link to load the other pages. However when I go into app mode on the iPhone (i.e. you save the webpage to the home screen so it appears as an actual app icon then you run it from there it appears almost fullscreen apart from the status bar) then click on a menu icon to load sync.html for example it opens the page in Safari instead of staying within the fullscreen 'app' mode.
Is there a way to open separate web pages that should be cached within the fullscreen 'app' mode on iPhone? I don't want the other pages loading up Safari as there's less screen size.
The only other method I can think of is having all the html snippets hidden in divs on the main index page, then showing and hiding the divs depending on which menu button is clicked. This may look cleaner and be faster but just wondering if there's a better way to do it?
For now the cleanest solution I could come up with was this:
HTML:
<section id="pageContent">
<div id="homePage" class="hidden">
<?php include_once 'home.html'; ?>
</div>
<div id="loadPage" class="hidden">
<?php include_once 'load.html'; ?>
</div>
<div id="syncPage" class="hidden">
<?php include_once 'sync.html'; ?>
</div>
</section>
CSS:
.hidden {
display: none;
}
This lets you keep your content pages in separate files. And because the html in those files is all included into the index page on page load all the html gets cached as well. Simply a matter of hiding and showing the various pages now.
Then I used some simple jQuery to show and hide each page and set up some simple JavaScript functions to show each individual page. E.g.
function showSyncPage()
{
$('#pageContent').children().hide(); // Hide all the other divs (other pages)
$('#syncPage').show(); // Show the sync page
}
Then also add those function calls into onclick handlers on your buttons/links to open each page. E.g.
<a class="button" onclick="showSyncPage()">Sync</a>
Now you've got a working navigation system that loads all the pages in iPhone/Android and even in iPhone 'app' mode without loading Safari.
I am building a web page and I have included Facebook's Like button. Works great in all browsers but not in Firefox. When clicked in Firefox, it creates an endless loop of opening and closing a facebook login window. This is a known issue that Facebook isn't looking like it will correct anytime soon.
Can anyone tell me what code I might write to hide the like button (or a div containing the like button) from Firefox only? I've never written code to detect a browser and then have my site function a certain way. Not a javascript guru here. Thanks!
You can do this using the navigator javascript object, but it sounds like you have deeper problems if the facebook like button is causing an endless loop of window loads. You most probably have other errors in your code. The button should work fine in firefox.
Here's how to text for firefox using the navigator object,
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
// user using firefox
}
This code parses the userAgent string, the string that defines the user's browser, of the navigator object. It looks for a string of the format Firefox/x.x or Firefox x.x.
This should work for you
<div id="likeDiv">
my div
</div>
<script>
if (navigator.userAgent.indexOf("Firefox")!=-1)
{
// Remove the element from the dom
var Node1 = document.getElementById('likeDiv');
Node1.removeChild(Node1.childNodes[0]);
}
</script>
Hope this helps