Having a nested pop-up open and close with buttons - javascript

I'm trying to have multiple pop-ups in a page using two jquery functions. One of them is a button that opens up the pop-up (which is nested inside the button itself, to make it easy to position the pop-up next to the button). The other function is a button that should close the pop-up (which is inside the nested div).
Problem is, the div which makes up the first button extends it's functionality to the opened pop-up, effectively making it so that every time I want to close the pop-up, it opens up again. (or at least that's what I think it does, because after I un-nested the open button from the pop-up, the thing started working)
Here's the code for the javascript
jQuery(document).ready(function(){
$(".button_open").click(function()
{
$(this).children().css("display","inline");
});
$(".button_close").click(function()
{
$(".pop-up").css("display","none");
});
});
Html
<div class="button_open">
<div class="pop-up">
<div class="button_close">X</div>
Text
</div>
</div>
The page will have multiple pop-ups each containing different stuff, and if possible, I'd want to have those two functions perform all the open/close stuff, instead of having a ton of functions.
So basically I'd like to know if there's any way of making the close button function inside the nested div

If you make a click on your close-button - you make a click on the parent also.
Try to make your code so:
$(".button_close").click(function(event)
{
$(".pop-up").css("display","none");
event.stopPropagation();
});
stopPropagation function prevents bubbling of the event to the parent. Then it should not bubble to the parent and should not cause fireing of click on the parent. Please let me know if it doesn't help.

Related

How to trigger an event in jQuery?

I'm working on a page that opens a modal window when the user clicks a certain radio button. I want to trigger whatever that event handler is via my own jQuery code. Right now, I'm attempting to mimic a user clicking on the radio button by:
$("#myRadioButton").trigger("click");
The code works somewhat. The state of the radio button does become selected. However, the modal window does not open.
What must I do to trigger the events and event handlers that make the modal window open?
(Also, is there a way in Chrome DevTools to see what events are attached to an element?)
This will make the click function work, with a id on the element. You will need to make some logic for the modal itself, inside the function.
Not sure there is a way to see the events in the developer console.
$( "#myRadioButton" ).click(function() {
//Whatever you wants to happen, when you click the button
alert( "You clicked on #myRadioButton" );
});
Try and check out -> https://jquerymodal.com/

jQuery Mobile: Navigation does not open after page change

In my jQuery Mobile project I have an element #sidebar with a toggle icon.
In my base file, just under the #sidebar div I use the following code:
Toggle sidebar
<div id="sidebar"> ... </div>
$('#toggle-sidebar').on('click', function() {
$('#sidebar').toggleClass('visible');
});
When my page loads for the first time, toggling works perfectly fine. However, when I change pages via my main navigation the toggling does not work anymore. I put an alert inside the click function and realized that AFTER page change the alert gets executed multiple times, namely as many times as I changed the page before.
The toggling works again when I move to the other page by entering the URL in my browser and loading the page.
How can I solve this problem?
If the alert executes many times on click after changing the page it may suggest that you have new click event listener bound on every page change. Try to unbind the click event listeners on that element before binding your click listener, to avoid such situation. Sth like that:
$('#toggle-sidebar').off('click');
$('#toggle-sidebar').on('click', function() {
$('#sidebar').toggleClass('visible');
});
It may resolve the issue.
You may also take a look at jQuery event namespaces https://api.jquery.com/event.namespace/. And add namespace to your click event so it won't unbind other click events on that element that may possibly appear in the code someday.

Bootbox: how to avoid recursive calls?

I have the following code:
$('boddy').click(function(e) {
bootbox.alert("clicked!");
});
When a page is clicked, I see a popup window with "clicked" displayed. However, if I click the OK button to close it, the popup shows up again and never ends.
Interestingly, I tried the following code:
$('boddy').click(function(e) {
alert("clicked!");
});
After I click the OK button in the popup, it never shows up again.
Thanks!
Bootstrap modals (and therefore Bootbox modals) are simply <div> elements with higher z-indexes than the rest of the page content. They're still contained with the body of the page, so when you click on any element in the modal, it propagates through every parent element of the modal. Since the body tag is the top-level parent, clicking a button in the modal ultimately also clicks the body element.

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

Prototype best practice for "click anywhere to close"?

I find myself very often in the situation that I open an element in a web page - e.g. a drop-down menu - that I want to close if the user clicks anywhere on the page except the element itself.
To keep things simple, I have mostly written the code myself instead of employing some drop-down menu class.
However, I have never managed to build an implementation of this that was completely satisfying: Event handling and bubbling would work differently in different browsers, there would be the need for nasty workarounds, in some situations clicking the drop-down button would start closing it in the same moment, and so on.
Is there a Prototype based, authoritative, best practice to do this? Something that works across browsers - IE6 being a plus but not a requirement?
Just this:
click on a button - an element opens
(e.g. an absolutely positioned drop-down menu).
click within the element - the element stays open.
click on the button that opened the element - the element stays open.
click anywhere else on the page - the element closes.
I need help with the event handling part only, the displaying of the menu is totally secondary.
Event.observe(document, 'click', function (event) {
switch (event.element().id) {
case 'example_id':
// do different stuff depending on element clicked
// ofc u don't need to pass id, u can simply throw an element itself
break;
default:
// do close action
break;
}
// also check Event.findElement();
});
You can also add specific classes to the items you don't want to trigger close action and check it inside
if (!event.element().hasClassName('dont_close'))
Element.remove(selectDOMElement);
I guess the open button is within the menu.
$('openbutton').observe('click' function(event) {
var menu = $('openbutton').up();
if (menu.hasClassName('collapsed')) {
menu.removeClassName('collapsed');
menu.addClassName('expanded');
document.observe('click', function (event) {
if(!event.target.descendantOf(menu)) {
menu.addClassName('collapsed');
menu.removeClassName('expanded');
}
});
} else {
menu.addClassName('collapsed');
menu.removeClassName('expanded');
}
});
AFAIK, you need to make an invisible div the size of window, put it behind the current element, and add a click event to that.
Just thinking out loud but you might be able to use the blur event on the dropdown to hide it (blur gets fired when an element loses focus) or another idea might be when the dropdown opens attach a click event to the document object that hides the dropdown. Events get propagated through their containers so it should end up at the document object eventually. You might need to call preventPropegation on the event when your dropdown gets clicked so that it doesn't make it to the handler attached to the document.
maybe you could calculate the Position (X,Y) for the clickevent and compare that to the cumulativeOffset (cumulativeScrollOffset) + [el.width|el.height] of the desired container.
Event.observe(window, 'click', function(e) {
var el = $('el')
if( el.cumulativeOffset[0] < e.Event.pointerX(e) ... )
});
<div id="el" style="position:absolute;width:100px;height:100px;background-color:#00F;top:100px;left:300px;">
</div>

Categories

Resources