how to fire a jquery event only once? WordPress
For my plugin [[LINK href="http://mapsmarker.com"]]mapsmarker.com[[/LINK]] I use the following jquery code to style the scrollbar of the marker popups:
selectlayer.on('popupopen', function(e) {
$('.leaflet-popup-scrolled').alternateScroll();
});
selectlayer.on('popupclose', function(e) {
$('.leaflet-popup-scrolled').alternateScroll('remove');
});
A demo can be found here: [[LINK href="http://current.mapsmarker.com/2012/08/17/layer-102/"]]http://current.mapsmarker.com/2012/08/17/layer-102/[[/LINK]]
Click on the icon and you will see a styled scrollbar. Click on the x to close the popup and then reopen the popup. The scrollbar is not visible anymore.
So I tried to change the script to only fire the jquery event once per popup. I searched Google and found examples like this which didnt work in my case:
$(".leaflet-popup-scrolled").one("popupopen",function(){
alert('You will only see this once.');
});
Actually I would like to have jquery to check, if for all existing elements/popups with the class <strong>.leaflet-popup-scrolled</strong> the function alternateScroll() was already called and if yes to not call it again. If that check is not possible, I´d like to call the function alternateScroll only once on all elements.
Does anyone know how to best solve this?
Thanks for any help,
Robert
BTW:
I use the following script to style the scrollbar: [[LINK href="http://www.dynamicdrive.com/dynamicindex11/facescroll/"]]http://www.dynamicdrive.com/dynamicindex11/facescroll/[[/LINK]]
The reference for open/closepopup: [[LINK href="http://leaflet.cloudmade.com/reference.html#map-openpopup"]]http://leaflet.cloudmade.com/reference.html#map-openpopup[[/LINK]]
Answers (2)
Hardeep Singh answers:
I am not sure if you really need to call it once as you are removing the scroll in close function.
anyways, to execute the function only once you can use the method below:
Use a global variable defined in the Javascript using var
<script> var callOnce = false;
selectlayer.on('popupopen', function(e) {
if(!callOnce ){
$('.leaflet-popup-scrolled').alternateScroll();
}
callOnce = true;
});
selectlayer.on('popupclose', function(e) {
$('.leaflet-popup-scrolled').alternateScroll('remove');
});
Hardeep Singh comments:
Again, this is an example and you can modify it as per your need using global variable.
Robert Seyfriedsberger comments:
somehow this doesnt work also - I dont just know how because I dont know how to trace this...any other approaches how to solve this?
Hardeep Singh comments:
After apply the change remove/comment the following code:
selectlayer.on('popupclose', function(e) {
$('.leaflet-popup-scrolled').alternateScroll('remove');
});
Robert Seyfriedsberger comments:
unfortunately no change - please see http://current.mapsmarker.com/wp-content/plugins/leaflet-maps-marker/leaflet-fullscreen.php?layer=14 - there are two marker popups - event gets only fired once (you´ll notice this when you click on one popup and then on the other). But if you close the popup with the styled scrollbar and open it again, the scrollbar again disappeared :-( any idea why?
Hardeep Singh comments:
$('.leaflet-popup-scrolled').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });
The above code is called twice.
$(document).ready(function() {
$('.leaflet-popup-scrolled').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });
});
var callOnce = false;
mapsmarker_6340ecd5.on('popupopen', function(e) {
if(!callOnce ){
$('.leaflet-popup-scrolled').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });
}
callOnce = true;
});
})(jQuery);
Hardeep Singh comments:
Also change
<script type="text/javascript" src="http://current.mapsmarker.com/wp-content/plugins/leaflet-maps-marker/leaflet-dist/leaflet.js?ver=2.7.1" type="text/css" media="all"></script>
Check your header and change this to
<script type="text/javascript" src="http://current.mapsmarker.com/wp-content/plugins/leaflet-maps-marker/leaflet-dist/leaflet.js?ver=2.7.1"></script>
Robert Seyfriedsberger comments:
I also changed that - no effect :-( hate this code...
Martin Pham answers:
Hi Robert,
please using jScrollPane, I think it will solve this problem
[[LINK href="http://jscrollpane.kelvinluck.com/"]]http://jscrollpane.kelvinluck.com/[[/LINK]]
Robert Seyfriedsberger comments:
Hi Martin,
thanks but I already tried this with no success - seems to be an integration problem with leaflet...