i am currently working with leaflet.
and i am trying to create a popup with with clickable content.
now i found how i can bind popups on click event with content:
marker.on('click', function(e){
marker.bindPopup("<div />").openPopup();
}
and i found out how to create the popup on hover:
marker.on('mouseover', function(e){
e.target.bindPopup("<div />").openPopup();
}});
marker.on('mouseout', function(e){
e.target.closePopup();
}});
now what i cant seem to do is make the popup stay open in order for the user to click on links inside the popup.
i would appreciate any help.
one approach is this http://jsfiddle.net/cxZRM/98/
basically it's adding a timer to your setup and you only close the popup after an arbitrarily long time has passed so as to give the user some time to interact on your div.
marker.on('mouseover', function(e){
e.target.bindPopup("dsdsdsdsd").openPopup();
start = new Date().getTime();
});
marker.on('mouseout', function(e){
var end = new Date().getTime();
var time = end - start;
console.log('Execution time: ' + time);
if(time > 700){
e.target.closePopup();
}
});
a better approach would be to use http://jsfiddle.net/AMsK9/
to determine your mouse position and keep the popup open while the mouse is still within an area around the popup.
I had the same issue, I wanted a different pop up for mouseover and another one for click, and the problem was that when I hovered out the click pop up closed, so what I did was adding a flag:
var modal = true;
function onEachFeature(feature, Polygon)
{
if (feature.properties && feature.properties.popupContent && feature.properties.modal)
{
Polygon.on('mouseover', function (e) {
Polygon.bindPopup(feature.properties.popupContent);
this.openPopup();
modal = false;
});
Polygon.on('mouseout', function (e) {
if(!modal)
this.closePopup();
});
Polygon.on('click', function (e) {
modal = true;
Polygon.bindPopup(feature.properties.modal).openPopup();
});
}
}
Related
I have the following code:
<script type="text/discourse-plugin" version="0.8.13">
$(document).ready(function() {
if ($('#daily-check-in').length) {
$('#daily-check-in').attr("href", settings.daily_check_in_url);
$('#daily-check-in').text(settings.daily_check_in_text);
}
if ($('#current-user').length) {
var image_bell = 'https://cdn.ramseysolutions.net/church/fpu/images/icon-bell.svg';
$('#current-user').find('img')[0].setAttribute('src', image_bell);
}
setTimeout(function() {
$('#js_fpu_global_nav > ul').css('transition', 'margin 0.4s').delay(1000);
}, 2000);
$('#js_top_nav_hamburger').click(function(e) {
$('#js_fpu_global_nav > ul').toggleClass('open-top-nav');
e.stopPropagation();
});
$(document).on("click", function(e) {
if ($(e.target).is("#js_fpu_global_nav > ul") === false) {
$('#js_fpu_global_nav > ul').removeClass('open-top-nav');
}
});
});
</script>
The important part is:
$('#js_top_nav_hamburger').click(function(e) {
$('#js_fpu_global_nav > ul').toggleClass('open-top-nav');
e.stopPropagation();
});
For now, when I move between pages in dynamic way, it keeps the menu open. I would like to close it every time user clicked on some other place of the page (not in the menu box) or if he moved to a different page (even if its from one of the links from this menu page).
I'm familiar with Vanilla JS addEventListener but I'm not sure how to use it here or if its the right approach. The desired output is to close the menu every time user clicks on something else. Other code could be found on Github (link).
I have multiple bootbox dialog boxes in my project and I want all of them to appear at the center of the screen, I cannot individually go and calculate the height of each box and position it at the center when the modal shows. Is there a common way to do this. Is there a way to trigger an event when the bootbox is made visible, I tried 'DOMNodeInserted', but this gives recursive error also tried livequery but this did not work. Can anyone tell me how to trigger an event when a dialog box is made visible at a common point.
jQuery(document).on('DOMNodeInserted', function(e) {
if(jQuery(e.target).hasClass('modal')) {
setTimeout(function(){
if(jQuery(e.target).height()/2 > 1){
var topPos = ((jQuery(window).height() - 30)/2) - jQuery(e.target).find('.modal-dialog').height()/2;
jQuery('.modal-content').css('top', topPos);
}
},200);
}
});
Regards,
Neha
try this code
.on("shown.bs.modal", function(e) {
alert("bootbox is visible");
});
DEMO
updated
align bootbox at center
.on("shown.bs.modal", function(e) {
$('.modal-content').css({
'transition':'margin-top 1s linear',
'margin-top': function (){
var w = $( window ).height();
var b = $(".modal-dialog").height();
var h = (w-b)/2;
return h+"px";
}
});
});
DEMO
I am struggling to find a solution to repeat action when user did already one time. For example, when user comes on site there is carousel which can be swiped, slided, and eventually opened in order to see full gallery. I have managed to do that but when the user made this action and closes modal box, he is not able to repeat the same action. Anyone has idea how to solve it?
Here is js
$(document).ready(function () {
// - jQuery
// Swipe feature
$('#myCarousel').swiperight(function () {
$('#myCarousel').carousel('prev');
});
$('#myCarousel').swipeleft(function () {
$('#myCarousel').carousel('next');
});
// Swipe feature for modal
$('#modal-carousel').swiperight(function () {
$('#modal-carousel').carousel('prev');
console.log('swipe_right');
});
$('#modal-carousel').swipeleft(function () {
$('#modal-carousel').carousel('next');
console.log('swipe_left');
});
// Additional toolbar with "close" button appears
$(window).on('shown.bs.modal', function () {
$('modal').modal('show');
$('#toolbar').css('display', 'block'); //.css('position','fixed')
$('.carousel-inner').css('overflow', 'visible');
// Remove entirely in final version
$('.item').css('background', 'none')
console.log('fires toolbar');
});
$(window).on('hidden.bs.modal', function () {
$('modal').modal('show');
$('#toolbar').css('display', 'none'); //.css('position','absolute')
$('.carousel-inner').css('overflow', 'hidden');
// Remove entirely in final version
$('.item').css('background', '#60b1ff')
console.log('closes toolbar when modal is closed');
});
// Closes modal on toolbar
$('.trigger').click(function () {
$('.modal').modal('hide');
});
/* Modal Carousel from version 3. adjusted to version 2.3 */
/* activate the carousel */
$("#modal-carousel").carousel({
interval : false,
});
/* when clicking a image */
$(".thumbnail").click(function () {
var content = $(".carousel-inner");
content.empty();
var id = this.id;
var repo = $('#img-repo .item');
var repoCopy = repo.filter('#' + id).clone();
var active = repoCopy.first();
var next = repoCopy.last();
active.addClass('active');
content.append(repoCopy);
// show the modal
$('#modal-gallery').modal('show');
});
// Carousel pause - prevents automatic slideshow
$('.carousel').carousel({
pause : true,
interval : false
});
// Close window
$('.modal-backdrop').modal({
show : false
});
}); //end of script
Problem is at the content.empty(); which after executed action stays empty. Any ideas how to solve this?
Fiddle
Fiddle 2 with working carousel. Just imagine that you are able to open one of those images in modal.
I'm having a problem with my dropdown after in the midst of calling onResize. On a fresh page load the drop-down nav acts correctly but if you resize the browser and click the drop-down for the sub nav, it moves fast and doesn't stay open.
Here's a Live Demo.
Here's just the JS:
var res;
onResize = function() {
var responsive_viewport = $(window).width();
var mobile_menu = $('nav div span');
var mobile_list = $('nav div #main-nav');
if (res){ clearTimeout(res)};
res = setTimeout(function(){
console.log("resize triggered");
if (responsive_viewport <= 1024) {
mobile_menu.add(mobile_list).click(function(event) {
mobile_list.slideToggle('fast', 'swing', function() {
mobile_list.toggleClass('active');
});
event.stopPropagation();
});
$(document).click(function() {
if (mobile_list.hasClass('active')) {
mobile_list.slideToggle('fast', 'swing', function() {
mobile_list.removeClass('active');
});
}
});
}
if (responsive_viewport <= 768) {
console.log('on mobile');
nextvid.addClass('mobile');
} else {
nextvid.removeClass('mobile');
}
},200);
}
$(document).ready(onResize);
$(window).bind('resize', onResize);
Thanks!
What's happening is every time you resize the window (and I guess counting pageload) you bind to the event of clicking on the item. So when you resize the window once, the event fires twice and the dropdown opens then closes. If you resize the window again, the drop down now opens, closes, then opens again. So long story short you should bind only once! If you then want to change the binding (like if they switch to mobile view) you should then unbind then rebind a different way.
Best of luck!
I have make this: This In the right you see a red button. When you click on the red button. The content screen with the text is coming. But i have a question of this. Can i make this with a other animation. If you hold your mouse. Then you can slide open. With your mouse button to left. Then the content box open. Do you understand it? I hope you can help me.
You can see the code on jsfiddle. And you can change it there. I hope you can help me. I am a starting javascripter. And how And have no idea how I can make this.
To implement dragging, you can make use of mousedown/mouseup/mousemove like this: http://jsfiddle.net/pimvdb/25y4K/8/.
$(function () {
"use strict";
var box = $(".what-is-delicious"),
button = $(".what-is-delicious > a");
var mouseDown = false,
grabbed = 0,
start = -303;
button.mousedown(function(e) {
mouseDown = true;
$('*').bind('selectstart', false); // prevent selections when dragging
grabbed = e.pageX; // save where you grabbed
$("body").append('<div class="background-overlay"></div>');
});
$('body').mouseup(function() {
mouseDown = false;
$('*').unbind('selectstart', false); // allow selections again
$(".background-overlay").remove();
start = parseInt(box.css('right'), 10); // save start for next time
// (parseInt to remove 'px')
}).mousemove(function (e) {
if(mouseDown) { // only if you are dragging
// set right to grabbed - pageX (difference) + start 'right' when started
// dragging. And if you drag too far, set it to 0.
box.css("right", Math.min(grabbed - e.pageX + start, 0));
}
});
});
Here is an updated fiddle. Basically I just did a couple of things:
Changed the handler from "click" to "mouseenter"
Added a "mouseleave" handler that does the opposite thing
Put the handlers on the "what-is-delicious" container instead of the <a>
The code:
$(function () {
"use strict"
var box = $(".what-is-delicious"),
button = $(".what-is-delicious > a");
box.mouseenter(function (e) {
e.preventDefault();
if ($(button).hasClass("open")) {
} else {
$("body").append('<div class="background-overlay"></div>');
button.addClass("open");
box.animate({ right: "0"}, 750);
}
}).mouseleave(function (e) {
e.preventDefault();
if ($(button).hasClass("open")) {
$("body").find('div.background-overlay').remove();
button.removeClass("open");
box.animate({ right: -303}, 750);
} else {
}
});
});
The "preventDefault()" calls aren't really necessary anymore but I left them there.
I would assume you are toggling the Style.Display of the DIV currently in an OnClick() event.
The same code can be called from a Hover() or MouseOver()