Develop Reference

How to add, then reference a div with ID and then remove it on JS. (Web)

I am trying to hide the scrollbar when opening a fullscreen menu. That part I got working, what Im missing is getting the same button that hides the scrollbar to make it appear back again (removing the .no-scroll from the body). Here is my failed attempt, looks like the second function is not working.
$('.menu_container').on('click', function(){
$('body').addClass('no-scroll');
$('.menu_container').attr('id', 'menu_close');
});
$('#menu_close').on('click', function(){
$('body').removeClass('no-scroll');
$('#menu_close').removeAttr('menu_close');
});

Your event handlers are attached as soon as the DOM is loaded. And when this happens, there's no element with id #menu_close yet (since it's added only after you click on .menu_container), so the second event handler is not attached to anything.
You could move it up inside the first function like this:
$('.menu_container').on('click', function(){
$('body').addClass('no-scroll');
$('.menu_container').attr('id', 'menu_close');
$('#menu_close').on('click', function(){
$('body').removeClass('no-scroll');
$('#menu_close').removeAttr('menu_close');
});
});

It's because you've removed the id which is how you're finding the element.
If you want to add and remove a class that makes your scrollable use:
$( 'body' ).addClass( 'no-scroll' );
And:
$( 'body' ).removeClass( 'no-scroll' );

Save DOM element into a variable with Jquery

I have a side-menu-bar with some dropdown-lists. When i click on a list's child element, the menu closes. When i click again on the menu, i want that dropdown list to be expanded. In this way, i thought that it will be alright to save the DOM element into a global variable, and expand it on onClick menu event.
That list contains li and ul elements, to expand that, i'll add a .css class named "open".
The menu items didn't have any id-s to identify them.
How can i do this?
globally {var selectedItem =null}
// If user click any menu link
$('.menu-layer a').on('click', function () {
//--> selectedItem = getClickedElement
//... other code
}
//If user clicks the hamburger menu
listenForMenuLayer: function () {
$('.nav-menu').on('click', function () {
//--> selectedClick.addClass('open')
//animation and other stuff code
}}
Thanks

You can try something like this, not saving it as a global variable but just listening for the click event to fire like this, I'd also suggest adding at least on id on the parent of it all so it's easier to target.
$( "#menu" ).on( "click", function() {
$( "#menu" ).addClass( "open" )
});

Off Canvas Navigation Default Open/Closed

I have an off canvas navigation on a website that I am working on. The default state for the off canvas navigation is closed which works well on the mobile site as you can toggle it open and select your links but on the desktop having it closed and toggling it on hides information from the user and I would like it to be open by default when the user arrives at the page.
Currently the navigation uses jQuery to make the toggle:
$( "#main-menu-toggle, #main-menu-caption, .menu-mask" ).on( "click", function() {
// toggle the classes in the body the css does the rest
$( "body" ).toggleClass( 'main-menu-open' );
// for screen readers lets set the ARIA atributes
if ( $( "body" ).hasClass( 'main-menu-open' ) ) {
$( '#navbar, #main-menu-toggle' ).attr( 'aria-expanded', 'true' );
} else {
$( '#navbar, #main-menu-toggle' ).attr( 'aria-expanded', 'false' );
}
});
And there is a call in there when the page loads as well as resizes to show and hide the menu depending on screen size:
// show or hide the main navigation menu when the page is loaded
showHideMenu();
$( window ).resize(function() {
waitForDraggingStop(function(){
showHideMenu();
}, 500, "window resize in progress");
});
// adds or removes the classes for the menu addition or removal
function showHideMenu() {
if ( 955 < $( window ).width() ) {
$( "body" ).addClass( 'main-menu-open' );
$( '#navbar, #main-menu-toggle' ).attr( 'aria-expanded', 'true' );
} else {
$( "body" ).removeClass( 'main-menu-open' );
$( '#navbar, #main-menu-toggle' ).attr( 'aria-expanded', 'false' );
}
}
The issue is that the menu has an animation associated with it and so when you arrive on the desktop there is a delay and then the menu animates out. This quickly becomes annoying to the user as they have to wait for the page to finish its animations before they can use the screen.
The Question:
Is there a better way to do this using the CSS/JS that will have the menu expanded by default when the user comes to the page above 955px and collapsed by default below the same mark AND allow for the direction to be reversed on the click of the toggle later on and avoid the delays associated with animation using JS to add the open class?

I ended up solving this using the method from my comments:
I treated the jQuery added class like a status toggle instead of a state like open or closed.
Above 955 the css would default to open in the absence of the toggle but its presence would close it and below 955 the absence would keep it closed but its presence would open it.
This would completely remove the jQuery adding the class on load as well as the resize function.
Additionally I renamed the body class to "main-menu-open-close" to reflect the toggle.

How to turn off active state on listview item while scrolling?

I use iscroll 5 and jquery mobile 1.4.5 for cordoba android app. When I am scrolling page the i have tapped at first on start change state as it is clicked. I dont need it to be clicked if I am scrolling. I need it to change state to active only if I have tapped on it without scrolling.
How can I prevent li button item to change state, I have tried some code I found on stackoverflow but with no success.
$(document).on('tap', function(e) {
$('#lista li').removeClass($.mobile.activeBtnClass);
});
I tried this too, but is deprecated
$( document ).on( "mobileinit", function() {
$.mobile.activeBtnClass = 'unused';
});

How to stop Jquery executing on page load

I have a piece of Jquery which I am using to force a div to have a 'slide in' effect upon a user clicking on another div (a button which I define). However, upon page load, the jquery has executed and the div which is supposed to slide in upon user click, has already appeared and been revealed. Please can someone tell me how to stop this, and make it so that it's not active upon page load, and only works upon user click. Thanks.
Here is my code :
$( "#open-nav-3" ).click(function() {
$( "#open-nav-menus" ).slideToggle( "slow" );
});
open-nav-3 is the button which the user clicks to make the content appear, and open-nav-menus is the div ( content ) which appears.
I expect this is probably very simple, but I am a novice with all things Javascript.

I guess you just need an additional
$( "#open-nav-menus" ).hide();
to hide the element on page load. Add it before the event handler:
var navMenu = $( "#open-nav-menus" );
navMenu.hide();
$( "#open-nav-3" ).click(function() {
navMenu.slideToggle( "slow" );
});