I am using Phonegap 3.3 and Jquery mobile 1.4 for my app.
I have a link that opens a pop and JQM 1.4 displays the background icon thanks to the css pseudo-class :after, it works on my desktop browser but I can't see the icon nor the ::after in the html on Android (Phonegap).
my HTML :
<div id="blink">Enter <span> size </span>
Learn more:
</div>
<div data-role="popup" id="popupInfo" data-theme="b" style="max-width:350px;">
<p>blabla</p>
</div>
my CSS:
#welcome-page #leveldata .ui-alt-icon.ui-icon-info:after, #welcome-page #leveldata .ui-alt-icon .ui-icon-info:after {
background-image: url("../images/info-custom.svg");
}
And the HTML produced by JQM doesn't have the ::after, see screenshot below :
Can you help ?
Related
I'm trying to implement a jQuery-based image crop function that exports to base64 text. CropIt seems perfect for the job, and works beautifully, UNLESS it's not the first jQuery Mobile page in the list of jQm "pages", that displays by default in the HTML file. If it's not, everything works except for the zoom slider. I've created a jsFiddle to illustrate the problem:
http://jsfiddle.net/f97r3suf/5/
Any help getting the zoom slider to work would be appreciated, thanks! Code attached.
<!-- ********* DEFAULT JQUERY MOBILE PAGE **************** -->
<div data-role="page" id="splash" data-theme="f">
<div data-role="content">
<p>Here's a stripped-down example based on the sample CropIt code on GitHub. The long URL in the external resources list is a "locally" hosted version of Cropit.min.js on Google Drive. Everything else works, including the imageState tag, the drag-to-pan on the image, the image upload and export. Only the zoom slider doesn't work.</p>
Example: CropIt is the second jQm page
<p>If I switch the order of the jQuery Mobile pages, so that the Cropit page is the first (default) page of the HTML instead of this page, the zoom works fine: Example: Cropit is the first jQm page.</p>
</div>
</div>
<!-- ******** UPLOAD PAGE ******* -->
<div data-role="page" id="upload" data-close-btn="none">
<div data-role="content" style="padding:0px">
<!-- content -->
<div class="image-editor">
<input type="file" class="cropit-image-input">
<div class="cropit-image-preview"></div>
<div class="image-size-label">Resize image</div>
<input type="range" class="cropit-image-zoom-input">
<button class="export">Export</button>
</div>
</div>
</div>
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 trying to show a pop up which will close when touched and also keep the underlying page as it was left because it will have open accordions on it. This works in the browser but wont close on android. I'm using android 2.3, jquery mobile and phonegap.
My code is:
<div data-role="page">
<div>
Open Popup
<div data-role="popup" id="popupBasic" data-dismissible="true" data-history="true" data-overlay-theme="c" onclick="closePopup();" >
<p>This is a basic popup.<p>
</div>
</div>
</div>
and:
function closePopup(){
$('#popupBasic').popup('close');
}
Any help would be great.
I have developed an application using Phonegap, jquery jquery-1.6.4 and jquery mobile-1.0.1. Application is working fine on IOS, Android and BlackBerry 10. Now I am trying to port my app for windows 8 phone but $.mobile.changePage("#pageid"); is not working.
My HTML code is:
<div data-role="page" id="emergency_Numbers" class="custom-background-image-college">
<div data-role="header" data-position="fixed" >
<a href="javascript:void(0)" data-role="none" class="custom-button" onclick="goBack()" >Back</a>
<h1>Emergency</h1>
</div>
<div data-role="content" style="padding:5px;">
<ul id="ul_emergency_Numbers" data-role="listview" data-inset="true"></ul>
</div>
</div>
And I am calling from java script :
function displayEmergencyPage() {
var EmregencyNo = "";
EmregencyNo += "<li class='ui-btn ui-bar-f' data-role='list-divider' style='font-size:16px;'>Phone Numbers</li>";
$.each(UIEmergencyObject, function(key, val) {
if(val.enabled == true) {
teleNo = val.number;
EmregencyNo += "<li data-theme='d'><a href='tel:"+teleNo+"' ><label class='modifiedH3text' >"+val.name+"</label><p class='modifiedH4text'>"+val.number+"</p></a></li>";
}
});
$("#ul_emergency_Numbers").html(EmregencyNo);
$.mobile.changePage("#emergency_Numbers");
}
I think there will be some different way to load page in windows 8.
Any help will be appreciated.
I found the solution for this: I changed jquery version to jquery-1.8.2 and jquery mobile version to jquery.mobile-1.3.0 and it worked fine.
$.mobile.changePage as I can recall wont work for jquery 1.6.4,try upgrading jquery and jquery mobile and see if that makes any difference.Thanks
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!