We Keep Coding

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/

Mobile Menu Jquery to make non-menu items clickable close menu.

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 >>

JS changing a css property

So I'm putting something together for work, I've got it working exactly how I want it to, except for one tiny thing. At the bottom of the page, I have 3 circles that work as links to change the slides on my slider, however when I click one it doesn't quite change the css property to change the color of the circle I click on. This might not make sense so I'm going to link my fiddle(http://jsfiddle.net/AMN6N/1/) I think it has something specifically to do with this line of code:
handleNavClick: function(event, el)
{
event.preventDefault();
var position = $(el).attr("href").split("-").pop();
this.el.slider.animate(
{
scrollLeft: position * this.slideWidth
},
this.timing);
this.changeActiveNav(el);
},
changeActiveNav: function(el)
{
this.el.allNavButtons.removeClass("active");
$(el).addClass("active");
}
};
slider.init();
Here is the temporary link for the webpage.

You will need to load just one SimplySliderTest.js file.
The elements are loading after the javascript is being executed so nothing is binding to them.
You have two options:
Load the JS inside SimplySliderTest.js when the page has loaded. i.e.
$(function(){
var slider =
{
el:
{
slider: $("#slider"),
allSlides: $(".slide"),
sliderNav: $(".slider-nav"),
allNavButtons: $(".slider-nav > a")
},
timing: 800,
slideWidth: 300,
init: function()
{
this.bindUIEvents();
},
bindUIEvents: function()
{
this.el.slider.on("scroll", function(event)
{
slider.moveSlidePosition(event);
});
this.el.sliderNav.on("click", "a", function(event)
{
slider.handleNavClick(event, this);
});
},
moveSlidePosition: function(event)
{
this.el.allSlides.css(
{
"background-position": $(event.target).scrollLeft()/6-100+ "px 0"
});
},
handleNavClick: function(event, el)
{
event.preventDefault();
var position = $(el).attr("href").split("-").pop();
this.el.slider.animate(
{
scrollLeft: position * this.slideWidth
},
this.timing);
this.changeActiveNav(el);
},
changeActiveNav: function(el)
{
this.el.allNavButtons.removeClass("active");
$(el).addClass("active");
}
};
slider.init();
});
Move you <script type="text/javascript" src="SimplySliderTest.js"></script> to the bottom of your page so it loads after the elements

jQuery - Activating one toggle button disables the other

I'm having issues with two jQuery toggle buttons. They are used for mobile navigation buttons:
(function($) {
$(function() {
$('#mobile-nav-button').toggle(
function() {
$('#fullpage').animate({ left: 250 }, 'normal', function() {
$('#mobile-nav-button').html('Close');{
$('#social-nav-panel').hide();
}
});
},
function() {
$('#fullpage').animate({ left: 0 }, 'normal', function() {
$('#mobile-nav-button').html('Open');
});
}
);
$('#social-nav-button').toggle(
function() {
$('#fullpage').animate({ right: 250 }, 'normal', function() {
$('#social-nav-button').html('Close');
});
},
function() {
$('#fullpage').animate({ right: 0 }, 'normal', function() {
$('#social-nav-button').html('Open');
});
}
);
});
})(jQuery);
On their own they work fine. The first button #mobile-nav-button works perfectly each time. The second button #social-nav-button also works fine. However, if #mobile-nav-button is selected, then #social-nav-button will cease to work (this does not apply the other way round, as #mobule-nav-button will always work, even if #social-nav-button has been selected).
I've seen a lot of similar posts on stack overflow (though not the same problem), but my JS/jQuery knowledge is sadly nowhere near good enough to apply any fixes to my issue.
Any help would be massively appreciated!

You can check my example: Toggle Buttons show and hide
HTML:
<button type="button" id="mobile_bt">Mobile</button>
<button type="button" id="social_bt">Social</button>
JS using jQuery:
$('#mobile_bt').click(function() {
var help= $(this);
$('#social_bt').toggle('slow', function() {
help.hide();
$(this).show();
});
});
$('#social_bt').click(function() {
var help= $(this);
$('#mobile_bt').toggle('slow', function() {
help.hide();
$(this).show();
});
});

Jquery Animate height toggle

I am using JQuery for making a widget effect i.e. minimizing and maximizing a widget..
But the problem is that when i click on the minimize button speedily the widget crashes..
I think that the problem is that it takes mid animation height as its new height at the time of toggle...
Please help...
$(document).ready(function () {
$('.widget-minimize').click(function () {
toggleMinimize($(this).parents('.widget').attr('id'));
});
$('.widget-close').click(function () {
closeWidget($(this).parents('.widget').attr('id'));
});
});
function toggleMinimize(widgetId) {
var $content = $('#' + widgetId + ' .widget-content');
if ($content.height()) {
$content.data('oldheight', $content.height());
$content.animate({height: 0});
$('#' + widgetId).find('.widget-minimize').attr('src', 'http://dl.dropbox.com/u/638285/SO/images/icon-maximize.png').attr('alt', 'maximize');
}
else {
$content.animate({height: $content.data('oldheight')});
$('#' + widgetId).find('.widget-minimize').attr('src', 'http://dl.dropbox.com/u/638285/SO/images/icon-minimize.png').attr('alt', 'minimize');
}
}
function closeWidget(widgetId) {
$('#' + widgetId).animate({ "opacity": 0, "height": 0 }, 200, "swing");
}
Click here to see jsFiddle

Just return from your toggleMinimize function if your content is currently being animated, like this:
function toggleMinimize(widgetId) {
var $content = $('#' + widgetId + ' .widget-content');
if ($content.is(':animated')) {
return;
}
See working fiddle

In my case, the fiddle is working correctly, but I would recommend you to use max-height in case of height, so use max-height: 0 and max-height: 80 (assuming 80 is a bit more of the max height). Also you can pass the element and not just the ID.
$(document).ready(function () {
$('.widget-minimize').click(function () {
toggleMinimize($(this).parents('.widget'));
});
$('.widget-close').click(function () {
closeWidget($(this).parents('.widget'));
});
});
function toggleMinimize(selector) {
var $content = $('.widget-content', selector);
if ($content.height()) {
$content.data('oldheight', $content.height());
$content.animate({maxHeight: 0});
$('.widget-minimize', selector).attr('src', 'http://dl.dropbox.com/u/638285/SO/images/icon-maximize.png').attr('alt', 'maximize');
}
else {
$content.animate({maxHeight: $content.data('oldheight')});
$('.widget-minimize', selector).attr('src', 'http://dl.dropbox.com/u/638285/SO/images/icon-minimize.png').attr('alt', 'minimize');
}
}
function closeWidget(widgetId) {
$('#' + widgetId).animate({ "opacity": 0, "max-height": 0 }, 200, "swing");
}

Take a look at jQuery's .stop() method and its :animated selector. I often use them in situations like this to help me handle animations that are already running.
For example:
$("#element").on("click", function() {
if ($(this).not(":animated")) {
...animation code...
}
});
and
$("#element").on("click", function() {
$(this).stop();
...animation code...
});