Relevant JSFiddle: http://jsfiddle.net/7u2fy/
I was trying to have a slide in menu that slides in on a button click and slides out when you press escape or click anywhere outside the menu. I also wanted to darken the non-menu portion of the screen when the menu is active.
My problem is the jquery click handler isn't working for the closing of the menu.
The jsfiddle looks a little weird for even though in my actual project it looks fine and only the jquery click handler isn't working.
The specific code that's not working...
$('#site-wrapper.show-nav #site-canvas').click(function () {
toggleNav();
});
Your click handler is working fine, the issue is the grey block that appears on this element: #site-wrapper.show-nav #site-canvas:after
It essentially blocks any clicks, remove the below property 'absolute' and your can click.
#site-wrapper.show-nav #site-canvas:after {
*position: absolute;*
}
The issue is within your CSS not your JS, please see this fiddle of clicking working: http://jsfiddle.net/7u2fy/1/
Related
I'm attempting to create a slide-in menu for a mobile website which has nested submenus that also slide in over the primary parent menu. This is done by editing the right style attribute to move each menu off & on screen.
Everything is working properly except that once I open a submenu, the function that's supposed to close the submenu is changing the CSS. The function that contains this instruction itself is executing (as evidenced by a console.log), but the line that edits the CSS is not working.
Here is the function that is having trouble:
$(document).ready(function(){
$('.close-sub-menu').click(function(){
$(this).parent().css("right", "-425px");
console.log("this line is logging correctly");
});
});
Interestingly enough, if I attempt to edit the CSS of background-color or left, it will work. But right will not work.
I've tried using addClass and removeClass instead, referencing the parent's class name directly instead of using this, and inline function calls, but none of it has seemed to work. I think it is either a scoping issue, or perhaps some interference with the parent menu. Either way, I'm not able to figure it out.
Here is a simple example of my problem in a JSFiddle: https://jsfiddle.net/wk4wwfer/2/
JQuery is very acceptable.
Your $('.slide-menu-sub-parent').click function is still firing when you click the close button.
Update your close function to be:
$('.close-sub-menu').click(function(e){
e.stopPropagation(); //Prevents the click event from bubbling up and triggering the other click events registered
$(this).parent().css("right", -425);
}
Fiddle solution.
I'm trying toggle a DIV element using jQuery, a good example of this implemented is clicking the sign up button on Udemy.
I've implemented something similar using jQuery but I'm sure that to gain the effect I'm looking for, I will have to use JavaScript but its just that I'm don't know how to use JavaScript.
The my implementation be seen in my fiddle here, I've initially set the div to display:none and used jQuery to show the div on button click.
As you can tell with the fiddle, it displays with an enlarging animation instead of just appearing (not sure how to change this) and i'm only unable to make the div disappear by again clicking the button.
Also, how would I go about implementing functionality to make the div disappear by clicking anywhere on the screen?
Thanks to anyone in advance for taking the time to help me out.
The issue you face is that a click on the button is also a click on an area where you would like the pop up to disappear, if it's already shown. Because events bubble, the button click would make the pop up appear and then the document click (which fires after this because of bubbling) would make the pop up immediately disappear.
To solve the problem, you must stop a click on the button from bubbling to the rest of the document as well. You do this with:
event.stopPropagation();
So, what you need to do is make sure that when the button is clicked, the click event doesn't bubble up to the document, where you will have already set up a click event handler that makes the pop up go away:
$(document).on('click', function(event) {
// We want to hide the pop up, but not if you click on
// the pop up itself - - anywhere else, but not the pop up
if(event.target.id !== "pop-up"){
$('#pop-up').hide();
}
});
See this fiddle for a working version: https://jsfiddle.net/0ajpd9go/8/
If you want your div to just appear on the screen change this line:
jQuery('#pop-up').toggle('fast');
to this:
jQuery('#pop-up').show();
Maybe you'd like to give bootstrap modal a try:
http://getbootstrap.com/javascript/#modals
I think what you are looking for is $.fn.toggle();
$.fn.toggle(); toggles the visibility of an element meaning if the element is visible then it will be hidden when toggled and if the element is hidden it will be shown when toggled.
Here is a basic (animation free) example of using toggle:
$(".button-that-toggles").on("click", function() {
$(".div-to-toggle").toggle();
});
Your box toggles with an "enlarging animation" because you used $.fn.slideToggle();
There are three default ways to toggle using jQuery (toggle, fadeToggle and slideToggle)
Here is an example of toggling a element using $.fn.fadeToggle();:
$(".button-that-toggles").on("click", function() {
// NOTE: 250 represents the duration of the animation, meaning that the animation will last 250 milliseconds.
$(".div-to-toggle").fadeToggle(250);
});
Here is an example of toggling a element using $.fn.slideToggle();:
$(".button-that-toggles").on("click", function() {
// NOTE: 250 represents the duration of the animation, meaning that the animation will last 250 milliseconds.
$(".div-to-toggle").slideToggle(250);
});
Also here is an example of how you can hide your div by clicking anywhere on the page:
// listen for a click anywhere in the page
$(document).on("click", function(event) {
// make sure the element that was clicked is not your div
if(!$(event.target).is(".your-div")) {
// you can now hide your div
$(".your-div").hide();
}
});
Also please remember that jQuery is JavaScript as a matter of fact jQuery is a library written in JavaScript.
Working in HTML, CSS and JS (technically Angular, if you think it's significant)
I have a Header menu with dropdown sub-menus and sub-sub-menus when viewed in desktop style.
On a PC the sub-menus appear on hover and clicking on the entry takes you somewhere.
Clicking on the root entry takes you somewhere different - so it has 2 purposes in life: be a link to a location AND be the hover trigger for the dropdown menu.
Not all root elements have a sub-menu.
There's a separate mobile menu, based on width media queries, but Tablets (especially in landscape mode) display in desktop style, and it's giving me gyp!
On tablets (tested in Safari iOS and in Chrome for iPad) the browser does some deep magic!...
For elements that have No dropdown then clicking on them takes you to
the link.
For elements that DO have a dropdown sub-menu, then
the first click has the effect of activating the hover - it doesn't activate the link but does reveal the menu.
The second click then activates the link.
Lovely!
Problem is... the menus don't disappear if you tap off them.
Tapping the page in general does nothing (no click-event raised)
Tapping something on the page that is clickable DOES clear the menu, and also invokes the click action for whatever you clicked.
My first thought was to put a transparent div across the whole rest of the page, above the page but below the menu, and bind a click event that would clear the menu.
But, I can't get the transparent layer AND the underlying page to both be clicked. See here for the problems I hit there.
Putting the click event on body (so that it gets triggered by bubble up) doesn't work (click event just isn't fired.)
I tried adding ngTouch, and that does cause click events to be triggered everywhere, but also breaks the behaviour of the sub-menus opening - all the links trigger immeidately and you can't reach the sub-menus.
Any thoughts at all? Help!
You just need to check if click happened outside of dropdown menu.
Something like:
$('html').click(function (e) {
if (e.target.id == '#yourDropdown') {
//do nothing and let the click be handled
} else {
$('#yourDropdown').hide();
// still let the click be propagated
}
});
Rather then relying on 'mobile browser magic' I would implement it myself. No Angular experience, but in jQuery the code would probably look something like this:
$('.menu li').on('click', function(e) {
var $target = $(this);
var $sub = $target.children('ul');
// only if sub and not yet active
if ($sub.length && ! $target.hasClass('active')) {
// show sub
$target.addClass('active');
// done
e.stopPropagation();
return false;
}
// normal click action triggered here
alert($target.children('a').text());
e.stopPropagation();
});
$('html').on('click', function(e) {
// clear all active menu items
$('.menu > li.active').removeClass('active');
});
And a quick example: http://jsfiddle.net/b0aqr1wc/
:Sigh:
A colleague I discussed this with this morning solved this instantly:
Use the "cover sheet" approach, but have the sheet collapse itself at the same time as collapse the menu.
You lose the ability to interact with the underlying page for only 1 tap - and that tap will visibly collapse the menu, so the user will have a prompt to try again.
I want to create a mouseover dropdown navigation (which works with tap on mobile/ipad as well) and have the problem, that the menu itself is in a complete different div. So not a child of that element.
jQuery('.top-menu').on("mouseover",function(){
jQuery(".top-menu-dropdown").stop().slideToggle(200,'easeOutCubic');
});
The div which is triggering that the menu slides down is .top-menu once hovered but I have the problem that I have to add the top-menu-dropdown class to it so it's closing as soon as the user exits the menu. And how can I add a short delay that the menu is not closing as soon as the cursor leaves it? (Stopping timer when you enter it again ofc)
I would write it more like this using the jquery hover function which has both the mouse over and mouse out built in as shown below.
jQuery('.top-menu').hover(
// Mouseover
function(){ jQuery(".top-menu-dropdown").stop().slideDown(200,'easeOutCubic'); },
// Mouseout
function(){ jQuery(".top-menu-dropdown").stop().slideUp(200,'easeOutCubic'); }
);
Replcace slideup and slidedown with whatever direction you would like :)
I tried this:
// this = modal
$(this).focus();
I tried tha above one as well as tried to trigger a click event on it but didn't work!
EDIT
This is the website i'm working on : "website", you can launch the modal and see that it does not scroll with arrow keys.
But if you click on the modal it becomes scrollable, and that's why I tried to trigger the click event with jquery
Try adding the focus on the first a hyperlink element and see what that does:
$('.modal a:first-child').focus();