This is the command to open an InfoWindow on Google Maps.
google.maps.event.addListener(this, 'click', function () {
open(map, this);
});
Where it says open:
open(map, this);
Obviously, it opens the InfoWindow for THIS marker, but is there an opposite function i can use to make sure all other Markers InfoWindows are closed?
Just make one InfoWindow, not a new one for every marker. If you open the InfoWindow for the new marker, it gets removed from the old one.
In a surrounding scope (eg global):
var myInfo = new google.maps.InfoWindow(...);
in the code where you add your marker:
google.maps.event.addListener(this, 'click', function () {
myInfo.setContent(...); //set marker specific content
myInfo.open(map, this);
});
Related
I'm trying to make a menu where the scene changes when the player clicks a button using the start method. At first, I had it all in the create function with this:
var levelOne = this.add.sprite(200, 400, 'LevelOne').setInteractive();
levelOne.on('pointerdown', function (pointer) {
this.scene.start('play');
});
But this led to an error in which it said that this.scene.start isn't a function.
I looked at a previous example where the method worked, the big difference was that the method was in the update function, so I rewrote my code to have this in the create function:
this.choice = 0;
var levelOne = this.add.sprite(200, 400, 'LevelOne').setInteractive();
levelOne.on('pointerdown', function (pointer) {
this.choice = 1;
//game.settings = {
//gameTimer: 60000
//}
});
And this in the update function:
if (this.choice == 1){
this.scene.start('play');
}
Sadly, this didn't work either and didn't even give an error message. I can't tell what went wrong. Please help.
You have to pass the scene as the context to the event function on(...) (link to the documentation), as the third parameter, so that you can access the scene properties and functions in the event callback.
levelOne.on('pointerdown', function (pointer) {
this.scene.start('play');
}, this); // <-- you have to add "this"
I can't understand in any way.
I need my old application to be cleared.
That is, when I clicked and followed the ajax, some textures that have the same name remain the previous ones, as well as all the properties and others from the previous loading.
if (Object.keys(loader.resources).length) {
// for (var texture in PIXI.utils.TextureCache) {
// var tmp = PIXI.Texture.removeFromCache(texture);
// tmp.destroy(true);
// }
// for (var texture in PIXI.utils.BaseTextureCache) {
// PIXI.utils.BaseTextureCache[texture].destroy(true);
// }
PIXI.utils.BaseTextureCache = PIXI.utils.TextureCache = loader.resources = {};
loader.reset();
app.destroy({
children: true,
texture: true,
baseTexture: true
});
}
Will it be possible to complete the ajax transition application in order to launch a new one with new textures of the same name?
In the download, I tried to add "?Number" to the image address:
let add = function (arr) {
while (!loader.loading) {
for (var i in arr) {
loader.add(i, arr[i] + '?' + new Date().getTime());
}
break;
}
};
But still nothing comes out.
I make the transition through:
$.get(href, function (data) {
//code
});
Everything loads and works fine, except for the pictures.
They hang, and after the transitions, they do not change, but only everything mixes and sometimes we observe it from the previous ones.
Of course, after reloading the page at the current address, everything works as it should, it doesn’t work only on ajax, for some reason the cache is not discarded.
The issue is resolved, everything works, I just forgot to update the variable with resources.
Due to the fact that at the first initialization:
let resource = PIXI.loader.resources;
Which I had in the global area.
Due to the fact that I did not update it, I could not change the textures.
Now, after all the removal and new filling, I substitute again:
resource = PIXI.loader.resources;
And everything began to work as it should.
i have a div that slides out of the screen, loads the new content and slides back.
I use jquery pjax and that part works great:
$('#menu a').on('click', function(event){
event.preventDefault();
var target = $(this).attr('href');
$('li.current').removeClass("current");
$(this).parent().addClass("current");
$(content).transition({left:$(document).width()}, 900, 'out', function() {
$.pjax({
url: target,
container: '#content',
fragment: '#content',
success: function(){
$(content).transition({ left:'0px'}, 900, 'out');
var contentHeight = $('#content').outerHeight(true)+258+$("#footer").outerHeight(true);
if(contentHeight<parseInt($("body").css("min-height"))){
contentHeight = "100%";
}
$(page).stop(true).animate({height:contentHeight}, 1000, "easeOutCubic");
}
});
});
});
But i don't get it do work if the browsers back/forward buttons are used.
I tried different things.
Here i found a nice article but i don't get it: http://artfindertech.wordpress.com/tag/historyapi/
The thing is that the content of the div changes in the moment you click the browser back button.
Then it slides out but not back.
Also the url changes to the previous page for a second but the jumps to the main url of the site.
Here is my trial for popState:
$(window).on('pjax:popstate', function() {
$(content).transition({left:$(document).width()}, 900, 'out', function() {
$.pjax({
container: '#content',
fragment: '#content',
success: function(){
$(content).transition({ left:'0px'}, 900, 'out');
var contentHeight = $('#content').outerHeight(true)+258+$("#footer").outerHeight(true);
if(contentHeight<parseInt($("body").css("min-height"))){
contentHeight = "100%";
}
$(page).stop(true).animate({height:contentHeight}, 2000, "easeOutCubic");
}
});
});
});
I'm trying to do the same thing right now i.e. to get animation functionality onpopstate. The way I see it right now is to:
on menu click call a function which will animate content and fill with the new content the container -
function animation(PageTitle,PageLink,check) {
//check if it is a call from menu and if it is than
//on animation and ajax complete call
if (check) {
setHistory(PageTitle,PageLink); // separate function to call it indimpendently
}
}
as set above, after animation finished call a function regarding window.history.pushState if is a call from menu links -
function setHistory(PageTitle,PageLink) {
window.history.pushState({'ptitle':PageTitle,'plink':PageLink}, PageTitle, PageLink);
}
after that set an onpopstatee function to call the function to the reverse animation and ajax -
window.onpopstate = function(event) {
animation(event.state.ptitle,event.state.plink,false);
}
I have not test it yet but I'm implementing it right now. If it will work I will update this...
UPDATE:
Just to update this and to tell that it works like a charm, as I presumed. An one more thing, for whom it may concern... I figured out that you must call a history.replacestate on original page load in order to have the possibility to go back to the original page with the relative variables and animation.
I have a popup, call 'welcome.html', the thing I would like to do is when the user select a text, and click my plugin, it will use some of the page information, and print back to the welcome.html. For example, the web site title, and the text which the user selected and the url. But how can I pass value to that welcome.html? Thank you.
I do a lot of this in my extension as it mines a lot of data enabling the user to easily copy it to their clipboard.
Since you're looking for a lot less data it's even simpler. When your popup is being loaded you can call the following function to retrieve the information you require;
function getData(callback) {
chrome.tabs.getSelected(null, function (tab) {
var data = {
selection: '',
title: tab.title,
url: tab.url
};
/*
* We can't call content scripts on some pages and the process will get
* stuck if we try.
*/
if (tab.url.indexOf('chrome') === 0 ||
tab.url.indexOf('https://chrome.google.com/webstore') === 0) {
callback(data);
} else {
chrome.tabs.sendRequest(tab.id, {}, function (response) {
data.selection = response.selection;
callback(data);
});
}
});
}
Ensure you pass in a callback function which will be called once all the data has been extracted;
getData(function (data) {
console.log('Title: ' + data.title);
console.log('URL: ' + data.url);
console.log('Selected Text: ' + data.selection);
// Display the data instead
});
As you may have noticed the getData function sends a request to the selected tab. A content script will need to be injected in to the page in order for this to work so be sure you've configured your manifest correctly or injected it programmatically prior to calling getData or it won't work. The script that will need to be injected should resemble the following;
(function () {
chrome.extension.onRequest.addListener(function (request, sender,
sendResponse) {
sendResponse({
selection: window.getSelection().toString()
});
});
})();
This simply returns the currently selected text. One concern is that this data look-up could potentially cause a slight pause while the popup is rendered but you should test this yourself and experiment with it but there are solutions.
This should cover all you need to know so good luck and let me know if you need any further help as I'm aware this could be slightly overwhelming if you're new to Chrome extensions.
I'm not good at JS and I'm having some -I hope- stupid problem I'm not seeing on my code... if you guys could help me out, I'd really appreciate it.
My extension does some stuff with the current tab's URL. It worked ok using the onUpdate event on my background page, setting the tab's URL on a variable and then I used it on a pop-up.
The thing is that if the user starts, selecting different tabs, without updating the URLs my event won't be triggered again... so I'm now also listening to the onSelectionChanged event.
The thing is that there's no "tab" object within the onSelectionChanged event's parameters, so I cannot ask for the tab.url property.
I tried to use the chrome.tabs.getCurrent() method, but obviously I'm doing something wrong... and I reached the limit of my -very little- knowledge.
Here's the code, if you guys could take a look and point me in the right direction, I'll really appreciate it.
<script>
var tabURL = '';
var defaultURLRecognition = [ "test" ];
// Called when the url of a tab changes.
function checkForValidUrl(tabId, changeInfo, tab) {
//THIS IS WHAT'S NOT WORKING, I SUPPOSE
if (tab==undefined) {
chrome.tabs.getCurrent(function(tabAux) {
test = tabAux;
});
}
//
// If there's no URLRecognition value, I set the default one
if (localStorage["URLRecognition"]==undefined) {
localStorage["URLRecognition"] = defaultURLRecognition;
};
// Look for URLRecognition value within the tab's URL
if (tab.url.indexOf(localStorage["URLRecognition"]) > -1) {
// ... show the page action.
chrome.pageAction.show(tabId);
tabURL = tab.url;
}
};
// Listen for any changes to the URL of any tab.
chrome.tabs.onUpdated.addListener(checkForValidUrl);
// Listen for tab selection changes
chrome.tabs.onSelectionChanged.addListener(checkForValidUrl);
</script>
I would do something like this:
function checkForValidUrl(tab) {
//...
}
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
if(changeInfo.status == "loading") {
checkForValidUrl(tab);
}
});
chrome.tabs.onSelectionChanged.addListener(function(tabId, selectInfo){
chrome.tabs.getSelected(null, function(tab){
checkForValidUrl(tab);
});
});