Search jQuery

jQuery Forum

Screen name:
movsky

movsky's Profile

3 Posts

1 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Strange behaviour with jqm and google maps geolocation
[1Reply]
- 22-Mar-2012 07:32 AM
- Forum: jQuery Mobile
Hi all.

I have a really strange problem and I have no clue why this happens. I use google maps api 3 and try to find out my location. the map renders well, but the geolocation never appears... Until I load the geolocation on maps.google.com. When I load my position on their page suddenly it works on my page too. (tested in google chrome (on my phone it seems to work well)). When I close the browser and open it again, same problem appears.

It would be really appreciated if you could find the problem.

I add the code of map relevant stuff, maybe you have an idea, why this happens.

index.html
2. <!DOCTYPE html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">
5. <title>banq mobile</title>
6. <link rel="stylesheet" type="text/css" href="css/jquerymobile.css">
7. <link rel="stylesheet" type="text/css" href="css/datepicker.css">
8. <link rel="stylesheet" type="text/css" href="css/base.css">
9. <script type="text/javascript" charset="utf-8" src="js/phonegap-1.4.1.js"></script>
10. <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
11. <style type="text/css">
12. html { height: 100% }
13. body { height: 100%; margin: 0px; padding: 0px }
14. #map_canvas { height: 100%; }
15. </style>
16. </head>
17. <body>
18. <div data-role="page" id="start">
19. <div data-role="header" data-tap-toggle="false">
20. <h1>banq.de</h1>
21. </div>
22. <div style="display:none" class="loader">
23. <img class="spinner" src="css/images/ajax-loader.png" />
24. </div>
25. <div data-role="content">
26. <div class="ui-grid-b menu-grid">
27. <div class="ui-block-a">
28. <a href="#one">
29. <img src="./img/home_alt.png" alt="home" /><br/>
30. <span>Heute</span>
31. </a>
32. </div>
33. <div class="ui-block-b">
34. <a href="#two">
35. <img src="./img/cal.png" alt="home" /><br/>
36. <span>Kalender</span>
37. </a>
39. </div>
40. <div class="ui-block-c">
41. <a href="#">
42. <img src="./img/globe.png" alt="home" /><br/>
43. <span>Maps</span>
44. </a>
46. </div>
47. <div class="ui-block-a">
48. <a href="#">
49. <img src="./img/pin.png" alt="home" /><br/>
50. <span>Merkzettel</span>
51. </a>
53. </div>
54. </div>
55. </div>
56. </div>
57. <div data-role="page" id="one">
58. <div data-position="fixed" data-role="header" data-tap-toggle="false">
59. <a data-role="button" data-icon="grid" href="#start">Menü</a>
60. <h1>HEUTE</h1>
61. <a data-role="button" data-icon="back" data-rel="back">Zurück</a>
62. </div>
63. <div style="display:none" class="loader">
64. <img class="spinner" src="css/images/ajax-loader.png" />
65. </div>
66. <div data-role="content">
67. <div id="startpage_date_wrap">
69. </div>
70. </div>
71. </div>
72. <div data-role="page" id="two">
73. <div data-role="header" data-tap-toggle="false">
74. <a data-role="button" data-icon="grid" href="#start">Menü</a>
75. <h1>TERMINE</h1>
76. <a data-icon="back" data-role="button" data-rel="back">Zurück</a>
77. </div>
78. <div style="display:none" class="loader">
79. <img class="spinner" src="css/images/ajax-loader.png" />
80. </div>
81. <div data-role="content">
82. <div id="cal"></div>
83. <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"useInline": true, "useInlineHideInput": true, "mode": "calbox", "calStartDay": 1}' />
84. </div>
86. </div>
87. <div data-role="page" id="three">
88. <div data-role="header" data-position="fixed" data-tap-toggle="false">
89. <a data-role="button" data-icon="grid" href="#start">Menü</a>
90. <h1 id="date_change"> </h1>
91. <a data-role="button" data-icon="back" data-rel="back">Zurück</a>
92. </div>
93. <div style="display:none" class="loader">
94. <img class="spinner" src="css/images/ajax-loader.png" />
95. </div>
96. <div data-role="content">
97. <div id="date_wrap">
99. </div>
100. </div>
101. </div>
102. <div data-role="page" id="four">
103. <div data-role="header">
104. <a id="check_con" data-role="button" data-icon="refresh" href="#"> </a>
105. <h1 id="date_hl">KEIN INTERNET</h1>
106. </div>
108. <div data-role="content">
109. Eine Verbindung zum Internet muss aktiv sein, um die App nutzen zu können.
110. </div>
111. </div>
112. <script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
113. <script>
114. //reset type=date inputs to text
115. $( document ).bind( "mobileinit", function(){
116. $.mobile.defaultPageTransition = 'none';
117. $.mobile.defaultDialogTransition = 'none';
118. $.mobile.loadingMessage = false;
119. $.event.special.swipe.horizontalDistanceThreshold = 100;
120. });
121. </script>
122. <script type="text/javascript" charset="utf-8" src="js/jquerymobile.js"></script>
123. <script type="text/javascript" charset="utf-8" src="js/datepicker.js"></script>
124. <script type="text/javascript" charset="utf-8" src="js/banq.js"></script>
125. </body>
126. </html>
map.html:
2. <div data-role="page" class="page-map" style="width:100%; height:100%;">
3. <div data-role="header">
4. <a data-role="button" data-icon="grid" href="#start">Menü</a>
5. <h1 class="map-loc"> </h1>
6. <a data-icon="back" data-role="button" data-rel="back">Zurück</a>
7. </div>
8. <div data-role="content" style="width:100%; height:100%; padding:0;">
9. <div id="map_canvas" style="width:100%; height:100%;"></div>
10. </div>
11. </div>
the map .js stuff:
3. $('.one_date').live('taphold', function(event) {
4. lat = $(this).children('.lat').html();
5. long = $(this).children('.long').html();
6. loca = $(this).children('.where').html();
7. $.mobile.changePage('menu.html', {role: "dialog"});
8. })
10. $('.page-map').live('pageshow', function(event) {
11. $('.map-loc').empty();
12. $('.map-loc').html(loca);
13. height = $('html').height();
14. $('#map_canvas').css('height', height-40);
15. loadMap(lat, long);
16. })
19. function loadMap(l_lat, l_long){
20. var initialLocation;
21. var image = 'img/clientpos.png';
23. var locPos = new google.maps.LatLng(l_lat, l_long);
24. var myOptions = {
25. zoom: 15,
26. center: locPos,
27. panControl: true,
28. zoomControl: true,
29. streetViewControl: false,
30. overviewMapControl: false,
31. mapTypeControl: false,
32. scaleControl: false,
33. mapTypeId: google.maps.MapTypeId.ROADMAP
34. }
35. map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
37. var locMarker = new google.maps.Marker({
38. position: locPos,
39. map: map,
40. title:"Hello World!"
41. });
43. if(navigator.geolocation) {
45. /*
46. * ALL WORKS WELL UNTIL HERE
47. */
49. navigator.geolocation.getCurrentPosition(function(position){
51. /*
52. * IT NEVER REACHES THIS POINT BEFORE MAPS.GOOGLE.COM WASN'T LOADED
53. */
55. var clientPos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
56. var clientMarker = new google.maps.Marker({
57. position: clientPos,
58. map: map,
59. icon: image
60. });
62. var bounds = new google.maps.LatLngBounds();
63. if(clientPos) {
64. bounds.extend(clientPos);
65. }
66. bounds.extend(locPos);
67. map.fitBounds(bounds);
68. }, function(){
69. alert('Geolocation konnte nicht bestimmt werden');
70. });
71. }
72. }

Fixed toolbar - Buttons don't work when scrolled.
[0Replies]
- 06-Mar-2012 11:30 AM
- Forum: jQuery Mobile
I had another thread where I explained strange behaviour of the fixed toolbar. It seems I could fix it. Anyway, the header is fixed and it doesn't disappear as expected. I have some strange behaviour now, when I scroll a little and the header moves my buttons don't work any longer. If I scroll back to the top they begin to work fine again. Anyone else who had this strange behaviour?

I'm testing on Android 2.3.5 compiled with phonegap.

Sourcecode of my header:
2. <div style="height:55px" data-position="fixed" data-role="header" data-tap-toggle="false">
3. <a class="today_btn" data-role="button" href="#"><span><img class="home_img" src="./img/home_active.png" alt="Home" width="30" /></span></a>
4. <h1>HEUTE</h1>
5. <a class="termin_btn" data-role="button" href="#two"><span><img class="cal_img" src="./img/calendar.png" alt="Calendar" width="30" /></span></a>
6. </div>

Troubles with fixed header with jqm and phonegap on Android
[0Replies]
- 05-Mar-2012 05:04 AM
- Forum: jQuery Mobile
I recently updated to version 1.1 of jqm and hoped to get real fixed headers and footers, because in my previous version the header always disappeared and reappeared when scrolling.

I use phonegap to compile the code in android native app. Maybe there is the bug? When i try it on my HTC Wildfire S (Android 2.3.5) the header just stays on top until I tap on the screen (even if i deactivate this option this works). When the header appears it isn't possible to click on the button in it, it just works as another tap and the header disappears again.

I have no idea what I do wrong. I put an example code what have the same issues I wrote.

EDIT: Ah, btw, when I test it in google chrome, it works just perfect...
2. <html>
3. <head>
4. <title>banq mobile</title>
5. <link rel="stylesheet" type="text/css" href="css/jquerymobile.css">
6. <link rel="stylesheet" type="text/css" href="css/datepicker.css">
7. <link rel="stylesheet" type="text/css" href="css/base.css">
8. <script type="text/javascript" charset="utf-8" src="js/phonegap-1.4.1.js"></script>
9. <script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
10. <script>
11. //reset type=date inputs to text
12. $( document ).bind( "mobileinit", function(){
13. $.mobile.page.prototype.options.degradeInputs.date = true;
14. $.mobile.defaultPageTransition = 'none';
15. $.mobile.defaultDialogTransition = 'none';
16. $.mobile.loadingMessage = false;
17. });
18. </script>
19. <script type="text/javascript" charset="utf-8" src="js/jquerymobile.js"></script>
20. <script type="text/javascript" charset="utf-8" src="js/datepicker.js"></script>
21. <script type="text/javascript" charset="utf-8" src="js/banq.js"></script>
22. <script type="text/javascript"> </script>
23. </head>
24. <body>
25. <div data-role="page" id="one">
26. <div data-position="fixed" data-role="header">
27. <a href="#" data-role="button">Home</a>
28. <h1>HEUTE</h1>
29. 
35. </div>
37. <div data-role="content">
38. <span>
39. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
41. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
43. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
45. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
47. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
49. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
51. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.
53. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
54. </span>
55. </div>
56. </div>
57. </body>
58. </html>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend