Develop Reference

Right click acts like a left click on the event

I have this code:
document.getElementById("1").oncontextmenu = function() {
return false
}
It disables the little window that shows after a right click (only on the button/image).
On my code (https://jsfiddle.net/nnuyguat/) everything is working fine, except for when I do a right click on the image as it triggers the left click event and changes the image untill I move the mouse.
Another related problem is if I press left click without releasing and then right click (releasing the right button), it will also change the image.
I need to prevent the image changing with right clicks. It should work as the closing button of the browser (except it's another images and it doesn't close anything).

You could use event.button to check which button is pressed because event.button returns a number which indicates which mouse button was pressed.
Source
Edit:
if (event.button === 2){
// run your function
}
That should be correct, as I have never used this before.

The right click event is not triggering a left click. It is just activating your object. Your image says "click" but it is inaccurate. It should say "Active".
Second, a number is NOT a valid ID. So rename your div from id="1" to id="one" or similar.
Finally, try with this code, instead of yours:
document.getElementById("one").addEventListener('contextmenu', function(ev) {
ev.preventDefault();
alert('hello from right click');
return false;
}, false);
See https://jsfiddle.net/nnuyguat/3/

The issue with your image changing on right click is not related to your javascript, but to your css. The :active CSS pseudo-class matches when an element is being activated by the user. According to the specs this should only be when the element is activated with the primary mouse button, but it seems like most browsers do not implement the spec correctly. See this question for info.
A work around maybe to abandon the :active pseudo-class, and set up a function to change the content explicitly on left click.

Its because of the oncontextmenu event. Remove it and it will work

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.

jQuery Dropdown Mouseover two different elements

I want to create a mouseover dropdown navigation (which works with tap on mobile/ipad as well) and have the problem, that the menu itself is in a complete different div. So not a child of that element.
jQuery('.top-menu').on("mouseover",function(){
jQuery(".top-menu-dropdown").stop().slideToggle(200,'easeOutCubic');
});
The div which is triggering that the menu slides down is .top-menu once hovered but I have the problem that I have to add the top-menu-dropdown class to it so it's closing as soon as the user exits the menu. And how can I add a short delay that the menu is not closing as soon as the cursor leaves it? (Stopping timer when you enter it again ofc)

I would write it more like this using the jquery hover function which has both the mouse over and mouse out built in as shown below.
jQuery('.top-menu').hover(
// Mouseover
function(){ jQuery(".top-menu-dropdown").stop().slideDown(200,'easeOutCubic'); },
// Mouseout
function(){ jQuery(".top-menu-dropdown").stop().slideUp(200,'easeOutCubic'); }
);
Replcace slideup and slidedown with whatever direction you would like :)

jQuery update HTML on the fly

I have a slideshow that has 5 slides (each has an individual id) and a previous and next button. When hovering the previous or next button you get a tooltip, the tooltip uses jQuery to get the ID attribute from the previous and next div and show this.
Ive gotten it working fine on mouseenter only if you dont leave the div and keep clicking the Tooltip doesnt update, you have to leave the arrows after each click for the value to be aupdated, does this make sense?
my script is...
$("div.arrows div").bind("mouseenter", function () {
$("div.arrows div.next").children("span").html($("div.roundabout-in-focus").next("div").attr("id"));
$("div.arrows div.prev").children("span").html($("div.roundabout-in-focus").prev("div").attr("id"));
});

Since you are not leaving the div the next mouseenter is not fired which will update the tooltip. Try to set the tooltip on slide change event if supported by the plugin you are using or click event of the prev/next buttons.

You will have to bind the updated html to the click event also then. This may work. Hard to tell without your html.
$("div.arrows div").bind("click, mouseenter", function () {
$("div.arrows div.next").children("span").html($("div.roundabout-in-focus").next("div").attr("id"));
$("div.arrows div.prev").children("span").html($("div.roundabout-in-focus").prev("div").attr("id"));
});

What does mouseover do and do you want it to change after a click on the next/prev button? I think you have to remove the inner HTML before appending new HTML. Maybe try to empty the element with .empty() and add a click event to catch that and call the function from there as well. Also try to log or alert some feedback to know when it does fire.

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