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' );

How can I control my hover event in jQuery?

I'm trying to show an overlay div when '.menu' is hovered over. I've used hover to show the div (hidden first with CSS), the mouseleave to reset it. How can I do it so the mouse needs to be on the menu for a couple of seconds for it to show, so if its just rolled over quickly it doesnt do anything. I know I can do this with delay() but if i go over the button quickly 5 times, the screen flashes 5 times with the overlay. How can i make it only do it once and then terminate.
Thanks.
$( document ).ready(function() {
$(".menu").hover(function() {
$(".page-overlay").delay(600).fadeIn(200);
});
$(".menu").mouseleave(function() {
$(".page-overlay").fadeOut(200);
});
});

jQuery's hover method accommodates for the mouse entering and leaving events, so you don't really need to make an explicit mouseleave event handler.
hover works like this:
$( ... ).hover(function(){
// Here is the mouse entering function
},
function(){
// Here is the mouse exiting function
});
So you can adjust your code to something like this:
$(".menu").hover(function() {
$(".page-overlay").delay(600).fadeIn(200);
},
function(){
$(".page-overlay").fadeOut(200);
});

You can use setTimeout and clearTimeout, check example bellow.
I can do this with delay() but if i go over the button quickly 5 times, the screen flashes 5 times with the overlay
Using the clearTimeout() function in hoverOut() in example bellow will resolve this problem.
Hope this helps.
$( document ).ready(function() {
var menu_hover_timer;
$(".page-overlay").hide();
$( ".menu" ).hover(
function() {
menu_hover_timer = setTimeout(function(){
$(".page-overlay").fadeIn(200);
},1000); //wait 1 seconds
}, function() {
clearTimeout(menu_hover_timer)
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='menu'>
Menu (Stay hover 1 second HERE)
</div>
<div class='page-overlay'>
page overlay div
</div>

JQuery's toggle function is affecting too many elements

This is what should happen: When I click an image '.post-text' should appear, then - when I click the image once more - the image disappears. All this happens in the toggle function but I have simplified it here.
This is what actually happens: When I click one image, the '.post-text' of all the blocks are opened immediately. I need that to only open the one that I click. I have tried what you see below and the find function, but it doesn't work. Please help me.
$( ".down-text img" ).click(function() {
$(".post-text" ).toggle( "slow" );
});

You can use classes
but with that you will be needing some traversing
supposing your .post-text is the next div after your image
$( ".down-text img" ).click(function() {
$(this).next(".post-text" ).toggle( "slow" );
});
see jquery next() | find() | parent()
https://api.jquery.com/next/
https://api.jquery.com/parent/
https://api.jquery.com/find/

You should use $(this) to target the element you just clicked:
$( ".down-text img" ).click(function() {
$(this).find(".post-text" ).toggle( "slow" );
});

Data attributes can help here.
If you add a data attribute called text to your HTML image element:
<img data-text="text1"/>
And a matching one to your text element:
<div class="post-text" data-text="text1">Here is some text</div>
You can then use that information to only open the correct text element rather than all of the elements that share the same class:
$('.down-text img').click(function () {
var id = $(this).data('text');
$('.post-text[data-text="' + id + '"]').toggle("slow");
});
DEMO

JQuery How to get selector with x2 .next() function

This situation have been post a lot in there but I didn't find the best way to solve my problem. Please help me this.
enter code here
Link
I want to make the button to open/hide the table content. I used slideToggle() in JQuery and next() to cacth the table content.In jsfiddle you can see. My code is worked.
But it just on the Click to SHOW/HIDE (worked) the Click to SHOW/HIDE (not work) is the MAIN button which I want to make (BECAUSE THE DESIGN). But when I put the button in there, it didn't work anymore. How can I solve this. Please help !

check this demo, if you are expecting the same thing
DEMO
$( "#clickme" ).click(function() {
$( "#toggleMe" ).toggle( "slow", function() {
// Animation complete.
});
});

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