We Keep Coding

JQuery in JS function doesn't work on the first click, but works after doing something else with that element.

I am new to JQuery and Javascript, and after searching for an answer to my problem I am having a difficult time resolving it. I have a Javascript function openNav that is working perfectly to open and close a sidebar that I have built on my webpage, but I have a line of JQuery inside of the function that doesn't seem to work initially.
The goal of the code is to have a glyphicon change when the menu is opened and closed, and it works fine when clicking on the glyphicon itself. There are about 12 additional "menu" buttons that will also open the side bar. The sidebar opens just fine when clicking any of these buttons, however I cannot get the glyphicon to change on the initial click.
function openNav() {
var sideNavBarElement = document.getElementById("sideNavBar");
if (sideNavBarElement.style.width == "0px")
$('#menutoggle').find('span').toggleClass('glyphicon-menu-right').toggleClass('glyphicon-menu-left');
sideNavBarElement.style.width = "250px";
document.getElementById("main-body").style.marginLeft = "285px";
}
I have added this function into the code for each of my menu buttons, and after the menu is opened the first time the glyphicon will alternate using this code, but the very first time it is clicked it does not change. Any help is appreciated. Thanks!

How to close off-canvas menu by clicking on window inside canvas?

here's my codepen http://codepen.io/anon/pen/GZWPrj
I know it's been answered few times, but it's too difficult for me to translate it to my code.
So I have a second off-canvas menu which is working as intended.
One thing I want to add is the ability to close this menu, by clicking anywhere outside the off-canvas menu - so clicking inside the canvas.
I found a good working example like
$(window).on("click", function(e) {
if (
$(".wrapper").hasClass("nav-open") &&
!$(e.target).parents(".side-nav").hasClass("side-nav") &&
!$(e.target).hasClass("toggle")
) {
$(".wrapper").removeClass("nav-open");
}
});
here Close off-canvas menu on window click but I'm too dumb to figure out how to implement it to my version of code.

Your html structure is different to the linked example. Below is some code that will work for your example:
$(window).on("click", function(e) {
if (!$(e.target).hasClass('menu-link') && !$(e.target).closest('.nav-stacked').hasClass('active')) {
//Revert the menu
$('#menu').removeClass('active');
//Revert the main content
$('.container').removeClass('active');
}
});
Updated Codepen

Slide Toggle will not stay up once clicked?

I am making a menu and have ran in to some jQuery issues.
I want my toggles to stay up once they have been clicked but instead they are sliding up but then straight back down again.
I have managed so far to have one close and another open simultaneously. Any thoughts?
Here is the current JS :
jQuery(".food-content").hide();
jQuery(".food-content").first().slideToggle(500);
jQuery('.food-item').click(function(){
jQuery(".menu-container, .full-menu-container").siblings().find('.food-content').slideUp();
jQuery(this).find('.food-content').slideDown();
});
I have made a JS Fiddle:
https://jsfiddle.net/marmaaduke/uyb4Lzuy/

Just exclude the current item clicked from the slideUp (with not) and use slideToggle for the current item.
jQuery(".food-content").hide();
jQuery(".food-content").first().slideToggle(500);
jQuery('.food-item').click(function () {
jQuery(".menu-container, .full-menu-container").siblings().not(this).find('.food-content').slideUp();
jQuery(this).find('.food-content').slideToggle();
});
https://jsfiddle.net/TrueBlueAussie/uyb4Lzuy/1/

Click on the menu / Slide on the screen to navigate to different pages

I developed a sample website . But i need to add a feature that when i click and drag horizontally the page will turn to next page ( menu2 page on menulist ). It should happen on click and drag. When i drag reverse (left to right) page turns to previous. and also on clicking in menu button, when i click to menu 4 . the page turns to forth page on horizontal move just like on mobile devices moving on swap.
I dont know how to implement it.I am new to this field. ;-(

If you're new you need to learn rather than implementing the technology!
However, all you need is to use mousedown and dragstart events.
If you're using jQuery then try to learn about onDrag event and set a function to change the page to the next menu item.

Finally i created it.
Click to see fiddle for slide and menu scrolling
JQuery for scrolling by menu click:
var total=$(window).width()*4;
$('.color').css({'width':''+$(window).width()+''});
$('.1').css({'position':'absolute','left':'0px'});
$('.2').css({'position':'absolute','left':''+$(window).width()+'px'});
$('.3').css({'position':'absolute','left':''+$(window).width()*2+'px'});
$('.4').css({'position':'absolute','left':''+$(window).width()*3+'px'});
$('a').click(function(){
var num=$(this).attr('id');
$('html').animate({'scrollLeft':''+$(window).width()*num+''});//For mozilla
$('body').animate({'scrollLeft':''+$(window).width()*num+''});//For other browsers
});
JQuery for scrolling by slide(double-click and drag for touchpads) on screen:
var downX;
$('body').mousedown(function(event){
downX=event.clientX;
});
$('body').mouseup(function(event){
var s=$('html').scrollLeft();
var p=$('body').scrollLeft();
var upX=event.clientX;
var diff=downX-upX;
if(diff<0)
{
$('html').animate({'scrollLeft':''+s-$(window).width()+''});//For mozilla
$('body').animate({'scrollLeft':''+p-$(window).width()+''});//For other browsers
}
if(diff>0)
{
var g=s+$(window).width();
var k=p+$(window).width();
$('html').animate({'scrollLeft':''+g+''});//For mozilla
$('body').animate({'scrollLeft':''+k+''});//For other browsers
}
});
Click to see fiddle for menu click scrolling without animation
Changed ->
$('a').click(function(){
var num=$(this).attr('id');
$('html').animate({'scrollLeft':''+$(window).width()*num+''});//For mozilla
$('body').animate({'scrollLeft':''+$(window).width()*num+''});//For other browsers
});
To ->
$('a').click(function(){
var num=$(this).attr('id');
$('html').scrollLeft($(window).width()*num);
$('body').scrollLeft($(window).width()*num);
});

Menu dropdown doesn't collapse on mouse out

I'm building a site, located here, in Foundation 3 and I noticed that the dropdowns for the top-bar menu only collapse when you click somewhere in the body or move the cursor to another place in the menu. If you exit the menu by moving the cursor into the body from a dropdown, it just stays open. Is there a way to make it collapse on mouse out?
Unfortunately I do not know what specific code in the framework controls the functionality of the dropdown collapse. Any help is greatly appreciated!!

If you place the following code right at the bottom of your page, just before the </body> tag
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('.has-dropdown').on('mouseout', function () {
$(this).find('.dropdown').hide()
});
$('.has-dropdown').on('mousemove', function () {
$(this).find('.dropdown').show()
});
});
</script>