We Keep Coding

How to terminate map.on() function for Mapbox?

I used the Mapbox JS API for showing coordinates. This is the link of the document: https://docs.mapbox.com/mapbox-gl-js/example/mouse-position/
I have two buttons. After I click the first one, when the mouse is hovering the map, it shows the coordinates.
What I want to do is that after I click the second button, the previous running function can terminate. Can you help me on that?
function showCor() {
map.on('mousemove', function (e) {
document.getElementById('coord-info-lat').innerHTML =
JSON.stringify(e.lngLat.lat.toFixed(5));
document.getElementById('coord-info-lng').innerHTML =
JSON.stringify(e.lngLat.lng.toFixed(5));
});
}
function notShowCor() {
// Please help me here.
}

Immediately i can think of 2 options that might help you;
1.Change the html to equal ""
function notShowCor() {
map.on('mousemove', function (e) {
document.getElementById('coord-info-lat').innerHTML = "";
document.getElementById('coord-info-lng').innerHTML = "";
});
}
Set both elements to have opacity 0 (Though it would technically still be running)
Assuming you had CSS styles as follows:
#coord-info-lat, #coord-info-lng {
opacity:0;
}
#coord-info-lat.shown, coord-info-lng.shown {
opacity: 1;
}
function showCor() {
map.on('mousemove', function (e) {
var lat = document.getElementById('coord-info-lat');
var lng = document.getElementById('coord-info-lng');
lat.innerHTML = JSON.stringify(e.lngLat.lat.toFixed(5));
lng.innerHTML = JSON.stringify(e.lngLat.lng.toFixed(5));
lat.className = "shown";
lng.className = "shown";
});
}
function notShowCor() {
document.getElementById('coord-info-lat').className = "";
document.getElementById('coord-info-lng').className = "";
}
You could also do a combination of the 2

I solved the problem by setting an 'isActive' flag. Here is my code.
let isActive = true;
//function to show the position
function showCor() {
isActive = true;
map.on('mousemove', function (e) {
if (isActive) {
document.getElementById('coord-info-lat').innerHTML =
JSON.stringify(e.lngLat.lat.toFixed(5));
document.getElementById('coord-info-lng').innerHTML =
JSON.stringify(e.lngLat.lng.toFixed(5));
}
});
}
//function to clear the info and terminate the function.
function notShowCor() {
isActive = false;
document.getElementById('coord-info-lat').innerHTML = 'N/A';
document.getElementById('coord-info-lng').innerHTML = 'N/A';
}
Please advise if you have better solutions. Thank you.

jquery .hover() with else if statement

I want to put a little delay for onmouseout event for a group of sub items in a drop down menu. But I don't want to use css transitions.
I set it with .hover() and setTimeout method but I wanted to put it only for a specific elements in menu - in this case just for sub items so I used if else statement for them. I have no idea why this if else statement does't work.
Here is my javascript code:
var selectors =
{
element: '.main-menu li:has(ul)'
}
var opacityWorkaround = function ($element, value) {
$element.css('opacity', value);
};
var getAnimationValues = function (visible) {
var result = {
visibility: visible
};
result.opacity = visible === 'visible' ? 1 : 0;
};
var mouseActionHandler = function ($element, visible, opacityValue) {
$element
.stop()
.css("visibility", 'visible')
.animate(getAnimationValues(visible),
3000,
function () {
$(this).css("visibility", visible);
opacityWorkaround($(this), opacityValue);
});
};
var onMouseIn = function () {
var $submenu = $(this).children("ul:first");
if ($submenu) {
mouseActionHandler($submenu, 'visible', 1);
}
};
var onMouseOut = function () {
var $submenu = $(this).children("ul:first");
var $global = $('.global').children('ul');
if ($submenu) {
mouseActionHandler($submenu, 'hidden', 0);
} else if ($global) {
setTimeout(function() {
mouseActionHandler($global, 'hidden', 0);
},1500);
}
};
$(selectors.element).hover(onMouseIn, onMouseOut);
I put 1500ms delay and the $global variable is referring to sub items in menu that I want to make disapear with that delay. I wanted to achieve this when user move mouse cursor out of 'some items >' tab.
Here is my fiddle example.
http://jsfiddle.net/PNz9F/1/
Thanks in advance for any help!

In the example you have in your question $submenu always has a value so the else if statement is never run. You can check for a class instead.
var timeout;
var $submenu = $(this).children("ul:first");
var $global = $('.global').children('ul');
if ($(this).hasClass('menu-item')) {
mouseActionHandler($submenu, 'hidden', 0);
mouseActionHandler($global, 'hidden', 0);
clearTimeout(timeout);
} else if ($(this).hasClass('global')) {
timeout = setTimeout(function() {
mouseActionHandler($global, 'hidden', 0);
},1500);
}

you should be able to just use the :hover selector in your code to check whether the user is hovering over the element or not and run code accordingly

JQuery slide wait variable not setting

I am confused as to why this is not working, please could someone point me in the right direction? I have wrote some JQuery to slide down a submenu. However when moving the mouse around the menu it will fire thousands of events I am trying to have it wait for a hide to finish before doing another slidedown. However this does not seem to work:
$("li.title").children('ul').hide();
var hidden = true;
$("li.title").hover(
function() {
if (hidden == true){
var height = $(this).children('ul').height() + $(this).height();
$(this).height(height);
$(this).children('ul').slideDown();
var hidden = false;
}
},
function() {
$(this).height(25);
$(this).children('ul').hide(function() {
var hidden = true;
});
}
);

Remove var from your hidden variable within the callback functions in hover. You're reassigning those variables locally, so its not listening to the global hidden variable.
Change this:
var hidden = false;
to this:
hidden = false;

You need to remove var. The problem is you are creating a new instance of hidden scoped to your callback functions and not seeing the global hidden.
$("li.title").children('ul').hide();
var hidden = true,
myTimeout;
$("li.title").hover(
function() {
clearTimeout(myTimeout);
myTimeout = setTimeout(function(){
if (hidden == true){
var height = $(this).children('ul').height() + $(this).height();
$(this).height(height);
$(this).children('ul').slideDown();
hidden = false; //Removed var here
}
},100);
},
function() {
clearTimeout(myTimeout);
myTimeout = setTimeout(function(){
$(this).height(25);
$(this).children('ul').hide(function() {
hidden = true; //and here
});
},100);
}
);

Panel Visibility via JS

The tutorial at http://www.asp.net/web-forms/tutorials/ajax-control-toolkit/getting-started/creating-a-custom-ajax-control-toolkit-control-extender-vb gives a nice example of a custom extender based on a textbox and a button. Basically the button remains disabled until at least one character is typed into the textbox. If the text is removed from the textbox the button is disabled again.
I am trying to modify this so that the extender is based on a textbox and panel. Again I want the panel to become visible when text is present in a textbox.
This is how I amended code...
Type.registerNamespace('CustomExtenders');
CustomExtenders.ShowHidePanelBehavior = function (element) {
CustomExtenders.ShowHidePanelBehavior.initializeBase(this, [element]);
this._targetPanelIDValue = null;
}
CustomExtenders.ShowHidePanelBehavior.prototype = {
initialize: function () {
CustomExtenders.ShowHidePanelBehavior.callBaseMethod(this, 'initialize');
// Initalization code
$addHandler(this.get_element(), 'keyup',
Function.createDelegate(this, this._onkeyup));
this._onkeyup();
},
dispose: function () {
// Cleanup code
CustomExtenders.ShowHidePanelBehavior.callBaseMethod(this, 'dispose');
},
// Property accessors
//
get_TargetPanelID: function () {
return this._targetPanelIDValue;
},
set_TargetPanelID: function (value) {
this._targetPanelIDValue = value;
},
_onkeyup: function () {
var e = $get(this._targetPanelIDValue);
if (e) {
var visibility = ("" == this.get_element().style.value);
e.visibility = 'visible';
}
}
}
CustomExtenders.ShowHidePanelBehavior.registerClass('CustomExtenders.ShowHidePanelBehavior', Sys.Extended.UI.BehaviorBase);
When run the panel will not appear. No errors are produced.
Where have I gone wrong...

Try this code:
_onkeyup: function () {
var panel = $get(this.get_TargetPanelID());
if (panel) {
var visibilityValue = ("" == this.get_element().value) ? "hidden" : "visible";
panel.style.visibility = visibilityValue;
}
}

Toggle Mute Javascript Function with Jquery Toggle

Hi All I am trying to write both an if/else statement along with toggling an image. Basically my goal is to toggle an image (in this case with an id of soundonoff). However I can't seem to figure out where I am going wrong. The issue is the toggle works, but the detect of whether its muted or not does not work. (In my full code for example I have it switch innerHTML of various audio/video files, this is where document.getElementsByName('mymedia')[0] comes in. Any help would be tremendously appreciated I have spent about 4 hours working on this and can't seem to figure it out.
I should add that I do not know where to add an eventlistener for detectmute(), I tried to add it to my video, and to the button soundonoff but neither got working yet.
Here is my code:
function detectmute(){
if(document.getElementById('soundonoff').src == 'images/icons/soundoff.png'){
document.getElementsByName('mymedia')[0].muted = true;
}
else if(document.getElementById('soundonoff').src == 'images/icons/soundon.png'){
document.getElementsByName('mymedia')[0].muted = false;
}
$("#soundonoff").toggle(function(){
this.src = "images/icons/soundoff.png";
document.getElementsByName('mymedia')[0].muted = true;
}, function() {
this.src = "images/icons/soundon.png";
document.getElementsByName('mymedia')[0].muted = false;
});
}

Well I solved my own issue, Solution was the following:
$("#soundonoff").toggle(function(){
this.src = "images/icons/soundoff.png";
document.getElementsByName('mymedia')[0].muted = true;
$("#soundonoff").attr('name', 'soundoff');
}, function() {
this.src = "images/icons/soundon.png";
document.getElementsByName('mymedia')[0].muted = false;
$("#soundonoff").attr('name', 'soundon');
});
function detectmute(){
var soundstate = document.getElementById('soundonoff');
if (soundstate.name == "soundon")
{
document.getElementsByName('mymedia')[0].muted = false;
}
else if (soundstate.name == "soundoff")
{
document.getElementsByName('mymedia')[0].muted = true;
}
}

$('#soundonoff').on('click', function () {
var $this = $(this);
if ($this.attr('src') == 'images/icons/soundon.png') {
$this.attr('src', 'images/icons/soundoff.png').attr('data-muted', true);
} else {
$this.attr('src', 'images/icons/soundon.png').attr('data-muted', false);
}
});
Here is a demo: http://jsfiddle.net/jLvZW/3/ updated
You could also setup an object that converts one source to another:
var convert = {
'images/icons/soundon.png' : ['images/icons/soundoff.png', true],
'images/icons/soundoff.png' : ['images/icons/soundon.png', false]
};
$('#soundonoff').on('click', function () {
var $this = $(this);
$this.attr('src', convert[$this.attr('src')][0]).attr('data-muted', convert[$this.attr('src')][1]);
});
Here is a demo: http://jsfiddle.net/jLvZW/2/ Updated