i am working with liflet API.
i create markers on a map.
when a marker is pressed a popup uppers.
in the pop up there are two buttons.
what i am trying to do is to make the buttons change color when they are pressed.
the problem is that when i try to reset the color when the popup is opened to the original one
the affect happens only when i open the popup a second time.
i checked the popup event and the click event work.
button creation code:
if(!marker.getPopup()){
var tooltipContent = $('<div />');
$.each(marker._myId, function(index,value){
var current = $("<button id=\"router-"+value.properties.name+"\" type=\"button\" style=\"width:100%;color:black\" class='tooltipName' >"+value.properties.name+"</button>")
.click(function(){
handleClickOnSwitch(value);
var button=$("#router-"+value.properties.name);
button.css("background-color","grey");
});
tooltipContent=tooltipContent.append(current);
});
marker.bindPopup(tooltipContent[0],{'closeButton' : false,}).openPopup();
}
on click i change the button coller to grey.
each time the popup is opened i call:
function resetButtonPress(marker){
$.each(marker._myId, function(index,router){
var button=$("#router-"+router.properties.name);
button.css("background-color","RGB(221,221,221)");
});
}
i would appreciate any help.
in the end the root cause of the issue was a race condition.
the button element i was trying to update was not created fast enough and as a result
the color change did not take affect.
my solution to this was to create the buttons in the popup every time it opens.
this way i can circumvent the problem.
Related
I'm playing a game where you have to click a small image
that opens up a window with a wheel on it.
Once that window opens, the HTML changes and the DIV I am looking for is there. In the image above you can see that right now under the START, says 3 gems. Before that it says FREE SPIN.
The first image to open this spin wheel window is a JS function that when clicked some Event is called thus this window opens.
What I am trying to do is create a button ( which I already have) that I can click that checks to see if this START button on this wheel is free or not. The issue is my button only works if this wheel window is open. I am trying to get it to work without it being open. I'm not sure what I'm looking for or how to do this. Looking for help or direction.
This works flawlessly the way I have it but only if I click the little image first to open the spinwheel window but I would like run this without clicking that image first. How would I go about this?
My button and my SpinWheel() function
function SpinWheel() {
// Get the element with the ID "freeforSpin"
var freeforSpin = ById('freeforSpin');
var gemforSpin = ById('gemforSpin');
// If the element with the ID "freeforSpin" exists...
if (freeforSpin) {
// Check if the element with the ID "FreeSp" exists inside "freeforSpin"
var FreeSp = freeforSpin.querySelector("#FreeSp");
if (FreeSp) {
// If it does, call cm.SpinController.doSpin() and update the button text to "FREE SPIN"
cm.SpinController.doSpin();
ById('mySpinButton').innerHTML = "FREE SPIN";
return "FREE SPIN";
}
}
// If the element with the ID "gemforSpin" exists...
if (gemforSpin) {
// Check if the element with the ID "costSp" exists inside "gemforSpin"
var costSp = gemforSpin.querySelector("#costSp");
if (costSp) {
// If it does, update the button text to "3 GEMS TO SPIN" and return "3 GEMS TO SPIN"
ById('mySpinButton').innerHTML = "No More Spins";
return "No More Spins";
}
}
}
<button id="mySpinButton" type="button" onclick="SpinWheel()">CHECK SPIN</button>
I want to create a chrome extension that can simulate reply button of menu which appears when we click on small down arrow button of a message in the chat on WhatsApp Web.
I was able to get DOM element using getElemntsByClassName() in the content script of extension, but unable to simulate mouseover/mouseenter event to display that small arrow button. That button will only appear when mouse hover the message.
var mainWindow = document.getElementsByClassName("z_tTQ")[0]; //get main div which contains msg boxes
var msgs_in_boxes = mainWindow.getElementsByClassName("message-in") //get msg boxes
var msg_in_box = msgs_in_boxes[msgs_in_boxes.length - 1]; //get the last msg box div elem
var msg_in = msg_in_box.getElementsByClassName("_2et95 _3c94e")[0]; //get div inside the msg box
var event = new Event('mouseenter');
msg_in.dispatchEvent(event);
I have tried both mouseenter & mouseover events but unable to display arrow button programmatically.
Also I have dispatched events on msg_in_box instead of msg_in. But not working
Are there any method to accomplish this task by java script in chrome extension? Or are there any similar extension available on the market. My objective is simulate click on reply button of a specific message(Let's say last message) (I want to mention that message programmatically) via chrome extension.
Edit:-
I realized when I disable JS from devtools still that arrow button appearing and disappearing happens when mouse hover. It seems they use CSS to do that instead of onmouseenter of JS. How can I simulate that CSS :hover
I want to close my color box popup on browser's back button click.
I used an iframe and inside the iframe there are many links. When user click on particular link then a color box popup will open.
Currently after opened the popup if user click on back button then popup is not closing.
So i want such a functionality that if user click on back button then popup will be close and also page should not go to back (Disable back button).
I have used the following code but it's not working for me.
<script>
$(document).ready(function() {
function disableBack() { window.history.forward() }
window.onload = disableBack();
window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
});
</script>
Please give me any suggestion to close the color box popup on back button or disable the back button completely.
You should use window.location.hash, and window.onhashchange.
Basically, after popup open, you change hash to something (like window.location.hash = "popup_opend").
Then when user clicks back, that back click will remove the hash you just added.
You just need to handle window.onhashchange to check for that and close the popup.
Of course, hope you don't have any other code that manipulate the hash.
http://geodit.com:8000/test
Here, I have a simple Google Local Search API and Google Maps code.
How do I make it so that when I click the title of a search result, I simulate the clicking of the address? My objective is to make the pop up box appear on the map by clicking the title. I binded it to this:
$(".gs-title").click(function(){
//SIMULATE MOUSE CLICK of the address HERE
$(this).parent().parent().find(".gs-address").click(); // this doesn't work!!
alert("the title was clicked!!"); //this works fine.
return false; //this also works fine. The hyperlink gets disabled because I returned false.
});
I want to be able to click the title, NOT open the link. And then, pop up the box on the map. In other words, I want to treat the the result as a whole.
Solved. I removed the A tags manually.
// Returns the HTML we display for a result before it has been "saved"
LocalResult.prototype.html = function() {
var me = this;
var container = document.createElement("div");
container.className = "unselected";
container.appendChild(me.result_.html.cloneNode(true));
$(container).find('a').replaceWith(function() { return $(this).contents(); });
return container;
}
The Html code is:
<div class="gs-title"><a target="_blank" class="gs-title" href="http://www.google.com/maps/place?source=uds&q=pizza&cid=12855512876323852687">California <b>Pizza</b> Kitchen</a></div>
<div class="gs-address">...
so I think right path coul'd be:
$("a.gs-title").click(function(){
$(this).parent().siblings('.gs-address').click();return false;
});
First of all, here is the site I am working on.
I am trying to get a modal window to pop-up when elements in the Flash are clicked on. Which at this point I have about 90% working when you click on the warrior image. Below is a list of issues I am still trying to solve that I hope you can help me with...
The modal background doesn't fill up
the whole page like it should.
I cannot get the close button to work
I need to set the vidname variable in
both the Flash and Java to load in a
dynamic HTML file. Depending on which
image is clicked on. My naming
convention will probably be something
like vid-1.html, vid-2.html, etc.
If you need to look at the .js file you can view it at /cmsjs/jquery.ha.js
Below is the ActionScript I currently have...
var vidname = "modal.html";
peeps.vid1.onRelease = function() {
getURL('javascript:loadVid(\'' + vidname + '\');');
};
Well I have one for you.
Your current close code is
$('#modalBG, #modalClose').click(function(){
closeModal();
});
If you click the background after a video loads you'll see that the modal does close. The reason your close button does not work is because #modalClose does not exist in the DOM when you are binding to the click function.
You need to either rebind the modalClose element when you modify the DOM or use live. If you use live you just need to change your click code to this:
$('#modalBG, #modalClose').live("click", (function(){
closeModal();
});