Close mobile menu by clicking / tapping outside - javascript

I want to have the option to close a mobile menu by clicking outside of the menu on this site http://test1.wasodesign.com/
I searched StackOverflow and the web, and found this solution
<script>$(document).click(function(event) {
if(!$(event.target).closest('.collapse.in').length) {
if($('.collapse.in').is(":visible")) {
$('.collapse').hide();
}
}
})
</script>
I applied it, and the issue is that it does close on mobile when clicking outside of the menu but then I cannot reopen the menu afterward.
Is there any reason? How can I resolve this?
Thanks

you could try something like:
$('body').on("click", ".dropdown-menu", function() {
$('.dropdown-menu').hide()
$('.collapse').hide()
});
With this the menu should open when you click on the button.
$('.dropdown-menu').on("click",function() {
$('.collapse').show()
$('.dropdown-menu').show()
});
one of those two should work if not leave a comment.

Related

Ben Kamens jQuery Menu Aim: Sub menu wont reappear after it disappears

Looking at Ben Kemens jquery-menu-aim, I stumbled upon an example at codepen.
This (codepen) works and allows the user time to pass from the main menu to the sub menu BUT if you move away from the menu completely the submenu still keeps showing i.e. it (the submenu) won't go away (display:none).
So, I recreated the same example at codepen on JsFiddle and changed the Javascript
from:
$(document).click(function() {
$('a.hover').removeClass('hover');
$('.popover').css('display', 'none');
}
to:
$(document).click(function() {
$('a.hover').removeClass('hover');
$('.nav ul ul').css('display', 'none');
}
Now, if you click anywhere on the web page, apart from the menu/sub menu, the sub menu disappears as it should.
Problem: The sub menu won't reappear if you hover the main menu again.
How do I solve this?
Edit: Is there an alternate jQuery / Javascript to jquery-menu aim?.
I think what you want needs enter and exit instead of activate and deactivate.
Have you read the documentation?
Here is your Fiddle Updated.
$menu.menuAim({
enter: activateSubmenu,
exit: deactivateSubmenu
});

Disable any popup , When clicked on particular link

I am using popup advertising in my website.So it basically opens ads when clicked inside body.
But I want to disable any popups when link with class donot is clicked.
Right now when below link is clicked , popup opens and the donot link wont work.
<a class="donot" href="http://google.com">link</a>
I want To disable all popup activities and open the link when class donot is clicked
I tried below
$(".donot").click(function(e) {
e.preventDefault();
});​
I am unable to find anything in popupcode .Here is my adnetwork popup code http://jsfiddle.net/hsz2hyvw/
Here is demo of popup opening http://jsfiddle.net/hsz2hyvw/3/
Try this
$("body").click(function(e) {
if ($(e.target).hasClass('donot')) {
return false;
}
alert('d');
});​
Working Demo Here

ios7 click and hover not working

I have this problem on this website: http://www.gruppoedico.it/Default.aspx
The top menu has some dropdown functionality (on "Gruppo", "Attività", "Videoguide" and "Contatti"). It works like a charm on every browser exept the ones on ios7 (maybe ios6 too, I haven't tried), where the menu works on the page I linked, but not on every other page of the menu (you can try it just navigating on one of the pages from the menu).
I tried using the hover effect of css (no-js) and got the same result. Actually i'm using this script:
$(document).ready(function () {
$("nav li").click(function () {
$(".hover").removeClass('hover');
if ($(this).find("ul").hasClass('hover')) {
$(this).find("ul").removeClass('hover');
} else {
$(this).find("ul").addClass('hover');
}
});
});
I'm experiencing this problem only on apple devices.
UPDATE
I think i found the problem, it's the transition on the ul that in some way interfer with the click event. I'll try to find a solution.

Bootstrap 3 Open Drop Down on page load with Javascript

I can't seem to open this dropdown menu on page load. Can anyone help?
Documentation on Bootrap 3 is here: http://getbootstrap.com/javascript/#dropdowns
I tried this but it doesn't seem to work
$('#myDropdown').dropdown()
Ultimately, I need to be able to open a drop down that is inside a collapsible menu. For example, I want to open the first down down menu after the user clicks on the menu button. but I can't get it to work.
http://jsfiddle.net/G4k4F/3
Edit: When the navbar is shown, use a timer to wait 1 millisecond before calling .dropdown('toggle'). Like this.
function OpenDropDown() {
$('.dropdown-menu').dropdown('toggle');
};
$('.collapse.navbar-collapse').on('show.bs.collapse', function () {
window.setTimeout(OpenDropDown, 1);
});
try this :
$(function () {
$('.dropdown-menu').dropdown('toggle');
});
Try this..
$(function () {
$('[data-toggle="dropdown"]').dropdown('toggle');
});
Or you can use the button id like:
$('#dLabel').dropdown('toggle');

How to get screen not to jump back to up when clicking div to open

i got page with multiple open/hide divs and the problem here is that everytime i try to click one to open or hide the screen jumps at the top of the page..
Anyone idea how to fix this? Javascript is used to hide divs.
Thanks!
$(function() {
$('a.hide').click(function() {
$(this).closest('.hideable').find('.hide-container').toggle();
});
$('a#hide-all').click(function() {
$('.hide-container').hide();
});
$('.hide-container').hide(); });
It sounds like you are using href="#", don't do that, build on things that work instead.
If you’re using an A tag to open close the DIV’s, it means that in Javascript you’ll need to disable the default action for the A tag.
In jquery for example:
$('a').click(function(e) {
e.preventDefault();
});

Categories

Resources