Currently I have to press a on the top right-hand corner of the map to show my current location (it is the little person in the picture), is there a way for when the map load it automatically shows your location? I attached the code as well and a picture to explain. Thanks, I apologize in advance for my lack of knowledge.
<html>
<head>
<script src="http://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js?key=Kmjtd%7Cluua2qu7n9%2C7a%3Do5-lzbgq"></script>
<script type="text/javascript">
/*An example of using the MQA.EventUtil to hook into the window load event and execute defined function
passed in as the last parameter. You could alternatively create a plain function here and have it
executed whenever you like (e.g. <body onload="yourfunction">).*/
MQA.EventUtil.observe(window, 'load', function() {
/*Create an object for options*/
var options={
elt:document.getElementById('map'), /*ID of element on the page where you want the map added*/
zoom:13, /*initial zoom level of map*/
latLng:{lat:40.735383, lng:-73.984655}, /*center of map in latitude/longitude*/
mtype:'osm' /*map type (osm)*/
};
/*Construct an instance of MQA.TileMap with the options object*/
window.map = new MQA.TileMap(options);
MQA.withModule('geolocationcontrol', function() {
map.addControl(
new MQA.GeolocationControl()
);
});
});
</script>
</head>
<body>
<div id='map' style='width:750px; height:280px;'></div>
</body>
</html>
Based on the documentation, you could try calling activate on the geolocation control after you create it.
If that does not cause a re-center/zoom then you may need to register a handler for the onLocate callback (also in the control). When your callback is called you can manually re-center/zoom the map.
Bear in mind that geolocation can be very inaccurate, doing it automatically will probably annoy users for whom that is the case.
Related
I have an Delphi application that uses TWebbrowser component to automate navigation to another web application we have.
My problem is that sometimes IE shows the infamous 'Are you sure you want to leave this page' message and when this happens, my app can't navigate to another pages unless an user clicks on 'Leave this page' button. I can't edit the website code to remove this warning, unfortunately.
This message is plaguing my app for weeks, and I could not reach to a proper solution anymore. What I did is to keep a background process do manually send a keystroke when this window is show, but this is not a good solution because nobody can use the computer while my app is working.
I saw possible solution for C# in the topic below but I need a Delphi code instead.
Supress the "are you sure you want to leave this page" popup in the .NET webbrowser control
Any help is very, very appreciated.
Thanks :)
This message is shown by the underlying MSHTML engine if the web page handles window.onbeforeunload event. Usually, it's there for a reason, to let the user know his/her input hasn't been saved or submitted yet. The prompt suppression script from the answer you linked doesn't work for cases when the page uses addEventListener("beforeonload", handler) or attachEvent("onbeforeunload", handler). I don't think there's a reliable way of doing this, without resorting to low-level Windows hooks.
[UPDATE] The following script (look for "Inject this script") is a hack which aggressively suppresses the page's own handlers for onbeforeunload event, via setInterval. It should work in 99% of cases, but it still leaves a gap for the page to override onbeforeonload right before navigating away.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<script type="text/javascript">
window.attachEvent("onbeforeunload", function (ev) {
window.event.returnValue = "onbeforeunload via window.attachEvent()";
});
window.addEventListener("beforeunload", function (ev) {
window.event.returnValue = "onbeforeunload via window.addEventListener()";
});
window.onbeforeunload = function (ev) {
window.event.returnValue = "onbeforeunload via window.onbeforeunload";
};
</script>
<script type="text/javascript">
//
// Inject this script
//
(function () {
var onbeforeunloadHandler = function (ev) {
if (ev) {
if (ev.stopPropagation)
ev.stopPropagation();
if (ev.stopImmediatePropagation)
ev.stopImmediatePropagation();
ev.returnValue = undefined;
}
window.event.returnValue = undefined;
}
var handler = null;
var intervalHandler = function () {
if (handler)
window.detachEvent("onbeforeunload", handler);
// window.attachEvent works best
handler = window.attachEvent("onbeforeunload", onbeforeunloadHandler);
// handler = window.addEventListener("beforeunload", onbeforeunloadHandler);
// handler = window.onload = onbeforeunloadHandler;
};
window.setInterval(intervalHandler, 500);
intervalHandler();
})();
</script>
</head>
<body>
Go away
</body>
</html>
To inject this script with Delphi, you'd probably need to resort to low-level WebBrowser/MSHTML COM interfaces, like IWebBrowser2, IHTMLDocument2, IHTMLScriptElement, in a very similar way it's done in the linked answer. With some more efforts, the same can also be done via late binding, using IDispatch::GetIDsOfNames and IDispatch::Invoke only. If you're asking for exact Delphi code, I don't have one.
The other answer you link to handles the browser's Navigated event. In it, it injects a script element into the page and into each frame on the page. That script assigns a new value to window.alert so that when other code on the page calls it, it does nothing.
This code resets the event handler:
var
WrkIHTMLWindow2: IHTMLWindow2;
WrkIHTMLWindow2Disp: IHTMLWindow2Disp;
begin
WrkIHTMLWindow2 := IHTMLDocument2Disp(WrkIWebBrowser2.Document).parentWindow;
if WrkIHTMLWindow2.QueryInterface(IHTMLWindow2Disp, WrkIHTMLWindow2Disp) = S_OK then
if not VarIsNull(WrkIHTMLWindow2Disp.onbeforeunload) then
WrkIHTMLWindow2Disp.onbeforeunload := NULL;
end;
I tested on the Apple device, and when I click on the screen when there is no effect. This is my code. Click on the events of this writing there are questions?
<script>
$(function() {
$('#test').tap(function() {
$('#menuNum').text('1');
})
})
</script>
You need to change few things.
Do not use $(function() { or classic document ready to check for a correct state, they can cause problems with jQuery Mobile. Instead use jQuery Mobile alternative called page events.
Then don't bind tap event like that, use proper modern way of doing that. In your case element must be loaded into the DOM for that kind of binding to work. And because of $(function() { sometimes it can happen that element is still loading when binding is executed. So use it like this:
$(document).on('tap','#test',function() {
$('#menuNum').text('1');
});
This method don't care if element exist or not, it will even work if element is loaded into the DOM after binding process.
Working example: http://jsfiddle.net/Gajotres/SQ7DF/
In the end you want something like this:
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('tap','#test',function() {
alert('Tap');
});
});
I have jQuery UI tabs set up, but a problem that I'm having with links to different pages is that they load all contents of the page into the tab. This includes the footer, header, and other navbars that I don't want in the tab. What if I would only like to load a single ID from that page?
My tabs are set up this way:
<div id="mytabs">
<ul>
<li>Awesome page</li>
<li>Foo</li>
</ul>
</div>
Nothing much going on in the jQuery...
$(function() {
$( "#mytabs" ).tabs();
});
Let's say this is the html of "awesomepage" (that the first link targets):
<html>
<head>
<title>awesome page</title>
</head>
<body>
<div id="header">bla</div>
<div id="awesomeness">awesomeness!</div>
<div id="footer">fdsfd</div>
</body>
</html>
...And I only want the tab to load #awesomeness from the page. How would I go about doing this? I've read into some guides that do that by adding a data-target="#youridhere" attribute to the HTML, but I'm still confused on how to implement the javascript. It seems like this is a convenient solution, as I won't be targeting the same ID in every page. Any clues on how to get the javascript working?
Thanks in advance!
The function that allow to load partial code of the response is the $.load() function.
Unfortunately, the tabs() feature does not use this function but use $.ajax instead.
You can try this solution:
You can try to stop the default processing on the beforeLoad callback and manage your ajax call with the $.load() method.
(base on the 1.9 documentation, you may should adapt)
$('#tabs').tabs({
// Callback run when selecting a tab
beforeLoad: function(event, ui) {
// If the panel is already populated do nothing
if (ui.panel.children().size() > 0)
return false;
// Make your own ajax load (with fragment feature)
ui.panel.load(ui.tab.attr('href') + ' #yourFragment');
// stop the default process (default ajax call should not be launched)
return false;
});
NOTICE: I'm not sure about extracting the URL with ui.tab.attr('href'), check before what object is ui.tab, but it should be easy to retrieve the href parameter.
Good luck
Got the solution :) Using one of the answers as a reference point, the tabs can now load a single element specified in the data-target attribute. Here is the modified version:
$(function() {
$('#tabs').tabs(
{
beforeLoad: function(event, ui) {
if (ui.panel.children().size() > 0)
return false;
ui.panel.load($('a', ui.tab).attr('href') + $('a', ui.tab).attr('data-target'));
return false;
}
});
});
I'm tasked to execute specific page javascript on pagechange in Jquery Mobile (Such as geolocate the user on one page or show a Google map on another page)
Its really not clear how to execute javascript after a pagechange but i'm almost there, i was able to use
$(document).bind('pageinit', function(event){
loadGmaps();
geolocate();
});
But the problem is that this code executes on each page change/page init and if i'm not on a page that has a #map tag, it just executes code for nothing. Worst? Jquery keeps pages loaded in memory but hides them. So if i change page, it can reload the map 16 times in a row for nothing.
I'm really confused as to how you are supposed to bind specific page javascript in a jquery mobile loaded page. I'm lurked all around the web and i'm sure i'm not the only one looking for that specific trick...
Thanks
EDIT
I changed my code to reflect Jasper's solution, and it works fine except for the geolocation:
$(document).on('pageinit', '#wp-post-id-70', function(event){
geolocate();
});
$(document).on('pageinit', '.wp-post-type-spa', function(event){
loadGmaps();
});
The maps load fine on each page i visit that is a spa, but when i load a spa page from a fresh load, if i click on the logo to go back to the home page, it loads the home page and then fires the "geolocate" function but nothing happens in terms of geolocation:
function geolocate()
{
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position){
$('#near_spa').load('?latitude='+position.coords.latitude.toString()+'& longitude='+position.coords.longitude.toString()+' #near_spa > *');
}
);
}else{
alert('Votre navigateur ne supporte pas la géolocalisation ou refuse l\'accès aux données de localisation');
}
}
The code really goes up to the navigator.geolocation.getCurrentPosition, it gets called but then pffff, nothing. If i reload the home page manually with F5, i now get the geolocation request...
EDIT
Never mind that "map" loads fine on each page, it doesn't anymore, probably me and my brain being too tired...
Therefore, the
$(document).on('pageinit', '.wp-post-type-spa', function(event){
loadGmaps();
});
Doesn't load the maps anymore at all and yes, i verified, the pages do feature a wp-post-type-spa class...
If you have code that only runs once per pseudo-page, then use the pageinit event, which only runs once every time a pseudo-page is added to the DOM.
You can also target specific pseudo-pages in your bind call:
$(document).on('pageinit', '#some-map-page', function(event){
loadGmaps();
geolocate();
});
This will only run when the pageinit event fires on an element with the ID of some-map-page. You could for example add a class to each pseudo-page element where you want to run the map code:
<div data-role="page" id="some-map-page" class="map-page">...</div>
Which would work with the following event binding:
$(document).on('pageinit', '.map-page', function(event){
loadGmaps();
geolocate();
});
Notice that I'm using .on() as a delegated event handler, which is very useful when using jQuery Mobile as you can't ever be sure when a pseudo-page exists in the DOM.
In my mobile app, using jQuery Mobile...
I would like to make a simple button execute a simple javascript function on click. No page transitions, nothing special like that.
I understood I can eliminate the page transitions by doing return false or preventDefault()
But the problem is the button sticks with the "active" state, i.e. highlighted blue if you use the general theme. I'm wondering how I can remove that after click (or tap, etc).
Thanks.
You can disable the 'highlighted blue'-state in the 'mobileinit'-event before loading jQueryMobile-script:
<head>
<script>
$(document).bind('mobileinit', function () {
$.mobile.activeBtnClass = 'unused';
});
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
Now, when you click on a link, no class will be added after the click is performed. You will still have the 'hoover' and 'down' classes.
Update:
This question and the hacks suggested are now a bit outdated. jQuery mobile handles buttons quite a bit differently than 3 years ago and also, jQuery mobile now has several different definitions of "button". If you want to do what the OP was looking for, you might now be able to avoid the issue by using this:
Step 1:
<button class="ui-btn myButton">Button</button>
Alternatively, you could also use jQuery mobile input buttons:
<form>
<input value="Button One" type="button" class="myButton">
<input value="Button Two" type="button" class="myButton2">
</form>
Step 2:
Then your standard jquery on callback:
$(".myButton").on("tap", function(e) {
// do your thing
});
If you are using a button or a tab, or whatever, that has the "active" class applied to it (the default is ui-btn-active), the old answer may still be useful to someone. Also, here is a fiddle demonstrating the code below.
Selectively removing active state:
As demonstrated in another answer, you can disable the active state for all buttons on all pages. If that is acceptable for the project in question, that is the appropriate (and simpler) solution. However, if you want to disable the active state for some buttons while preserving active states for others, you can use this method.
Step 1:
$(document).bind('mobileinit', function() {
$(document).on('tap', function(e) {
$('.activeOnce').removeClass($.mobile.activeBtnClass);
});
});
Step 2:
Then add the activeOnce class (or whatever you want to call it - it's a custom class) to the buttons that you don't want to highlight when clicking.
And as is usual when binding anything to mobileinit, be sure you place your bindings - and perhaps better, all your javascript code - below the jQuery script and above the jQuery-mobile script.
<script src="js/jquery.js"></script>
<script src="js/my_script.js"></script>
<script src="js/jquery.mobile.js"></script>
Do NOT set the activeBtnClass to '' as suggested, this will cause errors when closing dialogs and the pageLoading function.
The method described does work, but cannot be set to null, the activeBtnClass variable is used as a selector, so set it to a non-existent class to get the same effect without the error.
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).bind('mobileinit', function () {
$.mobile.activeBtnClass = 'aBtnSelector';
});
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
This works well to remove the highlight from the buttons while keeping the active state on other elements.
you can just do it via css instead of java:
eg: (you get the idea)
#cart #item_options .ui-btn-active, #cart #item_options .ui-btn-hover-d, #cart #item_options .ui-btn-up-d, #cart #item_options .ui-link-inherit{
background:inherit;
color:inherit;
text-shadow:inherit;
}
What I do is force the buttons to revert to inactive state before a page changes.
//force menu buttons to revert to inactive state
$( '.menu-btn' ).on('touchend', function() {
$(this).removeClass("ui-btn-active");
});
If you want to support non touch devices you should add timeout.
$('.btn' ).on('touchend click', function() {
var self = this;
setTimeout(function() {
$(self).removeClass("ui-btn-active");
},
0);
});
I have spent the good part of a day and night finding the answer to this problem mainly occurring on an android running phonegap. Instead of the standard JQM buttons I am using custom images with :active state in CSS. After following the link to the next page, then clicking back, the button would just stay in the :active state. I have tried adding classes and removing classes and various other suggestions and nothing has worked.
So I came up with my own little fix which works a treat and may help anyone else that is sitting here stumped. I simply call this snippet of code on 'pagecontainerchange' using data.toPage[0].id to only call it on the page where the active state stuck is occurring. Just make sure to wrap your buttons in a div, in my case called "themenu".
function ResetMenu() {
var menuHtml = $("#themenu").html();
$("#themenu").empty().html(menuHtml).trigger("create");
}
This works for a button in the JqueryMobile headerTab
<style>
.Foo {
color: #FFF !important;
background: #347b68 !important;
}
</style>
<div id="headerTab" data-id="headerTab" data-role="navbar">
<ul id="header_tabs">
<li>name
</li>
</ul>
</div>