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/
Related
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.
On my page, overlays are loaded by inserting their content with jQuery and then fading in.
What I want to do is this:
When you click to open an overlay, an URI is loaded (e.g. news/12, where news is the category and 12 is the id of the item to load).
Except, instead of loading it in body, it should be loaded in the overlay.
In other words, I want to achieve something like on facebook, where you open an overlay, the url changes, but the main page stays the same.
I'm guessing you need ajax for this, but I have no idea whatsoever how to do it.
Thanks
It sounds like you want to use the new history.pushState(...) and history.popState(...) browser API.
This SO post might help you out: Change the URL in the browser without loading the new page using JavaScript
Use Boxy. See http://onehackoranother.com/projects/jquery/boxy/tests.html#
AJAX example:
<a href='#' onclick='Boxy.load("test-1.html");'>Test 1</a>
See this question: Ajax - How to change URL by content
I solved it thanks to Lethargy's answer.
.pushState() is exactly what I need to have the URL reflect the contents of the overlay that is dynamically created with jQuery.
With some tweaking around and debugging I managed to get it all working.
Now my overlays (or popups, dialogs, whatever) are search engine ready, and the url is copy-pastable for users :)
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'm working on a webapp for iPad. What I want is provide a "save & quit" option. When the user presses the quit button, I safely update my database and show a screen who thanks the user for using the webapp.
What I want to do now is actually close the webapp. As window.close(); doesn't seems to work I have found a workaround with links.
Clicking on a link in a webapp closes the fullscreen app and opens safari. So far I tried to embed an hidden link in my mage and trigger it with link.onclick(); but it doesn't work, and document.location= doesn't open safari.
Here's the HTML example:
<body onload="leave();">
Modifications saved, goodbye!
<a id="goodbye" href="www.mahsite.com" style="display:none;"> </a>
And the JS:
function leave() {
window.close();//Doesn't work
window.setTimeout(function e(){document.getElementById('goodbye').onclick();},1000);
return true;
}
Can someone give me an idea? I'm aware that the onclick() won't work unless I have a onclick handler attached to my link, but I don't have any other idea.
Try
self.close();
or
self.window.close();
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