The tooltip displays details about the marker (image) when the cursor hovers on the marker. I want to place buttons inside the tooltip which can have different effects on that map. But I don't understand how to add event listeners for the 'onclick' event of the button.
marker.tooltipHTML = '<center><button onclick=\'alert("hello")\'> button </button></center>';
//marker is an object of MapImage
Only alert() function seems to be working.
How can I add a function to handle the 'onclick' of this button (present in the tooltip)?
Related
I would like to close dropdown button when user click a outside space. How to control it ?
https://stackblitz.com/edit/js-as5io9?file=index.html
You could add click event listener to the window.
When the window is clicked, the listener will set the checked of checkbox to false and close the dropdown menu.
Here is the code:
let checkbox = document.querySelector('#delete-drop-down');
window.addEventListener('click', ()=>{
checkbox.checked = false;
});
checkbox.addEventListener('click', event=>{
event.stopPropagation();
});
event.stopPropagation() stops the click event on checkbox propagate to the window. So that the dropdown menu will not be closed immediately。
Done using Javascript
added some CSS class and to close the dropdown when clicking outside is done by creating an invisible div id (invisible) and by using js changing the class of dropdown such that it becomes invisible.
https://stackblitz.com/edit/js-8qih3q?file=style.scss,index.html,index.js
Frontend noob here, please be nice.
I have a dropdown menu using ui.bootstrap.dropdown. The users of my website are used to copy-paste stuff from this dropdown. In order to do so, they usually click down inside the dropdown zone, select the text they want to copy a little too fast and release the click outside the dropdown zone. With this behaviour, the dropdown closes before the user could copy-paste their selection.
Instead of closing the dropdown on an mouseup event outside of the dropdown zone, could it be a mousedown event that would close the dropdown ?
It all has to do with the auto-close setting. By default, it is set to always. With this setting, the dropdown collapses on any outside mouseup.
To be able to control it more finely, I had to use the auto-close="disabled" setting coupled with is-open="variable.isOpen".
Then, I created an callback on a mouse down event that is outside of the dropdown
$('html').mousedown(function(e) {
if($scope.variable?.isOpen && !e.target?.closest('.classOfDropdown')) {
$scope.variable.isOpen = false;
$scope.$digest()
}
});
I initialized $scope.variable inside the on-toggle callback.
I basically want to hide the tooltip on click anywhere in the chart. For this I have configured tooltip as follows:
tooltip:{
hideDelay: 50000 //So that the tooltip stays open for a long time
}
You can check out the example at:
http://jsfiddle.net/e56KT/16/
Anyone with bright ideas!!!
Updated Question:
Before hiding the tooltip:
After hiding the tooltip:
As you can see the div element si not hiding even after hiding the tooltip by the method you described. In a series chart, if we customize the tooltip with increased width and height, the mouse over on other markers doesn't work as this div element stays on top of those markers.
Your code is actually working. It appears not to though because the hide method honors the hideDelay. If you want it to hide immediately try:
hideTooltip = function(){
chart.tooltip.label.fadeOut();
chart.tooltip.isHidden = true;
}
This is what the hide method does internally.
Finally, if you want it to hide if you click anywhere on the chart then I'd hook both the chart: events: click event and the plotOptions: events: click event.
See updated fiddle here.
I'm trying to work around a webview issue on Android devices using Select drop down menus, using instead radio buttons in a popup to make user selections
What I need though is for the button text to change according to the selection the user has made. I've put togetaher a Fiddle of what I thought would work, but it's not playing ball, and I was wondering if any wiser heads out there could offer some advice.
Fiddle here;
http://jsfiddle.net/vinomarky/gEXhD/
Note: I've currently added some alerts in there when the javascripts fire, but they are not firing, and am not sure why not.
Question 1:
How to change the button text to match the user selection
Question 2:
How to make the radio selection minimize as soon as a user has made a selection, without having to click off the radio
Thanks in advance
you can use jquery click event instead of using onclick attribute
because you use jquery mobile ui, to change button text you should change button text container value not pressure_cands itself
and to hide popup screen when an item selected call click event of popupBasic-screen div
$('#updown1').click(function(){
// to change button label
$('#pressure_cands .ui-btn-text').html('THP');
// call popupBasic-screen click event to hide popup menu
$('#popupBasic-screen').click();
});
$('#updown2').click(function(){
// to change button label
$('#pressure_cands .ui-btn-text').html('FBHP');
// call popupBasic-screen click event to hide popup menu
$('#popupBasic-screen').click();
});
I have a button with a MouseEvent.CLICK listener. The CLICK event is being triggered when the button is pushed, mouse is down while rolled out, then released when rolled in on the button again. I do not want this to happen, the click event should not occur when the button is being dragged.
My flash file contains a large amount of buttons and click listeners, I would like to solve this problem with as little code as possible. What is the simplest solution to this problem?
you need to add event listeners and handlers when they are required and remove them when they are no longer needed. you will use your own logic for your needs, but here's an example:
button.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownEventHandler);
function mouseDownEventHandler(evt:MouseEvent):void
{
evt.currentTarget.addEventListener(MouseEvent.MOUSE_UP, mouseUpEventHandler);
evt.currentTarget.addEventListener(MouseEvent.ROLL_OUT, rollOutEventHandler);
trace("Mouse Down");
}
function mouseUpEventHandler(evt:MouseEvent):void
{
evt.currentTarget.removeEventListener(MouseEvent.MOUSE_UP, mouseUpEventHandler);
evt.currentTarget.removeEventListener(MouseEvent.ROLL_OUT, rollOutEventHandler);
trace("Mouse Click (Mouse Up)");
}
function rollOutEventHandler(evt:MouseEvent):void
{
evt.currentTarget.removeEventListener(MouseEvent.MOUSE_UP, mouseUpEventHandler);
evt.currentTarget.removeEventListener(MouseEvent.ROLL_OUT, rollOutEventHandler);
trace("Roll Out");
}
if you have a lot of buttons which behave the same way, you should create a custom button class of which all of your buttons would be instances.
On mouse down, record the mouse coordinates, do the same on mouse up and compare the two coordinates. If the distance is more than 10px (or whatever you want) then cancel the click (or set some boolean to false that allows the code in the click listener to run).
or
On mouse down, start recording the mouse coordinates, so you know the clip has been moved, then on mouse up, you know if the clip has been moved even if the user places the clip back on exactly the same spot.