Develop Reference

Popup closing even when clicked on back to top button

When I click on a div a popup opens, and it closes when I click anywhere outside the popup. Because of this feature even when I click on 'Back to top button' the popup close and that I don't want. I want the popup to close on outside click but on click of few elements I want the popup to remain open.
My JS for reference:
$(document).click(function (e) {
if (!$(e.target).is('#myPanel, #myPanel*')) {
$("#myPanel").hide();
$(".span10").width(600);
}
});

You are on the right way. However, you need to include all elements that should not close the popup in the comma separated selector. Also, for those that have child elements, you need to include the ID followed by a star as well but separated by a space. The space is what is missing in your code. It should be #myPanel * and not #myPanel.
$(document).click(function (e) {
//Do not close popup for these:
// - Element with ID myPanel #myPanel
// - Any descendants of element with ID myPanel #myPanel *
// - Element with ID backtotop #backtotop
if (!$(e.target).is("#myPanel, #myPanel *, #backtotop")) {
$("#myPanel").hide();
$(".span10").width(600);
}
});
JSFiddle.

FireFox addon, Menu button events

I am developing my first firefox extension so I created a menu-button element and menu items.
Exactly like the FireBug button, I would like an event to be triggered when clicking on the main button, but also when clicking on a menu item. The problem is that when I click on the arrow next to the main button to display the menu items the main event is triggered. So my question is:
How do I differentiate the main button (the menu-button) and the arrow displaying the menu?
Here is my code generating the button:
function addToolbarButton() {
var document = mediator.getMostRecentWindow('navigator:browser').document;
var navBar = document.getElementById('nav-bar');
if (!navBar) {
return;
};
//main button
var btn = document.createElement('toolbarbutton');
btn.setAttribute('id', 'reportButton');
btn.setAttribute('type', 'menu-button');
btn.setAttribute('class', 'toolbarbutton-1');
btn.setAttribute('image', data.url('img/BookmarkKitchen.png'));
btn.setAttribute('orient', 'horizontal');
btn.setAttribute('label', 'Report');
btn.addEventListener('click', function() {
console.log("this=" + this.id);
event.stopPropagation();
}
, false);
//menu popup
var menupopup = document.createElement('menupopup');
menupopup.setAttribute('id', 'menupopup');
menupopup.addEventListener('click', function(event) {
console.log("this=" + this.id);
event.stopPropagation();
}
, false);
//menu items
var menuitem1 = document.createElement('menuitem');
menuitem1.setAttribute('id', 'menuitem1');
menuitem1.setAttribute('label', 'Test1');
menuitem1.setAttribute('class', 'menuitem-iconic');
menuitem1.addEventListener('click', function(event) {
console.log("this=" + this.id);
event.stopPropagation();
}
, false);
menupopup.appendChild(menuitem1);
btn.appendChild(menupopup);
navBar.appendChild(btn);
}
When I click on the main button, the console will write "this=reportButton". This is normal but when I click on the arrow next to the main button, the console will also write "this=reportButton". That means if I want to access the menu, the main event will be triggered. The only way I found to prevent this, is to press the button on the arrow, wait for the menu to show up and release it on a menu Item. This is not very user friendly and Firebug doesn't have this problem...
I hope I was clear enough. Thanks for answering this :)

Don't use the click event - in XUL it really means a mouse click. So if the user triggers a button by other means (e.g. keyboard), the click event will not be triggered. You should use the command event instead - and it has the additional advantage that it won't fire if the dropdown arrow is clicked.

e.stopPropagation() and .slideToggle() at war inside click events

I've got a child close button inside its parent, a notification box. When the parent is clicked, the notification box expands, with the notification's description and the child button becoming visible inside it.
The button, when clicked, should unexpand the notification and hide both itself and the description.
Because the button has a click event inside its parent click event, both were being called. I turned to event.stopPropagation() to have the parent notification stop re-expanding after I clicked. While this stopped the notification from expanding on a close button click, it presented a new problem that I don't understand.
In my test, I have two notifications set up, both unexpanded. When I click on a notification, it expands and shows the description and close button. When I click the close button, the notification unexpands and the button and description are hidden. But, I found that the description and close button were appearing for the other notification!
Code:
var $NotificationContainer = $("#NotificationContainer");
$NotificationContainer.append('<div class="Notification" title="'+title+'"></div>');
var $thisNotification = $NotificationContainer.children('.Notification[title='+title+']');
$thisNotification.append('<div class="NotificationTitle">'+title+'</div>');
$thisNotification.append('<div class="NotificationDescription">'+description+'</div>');
$(".NotificationDescription").hide();
// Button used to close an expanded notification
$thisNotification.append("<div class='NotificationCloseButton'></div>");
$('.NotificationCloseButton').hide();
// When the parent notification box is clicked
$thisNotification.click(function(event)
{
$thisNotification.animate({height:250}, 1000);
$thisNotification.find('.NotificationDescription').slideToggle('fast');
$thisNotification.find('.NotificationCloseButton').slideToggle('fast');
});
// When the child close button is clicked
$(".NotificationCloseButton").click(function(event)
{
event.stopPropagation();
$thisNotification.animate({height:50}, 1000);
$thisNotification.find('.NotificationDescription').slideToggle('fast');
$thisNotification.find('.NotificationCloseButton').slideToggle('fast');
});
I don't know how $thisNotification.find('element') is not catching the right notification.

Does it work if you change the event handling to
// When the parent notification box is clicked
$thisNotification.click(function(event)
{
var self = $(this);
self.animate({height:250}, 1000);
self.find('.NotificationDescription').slideToggle('fast');
self.find('.NotificationCloseButton').slideToggle('fast');
});
// When the child close button is clicked
$(".NotificationCloseButton").click(function(event)
{
var self = $(this);
event.stopPropagation();
self.animate({height:50}, 1000);
self.find('.NotificationDescription').slideToggle('fast');
self.find('.NotificationCloseButton').slideToggle('fast');
});
used this to identify the clicked element, instead of relying on the variable that was defined when you created the element (avoids cases in loops where the all elements reference the last value assigned to the variable..)
Additionally, since you are appending to the #NotificationContainer you can just select the last item instead of searching for identical titles..
var $thisNotification = $NotificationContainer.children().last();
removed the selector completely since you have just appended the last element..

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