We Keep Coding

Interface menu, close if opened and user clicks outside menu

I'm trying to improve the interface of the menu here:
http://jsfiddle.net/u5brv/2/
I think it's great that it is toggled on click but I do think that if the user clicks anywhere else, for example, the bottom corner of the screen, the menu should toggle close if it isn't already.
$(document).ready(function () {
$('#nav li').mousedown(function () {
$('ul #items').toggle(100);
});
});
How would one approach this in an efficient a way as possible? If the menu is open do we need to track every mouse click and see if it is on the menu or not?

You need to attach a click handler to the document which closes the menu:
$('#nav li').click(function (e) {
e.stopPropagation();
$('ul #items').toggle(100);
});
$(document).click(function() {
$('#items').hide();
});
Note that stopPropagation is required on the opening link to stop the event reaching the document itself.

$(document).ready(function () {
$('#nav li').mousedown(function (event) {
event.stopPropagation();
$('ul #items').toggle(100);
});
$(document).mousedown(function(e) {
$('ul #items').css('display','none'); //make all inactive`enter code here`
});
});

TinyMCE onmouseover event, open menu item without click

When you click a menu item first time, the others automatically open onmouseover event. But if you don't click, the others do not open onmouseover event. But I want to open a menu item while onmouseover event without any click. How can I do this?

$(document).on('mouseenter', '.mce-menubtn', function() {
if (!$(this).hasClass('mce-active'))
$(this).trigger('click');
});
Maybe not good solution, but context menu generate by click.
You can check here: http://coding.kz/stack/tinymce.html
for answer in comments
$(document).on('mouseenter', '.mce-menubtn', function() {
menuItem = $(this);
if (!menuItem.hasClass('mce-active'))
menuItem.trigger('click');
});
$(document).on('mouseleave', '.mce-menu', function() {
if (!$('.mce-menu-sub-tr-tl:visible').length) $('.mce-menu').hide();
menuItem.removeClass('mce-active');
});
$(document).on('mouseleave', '.mce-menu-sub-tr-tl', function() {
if (!$('.mce-menu-sub-br-bl:visible').length) $('.mce-menu').hide();
});
$(document).on('mouseleave', '.mce-menu-sub-br-bl', function() {
$('.mce-menu').hide();
});

In the Init Script you can set up your own Event handlers.
Use something like this, and then check for the menu, I have not in mind,
how the elements are called but ID, names and classes can be found in sourcecode.
tinyMCE.init({
// Custom Commands
setup : function(ed) {
ed.on("keyup change mouseup", function(e) {}
}
});

How to detect if a specific class link was clicked inside a DIV and override the DIV's click action then?

I have several DIV of the following kind on my page:
<div class='entry'>
This is a statement
<a title="Search #travel" class="app-context-link" href="">#travel</a>
</div>
When a DIV of class .entry is clicked I trigger the following:
$(".entry").on('click', function(e) {
console.log("DIV Clicked");
});
When a link of the class .app-context-link is clicked I trigger the following:
var context_links = document.getElementsByClassName('app-context-link');
for (var k=0;k<context_links.length;++k) {
context_links[k].addEventListener('click', function(e) {
console.log("The context link inside DIV is clicked");
});
}
The question:
Right now when I click on the app-context-link both actions seem to be triggered: for the DIV (because a .click event is detected) and for the link (because there's an event listener on a link of that class).
How do I make it that if the link is clicked the DIV on click jQuery is not triggered?
I tried several possibilities, nothing worked. Also I would prefer not to reorganize the code too much, but simply add some directive in the on click jQuery part so that it detects if a link was clicked and does not do what it would normally do if the DIV was clicked.
Thank you!

you can use like this
$(".entry").on('click', function(e) {
e.stopPropagation();
alert($(this).prop("tagName"));
});
$(".entry a").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
alert($(this).prop("tagName"));
});
DEMO

Use stop propagation :
context_links[k].addEventListener('click', function(e) {
e.stopPropagation(); //Here
console.log("The context link inside DIV is clicked");
});
This will stop the click event from bubbling, so when you click on the a, click events of its ancestor will not trigger.

Jquery menu Anchor onBlur event disables Div sub anchors

I am new to JQuery Development. I am facing a issue with the onblur event, while i am trying to make a custom menu for my website. could any one help me with this please.
Please find ths JS fiddle JS Fiddle
$(document).ready(function () {
$('#showmenu').click(function (e) {
e.preventDefault();
this.focus();
$('#serviceMenu').slideToggle("fast");
$('#Contact').hide();
});
$('#showmenu').blur(function (e) {
$('#serviceMenu').hide();
});
});
The issue is that the show/hide div mechanism is based on a <a> tag. on clicking <a> the menu is toggling fine. i also want menu to toggle, when the user clicks anywhere outside the menu and the appearing div. In the fiddle i have added onblur() event for the anchor, that is making my sub links inside the div trigger onblur() event of main anchor, and hiding the menu. I tried to block event.propagation(), but its not working for me.

The problem here is, that the blur event is called, BEFORE you click on a#serviceMenu
You also should learn how the event-propagation works: Direct and delegated events
I updated your fiddle (with some comments): http://jsfiddle.net/M4LJh/7/
$(document).ready(function () {
$('#showmenu').on('click', function (e) {
this.focus();
$('#serviceMenu').slideToggle("fast");
$('#Contact').hide();
return false;
});
// prevent clickEvent to bubble up to #showmenu
$('#serviceMenu a').on('click', function(e){e.stopPropagation();});
// hide #serviceMenu on bodyClick
// - anywhere but an element with propagation stopped event
$('body').on('click', function (e) {
$('#serviceMenu').hide();
return false; // e.stopPropagtaion(); + e.preventDefault();
});
});

Click event when not clicking on an element

Maybe I'm, just tired but I have a right click menu that I want to close when the user clicks anywhere else than the menu. But I cant figure out how to make it disappear when the user clicks on something else.
Here is the code for showing the menu:
// If mouse click on was pressed
$('#content_list table tr').bind('mouseup', function(event) {
// if right click
if(event.which == 3) {
showRightClickMenu(event);
}
event.preventDefault();
event.stopPropagation();
});
And this is what I got for hiding the menu
// If mouse click outside document
$(document).bind('blur', function(event) {
hideRightClickMenu();
event.stopPropagation();
});
// If mouse click not on the menu
$('*:not(#rightClickMenu *)').bind('mousedown keydown', function(event) {
hideRightClickMenu();
event.stopPropagation();
});
The first bind checks if the user clicks outside the document and the second bind checks if the user clicks on everything except the menu.
But the second one doesn't really work. If I click on the menu the menu is hidden.
Shouldn't be so hard imo... Anyone got any ideas?

Try it this way
$(document.body).bind('click', function() {
hideRightClickMenu();
});
$(window).bind('blur', function() {
hideRightClickMenu();
});

Try with focusout() event and using on() instead of old bind(). This will work even with multiple submenus.
http://jsfiddle.net/elclanrs/jhaF3/1/
// Something like this...
$('#menu li').on('click', function() {
$(this).find('ul').show();
}).find('ul').on('focusout', function(){
$(this).hide();
});