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/
Related
I've got an element on a webpage, with a defined set of :hover styles. On mobile, this causes the "sticky hover" effect, where a touch on the element will cause the hover to apply, which is then removed when the user touches somewhere else on the page.
This is desirable for me - I'm not looking to prevent this, but I need a way to prgramatically remove that hover state once a user has interacted with it (to return the element to it's original state).
Is that possible? I've tried a $('some-other-element').click() but nothing will remove that state aside from manually clicking elsewhere on the page.
Instead of using :hover, make it a class such as .hover.
Then add and remove it using jQuery such as
$(".your-button").on("mouseenter", function()
{
$(this).addClass("hover");
});
$(".your-button").on("mouseleave", function()
{
$(this).removeClass("hover");
});
// Explicitly remove it
$(".your-button").removeClass("hover");
Edit: also if you want to use the click method. You may need to make it click on something that is focusable.
Lastly you could also try using the :active requirement.
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
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!
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 wrote accordion script to deploy in mobile website, every thing is working fine. However I am facing one issue when the page length is increasing.
there are about 8 to 10 bars in accordion. when i am scrolling down and clicking any of the item bar to display content, page is moving to top instead of staying at current position where i have clicked.
Please advice me the solution.
below is the script
$('.acc_container').hide();
$('.acc_container1').hide();
$('.acc_trigger').click(function(){
$(this).siblings('.acc_container1').slideUp('fast');
$(this).parent().siblings('div').children('.acc_container1').slideUp('fast');
$(this).parent().siblings('div').children('.acc_container').slideUp('fast');
$(this).next().siblings('.acc_container').slideDown('fast');
});
On each of your accordion's triggers which display content, which I assume are anchor tags, you need to prevent the default behavior of the event. Which in the case of anchor tags, is to take you too the href attribute of the tag. If the href attribute is set to #, clicking on the anchor tag will take you to the top of the page. So, something like this should work, calling preventDefault() on jQuery's event object, assuming .acc_trigger is the selector for all of your accordian triggers:
$(".acc_trigger").click(function(e) {
$(this).siblings('.acc_container1').slideUp('fast');
$(this).parent().siblings('div').children('.acc_container1').slideUp('fast');
$(this).parent().siblings('div').children('.acc_container').slideUp('fast');
$(this).next().siblings('.acc_container').slideDown('fast');
e.preventDefault();
});
I am assuming your click might a href click if so
$("a").click(function(event) {
// do all your logic here and add the below link
event.preventDefault();
});
If that is not href
Give your .acc_container class a set height of you need like 500px or so, and an
height:600px;
overflow: hidden;
That should take carek