I put a form inside a bootstrap dropdown, but when I click any of the fields in the form, the dropdown goes away. I have this piece of code but I don't know where to put it to prevent the dropdown disappearing.
$(function test() {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});
Could someone please tell me where I should put this? I tried in the bootstrap-dropdown, I tried within the HTML but it still doesn't work.
You can omit the dropdown call all together, the bootstrap dropdown works without it. Make sure you're wrapping your script properly, you can include it on the header or body of your page, although personally i prefer placing it on the body of your page.
JS
<script type="text/javascript">
$('.dropdown-menu input, .dropdown-menu label').click(function(e) {
e.stopPropagation();
});
</script>
If you want to stop closing only some of dropdown menu, not all of them, then just add an additional class to your ul block:
<ul class="dropdown-menu keep-open-on-click">
And use this code:
$(document).on('click', '.dropdown-menu', function(e) {
if ($(this).hasClass('keep-open-on-click')) { e.stopPropagation(); }
});
Time passed since answer had been accepted, but if you want to keep the dropdown opened, if it acts like a kind of dialog, the best way i think is:
$('.dropdown').dropdown().on("hide.bs.dropdown", function(e) {
if ($.contains(dropdown, e.target)) {
e.preventDefault();
//or return false;
}
});
You need to stop event from bubbling up the DOM tree:
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
event.stopPropagation prevents event from reaching the node where it's eventually handled by Bootstrap hiding menu.
This works for my (lateral sidebar opening a simple link with bootstrap toggle)
$('.dropdown').find("a").not('.dropdown-toggle').on("click",function(e){
e.stopImmediatePropagation();
});
Thank you for the above answer, I was having the same issue w/ submenus under the dropdown menus. Using the above solution I was able to solve the problem for this as well.
$('.dropdown-menu .dropdown-submenu a[data-toggle="dropdown-submenu"]').click(function (e)
{
e.stopPropagation();
});
Simply use this example.This solution works for me.
<script type="text/javascript">
window.addEvent('domready',function() {
Element.prototype.hide = function() {
$(function () {
// replace your tab id with myTab
//<ul id="myTab" class="nav nav-tabs">
$('#myTab li:eq(1) a').tab('show');
});
};
});
</script>
Hope it'll help. Thanks.
Put
<script type="text/javascript">
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
</script>
on the original answer, remove all the classes, and just put the ".dropdown-menu" class, it worked for me.
i have an input field inside the dropdown menu.
If you look to the bottom of sources of dropdown widget, you will see this:
$(document)
.on('click.bs.dropdown.data-api', '.dropdown form', function(e) {
e.stopPropagation()
})
So you have the following choices:
Simply wrap yor dropdown with form
Or you can add event listener for click event of .dropdown YOUR_SELECTOR
$(document)
.on('click.my', '.dropdown some_selector', function(e) {
e.stopPropagation()
})
Related
I have this strange scenario that I cannot understand.
Basically, I show an element using jquery show(); which works fine.
But I need to hide() the same element using the hide(); function but the element stays visible and the hide() doesn't work.
Can someone please advice on this?
Here is a working FIDDLE.
This is my code:
$(document).on('click','.buildExMain', function(e){
$(this).children('.buildExDrop').show();
});
$(document).on('click','.pSelection', function(e){
$('.buildExDrop').hide();
});
#billyonecan was spot on, adding e.stopPropagation(); after your $('.buildExDrop').hide(); fixes this.
This allows the hide click event for the sub-elements .pSelection to not bubble up to the show click event of the .buildExDrop element.
Your click to hide also triggers the click to show. this works
$(function(){
$(document).on('click','.buildExMain span', function(e){
$('.buildExDrop').show();
});
$(".buildExMain").on('click','.pSelection', function(){
$('.buildExDrop').hide();
});
});
I have a button which creates a pulldown in which you can select several categories.
Now i want this to close automatically when i click outside the pulldown.
Something like a lightbox or modal popup which closes if you click anywhere else on the page.
Now i have to click the button again to close it. If i dont and go elsewhere on the page, the dropdown stays visible (until i click it)
This is the code of the button:
$(function(){
$('#browse-btn').click(function(){
$('#browse-content').toggle('1000');
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
});
$(".scroll-top").scrollToTop();
$("#category_id").selectbox();
});
Is this possible?
thanks
Using jquery this is the code I used for a similar case scenario sometime ago:
$(document).click(function(event) {
if(!$(event.target).closest('.pulldown').length) {
if($('.pulldown').is(":visible")) {
$('.pulldown').slideUp()
}
}
})
You can read more about this in the original post How to detect a click outside an element? submitted by Art.
I'm not exactly sure of the elements you want to hide as you don't have a demo, so I cannot provide a fully working code, however you should do something like this:
$("body").click(function(event) {
if (event.target.id != "browse-btn") {
// Do something when there's a click outside of #browse-btn
// and the element you want to hide is currently visible
}
});
You can attach a click event to all chidren of the body tag that removes that active class, but you would want to make sure to unbind that event so it doesn't run every time a click takes place that doesn't have some sort of prevent default on it. Something like this:
$(function(){
var hidePulldown = function(){
$('#browse-btn').removeClass('active');
$('body *').unbind("click", hidePulldown);
}
$('#browse-btn').click(function(){
$('#browse-content').toggle('1000');
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else {
$(this).find('span').html('▼');
$(document).on('click', 'body *', hidePulldown);
}
});
$(".scroll-top").scrollToTop();
$("#category_id").selectbox();
});
Also, the
$(document).on('click', element, function(){function body})
is the preferred way to attach click events i believe: $(document).on('click', '#id', function() {}) vs $('#id').on('click', function(){})
This is what worked flawlessly for me after reading some of the answers here:
$(document).click(function(event) {
if(!$(event.target).closest('#menucontainer').length &&
!$(event.target).is('#menucontainer')) {
if($('#menucontainer').is(":visible")) {
$('#menucontainer').hide();
}
}
})
Thanks for pointing me in the right way!
CODE:
<script type="text/javascript">
$(document).ready(function() {
$("#clicker").click(function() {
$(".show_this").show();
e.preventDefault();
});
});
</script>
Using the script above I am able to show .show_this on clicking #clicker but on clicking #clicker again i want to hide it. How can I tweak my code to do that?
I did some research and it seemed that by using e.preventDefault(); I would be able to achieve that but it didn't work.
You can use toggle();
$(".show_this").toggle();
This will toggle every time, so if it is hidden it will show it and vice versa
Api Documentation: http://api.jquery.com/toggle
Also event.preventDefault(); will not be able to do this, though it is useful if the .show-this is a anchor tag because it will prevent the default action and that is to follow the link.
Use .toggle() instead.
$(document).ready(function() {
$("#clicker").click(function(e) {
$(".show_this").toggle();
e.preventDefault();
});
});
jsFiddle example
You can do this using the .toggle() method like:
$(document).ready(function() {
$("#clicker").click(function(e) { // call the event variable 'e' first here
e.preventDefault();
$(".show_this").toggle();
});
});
I'm trying to achieve something similar to the bootstrap button drop downs (http://twitter.github.io/bootstrap/components.html#buttonDropdowns) but need something lightweight. Basic functionality is more or less this:
On clicking the link, corresponding dropdown div opens (works)
On clicking another link, the previous dropdown closes as well as the css class is removed (works)
On clicking on the link of the opened dropdown, close the dropdown (does not work (closes and reopens))
On clicking anywhere in the body (so outside the link and dropdown), close the dropdown (does not work)
What should be the logic behind this?
Demo: http://jsfiddle.net/fU2BZ/
Does the code below make sense?
$(document).click( function(){
$('.dropdownbox').hide(0);
$('.dropdown').removeClass('active');
});
$('.dropdown').click( function(event){
event.stopPropagation();
$('.dropdown').removeClass('active');
$('.dropdownbox').hide();
$(this).addClass('active').find('.dropdownbox').slideToggle(200);
});
Made some changes to your code, added some if else logic, seems to work.
fiddle: http://jsfiddle.net/fU2BZ/1/
Code:
$('.dropdown').click( function(event){
event.stopPropagation();
if ($(this).hasClass("active")) {
$('.dropdown').removeClass('active');
$('.dropdownbox').hide();
} else {
$('.dropdownbox').hide();
$(this).addClass('active').find('.dropdownbox').slideToggle(200);
}
});
You were pretty close. I'd store a flag if it was visible (so that you don't double-up on the same code)
$('.dropdown').click( function(event){
event.stopPropagation();
var active = false;
if ( $(this).hasClass('active') )
active = true;
$('.dropdown').removeClass('active');
$('.dropdownbox').hide();
if ( ! active )
$(this).addClass('active').find('.dropdownbox').slideToggle(200);
});
jsFiddle: http://jsfiddle.net/fU2BZ/4/
Simple code to resolve your third issue:
$('.dropdown').click(function (event) {
event.stopPropagation();
$('.dropdown').removeClass('active').not(this).find('.dropdownbox').hide();
$(this).toggleClass('active').find('.dropdownbox').slideToggle(200);
});
To resolve your last issue, do this:
$('.dropdownbox').click(function (event) {
event.stopPropagation();
});
I would like to know if some one can improve my code... Using jQuery I'm trying to apply a class on the element we just click and disable this class on the other elements.
You will se in my code that I'm trying to apply a class on the I just clicked and remove all the class on the others elements.
But for the moment, I'm doing it the "easy and mega long way" as you can see in $("choice1-1").click(function()
Can some help me with a code that could detect all the others ID ?
Here my code for the moment
$(document).ready(function()
{
$('#stick-question-1').mouseenter(function()
{
$('#stick-choices-1').show();
});
$('#stick-choices-1').mouseleave(function()
{
$('#stick-question-1').show();
$('#stick-choices-1').hide();
});
$("choice1-1").click(function()
{
$(this).addClass('hover-etat');
$("#choice1-2").removeClass('hover-etat');
$("#choice1-3").removeClass('hover-etat');
$("#choice1-4").removeClass('hover-etat');
});
});
And my HTML is like this
<div id="stick-choices-1" class="stick-choices">
Under 3'9
4' to 5'2
5'3 to 5'7
5'8 and more
</div>
Just use:
$("#stick-choices-1 a").click(
function(e) {
e.preventDefault();
$('.hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
I've changed your initial selector, so that the click event is triggered by clicking any of the links within the #stick-choices-1 div element, it prevents the default action of clicking the link (assuming that you want the default to be stopped), removes the hover-etat class from any element that has that class, and then applies that class-name to the this element.
It may, though, make sense to restrict the scope in which jQuery searches for elements with the hover-etat class, to those elements within the same #stick-choices-1 element, rather than the whole document:
$("#stick-choices-1 a").click(
function(e) {
e.preventDefault();
$('#stick-choices-1 .hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
Or:
$("#stick-choices-1 a").click(
function(e) {
e.preventDefault();
$(this).siblings('.hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
It will works fine :
$("#choice1-1").click(function(){
$(".stick-choices a").each(function(){
$(this).removeClass(".hover-etat");
});
$(this).addClass(".hover-etat");
});
This should do it, and registers this handler for all of the links.
$('#stick-choices-1 > a').click(function(ev) {
$(this).addClass('hover-etat').siblings().removeClass('hover-etat');
...
});
Note the use of .siblings() to ensure that only the links that are in the same group are affected, and without sending an unnecessary class change to the clicked link.
This click event will work for all of the choices:
$('.stick-choices a').click(function(e){
$(this).siblings('.hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
$("a", $("#stick-choices-1")).click(function(){
$(".hover-etat").removeClass('hover-etat');
$(this).addClass('hover-etat');
});
May be something like this?
$('div.stick-choices a').on('click', function(e) {
e.preventDefault();
$(this).addClass('hover-etat').siblings('a').removeClass('hover-etat');
});