I'm creating mobile app with HTML/CSS/JS (phoneap, jquery mobile) and I'm converting code which is here https://build.phonegap.com/apps.
I need to achieve this behaviour:
after clicking on the link, which links on a external page, I need to open a question for selection a browser.
This si my code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="https://www.paypalobjects.com/js/external/dg.js" type="text/javascript"></script>
<script type="text/javascript" src="js/datapicker/jquery.datetimepicker.js"></script>
<script src="js/jPayPalCart.js" type="text/javascript"></script>
<script type="text/javascript" src="js/phonegap-1.2.0.js"></script>
<link rel="stylesheet" href="js/datapicker/jquery.datetimepicker.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.css" />
<script type="text/javascript">
function openDialog() {
window.open('http://apache.org', '_blank', 'location=yes');
}
</script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.custom.css">
<link rel="stylesheet" type="text/css" href="css/jquery.timepicker.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="findShop">
<div data-role="content">
<div class="container" data-role="content" role="main">
<div class="row main-page">
<div class="col-xs-12 title">
Die vielleicht beste Pizza der Stadt!
Open in web browser
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Does anyone know where could be problem
Related
First of all I have seen every single question stating the same issue on Stack and non of them applied to mine
I was building my First PhoneGap App and i want to use jQueryMobile libraries
anyways, the JQuery Styles is not working properly,
My Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
btn1
<p>I Am Now A Mobile Developer!!</p>
btn2
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<script type="text/javascript" src="cordova.js"/>
<script type="text/javascript" src="./js/jquery-1.12.0.min.js"/>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"/>
<script type="text/javascript" src="js/index.js"/>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
And the results are
as you can see the button inline and corner all attributes worked fine but still that is not the expectedP
You didnt reference them properly
Remove the dot. I following the folder structure of where your css files are, your java script files should be here /js not ./js
So reference like this
[code]
[/code]
Found this Datebox example on internet but when I copy the code in a separate html file this doesn't seem to work on any browser. Please suggest how to use datebox and what is the problem with the code?
http://jsfiddle.net/Gajotres/ktbcP/
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<label for="mydate">Some Date</label>
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}'/>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Try this :
<html>
<head>
<title>jQM Complex Demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-fluid960.css">
<script type='text/javascript' src="http://timeago.yarp.com/jquery.timeago.js"></script>
<script type='text/javascript' src="http://imakewebthings.github.com/jquery-waypoints/waypoints.min.js"></script>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"> </script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<label for="mydate">Some Date</label>
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}'/>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
I've a very simple hybrid mobile application developed with Cordova and appFramework.
index.html looks like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and
height=device-height attributes. See https://issues.apache.org
/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1,
maximum-scale=1, minimum-scale=1, width=device-width,
height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/af/main.css" />
<link rel="stylesheet" type="text/css" href="css/af/appframework.css" />
<link rel="stylesheet" type="text/css" href="css/af/lists.css" />
<link rel="stylesheet" type="text/css" href="css/af/forms.css" />
<link rel="stylesheet" type="text/css" href="css/af/buttons.css" />
<link rel="stylesheet" type="text/css" href="css/af/badges.css" />
<link rel="stylesheet" type="text/css" href="css/af/grid.css" />
<link rel="stylesheet" type="text/css" href="css/af/android.css" />
<link rel="stylesheet" type="text/css" href="css/af/win8.css" />
<link rel="stylesheet" type="text/css" href="css/af/bb.css" />
<link rel="stylesheet" type="text/css" href="css/af/ios.css" />
<link rel="stylesheet" type="text/css" href="css/af/ios7.css" />
<link rel="stylesheet" type="text/css" href="css/af/tizen.css" />
<title>Cordova Application</title>
<script type="text/javascript" charset="utf-8"
src="js/vendor/appframework.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/plugins/af.scroller.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/plugins/af.css3animate.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/appframework.ui.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/fade.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/flip.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/pop.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/slide.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/slideDown.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/slideUp.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/plugins/af.slidemenu.js"></script>
<script>
$.ui.ready(function () {
console.log("UI Ready!!!");
});
$(document).ready(function() {
console.log('Document Ready...');
alert('Document Ready...');
});
</script>
</head>
<body>
<div id="afui">
<div id="header">
</div>
<div id="content">
<div data-title="Home" class="panel"
id="main" selected="true">
<span>THIS is the HOME Page!</span>
</div>
<div data-title="Second Page" class="panel" id="second">
</div>
</div>
<nav>
<div class="title">Nav Home</div>
<ul>
<li><a class="icon home mini"
href="#main">Home Link</a></li>
<li><a class="icon mini"
href="#second">Second Link</a></li>
</ul>
</nav>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
This shows up correctly and even the navigation is wired up when opened in Safari or Chrome desktop browsers.
But if I run it in either iOS or Android emulators, I see the alert 'Document Ready' and after that blank page. Home panel is not displayed.
Here is what I do to run the emulators.
cordova emulate ios
cordova emulate android
Even if I open the index.html files directly from the platform builds they show up correctly on the desktop browser.
I'm pretty new to all this so I may be missing steps here. Any help would be appreciated.
You dont need all the fragmented appframework js and css files, you can just include 2 css and 1 js file, here is updated code, it works as cordova app on android, I built Cordova app with Intel XDK.
<!DOCTYPE html>
<html>
<head>
<title>XDK</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="css/af.ui.css" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />
<script type="text/javascript" charset="utf-8" src="js/appframework.ui.min.js"></script>
<script>
$.ui.ready(function () {
console.log("UI Ready!!!");
});
$(document).ready(function() {
console.log('Document Ready...');
alert('Document Ready...');
});
</script>
</head>
<body>
<div id="afui">
<div id="header">
</div>
<div id="content">
<div title="Home" class="panel" id="main" selected="true">
<span>THIS is the HOME Page!</span>
</div>
<div title="Second Page" class="panel" id="second">
</div>
</div>
<nav>
<div class="title">Nav Home</div>
<ul class="list">
<li><a class="icon home mini" href="#main">Home Link</a></li>
<li><a class="icon mini" href="#second">Second Link</a></li>
</ul>
</nav>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
I have main html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<title>Home</title>
<link rel="stylesheet" href="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/Home.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/theme-addon.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body id="content" style="display: none">
<div data-role="page" id="homePage">
<div data-role="header"><div class="ui-title">Home</div></div>
<div data-role="content" style="text-align: center">
<a data-role="button" id="login" class="fullWidth">Login</a>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/Home.js" type="text/javascript" charset="utf-8"></script>
<script src="js/messages.js"></script>
</body>
Then in Home.js:
// Worklight comes with the jQuery framework bundled inside. If you do not want to use it, please comment out the line below.
window.$ = window.jQuery = WLJQ;
function wlCommonInit(){
// Common initialization code goes here
}
$("#homePage").live('pagecreate', function(event,ui) {
$('#login').click(function(){
$.mobile.changePage($('#nextPage.html'));
});
});
When I tap on login button, it gives error $.mobile is undefined on this line:
$.mobile.changePage($('#nextPage.html'));
Is there anyone can give insight what's wrong with my code? I believe I do the right things? In addition, I use 5.0.2.407-developer-edition Worklight version.
Finally I solved this issue by:
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
var jq = jQuery.noConflict();
</script>
<script src="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
and later in js:
jq.mobile.changePage("the.html");
instead of
$.mobile.changePage("the.html");
Worklight is already bundled with jQuery, so you shouldn't add it a second time as you did at the bottom of the HTML. Also, you shouldn't place it at the bottom anyway, rather in the HEAD - remove that line.
Additionally, move the reference to jQuery Mobile to the HEAD a as well.
Using Worklight 5.0.6.1 (the latest version, which you seem not to use) and jQuery Mobile 1.3.1, I created a new project and application, and modified the HTML as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>testapp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/testapp.css">
<script src="jqueryMobile/jquery.mobile-1.3.1.min.css"></script>
<script src="jqueryMobile/jquery.mobile-1.3.1.min.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
<div data-role="page">
testapp
</div>
<script src="js/initOptions.js"></script>
<script src="js/testapp.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
I place the minified .css and .js files in a folder, and referenced them inside the HEAD element.
I added inside the BODY element.
Build All and Deploy
Preview via Worklight Console
Works...
I suggest you start small like the above (including using the latest versions of Worklight and jQuery Mobile), and build on that (working) foundation).
You can get the latest version of Worklight from the Eclipse Marketplace (in Eclipse, look at the Help menu >> Marketplace).
I tried a test file which is working but this file isn't. I also tried validating from w3c and it showed no errors. I also tried pasting
outside jquery ui tabs but still didn't worked out. Could there be any conflict between plugins. And also when i gave absolute path for demo file it worked while relative path didn't. Here's the two file:
This one is working (demo file)-
<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <!-- optional -->
<!--[if lt IE 9]>
<script type="text/javascript" src="../js/excanvas/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="js/spinners/spinners.js"></script>
<script type="text/javascript" src="js/lightview/lightview.js"></script>
<link rel="stylesheet" type="text/css" href="css/lightview/lightview.css" />
<link rel="stylesheet" type="text/css" href="css/main-style.css" />
</head>
<body>
<a href='img/colorful-abstract.jpg' class='lightview' data-lightview-group='example'>
<img src='img/thumbs colorful-abstract.jpg' alt=''/>
</a>
</body>
</html>
Where as this original ones isn't working-
<!DOCTYPE html>
<head>
<title>Rahul Dagli's Portfolio Website</title>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.quicksand.js"></script>
<script type="text/javascript" src="js/jquery-main.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<!--lightview-->
<script type="text/javascript" src="js/spinners/spinners.js"></script>
<script type="text/javascript" src="js/lightview/lightview.js"></script>
<script type="text/javascript" src="js/excanvas/excanvas.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<!--CSS-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/navigation-menu.css" >
<link rel="stylesheet" type="text/css" href="css/main-style.css" />
<link rel="Stylesheet" type="text/css" href="css/jquery-ui-1.8.17.custom.css">
<link rel="stylesheet" type="text/css" href="css/lightview/lightview.css" />
</head>
<body>
<!--main navigation-->
<nav>
<ul id="navigation">
<li class="portfolio"></li>
<li class="about"></li>
<li class="contact"></li>
</ul>
</nav>
<!--main content-->
<div id="sections">
<!--Portfolio page starts-->
<section id="section-portfolio">
<header>
<hgroup>
<h1>Rahul Dagli</h1>
<h2> Web Designer</h2>
</hgroup>
<p>Welcome to my online portfolio. Take a look at my work and find out who I am.</p>
</header>
<!--Tabbed Image Gallery-->
<div id="portfolio-list">
<div id="tabs" class="tabs-bottom">
<ul>
<li>Graphic design</li>
<li>Web design</li>
<li>Flash</li>
<li>3d</li>
</ul>
<div id="tabs-1">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</div>
</section>
<!--Portfolio page ends-->
<!--About page starts-->
<section id="section-about">
</section>
<!--About page ends-->
<!--Contact page starts-->
<section id="section-contact">
</section>
<!--Contact page ends-->
</div>
<a href='img/colorful-abstract.jpg' class='lightview' data-lightview-group='example'>
<img src='img/thumbs-colorful-abstract.jpg' alt=''/>
</a>
</body>
</html>
There's an example folder in the download you could use to start from, it shows a proper installation. Once that works, Lightview should work in the tabs as well.
Also keep in mind that all the Lightview related includes on your page are absolute, not relative like your other includes. So it could be that the files aren't where you expect them to be.