I have a button which opens a menu. When the user selects the button the menu opens and the button is 'pressed' i.e blue colored
when the user makes a selection from the menu the menu closes and the button is unpressed.
if the user selects the button and then instead of choosing an item they click outside of the button, the menu closes and buttonis again unpressed.
my issue is: when i open the menu using the button i should be able to reclick on the button and close it. except when i reclick it opens it again.
i think i need to add something to the press event i have but not sure what. i tried adding event.stopPropogation() to the press but it returned not
a function.
$(document).click(function() {
this._button.setPressed(false);
}.bind(this));
this._button = new ToggleButton({
press: function(event) {
if (this._button.getPressed()) {
menu.open(
false,
this.getFocusDomRef(),
this.getDomRef()
);
} else {
menu.close();
}
}.bind(this)
}).addStyleClass("oButton");
I would suggest a solution. You would see whether it is good for you.
You can create a layer element after pressed the button. Then, the z-index of the menu is the highest and then the layer element is higher than the background.
You can add a click event to the layer. if the layer is clicked, close the menu.
Related
I have 2 radio buttons on an ASP.NET WebForm page. I have a modal popup that is to be shown only when going from one of the radio buttons to the other, but not the other way. In other words, here are my choices:
if radio button 1 is clicked then the modal popup is shown.
If radio button 1 is currently selected and radio button 2 is clicked then the modal popup should NOT be shown.
I have a javascript function that toggles the show and hide but I briefly see the popup when #2 logic is performed. Here is the js function:
$(function () {
$('#<%=RadioButtonListServiceLevel.ClientID%>').click(function () {
var CustomerCountry = $('#<%=HiddenFieldCustomerCountry.ClientID%>').val();
var ServiceLevelSelected = $("#<%=RadioButtonListServiceLevel.ClientID%> input:checked").val();
if ((CustomerCountry != "US" && CustomerCountry != "CA") && ServiceLevelSelected == "24") {
$('#InternationalServiceLevelModal').modal('show');
} else {
$('#InternationalServiceLevelModal').modal('hide');
}
});
});
Any idea why the popup modal dialog would briefly show when the action described in #2 is performed?
Thanks
I was just playing around a bit using an 'alert' and when I used the 'click' event, like you have, the alert fired twice: as soon as i clicked - before the button visibly changed value, then again after the button visibly changed value.
I changed 'click' to 'change' and the alert only fired once. Could be the fix?
// changed 'click' to 'change'
$('#<%=RadioButtonListServiceLevel.ClientID%>').change(function () {
I use bootstrap 3, Html 5 and CSS 3. The website has a navbar and it closes if the user clicks away of the navbar. But if the user clicks then on an item like a link it follows the link. How i can block those elements when i click away from the navbar for closing the drop down of the navbar? I want to remove those side-effects.
$('body').click(function (event) {
// If user does not click on navigation and navigation drop down is visible.
if (!($(event.target).is('#navigation *')) && $(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible")) {
event.preventDefault();
$('.navbar-collapse').collapse('toggle');
}
});
What do I have to add that the area which is shown on screen next to the navigation do not excecute links etc. when the user clicks them for closing menue..
Thank you already!
When clicking on the navigation bar, you need to disable the click event.You can do it with javascript.
jQuery( '.dropdown-menu > li' ).click( function(e){ e.stopPropagation(); });
I almost got my function to work but I'm missing some ingredient.
I have 3 boxes with their own toggle open close button.
I have an Open All / Close All button that detects the number of open boxes, and switches its text label from 'Open All' to 'Close All' when all 3 boxes are open.
It works fine, except if you start out by clicking on the (red) Open All button after loading the page — and then manually close each individual box — and toggle them open again. Then the red Open / Close all button doesn't detect the opened boxes, and its text label doesn't switch from Open All to Close All.
I know it's unlikely that anyone would use the system this way, but I just want to understand why it stops detecting the number of open boxes.
http://codepen.io/StrengthandFreedom/pen/Yyemqa
// Open/close all boxes
$('.show-hide').on('click', function(){
event.preventDefault();
$('.box').siblings().toggleClass('is-visible',
$('.box').length != $('.box.is-visible').length);
$('.open-all').toggleClass('hide-text');
$('.close-all').toggleClass('show-text');
});
// Toggle boxes individually
$('.toggle-button').on('click', function(){
$(this).next('.box').toggleClass('is-visible');
// Count number of open (visible) boxes
var numOfVisible = $('.is-visible').length;
// if open boxes equal 3, switch button label
if (numOfVisible === 3) {
$('.open-all').addClass('hide-text');
$('.close-all').addClass('show-text');
}
// otherwise do the opposite
else {
$('.open-all').removeClass('hide-text');
$('.close-all').removeClass('show-text');
}
});
Can someone point me in the right direction? :-)
I think you just need to use
var numOfVisible = $('.box.is-visible').length;
instead of
var numOfVisible = $('.is-visible').length;
DEMO
Here is my solution:
http://codepen.io/anon/pen/epMJRz
This is the change on jquery code i made to make it work:
$('.show-hide').on('click', function(event){
event.preventDefault();
$('.toggle-button').trigger('click');
});
Had to refork it to resolve a bug now its perfect
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..
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');
});
}
});