I think it's there in jQTouch but how do I add a full screen welcome image for my iPhone web app developed using jQueryMobile?
The app is a full screen web app and it is already added in the iPhone Homescreen.
This is just a concept but you could try something like this:
Live Example: http://jsfiddle.net/yzvWy/14/
JS
$(function() {
setTimeout(hideSplash, 2000);
});
function hideSplash() {
$.mobile.changePage("#home", "fade");
}
HTML
<div data-role="page" data-theme="b" id="splash" style="background-color: #fff;">
<div class="splash">
<img src="http://jquerymobile.com/demos/1.0a4.1/docs/_assets/images/jquery-logo.png" alt="splash" />
</div>
</div>
<div data-role="page" data-theme="b" id="home">
<div data-role="content">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Overview</li>
<li>Intro to jQuery Mobile</li>
<li>Features</li>
<li>Accessibility</li>
<li>Supported platforms</li>
</ul>
</div>
</div>
</div>
iOS has its propertiary stuff for displaying a splash while app loads. I didn't use it yet (I didn't need that) but here's how they say it can be done:
<link rel="apple-touch-startup-image" href="img/splash.png" />
You might want this too:
<link rel="apple-touch-icon" href="./apple-touch-icon.png" />
See here for more:
http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
Thanks for the help. This didn't work with the current stable release of Jquery Mobile, since it doesn't yet support 1.7. I managed to combine it another solution on the matter and came up with:
$ (function(){
setTimeout(function(){
$.mobile.changePage("#home", "fade");
}, 3000);
});
Thanks!
Related
I am developing an application using worklight framework from IBM in which I use jquery mobile library to code.
Unfortunately, when I use $.mobile.silentScroll to scroll, it has no effect, it does not work.
Has anyone met that issue? In other work, How to scroll page in worklight?
I don't think you can do this with jQuery Mobile's silentScroll, as it basically uses window.scrollTo, and this allows to scroll only within the current viewport (what you currently see on the screen).
Instead I would recommend to use iScroll's various API methods: scrollTo, ScrollToElement or Snap, etc.
I tested the below in Android and it worked.
You'll of course need to adjust it to your application...
common\js\main.js:
var myScroll;
function wlCommonInit(){
myScroll = new IScroll('#wrapper');
}
common\index.html:
<body style="display: none;">
<div id="wrapper">
<div data-role="page" id="page">
<div data-role="content" id="content" style="padding: 15px">
<div id="firstDiv">
<input type="button" value="scroll to the other div" onclick="myScroll.scrollToElement('#secondDiv', '0s');"/>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="secondDiv">
hello
</div>
</div>
</div>
</div>
...
...
</body>
0s means there will be no scroll effect; it will essentially 'jump' to the desired location.
I am new to phonegap. I am trying to implement a simple sliding menu in all pages. How do I get this menu to come on all pages without re-writing the same code on all pages?
Do let me know.
Checkout JQuery Mobile (http://jquerymobile.com) or JQTouch (http://jqtjs.com) for some examples.
If you are using jQuery Mobile Framework,then you can write the below code in the body tag of your html page:-
<div data-role="header" data-tap-toggle="false" data-theme="a" data-position="fixed" id="gs-header">
<h1 id="groupName"></h1>
</div>
<div data-role="panel" data-position="left" data-display="push" data-theme="b" id="nav-panel"></div>
I'm seeking to avoid using this for the splash screen, because it does not work on all devices and for other reasons:
<link rel="apple-touch-startup-image" href="img/splash.png" />
So I'm trying to use this instead and it works fine until it slides into a new page, which is then treated like the splash screen again (e.g. it goes blank when the timer expires - in this case 4 seconds). How can I stop/restrict this behavior, so that changePage remains contained in splash page only?
<body>
<div data-role="page" id="splash">
<div class="splash">
<img src="startup.jpg" alt="startup image" />
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
setTimeout(hideSplash, 4000);
});
function hideSplash() {
$.mobile.changePage("#home", "fade");
}
});//]]>
</script>
</div>
</div>
<div data-role="page" id="home">
<div data-role="header" data-backbtn="false">
<h1></h1>
</div>
<div data-role="content">
</div>
</div>
</body>
Good idea here is what I'm thinking. Use single pages instead of multi page(multiple data-role=page). For index.html or index.php or whatever. Put your splash page. The reason for this I will explain later on.
index.html
<head>
<!-- First include all jquery stuff -->
<script src="app.js"></script><!-- external script because we can just include it in every page -->
</head>
<body>
<div data-role="page" id="splash">
<div class="splash">
<img src="startup.jpg" alt="startup image" />
</div>
</div>
</body>
app.js
$(document).on('pageinit','#splash',function(){ // the .on() method does require jQuery 1.7 + but this will allow you to have the contained code only run when the #splash page is initialized.
setTimeout(function(){
$.mobile.changePage("home.html", "fade");
}, 4000);
});
Ok so I did it this way because lets say you have navigation menu and you want to send people back to home page. You won't have to show the splash page again. You can just link to home.html. Also splitting up your pages helps keep the dom leaner. I hope this helps.
<link rel="apple-touch-startup-image" href="img/splash.png" />
Is indeed only for apple mobile devices.
A real splashscreen should only be there to show you a nice picture while you're waiting. Its goal is not to make you wait for real reason. In your case it's taking 4seconds out of the life of your users just to make it look cool.
I have modified your code and put it in this jsfiddle : you'll see it works now. For the splashscreen to take the full width/height edit the css to remove the margins. I've set the timer to 2s, that's more than enough I think.
I have the following code:
<div data-role="page" id="Page1" >
<!-- Footer here -->
<div data-role="footer" data-position="fixed" data-id="id-footer1">
<div data-role="navbar">
<ul>
<li>Page1</li>
<li>Page2</li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="Page2" >
<!-- Footer here -->
<div data-role="footer" data-position="fixed" data-id="id-footer1">
<div data-role="navbar">
<ul>
<li><a href="#Page1" >Page1</a></li>
<li>Page2</li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page -->
The above codes will work if I use the following scripts. That is, Page 1 will have the Slide effect and Page 2 the Pop effect.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
However, when I used the following, the slide effect and pop effect are gone.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
Seems like the new JQM version has affected the page transition or am I missing something? Can anybody confirm?
Thanks.
Read the transitions section in the announcement of 1.1.0:
Unfortunately, after a ton of work, we’ve determined that it’s not possible to dumb down
page transitions enough to get acceptable performance in Android 2.x, even on a newer device
like a Nexus S running 2.3. After a lot of deliberation, we’ve decided to use a feature test
for 3D transforms to target transitions: if a browser passes, it will see the full range of
transitions. By default, if a browser fails this 3D test, they will fall back to a fade
transition, regardless of the transition specified. All Android 1.x-2.x devices fail this
test but Android 3.x and 4.x pass. The fallback behavior for each transition is completely
configurable if you want to change this behavior.
If your testing browser doesn't support 3D transforms you will get a fade transition.
I'm writing a Html 5 application for mobile devices using jQuery mobile (and Phonegap, but the following is device independent), using one html page that contains various <div data-role="page"... > elements as subpages. To change between one subpage and another I use $.mobile.changePage. Everything works well unless I place a div tag into one of the <div data-role="content"> containers!
Working example:
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.mobile.changePage($('#page2'), {
transition : 'slideup',
reverse : false,
changeHash : true
});
});
</script>
</head>
<body>
<div data-role="page" id="page1" data-theme="a">
<div data-role="content">
Page1
</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="content">
Page2
</div>
</div>
</body>
</html>
Now, after adding something as simple as a closed div tag behind Page1
Page1 -> Page1<div />
$.mobile.changePage still fires - one can see the page2 content for a second - but then shows a blank screen.
This happens in desktop browsers as well as in a smartphone (using Phonegap and adjusting the code).
I really appreciate any kind of idea or hint. Narrowing down this problem and making it reproducible alone cost me hours a valuable livetime because it seemed to unlikely....
Change
Page1<div />
to
Page1</div>
...
Page1<div>test</div>
works too.
Not sure why jqm is having a problem with the trailing / on the empty div.