With jQuery Mobile I can't get a popup with google maps loaded.
If I touch id="popupBasic" nothing pops up. Very strange, but if the google map api not is loaded the popup works!
>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Beer Me</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.css" />
<link rel="stylesheet" href="css/datepicker.css" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="js/map.js"></script>
<script type="text/javascript" charset="utf-8" src="markers.js"></script>
<script>
$.mobile.page.prototype.options.domCache = true ;
$.mobile.allowCrossDomainPages = true;
$(document).on('pageshow', '#map', function (event)
{
max_height();
$(document).on('click', '#myposition', function (event){
navigator.geolocation.getCurrentPosition(onSuccess, onError,{'enableHighAccuracy':true,'timeout':20000});
});
});
</script>
<script type="text/javascript" charset="utf-8" src="js/datepicker.js"></script>
<script type="text/javascript" charset="utf-8" src="js/datepicker.mobile.js"></script>
</head>
<body onload="onLoad()">
<div data-role="page" id="map">
<div data-role="header" data-theme="b">
Menu
<h1>Map Header</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>
<div id="map_canvas" style="width:100%;height:100%"></div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#leftpanel" data-role="button" data-inline="true" data-icon="grid" >Date</a></li>
<li>Favs</li>
<li>My position</li>
<li>Open Popup</li>
</ul>
</div><!-- /navbar -->
</div>
</div>
</body>
</html>
Does someone have the same problem? I can't figure it out..
Greetz,
Frank
Working example: http://jsfiddle.net/Gajotres/GHZc8/
I have changed your example, popup will display if you click on a button #myposition.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<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"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script>
$(document).bind("mobileinit", function(){
$.mobile.page.prototype.options.domCache = true ;
$.mobile.allowCrossDomainPages = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="map">
<div data-role="header" data-theme="b">
Menu
<h1>Map Header</h1>
</div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div data-role="popup" id="popupBasic">
<p> This is popup</p>
</div>
<div id="map_canvas" style="width:100%;height:100%"></div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<a href="#leftpanel" data-role="button" data-inline="true" data-icon="grid" >Date</a>
</li>
<li>
Favs
</li>
<li>
My position
</li>
<li>
Open Popup
</li>
</ul>
</div>
<!-- /navbar -->
</div>
</div>
</body>
</html>
CSS :
#popupBasic {
width: 300px !important;
height: 300px !important;
}
Javascript:
$(document).on('pageshow', '#map', function (event) {
max_height();
$(document).on('click', '#myposition', function (event){
navigator.geolocation.getCurrentPosition(onSuccess, onError,{'enableHighAccuracy':true,'timeout':20000});
});
});
function max_height() {
var header = $.mobile.activePage.find("div[data-role='header']:visible");
var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
$.mobile.activePage.find('[data-role="content"]').height(content_height);
}
function onSuccess(position) {
var minZoomLevel = 15;
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
function onError() {
alert('Error');
}
Related
I have a two page (1 file) jQuery mobile page and I want to write some dynamic text on the second page as soon as it loads.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="css/codiqa.ext.min.css" rel="stylesheet">
<link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/codiqa.ext.min.js"></script>
<script src="js/universal-lotto.js"></script>
</head>
<body>
<div data-role="page" data-control-title="Home" id="page1">
<div data-role="content">
<ul data-role="listview" data-divider-theme="b" data-inset="true" id=menu>
<li data-role="list-divider" role="heading">Menu</li>
<li data-theme="c">Help</li>
</ul>
</div>
</div>
<div data-role="page" data-control-title="AnotherPage" id="ViewN" data-back-btn-text="Menu" data-add-back-btn="true">
<div data-role="content">
<div data-controltype="htmlblock" id=printhere>
</div>
</div>
</div>
</body>
</html>
How can I modify the #printhere div? In the file universal-lotto.js I have the following function:
$(document).on('pageshow', '#ViewN' ,function(){
alert('hi');
$('#printhere').html('printthis');
});
The alert comes up when the second page shows but the page itself remains blank.
your lign is invalid here :
<div data-controltype="htmlblock" id=printhere>
</div>
It should be :
<div data-controltype="htmlblock" id="printhere">
</div>
I do not know how to explain this in English;-)
If I choose an option alert displays for every choice I do not know how to stop.
Step 1, choose "aaaa" option eg
1111 alert ...
Step 2, choose option "bbbb" for example
1111 alert ...
2222 alert ...
and so on!
I've tried return, stopPropagation, etc..
It will surely be an easy mistake to correct for you ... :-)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile- 1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$('#myList').on('click', 'li', function(e)
{
var pos = $(this).attr('pos');
$("#myPopup").popup('open');
$('#myPopup').on('click', 'ul li a', function(ev)
{
var popupValue = $(this).attr('info');
alert('option-->' + popupValue);
$('#myPopup').popup('close');
});
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content" class="ui-content">
Choose an option...
<div data-role="popup" id="myPopup">
<ul id="myList" data-role="listview" data-inset="true" style="min-width:250px;">
<li>aaaaaaa</li>
<li>bbbbbbb</li>
<li>cccccc</li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile- 1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$('#myList').on('click', 'li', function(e)
{
var pos = $(this).attr('pos');
$("#myPopup").popup('open');
$('#myPopup').off().on('click', 'ul li a', function(ev)
{
var popupValue = $(this).attr('info');
alert('option-->' + popupValue);
$('#myPopup').popup('close');
});
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content" class="ui-content">
Choose an option...
<div data-role="popup" id="myPopup">
<ul id="myList" data-role="listview" data-inset="true" style="min-width:250px;">
<li>aaaaaaa</li>
<li>bbbbbbb</li>
<li>cccccc</li>
</ul>
</div>
</div>
</body>
</html>
I have to refresh one time the page to load the map.
You can actually have a look in the link below:
http://metartestmobile.netau.net/template/listview.html
When i move this line (
<script src="http://code.jquery.com/jquery-1.11.0-beta2.js"></script> )
But i wanna use that line..
Here's is the file listview.html
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="themes/Bootstrap.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0-beta2.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div data-role="page" id="my-page" >
<div data-role="content" data-theme="a">
<ul data-role="listview" data-inset="true" data-divider-theme="f">
<li data-role="list-divider">Weather</li>
<li data-icon="arrow-r"><a href="map.html" data-transition="flip" >Humidity-Rain</a></li>
</ul>
</div>
</div>
</body>
</html>
and the map.html
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="themes/Bootstrap.css">
<script type="text/javascript">
var infowindow;
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(38.822590,24.653320);
var myOptions = {
zoom: 6,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div data-role="content">
<div id="map_canvas" ></div>
</div>
</body>
</html>
jquery mobile use ajax page load for default.
so change this
a href="map.html" data-transition="flip"
to
a href="map.html" data-transition="flip" rel="external"
then jquery mobile refresh hole page.
In onDeviceReady I'm trying to detect if a network connection is present with navigator.connection.type and if it's not then a div with the offline content is shown, but it's not working. running it on a device (Z10).
My page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone-no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
<title>Our Application</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script src="js/mustache.js"></script>
<script src="phonegap.js"></script>
</head>
<body onload="init()">
<div data-role="page" id="main">
<div data-role="header" class="logo">
<img src="img/logo.png" />
</div>
<div data-role="content">
<ul id="canlist" data-role="listview">
</ul>
New can
</div>
<div data-role="footer" data-theme="c">
<h2 class="offline">Offline Mode</h2>
</div>
</div>
<div data-role="page" id="newcan">
<div data-role="header" class="logo">
<img src="img/logo.png" />
</div>
<div id="candetailcontent" data-role="content">
</div>
<div data-role="footer" data-theme="c">
<p>Snapcan!</p>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
function init() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
alert('ready');
var networkstate = navigator.connection.type;
if(networkstate == "none")
{
$(".offline").css("visibility","visible");
}
}
</script>
</body>
</html>
my index.css:
.offline{
visibility: hidden;
color: #f00;
font-style:italic;
}
If there is no connection then the red"Offline Mode' should be visible but it's not. Any ideas?
I think you should try with cordova's offline eventlistener.
have you tried using the css property "display" on your offline class and either have it set to "none" if online or "" is offline?
I'm fighting with this issue for a long time now and I can't find a proper solution. My goal is to display a Google map in my app. I'm developing my app with jQTouch and PhoneGap framework. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<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" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<!-- INCLUDE CORDOVA -->
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<!-- INCLUDE REMOTE DEBUGGING -->
<script src="http://debug.phonegap.com/target/target-script-min.js#photogap"></script>"
<!-- INCLUDE jQTouch -->
<link rel="stylesheet" href="./js/jqtouch-1.0-b4-rc/themes/css/jqtouch.css" id="jqtcss" />
<link rel="stylesheet" href="./css/index.css" />
<script type="text/javascript" src="./js/jqtouch-1.0-b4-rc/src/lib/zepto.min.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/jqtouch-1.0-b4-rc/src/jqtouch.min.js" charset="utf-8"></script>
<!-- INCLUDE GOOGLE MAP -->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByqhQ9cCaXTKjBi2xEyp_HqQJwDl3YzRo&sensor=true">
</script>
<script type="text/javascript">
// Inicializuj jqTouch
$.jQTouch({
icon: 'jqtouch.png',
statusBar: 'black-translucent',
preloadImages: []
});
</script>
</head>
<body>
<div id="home" class="current">
<div class="toolbar">
<h1>Orionids</h1>
</div>
<ul class="rounded">
<li class="arrow">My Spots</li>
<li class="arrow">View On Map</li>
<li class="arrow">Choose From Library</li>
</ul>
<div id="spot_btn">
Spot Now!
</div>
<p id="quote">„Make a wish…“</p>
</div>
<div id="map">
<div class="toolbar">
<h1>Map View</h1>
<a class="back" href="#">Home</a>
</div>
<div id="map_canvas" style="width:100%; height:100%"></div>
<script>
// Incializuj Google Mapy
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
$('#map').bind('pageAnimationEnd', function() {
initialize();
});
</script>
</div>
</body>
</html>
The problem is that the map won't display no matter what I'm trying. I tried every hint that I found here on Stack Overflow but no luck so far. Any help would be appreciated.
You need to set the height of the container div in px instead of %
<div id="map_canvas" style="width:100%; height:100px"></div>
Try this and the map will show up. Also make sure the initialize method is being called.