jquery - stop bootstrap dropdown from closing without stopping other events - javascript

I have a few dropdown menus that have buttons that produce popovers on click. When you click on the button it closes the whole dropdown menu and hides the popover, however clicking again on the button to open the dropdown shows that the popover is still open.
I have a semi-function solution that I found here:
Prevent Bootstrap dropdown from closing on clicks, to implement:
$('.dropdown li').click(function(e) {
e.stopPropagation();
});
but then that stops confirm boxes from appearing.
Is there a way I can 'resume propagation' on the elements that need a confirm dialog to appear?

Related

tiinymce dropdown item cashes polymer dialog when clicked

I am using tinymce wysiwyg html editor and polymer. The editor is shown in a paper-dialog popup. When an item in a tinymce dropdown menu is clicked, the dialog closes and it will not reopen. No errors appear in console. How can I catch the click events to stop it from affecting the polymer dialog?
I tried adding a stopPropogation in the tinymce setup field but that doesn't seem to help.
tinymce.init({
selector: '#' + this.textareaId,
setup: function (ed) {
ed.on('click', function(e) {
console.log("clicked");
e.preventDefault();
e.stopPropagation();
});
}
});
},
Just came across the same problem. It looks like paper-dialog thinks that when you select certain items from TinyMCE drop-down menu, the click happens outside of paper-dialog, so it decides it needs to close.
The quick workaround here would be to set no-cancel-on-outside-click property for dialog (or make it modal). More involved solution would require capturing all click events on TinyMCE element, which I haven't attempted.

Why bootstrap modal removes my scroll bar after closing modal and anchoring to page

I have a bootstrap modal and and button inside it aside from the close button. So what I want is when I click the button, the modal will close and will navigate to the same page via anchor tag. This works but problem is the modal is removing or disabling the scroll bar. The modal thinks as if the modal is still open.
I have this:
$( "#silverB" ).click(function() {
$("#myModal").hide();
$(document.body).scrollTop($('#optin').offset().top);
});
You should not retire the modal using .hide(). Instead use this:
$("#myModal").modal("hide");
Because, bootstrap adds more classes to body (.modal-open) when the modal is opened. But when you "hide" the modal, they are not reset.
From the docs:
.modal('hide')
Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).`

Prevent Bootstrap dropdown menu toggle on click

This was asked quite a few times before, but I can't find a proper solution yet. I am toggling navbar dropdown menus on hover with the following code:
$(".nav .dropdown").hover(function() {
$(this).find(".dropdown-toggle").dropdown("toggle");
});
which works just fine. However, clicking on the .dropdown-toggle button toggles the menu as well, which I want to avoid. Any suggestions on the code?
Just stop the propagation here:
$('.dropdown-toggle').click(function(event){
event.stopPropagation();
});

input file on mouseup show hidden div, show file dialog box after hidden div closed

I can get an input=file to show an alert on mouseup and after closing the alert, have the dialog box open.
What I want to do now is show a hidden div on mouseup and have the dialog box open AFTER it's closed. How can I achieve this?
With alert box
$('#inputFile').mouseup(function(){
alert('Show alert box');
});
With div(dialog box shows before div is closed)
$('#inputFile').mouseup(function(){
$('div').show();
});
There's a couple ways to tackle this problem, but this is what I would suggest:
Change your input=file to a basic button (type=button). When this button is clicked, open your hidden div with a "close" button on it. This close button would call a function. Said function should open a file prompt dialog and close the div.

jQuery of menu is not loading after clicking outside the menu

I am using Bootstrap dropdown menu. See the below code:
$(document).ready(function(){
$("#a-primary-occasion").mouseover(function(){
$(".dropdown-menu_occasion").css("display", "block");
});
$('#submenu-birthday_occasion').mouseover();
});
This script is in main menu's phtml file which works fine when the page is loaded. But after clicking outside menu (on other content of the page.) it doesn't fire the mouseover() event.
You can check it here: http://jshri.com
After loading the page just hover on the first menu (Occasion). It will open the submenu of "Birthday Gifts".
click on anywhere outside the menu (e.g above "Occasion" menu)
hover on Occasion menu it won't open the first menu. Also hovering on the first submenu (i.e. Birthday Gifts) won't it. But after hovering on the second submenu (i.e. Anniversary Gifts) will open the submenu also the hover even for the first submenu will work fine afterwards.
Note: If I add an alert in document.ready() it fires every time.
I am not sure why is this happening. Does anyone have any idea? How can I solve this?
I found it myself!
As I said I am using Bootstrap menu, by default menu was opening on click events. Which I changed to hover event. But I didn't remove the jQuery which was hiding the current opened menu on document.click event. This is the code I commented:
$(document).click(function() {
// Simply hide the submenu on any click. Again, this is just a hacked
// together menu/submenu structure to show the use of jQuery-menu-aim.
$(".popover_relation").css("display", "none");
$("a.maintainHover_relation").removeClass("maintainHover_relation");
});

Categories