Here is my code:
http://codepen.io/murdocgrjey/pen/LFuto
I tried to close the popover when clicking outside of the content and the button but there's an issue with its content. Apparently I can't hide or destroy the content completely.
When I toggle the popover with the 'trigger' link, it works fine. But whenever I close it by clicking outside of the content, I can still hover the link in the content.
Any solution for this please?
I think you mess with the internal mechanism too much.
Here is the working fiddle: http://codepen.io/anon/pen/utbin
If the target isn't the trigger, just toggle the existing open popover.
Heres a link to working example: http://codepen.io/anon/pen/zhIsm
I just keep latest trigger and click it, whenever document is clicked.
Here is another way (will work with data-api too) http://jsbin.com/aRiZiki/1/edit
This is what I did in order to prevent elements within the hidden popover from being clicked
$('button.new-history').on('hidden.bs.popover', function () {
$(this).next().remove();
})
The idea being that when the popover is hidden, you should remove it from the DOM.
Hope it helps!
Related
I have created the most simple widget which consists of a single div with a class. The template is;
<div class="simple" data-padding="false"></header>
The Dialog contains 1 checkbox to change the padding.
This widget works all ok, is upcasted nicely, shows the yellow line around it when you hover over it. However it is impossible to double click on it to open the dialog, nothing happens, no console errors as well. I should expect that double clicking inside the div should open the dialog.
When a second div is nested, which is set to be the editable and some padding is added to the main div, it is possible to double click on the padding area between the two divs which opens the Dialog, that is however of course not what I want..
What is going wrong here, is this a bug?
I initially solved it by adding a listener to the double click event;
CKEDITOR.plugins.add('simple', {
init: function(editor) {
editor.on( 'doubleclick', function(e) {
var ClickedWidget = e.editor.widgets.widgetHoldingFocusedEditable;
if (ClickedWidget != null && ClickedWidget.name == 'simple') {
ClickedWidget.edit();
}
});
This worked nicely but got in the way with selecting text in an editable element. That thus also explains why it is setup like that.
So to solve this properly I created a plugin that shows a context menu on right clicking the widget, with the options to edit and remove. I have made this plugin available on CKEditor website for others to use;
http://ckeditor.com/addon/widgetcontextmenu
I don't realy know if this is where the problem come from but it seems to be that the event of stopPropagation()is applying to both div at a time.
A bit of explanation : So I have a div ".customSelect" that display herself only if you click on a link ".custom-select".
The main problem is that when I told it to close it self if I click on the body, it open an other div (which has the same class but still shouldn't).
What is the best way to make them be independent ?
This is the code and here is a link to the Fiddle.
$('.custom-select').click(function(e){
e.stopPropagation();
$(this).next($('.customSelect')).toggle(350);
});
$('body').click(function(e){
$('.customSelect').toggle(350);
});
What am I doing wrong?
Use this to hide only the visible ones when you click away.
$('body').click(function(e){
$('.customSelect:visible').toggle(350);
});
I have a site menu which sits underneath an overlying and is revealed by clicking on a button on the overlying , which slides it aside.
What I want to do is, while the site menu is open, prevent the overlying (everything but the menu button, ideally) from being interacted with.
I can do this by hiding and showing a container that sits over top of all the overlying content, but I was wondering if there's a way to just set some sort of property with CSS (best option) or javascript to disable click / touch events on the overlying . Any ideas?
You could use a JQuery modal overlay to prohibit the user from using anything else but whatever is in the modal div.
http://jqueryui.com/demos/dialog/#modal
When the menu is open, add this attribute to whatever controls you would like to disable
onclick="return false;"
Then remove the attribute when the menu is closed. This will prevent the default action from occuring.
You can do this without adding an attribute by using this code:
document.getElementById("myElement").onclick = function() { return false; }
CSS is about the look, not the behavior. So you can't enable or disable elements by applying CSS to them.
Your solution with an overlay is quite capable, i would do it this way too. Note that your overlay can be transparent or semi-transparent.
It is possible to be solved by overriding the click event with Javascript, but why bother creating a complicated solution (you'll have to redefine the onclick event on every element and then somehow set it back to normal) if you've already got a short clean solution?
As mbsurfer has already suggested, a quick way of disabling everything except your menu is to use the jQuery UI's .dialog with the modal option:
$(function() {
$( "#menu" ).dialog({
modal: true
});
});
More info in the docs: http://api.jqueryui.com/dialog/
The title is a little bit messy, so let me try to explain in the actual question:
Suppose I have the following HTML setup.
<div id="userMenu">
<div id="userMenu-expanderLink">Mouseover here!</div>
<div id="userMenu-collapserLink">You can close the menu by mouse out.</div>
<div id="userMenu-expandedContent">Extra Content</div>
</div>
Now, userMenu and userMenu-expanderLink are shown by default. userMenu-expandedContent and userMenu-collapserLink are hidden by default.
What I am trying to do in jQuery is to slideDown the userMenu-expandedContentwhen a mouseover event occurs on userMenu-expander. All good there, this is my code:
$("#userMenu-expanderLink").mouseover(function() {
$("#userMenu-expandedContent").stop().slideDown(200);
$("#userMenu-expanderLink").hide();
$("#userMenu-collapserLink").show();
$("#userMenu").addClass("userMenu-expanded");
});
As you can see, I'm also hiding the expanderLink and showing the collapserLink; and also adding a class called userMenu-expanded to #userMenu. Until now, this code has no problems. Everything works well.
But now, I want that when the user has a mouseOut event on #userMenu.userMenu-expanded, effectively moving his mouse out of the #userMenu that is expanded, I want when that happens, the expandedContent is slideUp'd, the expander and collapser links swapped, and the class removed. I know how to do that, but handling the event seems to be a problem.
Putting $("#userMenu.userMenu-expanded")... directly alongside the code I have of course does not work, since a div with such id and such class is only generated if the menu has been expanded, and the div's class is removed once the menu is collapsed. I don't directly use a mouseover/mouseout event on one object because I want the collapsing to be triggered only when the user takes his mouse out of the menu, not the expander link.
So, here's my problem. How can I get such mouse out event? I have tried adding the event handler in the callback of .addClass, but no avail, it would basically permanently close that expanded menu (basically I can't ever expand it again until I reload the page).
How can this be done? I'm not very experienced with jQuery, so a detailed answer would be most appreciated. I'm more interested on how can this be done rather than just accomplishing it, I want to learn ^_^.
Thanks!
I have found a correct way to do this. This is my final implementation.
$(document).ready(function() {
// UserMenu Expander, which is also a form of drop down
$("#userMenu-expander").mouseenter(function() {
//alert("Usermenu expanding…");
$("#userMenu-expandedContent").slideDown(200, function() {
$("#userMenu").addClass("userMenu-expanded");
});
$("#userMenu-expanderLink").hide();
$("#userMenu-collapserLink").show();
});
$("#userMenu.userMenu-expanded").live('mouseleave', function() {
//alert("Usermenu de-expanding…");
$("#userMenu-expandedContent").slideUp(200);
$("#userMenu-expanderLink").show();
$("#userMenu-collapserLink").hide();
$("#userMenu").removeClass("userMenu-expanded");
});
});
i have this jquery script that clicks on link add info then hides it and brings up a form. and when you press cancel it needs to show the h3 again, but it deosnt show it, i dont know why:
heres my working code: http://jsfiddle.net/GLqcx/2/
$("h3").show();
should be
$("h3 a").show();
In your .addInfo click handler, you are hiding the <a> with this line:
$(this).hide();
However, in your .cancelInfo click handler, you are showing the <h3>:
$("h3").show();
You'll need to change one or the other, so that you are hiding/showing either the <h3> or the <a>.
I've taken the liberty of fixing your problem and optimizing your code a bit. Here's what I came up with:
$(".cancelInfo").click(function(e) {
e.preventDefault();
$(this).parent().hide().next().show();
});
$(".addInfo").click(function(e) {
e.preventDefault();
$(this).parent().hide().prev().show();
});
Here's a demo showing that code in action ->
Instead of using broad selectors, we are now using our knowledge of the document structure to traverse to and manipulate the correct elements. In addition, we are only doing one selection, thus saving some time and work.
Or alternatively,
$("h3").hide();
instead of $(this).hide()
As you are hiding the a link not the h3 in your code. So when you tried to show the h3, the a link was still hidden.