Leaflet popup close button - javascript

I'm making a leaflet map for my own website, I'm not good at javascript html and css, so that's why I going to ask this question here..
Is there anybody who know how to add a X (Close button) to the right corner?
The code I am using can be found over here:
http://jsfiddle.net/z1nw3pt4/2/
layer.on('click', function (e) {
document.getElementById("info").innerHTML = feature.properties.name;
$("#feature_infos").stop();
$("#feature_infos").fadeIn("1000");
console.log(feature.properties.name);
});
The code above her is for opening the popup.

When you click any of the dots, the info box is shown using
$("#feature_infos").fadeIn("fast");
You can add an extra element inside the box that does the opposite (.fadeOut("fast")) when you click it:
HTML:
<span class="close">X</span>
JS:
$('.close').click(function() {
$('#feature_infos').fadeOut('fast');
});
Working demo: jsFiddle
The only styling I added is to position the X in the top right, but obviously you can do whatever you want with it. All that matters is binding the fadeOut method to the click event to close the popup again.

Related

click outside bootstrap menu to close it

I tried to find solution to close bootstrap menu when clicking outside of it(in mobile window size), but cant get it to work, I get it to work when clicking one of the 'a' links by this code:
// menu buttons collapses when clicking a link
$('document').ready(function()
{
if ($('a').on('click', function()
{
$('.collapse, #mainContainer').removeClass('in');
$('.navbar-toggle').toggleClass('collapsed'); // button
}));
});
but how to close menu by clicking outside the menu navbar?
here's my page that shows the problem
iwebdesign.se
and yes i tried this already, not working:
similar question
Assuming you want to do something different when clicking outside of the menu (i.e. collapse the menu) than what happens when you click inside the menu, you probably want something like this to determine if you're clicking inside or outside of the menu:
$('body').click(function(event){
// check if the clicked element is a descendent of navigation
if ($(event.target).closest('.navigation').length) {
return; //do nothing if event target is within the navigation
} else {
// do something if the event target is outside the navigation
// code for collapsing menu here...
}
});
https://jsfiddle.net/L3qg4pa8/5/ shows the concept, roughly.
Of course, you will need to replace '.navigation' in the .closest() statement with the appropriate selector for the container of your navigation.
$(document).on('click',function(){
$('.collapse').collapse('hide');
});
Just copy the code and past your custome script or index.html
thank's Remy
click outside to hide bootstrap toggle menu close(hide) it
Here the answer :
(document).on('click',function(){
$('.collapse').collapse('hide');
})
Hope it's help :)
Remy

How is it possible that the jQuery works on Chrome console, but does not itself?

I would like to make a overlay when the uses make hover event on a link.
This part ok, the overlay created and everything fine.
But I also would like to remove this overlay, when user click (or hover) for it, and this part create a strange bug.
I try clicking for the overlay and its dosen't close, nothing happening, but if you paste script to the chrome console, this working fine.
Js, first part, add script:
var overlay = jQuery('<div class="overlay"> </div>');
$("#link-'.$myqlVideoID.'").hover(function() {
$("#hover-").attr("src","http://youtube.com/embed/'.$myqlVideoID.'?autoplay=1");
$(".drop-target").css("background-color","#070707");
$(".drop-target").css("padding","11px");
$(".drop-target").css("margin-bottom","16px");
$(".drop-target").show().fadeIn("3000");
overlay.appendTo(document.body)
});
And the second part, remove overlay:
$(document).ready(function() {
$(".overlay").click(function() {
$("#hover-").removeAttr("src");
$(".drop-target").hide().fadeOut("3000");
$(".overlay").remove();
console.log("clicked");
});
});
My site is where you can see the bug:
http://neocsatblog.mblx.hu/search/
Just search something and scroll down to "Cimkék"
Try delegating the event on the overlay by writing the following:
$(document).on('click', '.overlay', function () {
//The rest of your code
}) ;
And same for the rest of your event handlers.
The reason for this is that the element overlay is being added dynamically, and the script doesn't know about it at the moment when it's being instantiated.

toggleDown jquery not working

When you hover over the arrow it should toggle the footer down so you can see its content. When the mouse is inside the #footer the div should remain opened so you can read the content.
The problem is when you hover on the arrow the div just opens and closes.
here is a working example: http://jsfiddle.net/MEJgb/1/
try changing this line
jQuery(this).next("#footer_toggle").slideToggle("slow");
to
jQuery(this).next("#footer_toggle").stop().slideToggle("slow");
Or try something like this I guess if I understand your question right
http://jsfiddle.net/MEJgb/21/
Instead of using hover event use click event for this
jQuery("#toggleDiv").click(function() {});
Working Demo is here!!
I hope it will works..
$(document).ready(function() {
// footer Toggle
$("#footer_toggle").hide();
$("#toggleDiv").click(function() {
$("#footer_toggle").slideToggle();
if($("#toggleDiv").hasClass('active'))
$("#toggleDiv").removeClass("active");
else
$("#toggleDiv").addClass("active");
});
});

Closing jQuery Modal box

I'm trying to create a basic modal myself and I'm having a little bit trouble here (maybe it's because I'm an expert working with jQuery - don't take it seriously).
I have this HMTL markup:
<div id="modal-boxes">
<div id="modal-updates" class="modal-content">
Content for modal box here.
Close
</div>
</div>
<div id="modal-mask"></div>
So, I made a function that tells the modal box to close and to make disappear the #mask div. And another one to when I click outside of it, it closes anyway. In other words, clicking outside the #modal-updates div is the same that clicking on close button. But the problem is that when I want to click inside the #modal-updates div (should not disappear) it closes anyway. Here is my javascript code:
$(".modal").click(function(e){
e.preventDefault(); // Cancel the default link behavior
$("#modal-mask").fadeTo(400, 0.4);
$("#modal-boxes").fadeIn();
var getName = "#" + $(this).attr("name");
$(getName).fadeTo(400, 1);
});
function closeModal() {
$("#modal-mask, #modal-boxes").fadeOut();
}
$(".close-modal").click(function(e){
e.preventDefault();
closeModal();
});
$(".modal-content").click(function(){
closeModal();
});
Any help?
Regards, Tiago Castro
Try:
$('#modal-updates').click(function(e) {
e.stopPropagation();
});
If done right, this will stop $("#modal-boxes").click() from triggering.
[edit] fixed a typo and added link to jsFiddle with it working
Why not using the modal dialog of jQuery?
About your example :
1) for the link I prefer to do something like:
Close
That way no need to deal with things like preventDefault or click event
2)I guess that instead of binding your click event to ".modal-content" you wanted to bind it to "#modal-mask" ;)

jQuery - Toggle a panel closed on click of outside element, only if panel is visible

I'm working on this site: http://dev.rjlacount.com/treinaAronson/index.php
My final to-do is to set the contact panel (which you can see if you click the top left "contact" button) to close if it's currently open and the user either clicks outside of the panel (in the "#content" area) or hits the esc key.
I figured the clicking in the #content area trigger would be the easier of the two, so I started with that. I've read a couple threads on triggering functions only if elements are visible, but what I've come up with so far isn't working at all:
$("#panel").is(":visible") {
$("#content").click(function(){
$("#panel").slideToggle("3000");
});
};
This breaks the functionality of the contact button, and I've tried several variations of this to no avail. Am I making any glaring errors here? Any advice would be greatly appreciated.
Thanks!
Bind Click and Keydown functions to the document and make sure the click function doesn't bubble up to the document when your panel or flip buttons are clicked. Like so:
$(document).bind({
keydown:function(e) {
if (e.keyCode == 27 ) {
$("#panel").slideUp("3000");
}
}, click: function(e) {
$("#panel").slideUp("3000");
}
});
$('#flip, #panel').bind('click', function(e){return false});
Why don't you add a class to the body of the page when the panel is opened and remove it when it's closed? That makes this much simpler:
$('.class #content').click(function(){
// Close the contact panel
});
Now, when the body has a class of 'class', any click on the #content div will automatically close contact.
Make sense? Great looking site, by the way.
$('#flip').bind('click', function(){
$(this).toggleClass('contactOpen');
$("#panel").slideToggle("3000");
});
$('#content').bind('click', function(){
if($('#flip').hasClass('contactOpen')){
$(this).toggleClass('contactOpen');
$("#panel").slideToggle("3000");
}
});

Categories

Resources