Develop Reference

How to capture right click on a specify element in javascript?

I'm trying to make a zoomable image block in an HTML page using javascript.
Now zooming in is finished by capturing Doubleclick event and some simple functions.
Problem is here that I have some elements (div tags like tile) and want to have a function called when right clicked on some of them.
How can I do this?

You can use the contextmenu event:
<div oncontextmenu="javascript:alert('Right Click Performed!');return false;">
Right click on me!
</div>
And then add a listener:
el.addEventListener('contextmenu', function(ev) {
ev.preventDefault();
alert('Right Click Performed!');
return false;
}, false);

javascripts event.button function will give you the mouse button you clicked.
<img onMouseDown="alert(event.button)" src="yourimage" />
right click should return 2 but best check each browser

onblur and link elements not working properly in Chrome - Fine in IE 10

I'm trying to achieve the following. Click on a link, display menu. As soon as that menu loses focus, clear the menu (also when menu item is clicked, remove the menu).
Here is my dumbed down code:
<a id="owner" href="javascript: doThis();" onblur="remove();">ClickOnMe</a>
function doThis() { console.log('clickedOnItem'); }
function remove() { console.log('removed'); }
I can't seem to get this to work. It works fine in IE10, but I can't get to work in Chrome.
Fiddle me this: http://jsfiddle.net/5t6wr/5/

For some reason chrome isn't registering your link as a focused item. What we have to do is force the link to be focused so chrome recognizes it.
Change your link to the following:
<a id="owner" href="javascript: document.getElementById('owner').focus(); doThis();" >ClickOnMe</a>
We added the focus to owner, then proceeded with your function to bring up the menu.
Inside your doThis function you will want to add the following:
document.activeElement.onblur = function() { remove(); };
That is going to take the current Active Element - and when focus is lost, run your script to close the window.
Note: You should put your remove function on a timeout, as you will be loading something from the menu, and don't want to have both trigger at the same time, it will cause a conflict.
Here is a fiddle to see the final version:
http://jsfiddle.net/5t6wr/4/

Exit dynamic popup by clicking outside of it?

I have a popup where i basically just dim the body giving it the lights out effect. I have a click handeler where if the body is clicked it will close the popup but my issue is the click handler stops all clicks even before the popup is opened. Does anyone know how i could do this so that clicking on a link before the popup is opened would go to the link but clicking one after the popup was opened would do my function and not click the link?
Heres what i use right now:
$(document).ready(function() {
$("body").click(function(){
var element=document.getElementById("game");
//yes i could use the jquery method for all of these but this works
element.width="650";
element.height="500";
element.style.position="relative";
$("body").fadeTo(3000,1.0);
}
return false;
})
});

You can actually add your "body" click handeler only after clicking your link/opening the popup. Then after clicking the "body" you may remove it again and restore the click handler for your link. "bind()" and "unbind()" will be handy.
K

Where's the jQuery? When you use jQuery, you use jQuery...
When you click on the body, you can check whether #game is visible or not and work with that:
$(document).ready(function() {
$('body').click(function(e){
if (!$('#game').is(':visible')) {
$('#game').width('650px');
$('#game').height('500px');
$('#game').css('position', 'relative');
$('body').fadeTo(3000, 1.0);
e.preventDefault();
return false;
}
});
});

Jquery Close menu div on a click event

I have a div which opens when I click a menu button, I am trying to close it if the user clicks anywhere after it is open. The issue I am having is that with my code the show div and the close div when a user clicks I guess are firing at the same time for some reason. The code for the click event is below. How can I make it so they do not fire at the same time and when I open the div that does not fire the click function. Thanks!
//if user clicks and menu is open then hide menu div
$(document).click(function() {
if($("menu").hasClass("menu_closed") == false ) {
//will hide the menu div
closeMenu();
}
}

I think what you want actually is to stop propagation in the other click handler, something like:
$("your_menu_selector").bind("click", function(e){
//your code to open the menu
e.stopPropagation();
return false;
})

You might want to consider adding the event handler to close the menu in the handler that opens the menu. Have it execute only once using the one method. In the handler that opens the menu, simply check to see if it is open already and do a no-op if it is.
$('.openButton').click( function() {
var $menu = $('#menu').
if ($menu.hasClass('menu_closed')) {
$menu.removeClass('menu_closed').addClass('menu_open');
$(document).one( function() {
$menu.removeClass('menu_open').addClass('menu_closed');
});
}
});

How to prevent a popup from closing when clicking on it using jQuery?

I'm creating a jQuery plugin that allows me to easily display a popup. In this case, the trigger element is an input and the target element is a div. So, the functionality is based on the focus and blur event. When the input gets focus, the popup opens and when it gets blur, the popup closes. I need the popup to stay open when I click on it and it closes because of the blur event I have set. I have tried to plug in the jQuery off() function into my custom blur() function within the plugin but it doesn't work.
I want to be able to click inside the popup without closing it, even when the input is on blur state or if someone can provide me with a better approach with in the plugin, that will be great too!
JS code
/*
* Popbox plugin
*/
$.fn.adPopbox = function(target){
return this.each( function() {
var enabler = $(this)
function focus() {
return enabler.focus( function(){
target.addClass('triggered');
});
}
function blur() {
return enabler.blur( function(){
target.removeClass('triggered');
});
}
function popbox() {
return target.click( function(){
target.addClass('triggered');
});
}
focus();
blur();
popbox();
});
}
/*
* Invoke Popbox plugin
*/
$(".popover-trigger").adPopbox($('.popover'));
HTML code
<div class="input-wrapper">
<input type="text" class="popover-trigger">
</div>
<div class="popover">
<p>Content to be showed!</p>
</div>
Here is a preview

You can not use the event blur because when you click outside the input, it is first the blur event that is triggered and then the event click but at that moment, your popup is already hidden and the target is on what is below, ie the body.
You should also use the click event on the document to close the popup by inspiring you with this answer: https://stackoverflow.com/a/3028037/4864628