Closing one bootstrap modal and opening another one immediately causes scrolling issues - javascript

I have two modals. When I close one and open the other right after, I have scrolling issues. Instead of scrolling in the modal, the content behind it gets scrolled. To solve this, I did the following:
$('#firstModal').on('hidden.bs.modal', function (e) {
$('#secondModal').modal();
$('#firstModal').off('hidden.bs.modal');
});
$('#firstModal').modal('hide');
I was wondering, is there a more elegant solution that does not involve using the event listener?

The issue is the modal-open class has not been removed by the time you show the second modal. Therefore, as soon as it is added (by opening the second modal) it is removed because the first one finished closing. You can work around this with the following code:
$('#firstModal').on('hidden.bs.modal', function (e) {
setTimeout(function() {
$('#secondModal').modal();
});
});

Related

Function to change CSS of nested submenu not working (jQuery)

I'm attempting to create a slide-in menu for a mobile website which has nested submenus that also slide in over the primary parent menu. This is done by editing the right style attribute to move each menu off & on screen.
Everything is working properly except that once I open a submenu, the function that's supposed to close the submenu is changing the CSS. The function that contains this instruction itself is executing (as evidenced by a console.log), but the line that edits the CSS is not working.
Here is the function that is having trouble:
$(document).ready(function(){
$('.close-sub-menu').click(function(){
$(this).parent().css("right", "-425px");
console.log("this line is logging correctly");
});
});
Interestingly enough, if I attempt to edit the CSS of background-color or left, it will work. But right will not work.
I've tried using addClass and removeClass instead, referencing the parent's class name directly instead of using this, and inline function calls, but none of it has seemed to work. I think it is either a scoping issue, or perhaps some interference with the parent menu. Either way, I'm not able to figure it out.
Here is a simple example of my problem in a JSFiddle: https://jsfiddle.net/wk4wwfer/2/
JQuery is very acceptable.
Your $('.slide-menu-sub-parent').click function is still firing when you click the close button.
Update your close function to be:
$('.close-sub-menu').click(function(e){
e.stopPropagation(); //Prevents the click event from bubbling up and triggering the other click events registered
$(this).parent().css("right", -425);
}
Fiddle solution.

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.

How can I toggle a the visibility of a DIV element?

I'm trying toggle a DIV element using jQuery, a good example of this implemented is clicking the sign up button on Udemy.
I've implemented something similar using jQuery but I'm sure that to gain the effect I'm looking for, I will have to use JavaScript but its just that I'm don't know how to use JavaScript.
The my implementation be seen in my fiddle here, I've initially set the div to display:none and used jQuery to show the div on button click.
As you can tell with the fiddle, it displays with an enlarging animation instead of just appearing (not sure how to change this) and i'm only unable to make the div disappear by again clicking the button.
Also, how would I go about implementing functionality to make the div disappear by clicking anywhere on the screen?
Thanks to anyone in advance for taking the time to help me out.
The issue you face is that a click on the button is also a click on an area where you would like the pop up to disappear, if it's already shown. Because events bubble, the button click would make the pop up appear and then the document click (which fires after this because of bubbling) would make the pop up immediately disappear.
To solve the problem, you must stop a click on the button from bubbling to the rest of the document as well. You do this with:
event.stopPropagation();
So, what you need to do is make sure that when the button is clicked, the click event doesn't bubble up to the document, where you will have already set up a click event handler that makes the pop up go away:
$(document).on('click', function(event) {
// We want to hide the pop up, but not if you click on
// the pop up itself - - anywhere else, but not the pop up
if(event.target.id !== "pop-up"){
$('#pop-up').hide();
}
});
See this fiddle for a working version: https://jsfiddle.net/0ajpd9go/8/
If you want your div to just appear on the screen change this line:
jQuery('#pop-up').toggle('fast');
to this:
jQuery('#pop-up').show();
Maybe you'd like to give bootstrap modal a try:
http://getbootstrap.com/javascript/#modals
I think what you are looking for is $.fn.toggle();
$.fn.toggle(); toggles the visibility of an element meaning if the element is visible then it will be hidden when toggled and if the element is hidden it will be shown when toggled.
Here is a basic (animation free) example of using toggle:
$(".button-that-toggles").on("click", function() {
$(".div-to-toggle").toggle();
});
Your box toggles with an "enlarging animation" because you used $.fn.slideToggle();
There are three default ways to toggle using jQuery (toggle, fadeToggle and slideToggle)
Here is an example of toggling a element using $.fn.fadeToggle();:
$(".button-that-toggles").on("click", function() {
// NOTE: 250 represents the duration of the animation, meaning that the animation will last 250 milliseconds.
$(".div-to-toggle").fadeToggle(250);
});
Here is an example of toggling a element using $.fn.slideToggle();:
$(".button-that-toggles").on("click", function() {
// NOTE: 250 represents the duration of the animation, meaning that the animation will last 250 milliseconds.
$(".div-to-toggle").slideToggle(250);
});
Also here is an example of how you can hide your div by clicking anywhere on the page:
// listen for a click anywhere in the page
$(document).on("click", function(event) {
// make sure the element that was clicked is not your div
if(!$(event.target).is(".your-div")) {
// you can now hide your div
$(".your-div").hide();
}
});
Also please remember that jQuery is JavaScript as a matter of fact jQuery is a library written in JavaScript.

Having a nested pop-up open and close with buttons

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.

Is jQuery 1.3.2 causing this not to work, or something else?

I know that this is supposed to work, it works fine in 1.7.2
//click anywhere to close dropdown
$("html").live("click", function () {
closeDropdown();
});
//on click of ellipsis, open dropdown
$("span.PivotEllipsis").click(function (e) {
e.stopPropagation();
openDropdown();
});
It is the classic click outside span.PivotEllipsis to hide. However, the problem is that the second function is not working. The first is working fine, when you click outside, it hides. However, when you click on the span.Pivot Ellipsis it doesn't pop up, instead I think, hard to tell though, that it runs openDropdown() and then immediately after closeDropdown()....
Anyone know what it wrong?
According to jQuery Documentation: "it is not possible to stop propagation of live events." You don't really need to use .live() as the html element exists at document.ready and isn't dynamically loaded
What you thought is probably correct - you need to disable the first function while the dropdown menu is not open.

Categories

Resources