Develop Reference

Why this .js script stops working and is causing a browser freeze?

I've downloaded this Drupal 8 template and the site is at www.plotujeme.sk. It has an responsive navigation with this .js script:
function sidebar_menu() {
var windowsize = jQuerywindow.width(),
jQuerynav = jQuery("nav"),
slide = {
clear: function () {
jQuerybody.removeClass('toggled');
jQuery('.overlay').hide();
jQuery('.easy-sidebar-toggle').prependTo("header");
//jQuery('#search').prependTo("body");
jQuery('.navbar.easy-sidebar').removeClass('toggled');
jQuery('#navbar').removeAttr("style");
},
start: function () {
jQuery('.overlay').show();
jQuerybody.addClass('toggled');
jQueryhtml.addClass('easy-sidebar-active');
jQuerynav.addClass('easy-sidebar');
jQuery('.easy-sidebar-toggle').prependTo(".easy-sidebar");
//jQuery('#search').prependTo("#navbar");
jQuery('#navbar').height(jQuerywindow.height()).css({
"padding-top": "60px"
});
},
remove: function () {
jQuerynav.removeClass('easy-sidebar');
}
};
if (windowsize < 1003) {
jQuerynav.addClass('easy-sidebar');
jQuery('.easy-sidebar-toggle').on("click", function (e) {
e.preventDefault();
if (jQuerybody.hasClass('toggled')) {
slide.clear();
} else {
slide.start();
}
});
/*
jQueryhtml.on('swiperight', function () {
slide.start();
});
jQueryhtml.on('swipeleft', function () {
slide.clear();
}); */
} else {
slide.clear();
slide.remove();
}
}
and:
jQuery(document).ready(function () {
"use strict";
sidebar_menu();
jQuery(window).resize(function () {
sidebar_menu();
});
});
Problem is, that if I open responsive navigation by clicking on hamburger button, it works several times and then it stops working, the page and a browser freezes or is unresponsive for a long time. I also noticed that (even in template preview) sometimes it does not work at all and nothing happens after clicking hamburger icon. When I resize window multiple times sometimes it works sometimes not.
Do you see any error in the script that could possibly cause this problem?
Update: I also tried to use jQuery('.easy-sidebar-toggle').off("click"); just before jQuery('.easy-sidebar-toggle').on("click", function() {...}); but got the same results.

jQuery(window).resize(function () {
sidebar_menu();
});
As a result, whenever sidebar_menu function changes the window size, this function is called again and again, like a recursion, hence the freezing

I think the reason might be the following lines in the resize handler:
jQuerynav.addClass('easy-sidebar');
jQuery('.easy-sidebar-toggle').on("click", ...
They are run every time the window is resized by even one pixel, so a few dozen times a second if you drag the window border. Not sure about the first line, whether it adds the class over and over, but the second line certainly adds an event handler multiple times and fills up the stack. That's the reason your browser freezes. It just can't process the hundreds of registered events.
Just a guess, though.

Javascript Google maps drawing events

I'm having a problem with the event listeners provided by Google maps API. The thing is, that some events run, some not. I have a setListeners function which sets the listeners after the polygon overlay is complete. The events I would like to hook are: set_at, insert_at, remove_at and click. Now the click events run correctly, but the others not. What could I do wrong? Here is the code:
self.setListeners = function () {
//this click event runs correctly
google.maps.event.addListener(self.map, 'click', function (e) {
self.clearSelection();
})
console.log(self.drost);
if (typeof self.drost != 'undefined') {
self.drost.addListener('set_at', function (e) {
console.log(e.overlay);
});
self.drost.addListener('insert_at', function (e) {
console.log(e.overlay);
});
self.drost.addListener('remove_at', function (e) {
console.log(e.overlay);
});
//this click also runs correctly
self.drost.addListener('click', function(e){
self.setSelection(self.drost);
})
}
}

The events set_at, insert_at, remove_at need to be added to the path of the polygon, not the polygon itself.
related questions:
Apply event listener to an editable polygon
calculate area of a drawn polygon on google map javascript

Try adding the listener with google.maps.event:
google.maps.event.addListener(self.drost, 'set_at', function() {
console.log('it works!');
});

Jquery mobile chained popup dynamic positioning

I have a jquery-mobile popup #graphic-menu activated by an onClick event (getPosition() is in another included script, and works as expected):
HTML
Graphic menu
CSS
function showGM(pos){
$("#menu-buttons").popup("close");
$("#menu-buttons").bind({
popupafterclose: function(event, ui){
$("#graphic-menu").popup("open", {x:pos.x, y:pos.y});
}
});
}
The catch is that #gm-btn is itself part of a parent popup #menu-buttons that:
is called to appear several times
appears at different locations (it's a dragable element)
showGM(pos) uses the position of the #gm-btn when the parent popup first appears, and doesn't change for subsequent child popups when reclicked.
How can I get showGM(getPosition(this)) to correctly recalculate the position of #gm-btn when called (or, more likely, what have I screwed up in my code)?
Edit: at the moment, I'm making things work by storing the position in a variable with global scope (since there's only ever one #menu-buttons active), and passing that to #graphic-menu so it knows where to open. I think this probably isn't good programming practice, so if someone has a better suggestion I'd love to hear about it.

Based on the API (http://api.jquerymobile.com/popup/), they say:
Note: Chaining of popups not allowed: "The framework does not currently support chaining of popups so it's not possible to embed a
link from one popup to another popup. All links with a
data-rel="popup" inside a popup will not do anything at all."
A workaround to get chained popups working is the use of a timeout for
example in the popupafterclose event bound to the invoking popup. In
the following example, when the first popup is closed, the second will
be opened by a delayed call to the open method:
$( document ).on( "pageinit", function() {
$( ".popupParent" ).on({
popupafterclose: function() {
setTimeout(function() { $( ".popupChild" ).popup( "open" ) }, 100 );
}
});
});
In regards to jsFiddle, it works good for this type of testing: https://jsfiddle.net/Twisty/4gjdp4te/7/ You had not set the JQuery library, so I set it to 2.1.3, and retained your JQM 1.4.5 link.
My attempt so far has not yielded the results you want, but you can at least see what direction to take. I plan to keep working on it and will update my answer.
HTML
<div data-role="page">
<div role="main" class="ui-content">
<a id="anchor1" href="#pop-1" data-rel="popup" data-transition="pop">Basic Popup</a>
<div data-role="popup" id="pop-1" data-position-to="#anchor1">
<p>This is a basic popup.</p>
<button id="firstbutton" data-rel="popup">Button to open 2nd popup</button>
</div>
<div data-role="popup" id="pop-2">
<p>This is another basic popup.</p>
</div>
</div>
</div>
JQUERY
var buttonClick = false;
$(document).on("pageinit", function () {
$("#pop-1").on({
popupafterclose: function () {
if (buttonClick) {
console.log("Opening 2nd Popup.");
setTimeout(function () {
$("#pop-2").popup("open", {
positionTo: "#pop-1"
})
}, 100);
buttonClick = false;
} else {
console.log(buttonClick);
}
}
});
});
$(document).ready(function () {
$("#firstbutton").click(function () {
buttonClick = true;
console.log("First Button clicked");
$("#pop-1").popup("close");
});
});
EDIT
I got the code you need: https://jsfiddle.net/Twisty/4gjdp4te/8/
JQUERY
var buttonClick = false;
$(document).ready(function () {
$("#pop-1").popup({
afterclose: function(){
if (buttonClick) {
console.log("Opening 2nd Popup.");
setTimeout(function () {
$("#pop-2").popup("open", {
positionTo: "#pop-1"
})
}, 100);
buttonClick = false;
} else {
console.log(buttonClick);
}
}
});
$("#firstbutton").click(function () {
buttonClick = true;
console.log("First Button clicked");
$("#pop-1").popup("close");
});
});

JQuery Modal close minimizes window for a few users (in IE9)

So, a few users are experiencing their browser window minimizing when they click save on this modal window. For those users, it's consistent, but it's just a small number of users. Most people are using IE9, and everyone that has this problem is using IE9. It happens on the .dialog('close'); call, and it minimizes before it reaches the close function. Does anyone have any ideas?
$("#new-specified").dialog($.extend({}, ns.modalOptions, {
open: function () {
if (ns.disabled) {
$(this).dialog("close");
}
$(this).dialog("option", "title", app.viewModels.MissionViewModel.EditingSpecified() ? "EDIT SPECIFIED TASK" : "NEW SPECIFIED TASK");
$(this).parent().find("button:contains('Cancel')").removeClass().addClass("cancel-button");
$(this).parent().find("button:contains('SAVE')").removeClass().addClass("save-button");
app.viewModels.MissionViewModel.CurrentSpecified().TempDescription(app.functions.htmlUnescape(app.viewModels.MissionViewModel.CurrentSpecified().Description()));
if (app.viewModels.MissionViewModel.SpecifiedTasks().length === 0) {
app.viewModels.MissionViewModel.CurrentSpecified().IsMainEffort(true);
}
},
buttons: {
"Cancel": function() {
$(this).dialog("close");
},
"SAVE": function () {
var newSpecified = app.viewModels.MissionViewModel.CurrentSpecified();
newSpecified.Description(app.functions.htmlEscape(newSpecified.TempDescription()));
newSpecified.Validate();
if (newSpecified.IsInError()) {
return;
}
if (!app.viewModels.MissionViewModel.EditingSpecified()) {
app.viewModels.MissionViewModel.SpecifiedTasks.push(newSpecified);
} else {
app.viewModels.MissionViewModel.OldSpecified().CopyFrom(newSpecified);
newSpecified = app.viewModels.MissionViewModel.OldSpecified();
}
app.viewModels.MissionViewModel.CurrentSpecified(new app.models.SpecifiedTaskViewModel());
var isMainEffort = newSpecified.IsMainEffort();
var index = isMainEffort ? app.viewModels.MissionViewModel.SpecifiedTasks().indexOf(newSpecified) : -1;
app.viewModels.MissionViewModel.VerifyMainEffort(index);
ns.setupSpecifiedModal();
//VV This line below minimizes
$(this).dialog("close");
ns.setupDroppable();
}
},
close: function() {
// We don't reach here before the window minimizes
app.viewModels.MissionViewModel.CurrentSpecified(new app.models.SpecifiedTaskViewModel());
app.viewModels.MissionViewModel.EditingSpecified(false);
app.viewModels.MissionViewModel.VerifyMainEffort(-1);
ns.saveMissionToServer();
}
}));

This question might have the solution: Dynamically loading jQuery mobile causes IE to minimize
Seems like calling blur() forces the IE window to the back of the stack. If you're using jQuery Mobile, here is the related issue: https://github.com/jquery/jquery-mobile/issues/2057
If you're not using jQuery Mobile, look for calls to blur() in your code.

This was also found in jquery-UI 1.10.0: http://bugs.jqueryui.com/ticket/9420.
As first comment suggest, the cause is that blur() is called on document.body.
As a workaround you can override body.blur(), look at How do I disable body.blur() in IE8?

Disable map zoom on CircleMarker double click in leaflet

I'm trying to disable the zoom on the map when I click in a CircleMarker object, but until now, no success.
This is my code:
var myCircle = new L.CircleMarker(new L.LatLng(50.924480, 10.758276), 10).addTo(map);
myCircle.on("click", function () {
//my click stuff
});
myCircle.on("dblclick", function () {
//my dblclick stuff
});
Everytime the dblclick event is fired, the map is zoomed, how to disable it?

try
var myCircle = new L.CircleMarker(new L.LatLng(50.924480, 10.758276), 10).addTo(map);
map.doubleClickZoom.disable();
refer this document

All answers here are after the Leaflet map object has been initialized.
I'd like to give my take by stating that you can also disable doubleClickZoom during map object initialization.
Note: This will disable doubleClickZoom to the whole map and not just circleMarkers.
map = L.map('map', {
center: [39.8282, -98.5795],
zoom: 5,
doubleClickZoom: false
});
P.S. I'm running leaflet version 1.7.1

Following solution seems to work for me:
myCircle.ondblclick = function (event) {
event.stopPropagation();
return false;
};
I have also tried another one, which also works quite well in practice, but I find it a bit hacky:
myCircle.on("click", function () {
map.doubleClickZoom.disable();
setTimeout(function(){map.doubleClickZoom.enable();}, 1000);
});

None of the answers above worked for me:
calling native ev.originalEvent.preventDefault() did nothing
returning false neither
I don't like the doubleClickZoomworkaround that much (although… it works!)
Using Leaflet DomEvent did the job for me:
import { DomEvent } from 'leaflet';
myFeature.on("dblclick", function (ev) {
DomEvent.stopPropagation(ev)
});

If anyone is here looking for a solution to the use case "I want to zoom in on the map on double-click but not if the double-click happens on an entity", this is how I solved it:
const circle = new L.circlemarker(...).addTo(map);
circle.on("dblclick", () => {
map.doubleClickZoom.disable();
doSomething();
setTimeout(() => {
map.doubleClickZoom.enable();
}, 1); // Without the timeout the map will still zoom in on entity double-click
});
FYI event.preventDefault(); event.stopPropagation(); and return false; inside the "dblclick" handler did not work for me.

You can return false from your dblclick handler which will stop the event from propagating e.g.
myCircle.on("dblclick", function () {
//my dblclick stuff
return false;
});
Now other elements (such as the map) won't handle that event

Try this... Disable map.doubleClickZoom when you mouse over the circle and enable when you leave
var myCircle = new L.CircleMarker(new L.LatLng(50.924480, 10.758276), 10).addTo(map);
myCircle
.on("click", function () {
//my click stuff
})
.on("dblclick", function () {
//my dblclick stuff
})
.on('mouseover', function () {
map.doubleClickZoom.disable();
})
.on('mouseout', function () {
map.doubleClickZoom.enable();
});

First you need to disable the map double click zoom and then enable it again on the map click event. So when you double click the map after double clicking on the marker it zoom again ;) I tried it and it works for me perfectly! Enjoy!
map.doubleClickZoom.disable();
map.on('click', function (e) {
map.doubleClickZoom.enable();
});