I'm currently working on a full screen navigation menu that opens when I click the hamburger icon. Right now I am able to toggle the navigation by adding a class called "open" that triggers when I click on the menu. But I am stuck when it comes to closing it. Could you review my code and let me know what I'm missing?
$(document).ready(function() {
$('#menu').on('click', function() {
$('.overlay').addClass('open');
$('#menu').removeClass('open-menu');
$('#menu').addClass('close-menu');
});
$('.#menu').on('click', function() {
$('.overlay').removeClass('open');
$('#menu').addClass('open-menu');
$('#menu').removeClass('close-menu');
});
});
use toogle function for this like
$( "#target" ).toggle(function() {
alert( "First handler for .toggle() called." );
}, function() {
alert( "Second handler for .toggle() called." );
});
Related
I have a verticalNavbar(having a bar-icon) which is based on toggle so when one clicks it toggles out(opens up) and clicks again it togglesin(closes). but however I want the navbar to toggle in(close) when user clicks anywhere on the web page other than the bar-icon(on verticalNavbar) - given that it was opened else the page click should not do nothing. I am finding it difficult to manage with jquery toggle, here's my code
$('.bar-icon').on("click", function(){
$( ".left-side" ).toggleClass('wdt80');
$( ".left-side" ).toggleClass('wdt210');
$('.left-side-inner').toggle('fast');
$( ".left-side" ).toggleClass("shadow");
$('.overlay').toggle();
});
<div class="bar-icon">
<a ><img src="///_baricon_img.jpg"></a>
</div>
My Solution -
// closing vertical navbar - while opened
$('.page').on("click",function(){
if ($('.left-side-inner').is(':visible')) {
$( ".left-side" ).toggleClass('wdt210');
$( ".left-side" ).toggleClass('wdt80');
$('.left-side-inner').toggle('fast');
$( ".left-side" ).toggleClass("shadow");
$('ul.sub-menu').hide();
// $('.overlay').toggle();
}
});
Michael, you could addClass instead of using toggleClass, also comparing if something has a class to prevent adding repeated classes, so you could do something like this:
$('.bar-icon').on("click", function(){
if($( ".left-side" ).hasClass('wdt210'){
$( ".left-side" ).addClass('wdt210');
$('.left-side-inner').show('fast');
$( ".left-side" ).addClass("shadow");
$('.overlay').show();
}
});
You can use document.click or window.click to achieve this.
$(window).click(function(){
//Close menu
});
$(document).on('click', function(){
//Close menu
});
Try to add class to navbar when it open and remove same when it is close. Use same class.
$(document).click(function() {
if($('.bar-icon').hasClass('active')) {
$('.bar-icon').trigger('click');
}
});
This is basically a menu toggle feature which I want to repeat but can't achieve the intended unless I refresh the page. Clicking on .fa-bars adds class .animate to body which slides in the menu from the left, when the menu is visible clicking anywhere outside the menu area, it hides the menu as well as removes the class.animate from body.
This only works once then I refresh the page.
Any help in this regard will be appreciated
jQuery code
$(document).ready(function()
{
$(document).on('click', function()
{
if($('body').hasClass('animate'))
{
$('body.animate').on('click', function()
{
$(this).removeClass('animate');
});
}
else
{
$('.fa-bars').on('click', function()
{
$('body').addClass('animate');
});
}
});
});
I think he want to close menu when click on body only. This code may help:
$(document).ready(function () {
$('.fa-bars').on('click', function (evt) {
$('body').addClass('animate');
evt.stopPropagation();
});
$('body').on('click', function () {
if ($('body').hasClass('animate')) {
$('body').removeClass('animate');
}
});
});
Click on fb-bars to open menu
Click on body to close menu if already opened
I have tried these things without the use of a toggle and they work individually. However when i do a toggle nothing works properly please help.
$(document).ready(function() {
$(".nav-toggle").toggle(
function () {
$( '#menu' ).multilevelpushmenu( 'expand' );
},
function () {
$( '#menu' ).multilevelpushmenu( 'collapse' );
},
);
});
Nav toggle html simple button.
<p><a class="nav-toggle" href="#"><span></span></a>Menu</p>
The .toggle() you are using is a jQuery event. It works like a click of button/switch. toggle() (Event) event is deprecated in jQuery 1.8 and removed in jQuery 1.9. So this is invalid now.
Current .toggle() function changes the state of the element. Like .show() and .hide()
*Referred from this answer
$(document).ready(function () {
var state = false;
$(".nav-toggle").click(function () {
if(!state){
$('#menu').multilevelpushmenu('expand');
state = true;
}
else{
$('#menu').multilevelpushmenu('collapse');
state = false;
}
});
});
My home page contains multiple boxes.
On each boxes, when mouseover in or out , the title disappears and the content appears.
It works fine.
The problem is that when mouseovering more than one box on a short period of time, it is a mess.
$( ".views-field-wrapper" ).each(function(){
$( this ).hover(function() {
$( "#front_panel",this ).fadeOut(400);
$( "#back_panel",this ).delay(500).fadeIn(1000);
}, function(){
$( "#back_panel",this ).fadeOut(400);
$( "#front_panel",this ).delay(500).fadeIn(1000);
});
});
How can I stop the previous mouseover reaction when mouseovering another box?
EDIT :
My intial code: http://jsfiddle.net/tz3d6ct6/
Kumar's code that works perfectly with jquery > 1.6 (I must use jquery1.4) http://jsfiddle.net/hrkf5p7w/
Try to use stop() and no need to use loop to bind hover event,
$( ".views-field-wrapper" ).hover(function() { // no need to use each loop
$( "#front_panel",this ).stop(true).fadeOut(400);
$( "#back_panel",this ).delay(500).fadeIn(1000);
}, function(){
$( "#back_panel",this ).stop(true).fadeOut(400);
$( "#front_panel",this ).delay(500).fadeIn(1000);
});
Try it without using using delay() like,
$(".views-field-wrapper").hover(function () { // no need to use each loop
$("#front_panel", this).stop(true).fadeOut(400);
$("#back_panel", this).fadeIn(1000);
}, function () {
$("#back_panel", this).stop(true).fadeOut(400);
$("#front_panel", this).fadeIn(1000);
});
$(".views-field-wrapper").hover(function () { // no need to use each loop
$("#front_panel", this).stop(true).fadeOut(400);
$("#back_panel", this).fadeIn(1000);
}, function () {
$("#back_panel", this).stop(true).fadeOut(400);
$("#front_panel", this).fadeIn(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='views-field-wrapper type-t nodetype-t'>
<div id='front_panel'>title</div>
<div style='display:none' id='back_panel'>teaser</div>
</div>
I using jquery slidetoggle to show a DIV
but I need set if mouse click not in div.list go close this slideToggle
$( "#list_button" ).click(function() {
$( ".list" ).slideToggle( "fast" );
});
I only found if mouseout.... I cant find how to set if click any "anywhere on the page" to close this toggle
for testing : http://jsfiddle.net/sdgwbyv8/
$( "body" ).click(function( event ) {
if(
event.target.className!='list' && event.target.parentNode.parentNode.className!="list"
) {
$( ".list" ).slideToggle('fast');
}
});
Demo: http://jsfiddle.net/sdgwbyv8/9/ One possible solution, i guess there are better ones....
You can do it by event.stopPropagation():
$("#list_button").click(function (event) {
if ($(".list").is(":hidden")) {
event.stopPropagation();
$(".list").slideToggle("fast");
}
});
$('body').click(function () {
$(".list").hide();
});
$(".list").click(function (event) {
event.stopPropagation();
});
Working Fiddle