When I click on the toggle menu it opens properly and then it automatically closes. I don't know why it is happening. I have only a little knowledge of JS.
How can I solve this problem?
My code
if ($('.nav-menu').length) {
var $mobile_nav = $('.nav-menu').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class = "icofont-navigation-menu" > < /i></button > ');
$('body').append('<div class="mobile-nav-overly"></div>'); $(document).on('click', '.mobile-nav-toggle', function(e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').toggle();
});
$(document).on('click', '.mobile-nav .drop-down > a', function(e) {
e.preventDefault();
$(this).next().slideToggle(300);
$(this).parent().toggleClass('active');
});
$(document).click(function(e) {
var container = $(".mobile-nav, .mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
}
});
}
else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}
Now its working
if ($('.nav-menu').length) {
var $mobile_nav = $('.nav-menu').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="icofont-navigation-menu"></i></button>');
$('body').append('<div class="mobile-nav-overly"></div>');
$(document).on('click', '.mobile-nav-toggle', function (e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').toggle();
});
$(document).on('click', '.mobile-nav .drop-down > a', function (e) {
e.preventDefault();
$(this).next().slideToggle(300);
$(this).parent().toggleClass('active');
});
$(document).click(function (e) {
var container = $(".mobile-nav, .mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
// I removed the unnecessary code from here
}
});
} else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}
Related
I'm creating product variant accordions for my Shopify store and so far I've been able to make it so that the accordions will open but they won't collapse when you click on them again. If anyone can provide some guidance on what I'm doing wrong I'd appreciate it!
function swatchNamePlacement() {
$('.swatches .swatch-view .swatch-img-text').each(function () {
var elm = $(this);
var parent = elm.closest('.swatch-view-item');
parent.append(elm);
});
}
function isSwatchKingLoaded() {
var watch = setInterval(myTimer, 200);
function stopTimer() {
clearInterval(watch);
}
function myTimer() {
if(typeof VariantSwatchKing !== "undefined" && VariantSwatchKing !== '') {
if($('.swatches').length > 0){
$('.swatches > div').eq().addClass('open');
stopTimer();
swatchNamePlacement();
}
}
}
}
$('.product__info-wrapper').on('click','.swatches > div', function(e){
e.preventDefault();
var element = $(this);
var parent = element.parent();
// parent.toggleClass('open');
if(parent.hasClass('open')) {
element.removeClass('open')
} else {
parent.find('.swatches > div').removeClass('open');
element.addClass('open')
}
});
I have 2 issues with this code:
When the submenu on mobile is dropped down the "X" is not closing it back
I sorted the problem with the anchor links (#) that are in the sub level. They close the drop down menu but don't change the "X" back to the "hamburger"
Thank you in advance for your help. The temporary file is this one: http://www.un-poco.com/navtemp
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this),
settings = $.extend({
title: "Menu",
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function() {
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
} else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
} else {
$(this).siblings('ul').addClass('open').show();
}
});
};
if (settings.format === 'multitoggle')
multiTg();
else
cssmenu.addClass('dropdown');
if (settings.sticky === true)
cssmenu.css('position', 'fixed');
resizeFix = function() {
if ($(window).width() > 768) {
cssmenu.find('ul').show();
}
if ($(window).width() <= 768) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($) {
$(document).ready(function() {
if ($(window).width() <= 768) {
$('#cssmenu ul ul li').on('click', function() {
$("#cssmenu ul").hide();
});
}
$("#cssmenu").menumaker({
title: "",
format: "multitoggle"
});
});
})(jQuery);
The problem is with your css styling. you dropdown menu has a padding top. you can find the padding here #cssmenu > ul. The reason why the menu was not closing because the click was not fired on your x icon instead it was on your dropdown div. change the padding to margin which will move the entire div below that should work.
Because in mobile view ul dropdown list is over to hamburger menu that's why your click event not trigger.
Try to use margin instead of padding in your ul styling. See below code -
CSS-
#cssmenu > ul {
margin-top: 43px;
float: right;
}
For getting back hamburger icon on dropdown item click you need to just change your #menu-button class like below code -
JS Code -
(function($) {
$(document).ready(function() {
if ($(window).width() <= 768) {
$('#cssmenu ul ul li').on('click', function() {
// add this line only in your code might be solve your issue
$('#cssmenu').find('#menu-button').addClass('menu-opened').removeClass('menu-closed');
$("#cssmenu ul").hide();
});
}
$("#cssmenu").menumaker({
title: "",
format: "multitoggle"
});
});
})(jQuery);
here is my code...
var menuToggle = false;
$(document).ready(function () {
// Init Tabs
$("#ipsg-tabs").tabs();
// Init Tooltips
$(function () {
$('.ipsg-tab').tooltip();
});;
// Init Menu
accordionMenu();
// Toggle Menu
$('.ipsg-logo-menu-btn').click(function () {
if (!menuToggle) {
menuToggle = true;
$('.sg-accordion > .ipsg-nav-items').hide();
$('.sg-accordion h3').removeClass('state-selected');
$('.ipsg-container').addClass('ipsg-menu-collapse');
} else {
menuToggle = false;
$('.ipsg-container').removeClass('ipsg-menu-collapse');
}
});
});
function accordionMenu() {
var allPanels = $('.sg-accordion > .ipsg-nav-items');
var menuLeaving = false;
$('.sg-accordion > h3 > a').click(function () {
if (!menuToggle) {
if (!$(this).parent().hasClass('state-selected')) {
allPanels.slideUp('fast');
$('.sg-accordion h3').removeClass('state-selected');
$(this).parent().next().slideDown('fast');
$(this).parent().addClass('state-selected');
} else {
allPanels.slideUp('fast');
$('.sg-accordion h3').removeClass('state-selected');
}
}
return false;
});
$('.sg-accordion > h3 > a').mouseenter(function () {
if (menuToggle) {
menuLeaving = false;
$('.sg-accordion > .ipsg-nav-items').hide();
$('.sg-accordion h3').removeClass('state-selected');
$(this).parent().next().show();
$(this).parent().addClass('state-selected');
}
});
$('.sg-accordion > .ipsg-nav-items').mouseenter(function () {
if (menuToggle) {
menuLeaving = false;
}
});
$('.sg-accordion > h3 > a').mouseleave(function () {
if (menuToggle) {
menuLeaving = true;
setTimeout(function () {
if (menuLeaving) {
$('.sg-accordion > .ipsg-nav-items').hide();
$('.sg-accordion h3').removeClass('state-selected');
}
}, 400);
}
});
$('.sg-accordion > .ipsg-nav-items').mouseleave(function () {
if (menuToggle) {
menuLeaving = true;
setTimeout(function () {
if (menuLeaving) {
$('.sg-accordion > .ipsg-nav-items').hide();
$('.sg-accordion h3').removeClass('state-selected');
}
}, 400);
}
});
}
I am trying to have my toggle menu closed or open depending on the page reload. So if i am using hamburger menu, and click on a link, i want the hamburger menu to stay after reload. Same with having the menu opened up, i want it so if i click on those links, for the menu to stay open on reload.
anyone have any ideas?
This is the sort of thing I would use localStorage or cookies for. You can set an variable for either that would allow for you to dictate if the menu should be opened or closed.
Asked Previously. You can use cookies for that as it is easy to implement and maintainable.
Link is here Jquery UI Accordion menu saving menu state even after refresh
I am using datatables plugin and using this for click:
$('.datatable').on('click', 'img#openpli-playlist', function(e) {
alert("You clicked OPENPLI ICON!");
});
Now I need to use jQuery plugin longclick and using this:
$('.datatable').longClick(function(e) {
alert("You clicked OPENPLI ICON!");
},1000);
So the problem is how can I add selector to longclick I try this for selector but is not working:
$('.datatable img#openpli-playlist').longClick(function(e) {
alert("You clicked OPENPLI ICON!");
},1000);
Can someone give me solution why is this not working?
Thanks
Simple fix will be:
var tmr = 0;
$(element).mousedown(function () {
tmr = setTimeout(function () {
alert("You clicked for 1 second! Wow!");
}, 1000);
}).mouseup(function () {
clearTimeout(tmr);
});
Now this can be used in delegation too:
var tmr = 0;
$(static_parent).on("mousedown", element, function () {
tmr = setTimeout(function () {
alert("You clicked for 1 second! Wow!");
}, 1000);
}).on("mouseup", element, function () {
clearTimeout(tmr);
});
Your solution:
var tmr = 0;
$('.datatable').on('mousedown', 'img#openpli-playlist', function(e) {
tmr = setTimeout(function () {
alert("You clicked OPENPLI ICON!");
}, 1000);
}).on('mouseup', 'img#openpli-playlist', function(e) {
clearTimeout(tmr);
});
As an improvement to previous answers, you can distinguish between click and long press in this way:
var tmr = 0;
var islong = 0;
$(element)
.mousedown(function () {
tmr = setTimeout(function () {
// Handle the long-press
alert("You clicked for 1 second!");
console.log("You clicked for 1 second!");
islong = 1;
}, 1000);
})
.mouseup(function () {
if (islong == 0) {
// Handle the click
alert("This is a click!");
console.log("This is a click!");
}
islong = 0;
clearTimeout(tmr);
});
I've created a function that toggles a menu based on its' visibility. I also assigned a mouseup event to the document where the menu closes if the user clicks anywhere outside of it. The problem is when the mouseup event listener is added for the document the toggle no longer works. The visibility test: $menu.is(":visible"); returns false despite the menu being in plain sight. What's going on here?
$(function() {
var $toggleMenu = $(".toggle-menu"),
$menu = $(".menu");
$toggleMenu.on("click", function(e) {
e.preventDefault();
toggleUserMenu();
});
$(document).on("mouseup", function (e) {
if (!$menu.is(e.target) && $menu.has(e.target).length === 0) {
$menu.hide();
}
});
function toggleUserMenu() {
var menuIsVisible = $menu.is(":visible");
if (menuIsVisible) {
$menu.hide();
} else {
$menu.show();
}
}
});
.toggle-menu {
color: #444;
display: inline-block;
margin-bottom: 15px;
text-decoration: none;
}
.menu {
border: 1px solid black;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Toggle Menu
<div class="menu">
Menu Item 1
Menu Item 2
Menu Item 3
</div>
One solution can be by preventing the mouseup in the conflicting area to bubble up.
$(function() {
var $toggleMenu = $(".toggle-menu"),
$menu = $(".menu");
$toggleMenu.on("click", function(e) {
e.preventDefault();
toggleUserMenu();
});
$toggleMenu.on("mouseup", function(e) {
e.preventDefault();
e.stopPropagation();
});
$(document).on("mouseup", function (e) {
if (!$menu.is(e.target) && $menu.has(e.target).length === 0) {
$menu.hide();
}
});
function toggleUserMenu() {
var menuIsVisible = $menu.is(":visible");
console.log(menuIsVisible);
if (menuIsVisible) {
$menu.hide();
} else {
$menu.show();
}
}
});
$toggleMenu.on("mouseup", function(e) {
e.preventDefault();
e.stopPropagation();
});
This will catch the mouseup that is fired along with the click on Toggle Button and stops it from bubbling up to document. preventDefault() doesn't have any specific purpose here, It came with your code that I copied :)
Here is a fiddle
you run $menu.hide twice and it is problem.
$(function() {
var $toggleMenu = $(".toggle-menu"),
$menu = $(".menu");
$toggleMenu.on("click", function(e) {
e.preventDefault();
toggleUserMenu();
});
$(document).on("mouseup", function (e) {
console.log("Event is still firing");
if (!$menu.is(e.target) && $menu.has(e.target).length === 0) {
//if you commment this the code work.
// $menu.hide();
}
});
function toggleUserMenu() {
var menuIsVisible = $menu.is(":visible");
if (menuIsVisible) {
$menu.hide();
} else {
$menu.show();
}
}
});
.toggle-menu {
color: #444;
display: inline-block;
margin-bottom: 15px;
text-decoration: none;
}
.menu {
border: 1px solid black;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Toggle Menu
<div class="menu">
Menu Item 1
Menu Item 2
Menu Item 3
</div>