Search jQuery

jQuery Forum

Screen name:
terran.brown

terran.brown's Profile

7 Posts

9 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Persistent Navbar Not Working When Google Maps Are On The Same Page
[0Replies]
- 27-Dec-2012 06:08 PM
- Forum: jQuery Mobile
I would like to display Google maps in my app and as many people have found there are problems in doing this. To over come it I refresh the map when the app has loaded hence the javascript.

Further more I have set it to 100% so that the menu looks slightly transparent like an Android app. This same menu structure works fine else where in the app except the page with Google maps on it.

I did think it was some thing to do with Google taking over the screen so I have even tried changing the z-index of the divs with no luck.

The reason for this thinking was that moving the mouse over the menu shows ( using Chrome ) the correct link but for what ever reason the actual touch / click event is not be captured and actioned as a result.

I'd appreciate any thoughts you may have on the problem.

Terran

Javascript
1. $(function () {
2. // To fix the google map display issue
3. // https://forum.jquery.com/topic/google-maps-inside-jquery-mobile
4. // http://stackoverflow.com/questions/3514784/best-way-to-detect-handheld-device-in-jquery
5. // Wek Kit Browser Version Of Code
6. if (navigator.userAgent.match(/Android/) || navigator.userAgent.match(/webOS/) || navigator.userAgent.match(/iPhone/) || navigator.userAgent.match(/iPad/) || navigator.userAgent.match(/iPod/) || navigator.userAgent.match(/BlackBerry/)) {
7. var mapheight = $(window).height() - 263;
8. var mapwidth = $(window).width();
9. $("#map").height(mapheight);
10. $("#map").width(mapwidth);
11. setTimeout("initializeeventsmap()", 150);
12. setTimeout("google.maps.event.trigger(map, 'resize')", 350);
13. //setTimeout("map.setZoom( map.getZoom() )", 170);
14. setTimeout("showResultmapjsonp()", 250);
16. } else { // https://forum.jquery.com/topic/google-maps-inside-jquery-mobile
17. // PC Version Of Code
18. var mapheight = $(window).height();
19. var mapwidth = $(window).width();
20. $("#map").height(mapheight);
21. $("#map").width(mapwidth);
22. setTimeout("initializeeventsmap()", 150);
23. setTimeout("google.maps.event.trigger(map, 'resize')", 350);
24. //setTimeout("map.setZoom( map.getZoom() )", 170);
25. setTimeout("showResultmapjsonp()", 250);
26. };
HTML
1. <div data-role="page" id="eventmap" data-theme="d">
2. <div data-role="header" data-position="fixed" data-type="horizontal" class="ui-bar-androidtopmenubar">
3. <div id="androidnavmenumain3" data-role="navbar" data-theme="d">
4. <ul>
5. <li> <a href="#home" data-theme="d" class="ui-bar-androidtopmenu" data-icon="home"> </a>
7. </li>
8. <li> <a href="#events" data-theme="d" class="ui-bar-androidtopmenu" data-icon="grid"> </a>
10. </li>
11. <li> <a href="#eventmap" data-theme="d" class="ui-bar-androidtopmenu" data-icon="search"> </a>
13. </li>
14. <li> <a href="#settings" data-theme="d" class="ui-bar-androidtopmenu" data-icon="gear"> </a>
16. </li>
17. 
20. </ul>
21. </div>
22. </div>
25. 
26. 
27. <div id="map" style="width:100%%; height:100%%;"></div>
28. <div id="eventmapcontrolsdiv1" data-role="footer" data-position="fixed"
29. data-type="horizontal" class="ui-grid-a ui-bar-androidbottommenubar">
30. <div class="ui-block-a">
31. <div id="followme" data-role="button" data-transition="fade" data-theme="d"
32. data-shadow="false" class="ui-bar-androidbottommenu">Follow Me</div>
33. </div>
34. <div class="ui-block-b">
35. <div id="centermap" data-role="button" data-transition="fade" data-theme="d"
36. data-shadow="false" class="ui-bar-androidbottommenu">Center Map</div>
37. </div>
38. </div>

Persistent Navbar Not Working When Google Maps Are On The Same Page
[0Replies]
- 27-Dec-2012 06:08 PM
- Forum: jQuery Mobile
I would like to display Google maps in my app and as many people have found there are problems in doing this. To over come it I refresh the map when the app has loaded hence the javascript.

Further more I have set it to 100% so that the menu looks slightly transparent like an Android app. This same menu structure works fine else where in the app except the page with Google maps on it.

When on the maps page I am unable to select any of the menu buttons in the nav bar and there for navigate away.... my footer still works.

I did think it was some thing to do with Google taking over the screen so I have even tried changing the z-index of the divs with no luck.

The reason for this thinking was that moving the mouse over the menu shows ( using Chrome ) the correct link but for what ever reason the actual touch / click event is not be captured and actioned as a result.

I'd appreciate any thoughts you may have on the problem.

Terran

EDIT For reference I am using jquery-1.8.2 & jquery.mobile-1.2.0

Javascript
1. $(function () {
2. // To fix the google map display issue
3. // https://forum.jquery.com/topic/google-maps-inside-jquery-mobile
4. // http://stackoverflow.com/questions/3514784/best-way-to-detect-handheld-device-in-jquery
5. // Wek Kit Browser Version Of Code
6. if (navigator.userAgent.match(/Android/) || navigator.userAgent.match(/webOS/) || navigator.userAgent.match(/iPhone/) || navigator.userAgent.match(/iPad/) || navigator.userAgent.match(/iPod/) || navigator.userAgent.match(/BlackBerry/)) {
7. var mapheight = $(window).height() - 263;
8. var mapwidth = $(window).width();
9. $("#map").height(mapheight);
10. $("#map").width(mapwidth);
11. setTimeout("initializeeventsmap()", 150);
12. setTimeout("google.maps.event.trigger(map, 'resize')", 350);
13. //setTimeout("map.setZoom( map.getZoom() )", 170);
14. setTimeout("showResultmapjsonp()", 250);
16. } else { // https://forum.jquery.com/topic/google-maps-inside-jquery-mobile
17. // PC Version Of Code
18. var mapheight = $(window).height();
19. var mapwidth = $(window).width();
20. $("#map").height(mapheight);
21. $("#map").width(mapwidth);
22. setTimeout("initializeeventsmap()", 150);
23. setTimeout("google.maps.event.trigger(map, 'resize')", 350);
24. //setTimeout("map.setZoom( map.getZoom() )", 170);
25. setTimeout("showResultmapjsonp()", 250);
26. };
HTML
1. <div data-role="page" id="eventmap" data-theme="d">
2. <div data-role="header" data-position="fixed" data-type="horizontal" class="ui-bar-androidtopmenubar">
3. <div id="androidnavmenumain3" data-role="navbar" data-theme="d">
4. <ul>
5. <li> <a href="#home" data-theme="d" class="ui-bar-androidtopmenu" data-icon="home"> </a>
7. </li>
8. <li> <a href="#events" data-theme="d" class="ui-bar-androidtopmenu" data-icon="grid"> </a>
10. </li>
11. <li> <a href="#eventmap" data-theme="d" class="ui-bar-androidtopmenu" data-icon="search"> </a>
13. </li>
14. <li> <a href="#settings" data-theme="d" class="ui-bar-androidtopmenu" data-icon="gear"> </a>
16. </li>
17. 
20. </ul>
21. </div>
22. </div>
25. 
26. 
27. <div id="map" style="width:100%%; height:100%%;"></div>
28. <div id="eventmapcontrolsdiv1" data-role="footer" data-position="fixed"
29. data-type="horizontal" class="ui-grid-a ui-bar-androidbottommenubar">
30. <div class="ui-block-a">
31. <div id="followme" data-role="button" data-transition="fade" data-theme="d"
32. data-shadow="false" class="ui-bar-androidbottommenu">Follow Me</div>
33. </div>
34. <div class="ui-block-b">
35. <div id="centermap" data-role="button" data-transition="fade" data-theme="d"
36. data-shadow="false" class="ui-bar-androidbottommenu">Center Map</div>
37. </div>
38. </div>

.empty() And Divs
[1Reply]
- 23-Apr-2012 05:49 PM
- Forum: Using jQuery
What follows are three examples of a parse I do.... the first one works fine but gets longer and longer because of the append.... the second and the third only show the first entry because of the .empty.

As I understand it the last example is the correct way to clear down the old entries before re parsing as it targets the inner divs.

The odd thing is looking at the elements they look the same when presented but I'm assuming formatting is been removed some where.... if it is I cant see it and I've had 2 screens looking :)

Any thoughts ?

TIA

Terran

Works but gets longer because of append
1. $('#eventlist').append($('<div data-role="collapsible" data-collapsed="true">').html('<h3>'+CurrentRoadworks.dataitem.ROADMAINTENANCETYPE+' - '+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FRAMEDPOINT_NAME_DESCRIPTOR_VALUE+'</h3><p>'+CurrentRoadworks.dataitem.NONGENERALPUBLICCOMMENT_COMMENT_VALUE+'</p>Number of Lanes Retricted '+CurrentRoadworks.dataitem.IMPACT_IMPACTDETAILS_NUMBEROFLANESRESTRICTED+'<br/>Expected Impact '+CurrentRoadworks.dataitem.IMPACT_IMPACTONTRAFFIC+'<br/>Expected Delay '+CurrentRoadworks.dataitem.IMPACT_DELAYS_DELAYTIMEVALUE+'<br/>Lat / Long '+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FROM_POINTCOORDINATES_LATITUDE+' / '+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FROM_POINTCOORDINATES_LONGITUDE+'<br/>Valid to '+CurrentRoadworks.dataitem.VALIDPERIOD_ENDOFPERIOD+'</div>'));
When parsing shows first entry only...
1. $('#eventlist').empty.append($('<div data-role="collapsible" data-collapsed="true">').html('<h3>'+CurrentRoadworks.dataitem.ROADMAINTENANCETYPE+' - '+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FRAMEDPOINT_NAME_DESCRIPTOR_VALUE+'</h3><p>'+CurrentRoadworks.dataitem.NONGENERALPUBLICCOMMENT_COMMENT_VALUE+'</p>Number of Lanes Retricted '+CurrentRoadworks.dataitem.IMPACT_IMPACTDETAILS_NUMBEROFLANESRESTRICTED+'<br/>Expected Impact '+CurrentRoadworks.dataitem.IMPACT_IMPACTONTRAFFIC+'<br/>Expected Delay '+CurrentRoadworks.dataitem.IMPACT_DELAYS_DELAYTIMEVALUE+'<br/>Lat / Long '+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FROM_POINTCOORDINATES_LATITUDE+' / '+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FROM_POINTCOORDINATES_LONGITUDE+'<br/>Valid to '+CurrentRoadworks.dataitem.VALIDPERIOD_ENDOFPERIOD+'</div>'));
When parsing shows first entry only...
2. $('#eventlist div').empty();
4. $('#eventlist').append($('<div data-role="collapsible" data-collapsed="true">').html('<h3>'+CurrentRoadworks.dataitem.ROADMAINTENANCETYPE+' - '+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FRAMEDPOINT_NAME_DESCRIPTOR_VALUE+'</h3><p>'+CurrentRoadworks.dataitem.NONGENERALPUBLICCOMMENT_COMMENT_VALUE+'</p>Number of Lanes Retricted '+CurrentRoadworks.dataitem.IMPACT_IMPACTDETAILS_NUMBEROFLANESRESTRICTED+'<br/>Expected Impact '+CurrentRoadworks.dataitem.IMPACT_IMPACTONTRAFFIC+'<br/>Expected Delay '+CurrentRoadworks.dataitem.IMPACT_DELAYS_DELAYTIMEVALUE+'<br/>Lat / Long '+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FROM_POINTCOORDINATES_LATITUDE+' / '+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FROM_POINTCOORDINATES_LONGITUDE+'<br/>Valid to '+CurrentRoadworks.dataitem.VALIDPERIOD_ENDOFPERIOD+'</div>'));

When I Append Collapsable List Seems To Ignore Some Formating
[1Reply]
- 22-Apr-2012 06:13 PM
- Forum: Using jQuery
Hi - I want to check and see if this is even possible.....

Using jquery I am pulling some data and parsing though it via local storage. I believe the syntax is right as its running through each entry quite happily and appending it to the target how ever the additional formatting such as the collapsable list seems to be getting lost.

H3 seems to work and I can see the right <DIV></DIV> which makes me think I can either not do this or I have to kick the page to use the formatting ?

Thanks

Terran

EDIT - I've double checked the data roles for data-role="collapsible-set" ,data-role="collapsible" data-collapsed="true"
1. $('#eventlist').append($('<div data-role="collapsible" data-collapsed="true">').html('<h3>'+CurrentRoadworks.dataitem.ROADMAINTENANCETYPE+'</h3>'+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FRAMEDPOINT_NAME_DESCRIPTOR_VALUE+'<br />'+CurrentRoadworks.dataitem.NONGENERALPUBLICCOMMENT_COMMENT_VALUE+'<br />Expected Delay '+CurrentRoadworks.dataitem.IMPACT_IMPACTONTRAFFIC+'<br />Number of Lanes Retricted '+CurrentRoadworks.dataitem.IMPACT_IMPACTDETAILS_NUMBEROFLANESRESTRICTED+'<br />Expected Delay '+CurrentRoadworks.dataitem.IMPACT_IMPACTONTRAFFIC+'<br />Expected Delay '+CurrentRoadworks.dataitem.IMPACT_DELAYS_DELAYTIMEVALUE+'<br />Lat / Long '+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FROM_POINTCOORDINATES_LATITUDE+' / '+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FROM_POINTCOORDINATES_LONGITUDE+'<br />Valid to '+CurrentRoadworks.dataitem.VALIDPERIOD_ENDOFPERIOD+'</div>'));

jQuery getJSON Site Example
[8Replies]
- 08-Mar-2012 07:07 PM
- Forum: Using jQuery
I used the http://api.jquery.com/jQuery.getJSON/ example as below but I keep getting
SCRIPT1004: Expected ';'
json.php?auth=****&location=52.466702:-1.9167&proximity=200&services=svccurrentplanned_json:svccurrentroadworks_json:svcfutureplanned_json:svcfutureroadworks_json?jsoncallback=jQuery17103466137502484837_1331250778563&_=1331250778918, line 1 character 18

Looking at the code its expecting a ; just after the jsoncallback but that seems wrong to me ? Does any one have any thoughts for a noob ?
1. function showGetResultjsonp(position) {
3. var Lat = position.coords.latitude;
4. var lon = position.coords.longitude;
6. // http://stackoverflow.com/questions/2681466/jsonp-with-jquery
7. // http://api.jquery.com/jQuery.getJSON/
8. var url = "http://www.site.com/json.php?auth=" + auth + "&location=" + Lat + ":" + lon + "&proximity=" + proximity + "&services=" + servicesjson + "";
10. $.getJSON( url + "?jsoncallback=?", null,
11. function(data) {
12. $.each(data.items, function(i,item){
13. $("#eventlist").append(events.text + "<hr />");
14. // $("<img/>").attr("src", item.media.m).appendTo("#images");
15. // if ( i == 3 ) return false;
16. return false;
17. });
18. });
19. };
Thanks In Advance
Terran

Ajax or Json - Testing Locally & Best Practice ?
[2Replies]
- 21-Feb-2012 05:19 PM
- Forum: Using jQuery
Hi - I'm still getting to grips with testing and tool sets as well as coding so what I may be getting here might be easily explainable.

The aim is to simply collect a dynamic file which is created by my server when requested. This file is in a xml format and the plan was to be able to download and cache the file then read from it..... unfortuntly I'm trying to get past the basics :(

So after much research I've decided as I want to go cross domain as this will be a web app and eventually a phone one that JSON is the way to go as AJAX doesnt support cross domain..... which was odd when I found the following:
1. function AjaxError(x, e) {
2. if (x.status == 0) {
3. alert(' Check Your Network.');
4. } else if (x.status == 404) {
5. alert('Requested URL not found.');
6. } else if (x.status == 500) {
7. alert('Internel Server Error.');
8. } else {
9. alert('Unknow Error.\n' + x.responseText);
10. }
11. }
14. function showGetResultajaxxml(position) {
16. var request = $.ajax({
17. type: "GET",
18. url: "localhost/file.xml",
19. dataType: 'xml',
20. crossDomain: 'false',
21. error: AjaxError,
22. success: function(data){
23. var xml = $(data);
24. $('#eventlist').append( EventToUl(xml.children()) );
25. }
27. });
29. }
This BTW does not work for me.... and by that I can track the app right up to the AJAX call but no file request goes out accoridng to the dev tool and there are no errors on the console..... when I used the additonal Ajaxerror all I got was Check your network which to me says theres no real defined error or it cant access it full stop. I've tested with well known feeds and urls to be sure too.

After this fail I lead on to this really simple 101 bit of code from http://jsfiddle.net/simonbrown/BQuBr/:
1. function showGetResultjsonxml(position) {
3. $.get("http://fiddle.jshell.net", function(data) { document.write("Fetching http://fiddle.jshell.net worked"); });
5. }
Unfortuntly I seem to be having the same problems too..... now I've tested this both locally on my machine I'm deving on and I'm wondering for at least the JSON side as I tested the AJAX by uploading the code on line if that is my problem and I'm expecting the code to work but it cant ? My understanding was the JSON should be able to go - cross domain - or is there some thing in my code I'm not doing correct which considering the JSON coding is a direct copy really confusing if the case ?

If any one could advise on best practice ( which this is mostly about ) to download my file locally and cache ( or just simply access when on line ) then allow me to send the data to a xml parse function I would be greatfull.....

Many Thanks

Terran

'xmlservices' is undefined - Ajax Issue
[2Replies]
- 16-Feb-2012 03:11 PM
- Forum: Using jQuery
Hi - I've been trying to use the following code how ever every time I run it I get an error saying 'xmlservices' is undefined - Ajax Issue.

I've got Jquery been called and I cant see any coding issues but yet I'm still having problems ( the joy off been a noob )..... can any one help me ? Thanks
Terran
2. function showGetResultxml(Lat,lng,proximity) {
3. $.ajax({
4. type: "GET",
5. url: "http://www.xxxx/xml.php?auth=" + auth + "&location=" + Lat + ":" + lng + "&proximity=" + proximity + "&services=" + xmlservices + "",
6. dataType: 'xml',
7. success: function(data){
8. var xml = $(data);
9. $('#eventlist').append( EventToUl(xml.children()) );
10. }
11. });
12. }

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend