I have looked at similar questions and read the proposed solutions, but it seems each case regarding this issue is different.
Very simply when I press my menu icon the first time, my slideout menu appears. Each time after the first requires two presses or two clicks to activate the slideout menu.
The jQuery -
$('.slideout-menu-toggle').on('click', function(event){
event.preventDefault();
// create menu variables
var slideoutMenu = $('.slideout-menu');
var slideoutMenuWidth = $('.slideout-menu').width();
// toggle open class
slideoutMenu.toggleClass("open");
// slide menu
if (slideoutMenu.hasClass("open")) {
slideoutMenu.animate({
left: "0px"
});
} else {
slideoutMenu.animate({
left: -slideoutMenuWidth
}, 250);
}
});
$('.slideout-menu-close').on('click', function(event){
event.preventDefault();
// create menu variables
var slideoutMenu = $('.slideout-menu');
var slideoutMenuWidth = $('.slideout-menu').width();
// toggle open class
slideoutMenu.toggleClass("open");
// slide menu
if (slideoutMenu.hasClass("open")) {
slideoutMenu.animate({
left: -slideoutMenuWidth
}, 250);
} else {
slideoutMenu.animate({
left: "0px"
});
}
});
You can see a demo of the problem viewing through a smartphone at www.chrismazzochi.com.
Thanks for you help,
Chris
You are facing this problem because you toggle class before checking for class "open" using hasClass(). Just toggle class "open" after condition check.
Try this :
$('.slideout-menu-toggle').on('click', function (event) {
event.preventDefault();
// create menu variables
var slideoutMenu = $('.slideout-menu');
var slideoutMenuWidth = $('.slideout-menu').width();
// toggle open class
slideoutMenu.toggleClass("open");
// slide menu
if (slideoutMenu.hasClass("open")) {
slideoutMenu.animate({
left: "0px"
});
} else {
slideoutMenu.animate({
left: -slideoutMenuWidth
}, 250);
}
});
$('.slideout-menu-close').on('click', function (event) {
event.preventDefault();
// create menu variables
var slideoutMenu = $('.slideout-menu');
var slideoutMenuWidth = $('.slideout-menu').width();
// toggle open class
if (slideoutMenu.hasClass("open")) {
slideoutMenu.animate({
left: -slideoutMenuWidth
}, 250);
} else {
slideoutMenu.animate({
left: "0px"
});
}
// toogle class after condition check
slideoutMenu.toggleClass("open");
});
Related
please see this fiddle http://jsfiddle.net/rabelais/t6qc4Lrd/1/
var $menu = $('#menu');
$menu .click(function () {
if ( $('#igna-1').css('display') != 'none' ) {
$('#igna-1').slideToggle("fast", function() {
$('#igna-2').animate({ left: 'hide' }, 300, function() {
$('#black, #igna, #dazed, #sons, #mad, #stimp').slideUp("fast", function() {
$('#fatal').animate({ left: 'hide' }, 300);
});
});
});
} else if ( $('#fatal').css('display') == 'none' ) {
$('#fatal').animate({ left: 'toggle' }, 300, function() {
$('#igna, #black, #dazed, #sons, #mad, #stimp').slideToggle("fast");
});
} else {
$('#black, #igna, #dazed, #sons, #mad, #stimp').slideUp("fast", function() {
$('#fatal').animate({ left: 'hide' }, 300);
});
}
if ($('#bio-line-1').css('display') != 'none') {
$('#bio-line-2').slideUp("slow");
window.setTimeout(function () {
$('#bio-line-1').animate({ width: 'hide' });
}, 300);
}
else if ( $('#mad-1').css('display') != 'none' ) {
$('#mad-1, #mad-2, #mad-3').slideToggle("fast", function() {
$('#mad-4').animate({ left: 'hide' }, 300, function() {
$('#black, #igna, #dazed, #sons, #mad, #stimp').slideUp("fast", function() {
$('#fatal').animate({ left: 'hide' }, 300);
});
});
});
}
1.Clicking on the WORK link opens further links.
2.Clicking on MAD LONDON opens a sub menu.
3.With both these menus open when you click on WORK again, both menus close at the same time.
My Question: Instead of them closing together I need the sub menu to fold away first and then the first menu. This affect does happen when one selects any link from the sub menu.
Please help. Thanks.
It's closed by the last else of your first if group, simply removing that last else will solve the problem (and in the example doesn't cause any other). See the working fiddle: http://jsfiddle.net/ktn425c6/
i have a settings menu that shows up when the page loads, it has a button that hides it by adding the class "hidedown" and removing "showup" and vice verse when showing it.
i just want to minimize the menu after 2 mins in case someone does not click on the button.
my problem is, when i do this
if ($(".hidedown").length > 0 ) {
//hidedown class is present
} else {
//hidedown class is not present
}
i am always getting "hide class is not present" even when the class "hidedown" is there
/* so i have this function */
/* minimize the floating menu after 2mins */
window.setTimeout(function() {
if ($(".hidedown").length > 0) { /* i don knw why this is not working */
console.log("the menu should minimize");
$(".settings_link, .companies").animate({
left: "-=165"
}, 700, function() {});
$(this).html('<i class="fa fa-bars"></i>').removeClass("hidedowm").addClass("showup");
} else {
console.log("class 'hidedown' is not there!");
/* i get this even when the class is there */
}
}, 1000);
/* this will hide the settings/companies menu */
$(document).on("click", ".settings_link.showup", function() {
$(".settings_link, .companies").animate({
left: "+=165"
}, 700, function() {});
$(this).html('<i class="fa fa-bars"></i>').removeClass("showup").addClass("hidedowm");
});
/* this will show the settings/companies menu */
$(document).on("click", ".settings_link.hidedowm", function() {
$(".settings_link, .companies").animate({
left: "-=165"
}, 700, function() {});
$(this).html('<i class="fa fa-bars"></i>').removeClass("hidedowm").addClass("showup");
});
I want to close the last opened toggle if another one is clicked, all three of them are not related.
here's the code:
jQuery(function($){
// hamburger menu
$("#nav-trigger span").click(function(){
if ($("nav#nav-mobile ul").hasClass("expanded")) {
$("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
$(this).removeClass("open");
} else {
$("nav#nav-mobile ul").addClass("expanded").slideDown(250);
$(this).addClass("open");
}
});
// slidepanel
$('#panel-right').slidingPanel({position:'right', margin:'2.5em'});
// footer slide up menu
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
});
})
I managed to fix it myself. Here's the updated code:
`
jQuery(function($){
// hamburger menu
$('#nav-trigger span').click(function(){
if ($('nav#nav-mobile ul').hasClass('expanded')) {
$('nav#nav-mobile ul.expanded').removeClass('expanded').slideUp(250);
$(this).removeClass('open');
} else {
$('nav#nav-mobile ul').addClass('expanded').slideDown(250);
$(this).addClass('open');
}
// close footer panel if open
$('#panel:visible').slideToggle();
// close tabbed side panel if open
$( '#panel-right' ).animate({ right: 0, width: 40 }, 250, function() { }).removeClass('opened');
});
// initiate slidepanel
$('#panel-right').slidingPanel({position:'right', margin:'2.5em'});
// close other toggles if sidepanel is clicked
$('.tab').click(function() {
// close footer if open
$('#panel:visible').slideToggle();
// close menu if open
$('nav#nav-mobile ul.expanded').removeClass('expanded').slideUp(250);
$('#nav-trigger span').removeClass('open');
});
// footer slide up menu
$('.btn-slide').click(function(){
//show footer panel
$('#panel').slideToggle('slow');
//close menu if open
$('nav#nav-mobile ul.expanded').removeClass('expanded').slideUp(250);
$('#nav-trigger span').removeClass('open');
//close tabbed side panel if open
$( '#panel-right' ).animate({ right: 0, width: 40 }, 250, function() { }).removeClass('opened');
});})
see http://liveweave.com/Pieivc
what i want that in start there show be no icon for arrow up as not needed but when user click arrow down it appears should appears and when user reaches last itme in ul li list bottom arrow should vanish
how can i do to check it ?..
(function () {
$('#scrollup').on({
'mousedown touchstart': function() {
$(".sidebar-menu").animate({scrollTop: 0}, 2000);
},
'mouseup touchend': function() {
$(".sidebar-menu").stop(true);
}
});
$('#scrolldown').on({
'mousedown touchstart': function() {
$(".sidebar-menu").animate({
scrollTop: $(".sidebar-menu")[0].scrollHeight
}, 2000);
},
'mouseup touchend': function() {
$(".sidebar-menu").stop(true);
}
});
})();
You can check this using $('.sidebar-menu').scrollTop() value.
So for example, I wrote a function called check(), which checks the location of the scroll and display/hide the appropriate arrows. This function is called on mouse touchend event of each arrow.
function check() {
if ($('.sidebar-menu').scrollTop() == 0) {
$('#scrollup').hide();
$('#scrolldown').show();
} else if ($('.sidebar-menu').scrollTop() == height - 100) {
$('#scrolldown').hide();
$('#scrollup').show();
}
}
See it in action: http://jsfiddle.net/ry2zwho1/1/
Try to use this jsfiddle
$(function(){
var carousel = $('.carousel ul');
var carouselChild = carousel.find('li');
var clickCount = 0;
var canClick = true;
$(".btnPrevious").css('color', 'red').show();
itemWidth =......
I have a simple script toogle code that opens and closes Mobile responsive Menu.
My issue is when the menu is open i want to also be able to also click the area outside of the menu to close the menu. Any help would be great.
$(document).ready(function(){
$("#mobile-toggle").click(function(){
$("#mobile-menu").animate({
left: "0px",
opacity:1.0
}, 100);
});
$("#mobile-toggle2").click(function(){
$("#mobile-menu").animate({
left: "-200px",
opacity:1.0
}, 100);
}); });
Use the below JQUERY extension with existing code:
$.fn.clickOutsideThisElement = function (callback) {
return this.each(function () {
var self = this;
$(document).click(function (e) {
if (!$(e.target).closest(self).length) {
callback.call(self, e)
}
})
});
};
And call the function like this :
$("#mobile-toggle").clickOutsideThisElement(function() {
$("#mobile-menu").animate({
left: "0px",
opacity: 0
}, 1000);
}).click(function() { //Click inside menu
$("#mobile-menu").animate({
left: "-200px",
opacity: 1.0
}, 1000);
});
DEMO HERE >>