Develop Reference

How can I toggle a the visibility of a DIV element?

I'm trying toggle a DIV element using jQuery, a good example of this implemented is clicking the sign up button on Udemy.
I've implemented something similar using jQuery but I'm sure that to gain the effect I'm looking for, I will have to use JavaScript but its just that I'm don't know how to use JavaScript.
The my implementation be seen in my fiddle here, I've initially set the div to display:none and used jQuery to show the div on button click.
As you can tell with the fiddle, it displays with an enlarging animation instead of just appearing (not sure how to change this) and i'm only unable to make the div disappear by again clicking the button.
Also, how would I go about implementing functionality to make the div disappear by clicking anywhere on the screen?
Thanks to anyone in advance for taking the time to help me out.

The issue you face is that a click on the button is also a click on an area where you would like the pop up to disappear, if it's already shown. Because events bubble, the button click would make the pop up appear and then the document click (which fires after this because of bubbling) would make the pop up immediately disappear.
To solve the problem, you must stop a click on the button from bubbling to the rest of the document as well. You do this with:
event.stopPropagation();
So, what you need to do is make sure that when the button is clicked, the click event doesn't bubble up to the document, where you will have already set up a click event handler that makes the pop up go away:
$(document).on('click', function(event) {
// We want to hide the pop up, but not if you click on
// the pop up itself - - anywhere else, but not the pop up
if(event.target.id !== "pop-up"){
$('#pop-up').hide();
}
});
See this fiddle for a working version: https://jsfiddle.net/0ajpd9go/8/

If you want your div to just appear on the screen change this line:
jQuery('#pop-up').toggle('fast');
to this:
jQuery('#pop-up').show();
Maybe you'd like to give bootstrap modal a try:
http://getbootstrap.com/javascript/#modals

I think what you are looking for is $.fn.toggle();
$.fn.toggle(); toggles the visibility of an element meaning if the element is visible then it will be hidden when toggled and if the element is hidden it will be shown when toggled.
Here is a basic (animation free) example of using toggle:
$(".button-that-toggles").on("click", function() {
$(".div-to-toggle").toggle();
});
Your box toggles with an "enlarging animation" because you used $.fn.slideToggle();
There are three default ways to toggle using jQuery (toggle, fadeToggle and slideToggle)
Here is an example of toggling a element using $.fn.fadeToggle();:
$(".button-that-toggles").on("click", function() {
// NOTE: 250 represents the duration of the animation, meaning that the animation will last 250 milliseconds.
$(".div-to-toggle").fadeToggle(250);
});
Here is an example of toggling a element using $.fn.slideToggle();:
$(".button-that-toggles").on("click", function() {
// NOTE: 250 represents the duration of the animation, meaning that the animation will last 250 milliseconds.
$(".div-to-toggle").slideToggle(250);
});
Also here is an example of how you can hide your div by clicking anywhere on the page:
// listen for a click anywhere in the page
$(document).on("click", function(event) {
// make sure the element that was clicked is not your div
if(!$(event.target).is(".your-div")) {
// you can now hide your div
$(".your-div").hide();
}
});
Also please remember that jQuery is JavaScript as a matter of fact jQuery is a library written in JavaScript.

Make menu dissappear on clickoff on tablet

Working in HTML, CSS and JS (technically Angular, if you think it's significant)
I have a Header menu with dropdown sub-menus and sub-sub-menus when viewed in desktop style.
On a PC the sub-menus appear on hover and clicking on the entry takes you somewhere.
Clicking on the root entry takes you somewhere different - so it has 2 purposes in life: be a link to a location AND be the hover trigger for the dropdown menu.
Not all root elements have a sub-menu.
There's a separate mobile menu, based on width media queries, but Tablets (especially in landscape mode) display in desktop style, and it's giving me gyp!
On tablets (tested in Safari iOS and in Chrome for iPad) the browser does some deep magic!...
For elements that have No dropdown then clicking on them takes you to
the link.
For elements that DO have a dropdown sub-menu, then
the first click has the effect of activating the hover - it doesn't activate the link but does reveal the menu.
The second click then activates the link.
Lovely!
Problem is... the menus don't disappear if you tap off them.
Tapping the page in general does nothing (no click-event raised)
Tapping something on the page that is clickable DOES clear the menu, and also invokes the click action for whatever you clicked.
My first thought was to put a transparent div across the whole rest of the page, above the page but below the menu, and bind a click event that would clear the menu.
But, I can't get the transparent layer AND the underlying page to both be clicked. See here for the problems I hit there.
Putting the click event on body (so that it gets triggered by bubble up) doesn't work (click event just isn't fired.)
I tried adding ngTouch, and that does cause click events to be triggered everywhere, but also breaks the behaviour of the sub-menus opening - all the links trigger immeidately and you can't reach the sub-menus.
Any thoughts at all? Help!

You just need to check if click happened outside of dropdown menu.
Something like:
$('html').click(function (e) {
if (e.target.id == '#yourDropdown') {
//do nothing and let the click be handled
} else {
$('#yourDropdown').hide();
// still let the click be propagated
}
});

Rather then relying on 'mobile browser magic' I would implement it myself. No Angular experience, but in jQuery the code would probably look something like this:
$('.menu li').on('click', function(e) {
var $target = $(this);
var $sub = $target.children('ul');
// only if sub and not yet active
if ($sub.length && ! $target.hasClass('active')) {
// show sub
$target.addClass('active');
// done
e.stopPropagation();
return false;
}
// normal click action triggered here
alert($target.children('a').text());
e.stopPropagation();
});
$('html').on('click', function(e) {
// clear all active menu items
$('.menu > li.active').removeClass('active');
});
And a quick example: http://jsfiddle.net/b0aqr1wc/

:Sigh:
A colleague I discussed this with this morning solved this instantly:
Use the "cover sheet" approach, but have the sheet collapse itself at the same time as collapse the menu.
You lose the ability to interact with the underlying page for only 1 tap - and that tap will visibly collapse the menu, so the user will have a prompt to try again.

jquery click handler not closing slide in menu

Relevant JSFiddle: http://jsfiddle.net/7u2fy/
I was trying to have a slide in menu that slides in on a button click and slides out when you press escape or click anywhere outside the menu. I also wanted to darken the non-menu portion of the screen when the menu is active.
My problem is the jquery click handler isn't working for the closing of the menu.
The jsfiddle looks a little weird for even though in my actual project it looks fine and only the jquery click handler isn't working.
The specific code that's not working...
$('#site-wrapper.show-nav #site-canvas').click(function () {
toggleNav();
});

Your click handler is working fine, the issue is the grey block that appears on this element: #site-wrapper.show-nav #site-canvas:after
It essentially blocks any clicks, remove the below property 'absolute' and your can click.
#site-wrapper.show-nav #site-canvas:after {
*position: absolute;*
}
The issue is within your CSS not your JS, please see this fiddle of clicking working: http://jsfiddle.net/7u2fy/1/

if statement hover event with 2 click handlers

I'm trying write a script that detects whether a div is visible or not which will determine if the hover event triggers or not.
If the id "contact" is hidden then hovering over a menu item will change a block's color.
Then if you click another menu item to show id "contact" then the hover should not work. Clicking yet another menu item to hide the id "contact" will then allow the hover to work again.
This is as far as I have gotten with jsFiddle: http://jsfiddle.net/YktAZ/123/
I'm not even sure I need the "else" but that is the only way I have "tricked" the hover into "not working" or not showing a change. I really just need the if to allow it to work and then not trigger the hover if the condition is not met.

If you put your if statements inside your hover functions, this will work.
Basically, each time you're executing swap_hover(), you're adding new hover event handlers to the element, it's not actually turning 'on' or 'off' the hovers.
The best way would be to do something like this:
$("#item").hover(function(){
//hover on
if($("#otherItem").is(":visible"){
//do this code
}
}, function(){
//hover off
//do this code.
});

Jquery: Need help with the logic. Different divs, each w/ their own trigger. Only one can be open at a time, close all others

http://jsfiddle.net/nicktheandroid/ZSvHK/
I need help figuring out how to get this right, problems listed below. If you could suggest any improvements, that'd be great.
I have multiple divs, each div has it's own trigger(button).
Only one menu can be open at a time, so if I have DIV1 shown, and I click the trigger for DIV2: then DIV1 should close, and DIV2 should open.
If the DIV is being animated when I click the trigger(button), then don't do anything, to keep from queuing up and having other problems.
If the DIV is open and I click on anything outside of the DIV, the DIV closes, which is correct behavior. Check out the example.
My problem:
is that if I have DIV2 open,
and I click the the trigger(button)
for DIV1, DIV2 doesn't
close like it should.
When double clicking the button(when
DIV is hidden, click, then while
it's still animating click again)
the DIV SlidesDown like it's
supposed to, but then it slidesUp.
The button shouldn't accept anything
while the DIV is animating, AKA I
don't want it to queue like that.
And in the future I wont be using a
button for the trigger, so disabling
wont work.

Looks like an accordion to me : http://jqueryui.com/demos/accordion/

My solution would be to add a proper id for each button:
<button rel="search" id="searchButtonId">click</button>
Then, you can bind the click event for the buttons and check which one has been clicked on:
$("button").click(
function() {
if ( $(this).is("#searchButtonId") ) {
$("#search").slideDown(800);
$("#bottom").slideUp(800);
} else if( $(this).is("#bottomButtonId") ) {
$("#search").slideUp(800);
$("#bottom").slideDown(800);
}
}
);
But, with this solution the divs are not closed if you click somewhere else.

You can close all divs before open one. Something like this (with variation)
$('.mydivs').hide();
$('.mydivs.div1').show();