We Keep Coding

jQuery On Click Requiring Two Clicks After The First

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");
});

How to include a close button using jQuery toggle left to right?

How can I include a close button using jQuery UI toggle function?
$(".login").click(function () {
$(this).hide();
$("#myDiv").toggle("slide", {
direction: "left"
}, 500);
});
My jsFiddle

fiddle: http://jsfiddle.net/AtheistP3ace/TX55G/207/
$(".login, .close").click(function () {
$('.login').toggle();
$("#myDiv").toggle("slide", {
direction: "left"
}, 500);
});
Show/Hide click button after toggle: http://jsfiddle.net/AtheistP3ace/TX55G/208/
$(".login, .close").click(function () {
$("#myDiv").toggle("slide", {
direction: "left"
}, 500, function () { $('.login').toggle(); });
});
If you want to hide the click prior to showing close and show the click after hiding close you can do this. Although I will point out using the visible/hidden selectors can be bad on performance but I was attempting to not make many changes to your code. You can do this without using them easily.
http://jsfiddle.net/AtheistP3ace/TX55G/209/
$(".login, .close").click(function () {
var hiding = $('.login:visible');
if (hiding.length == 1) {
$('.login:visible').toggle();
}
$("#myDiv").toggle("slide", {
direction: "left"
}, 500, function () {
if (hiding.length == 0) {
$('.login').toggle();
}
});
});
This is the way I would do it instead of using those special selectors. I would use a class. http://jsfiddle.net/AtheistP3ace/TX55G/211/
CSS:
.hide {
display: none;
}
JS:
$(".login, .close").click(function () {
var login = $('.login');
var hiding = !login.hasClass('hide');
if (hiding) {
$('.login').addClass('hide');
}
$("#myDiv").toggle("slide", {
direction: "left"
}, 500, function () {
if (!hiding) {
$('.login').removeClass('hide');
}
});
});

$(".login, .close").click(function () {
Demo

Sub menu needs to fold away first and then the first menu following using jQuery

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/

How to slide down a jQuery slideToggle when scaling a browser

I am having an issue with my slideToggle function. Once pressed it opens up the way I need it to. But when I scale the browser to test the responsive flow to the site the slideToggle still stays active instead of sliding down. I tried a few functions but nothing seems to work. Below is the scrip I am using without the code to slide down when it hits a specific screen resoultion. How would I go about fixing this issue?
$('#more').click(function () {
var open = $('header').is('.open');
$('#footerPanel')['slide' + (open ? 'Up' : 'Down')](400);
$('header').animate({
bottom: (open ? '-' : '+') + '=120' }, 400, function () {
$('header').toggleClass('open');
});
});
$('#menu').click(function () {
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=120"
}, function () {
var $footer = $('.activetoggle');
if ($footer.length)
$footer
.toggleClass('activetoggle footerButton')
.text('Footer');
});
$('#footerPanel').slideUp(400);
}
});
$('.footerButton').click(function () {
var $this = $(this);
$this.toggleClass('footerButton');
if ($this.hasClass('footerButton')) {
$this.text('Footer');
} else {
$this.text('Close');
}
$(this).toggleClass('activetoggle');
});
My Code
http://jsfiddle.net/wyze/XqUp4/4/

Try if this works for you. I have added to check whether the width is 780(you can change it), when the panel to slide down. Try adding this in you fiddle and check if this works
$(window).resize(function(){ //check when window resize
if($(window).width() < 780){ // check when the window width is less than 780
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=120"
});
$footer = $('.activetoggle');
if ($footer.length) {
$footer.toggleClass('activetoggle footerButton').text('Footer');
}
$('#footerPanel').slideToggle(400);
}
}
});

Implementing .scrollTo()

I'm trying to implement the scrollTo script jquery script from http://flesler.blogspot.com/2007/10/jqueryscrollto.html but I cant figure it out because of the way my script is setup:
$(".viewproject").click(function() {
$(...).scrollTo( '#lightwrap', 2500, {easing:'elasout'} );
var id = $(this).attr("id").replace(/^.(\s+)?/, "");
var contentTobeLoaded = $("#workitem" + id).html();
$('#projectajax').animate({
opacity: '0'
}, 600, function() {
$('#projectpanel').show();
if ($('#projectajax').is(':visible')) {
$('#projectajax').html(contentTobeLoaded).delay(500).animate({
opacity: '1'
}, 500, function() {
$('#thumbnails, h3').css('border-top', '1px solid #fff');
});
}
else {
$('#projectajax').html(contentTobeLoaded).hide().slideDown(1000).delay(500).animate({
opacity: '1'
}, 500, function() {});
}
});
});
$(document).on('click', '#projectclose', function(e) {
e.preventDefault();
$("#projectpanel").slideUp('1000');
});
or http://jsfiddle.net/Rvgk9/
what im trying to do is when the image or link is clicked, i want it to scroll to the top of the website before if #projectajax is visible and also if #projectajax isnt visible.. from what I've tried it just didnt have the scrolling effect at all just snapped to the top of the page.