We Keep Coding

How to make function work only for one button? Bootstrap-5 scroll to modals bottom

What I want to achieve is to create two buttons:
1: that opens modal window
2: opens same modal and scrolls to bottom
code:
$('#menu-item-6706').on('click', function (){
$('#exampleModal').on('shown.bs.modal', function (event) {
$("#exampleModal .modal-body").animate({ scrollTop: $('#exampleModal .modal-body').prop("scrollHeight")}, 'slow');
});
});
Here is full jsfiddle snippet: https://jsfiddle.net/mkx2auhj/1/
Script is almost working:
If you trigger for the the first time “launch demo modal” it opens modal.
If you trigger “Contact” it opens modal and scrolls to bottom. So it’s correct.
The problem is if you hit “launch demo modal” again it scrolls to bottom again, which is not desirable. I want it to open standard modal like the first time.

Have a bunch of buttons that all trigger the same modal with slightly
different contents? Use event.relatedTarget and HTML data-bs-*
attributes to vary the contents of the modal depending on which button
was clicked. https://getbootstrap.com/docs/5.1/components/modal/#varying-modal-content
Move the 'shown.bs.modal' event listener outside the click event and use event.relatedTarget to detect when the "Contact" button toggles the modal and then animate the modal accordingly. Try this
$('#exampleModal').on('shown.bs.modal', function (event) {
if( $(event.relatedTarget).is('#menu-item-6706') ){
$("#exampleModal .modal-body").animate({
scrollTop: $('#exampleModal .modal-body').prop("scrollHeight")
}, 'slow');
}
});

bootstrap accordion - don't collapse if clicking on open panel

I have set up bootstrap to hide currently open panels when opening a new panel using:
$('.collapse').on('show.bs.collapse', function () {
$('.in').collapse('hide');
});
I would like to extend this so that nothing happens if you click on a currently open panel, i.e. the open panel should stay open when clicking on it. It should only collapse when clicking on other collapsed panels.
I tried it like this, but it doesn't work:
$('.collapse').on('show.bs.collapse', function () {
$('.in').not(this).collapse('hide');
});
Is this possible somehow?
JSFiddle

Bootstrap adds the class 'in' to open panels, you can use that to detect weather the panel is already open, if so then you can skip the collapsing by invoking a event.stopPropagation() you can read more about stopPropagation here.
$('.panel-title > a[data-toggle="collapse"]').click(function(e){
target = $(this).attr('href')
if ($(target).hasClass('in')) {
e.preventDefault(); // to stop the page jump to the anchor target.
e.stopPropagation()
}
})
jsfiddle

According to #Sammy answer - for the Bootstrap 4.x you have to change
if ($(target).hasClass('in'))
to
if ($(target).hasClass('show'))

JQuery hide contextmenu on body click

JSFiddle Demo
I'm wanting to add two right-click hijack menus on my page and I have one somewhat working above.
Alike it does upon clicking inside of .square, I would like this menu to hide on body click regardless of right or left click.
How can I hide this menu on body click?

Try below code.
jQuery(document).click(function(event) {
if (jQuery(event.target).closest('.square').length === 0) {
//hide your menu here
jQuery('.custom-menu').hide();
}
});
For right click add below code.
jQuery(document).on("contextmenu",function(e){
if (jQuery(event.target).closest('.square').length === 0) {
$('.custom-menu').hide();
}
});

jquery conflict between dropdown menu and ajax window

I have a jquery dropdown menu and an modal window which is a trigger for ajax. The problem occurs when you click on link for ajax, and when you close it dropdowns are not working anymore. So dropdown is working when you dont click the ajax. When you click the link and close it, dropdown menu is not showing dropdown.
Try it and source code are here:
codepen.io/riogrande/pen/NxZLaQ
Step by step to reproduce:
Mouse over the right most "Lorem" and a drop down menu appears.
Exit the mouseover and click the link titled "Click here for ajax"
Click the "X" to exit the ajax popover
Step 1 no longer works.

You can use separate fadeIn and fadeOut functions instead of a single fadeToggle on hover and it will fix the issue:
$(".menu-dropdown").hover(
function(e) {
if ($(window).width() > 943) {
$(this).children("ul").stop(true,false).fadeIn(150);
e.preventDefault();
}
},
function(e) {
if ($(window).width() > 943) {
$(this).children("ul").stop(true,false).fadeOut(150);
e.preventDefault();
}
}
);
CodePen here.

What happens exactly when a link is tapped

I'm building a website where some elements in the navigation menu have a submenu. These submenus are shown when the mouse hovers over the element, but of course on mobile I cannot do that since there is no actual hover. A tap means a click, and that follows the link. I hoped on a simple solution but it doesn't work on my mobile device...
Here's a code snippet inside a loop, this is a menu item (li) that contains a submenu (ul):
$(this).find("a").on("mouseenter focusin click", function(e) {
if(submenu.css("display") != "block") {
e.preventDefault(); //should work on mobile
}
submenu.stop().css('display', 'block').animate({
top: 1.2em,
opacity: 1
}, 200);
});
Now I test this in Firefox. In normal use, you cannot actually click the menu item before the submenu comes out because display becomes block as soon as the mouse hovers over it. So in web console I type in:
$("#nav > ul > li:first-child > a").click()
This gives the expected behaviour. the submenu comes out but the link isn't followed. On mobile, the link is still followed... What gives?
Update
I just entered two alert statements. One that says the event type first thing in the handler, and one that says "preventing default" just before e.preventDefault. On my mobile browser (Dolphin browser for Android) it gives the following on a tap of the menu item:
Event is mouseenter
Preventing default
Event is click
Naturally, when the first event fired is "mouseenter", the default will not be prevented for click as that is the point where the menu shows up. In other words, I would need to make sure that the first mouseenter does show the menu but a click isn't fired... I could check the top css property for that, but I wonder if there is another way.

I got it working by adding another check to see if the submenu is at the proper position, rather than using the value of display.
$(this).find("a").on("mouseenter focusin click", function(e) {
if(e.type == "click" && submenu.css("top") != "1.2em") {
e.preventDefault();
}
submenu.stop().css('display', 'block').animate({
top: 1.2em,
opacity: 1
}, 200);
});