Remove class from element inside bootstrap popover - javascript

I'm using a bootstrap popover to show a list of available actions for a list of recipients.
Popover:
<ul class='list-unstyled recipients-popover'>
<li><a href='#' class='popover-item' onclick='openAddContactModal()'><i class='test'></i> Add contact</a></li>
<li><a href='#' class='popover-item'><i class='test'></i> Add contact list</a></li>
<li><a href='#' class='popover-item disabled' onclick='deleteContacts()'><i class='test'></i> Delete contacts</a></li>
<li><a href='#' class='popover-item' onclick='openAddGroupModal()'><i class='test'></i> Create new group</a></li>
<li><a href='#' class='popover-item disabled' onclick='openAddContactToGroupModal()'><i class='test'></i> Add contacts to group</a></li>
<li><a href='#' class='popover-item disabled'><i class='test'></i> Remove contacts from Group</a></li>
<li><a href='#' class='popover-item' onclick='openDeleteGroupModal()'><i class='test'></i> Delete Group</a></li>
The above is triggered by the below HTML:
<a class="btn btn-link text-white" tabindex="0" role="button" data-html="true" data-trigger="focus" data-container="body" data-toggle="popover" data-placement="auto" data-content=" #include('recipient.actions-popover') ">
Then issue is when I try to run javascript on the popover it isnt working. For example, if I try and run:
$(document).on('change', '.checkable', function(e) {
console.log("testing");
$(".popover-item").removeClass('disabled');
});
The disabled class does not get removed although I do see the testing console log.
Can anyone help get the above working?

If you just want to remove a class when the checkbox change, this works fine :
$(".checkable").change(function() {
$(".popover-item").removeClass('disabled');
});
.disabled{
color:red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='list-unstyled recipients-popover'>
<li><a href='#' class='popover-item' onclick='openAddContactModal()'><i class='test'></i> Add contact</a></li>
<li><a href='#' class='popover-item'><i class='test'></i> Add contact list</a></li>
<li><a href='#' class='popover-item disabled' onclick='deleteContacts()'><i class='test'></i> Delete contacts</a></li>
<li><a href='#' class='popover-item' onclick='openAddGroupModal()'><i class='test'></i> Create new group</a></li>
<li><a href='#' class='popover-item disabled' onclick='openAddContactToGroupModal()'><i class='test'></i> Add contacts to group</a></li>
<li><a href='#' class='popover-item disabled'><i class='test'></i> Remove contacts from Group</a></li>
<li><a href='#' class='popover-item' onclick='openDeleteGroupModal()'><i class='test'></i> Delete Group</a></li>
<label>Checkable</label> <input type="checkbox" name="recipient[3]" class="checkable" contactid="3">

Related

How to select li without children in a multilevel menu with jQuery?

I have a multilevel (tree) menu built with HTML <ul> and <li>. This is a sample of that markup:
<ul class='dl-menu dl-menuopen'>
<li>
<a href='#' class='catlink'>Fashion</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Men</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Shirts</a></li>
<li><a href='#' class='catlink'>Jackets</a></li>
<li><a href='#' class='catlink'>Chinos & Trousers</a></li>
<li><a href='#' class='catlink'>Jeans</a></li>
<li><a href='#' class='catlink'>T-Shirts</a></li>
<li><a href='#' class='catlink'>Underwear</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Women</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Jackets</a></li>
<li><a href='#' class='catlink'>Knits</a></li>
<li><a href='#' class='catlink'>Jeans</a></li>
<li><a href='#' class='catlink'>Dresses</a></li>
<li><a href='#' class='catlink'>Blouses</a></li>
<li><a href='#' class='catlink'>T-Shirts</a></li>
<li><a href='#' class='catlink'>Underwear</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Children</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Boys</a></li>
<li><a href='#' class='catlink'>Girls</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Electronics</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Camera & Photo</a></li>
<li><a href='#' class='catlink'>TV & Home Cinema</a></li>
<li><a href='#' class='catlink'>Phones</a></li>
<li><a href='#' class='catlink'>PC & Video Games</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Furniture</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Living Room</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Sofas & Loveseats</a></li>
<li><a href='#' class='catlink'>Coffee & Accent Tables</a></li>
<li><a href='#' class='catlink'>Chairs & Recliners</a></li>
<li><a href='#' class='catlink'>Bookshelves</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Bedroom</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Beds</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Upholstered Beds</a></li>
<li><a href='#' class='catlink'>Divans</a></li>
<li><a href='#' class='catlink'>Metal Beds</a></li>
<li><a href='#' class='catlink'>Storage Beds</a></li>
<li><a href='#' class='catlink'>Wooden Beds</a></li>
<li><a href='#' class='catlink'>Children's Beds</a></li>
</ul>
</li>
<li><a href='#' class='catlink'>Bedroom Sets</a></li>
<li><a href='#' class='catlink'>Chests & Dressers</a></li>
</ul>
</li>
<li><a href='#' class='catlink'>Home Office</a></li>
<li><a href='#' class='catlink'>Dining & Bar</a></li>
<li><a href='#' class='catlink'>Patio</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Jewelry & Watches</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Fine Jewelry</a></li>
<li><a href='#' class='catlink'>Fashion Jewelry</a></li>
<li><a href='#' class='catlink'>Watches</a></li>
<li>
<a href='#' class='catlink'>Wedding Jewelry</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Engagement Rings</a></li>
<li><a href='#' class='catlink'>Bridal Sets</a></li>
<li><a href='#' class='catlink'>Women's Wedding Bands</a></li>
<li><a href='#' class='catlink'>Men's Wedding Bands</a></li>
</ul>
</li>
</ul>
</li>
</ul>
My goal is to select all <li> nodes that has no children. I want to get the "leaves" of the tree, those elements that have no children, the final nodes.
How can I do this with jQuery?
You should be able to use either of the following:
$(".dl-menu li:not(:has(li))")
or
$(".dl-menu li:not(:has(ul))")
I assume you want all links:
$('li:has(a):not(:has(ul))')
$('li:has(a):not(:has(ul))').each(function(){
console.log(
$(this).html()
);
});
es-console-wrapper{
height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<ul class='dl-menu dl-menuopen'>
<li>
<a href='#' class='catlink'>Fashion</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Men</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Shirts</a></li>
<li><a href='#' class='catlink'>Jackets</a></li>
<li><a href='#' class='catlink'>Chinos & Trousers</a></li>
<li><a href='#' class='catlink'>Jeans</a></li>
<li><a href='#' class='catlink'>T-Shirts</a></li>
<li><a href='#' class='catlink'>Underwear</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Women</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Jackets</a></li>
<li><a href='#' class='catlink'>Knits</a></li>
<li><a href='#' class='catlink'>Jeans</a></li>
<li><a href='#' class='catlink'>Dresses</a></li>
<li><a href='#' class='catlink'>Blouses</a></li>
<li><a href='#' class='catlink'>T-Shirts</a></li>
<li><a href='#' class='catlink'>Underwear</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Children</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Boys</a></li>
<li><a href='#' class='catlink'>Girls</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Electronics</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Camera & Photo</a></li>
<li><a href='#' class='catlink'>TV & Home Cinema</a></li>
<li><a href='#' class='catlink'>Phones</a></li>
<li><a href='#' class='catlink'>PC & Video Games</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Furniture</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Living Room</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Sofas & Loveseats</a></li>
<li><a href='#' class='catlink'>Coffee & Accent Tables</a></li>
<li><a href='#' class='catlink'>Chairs & Recliners</a></li>
<li><a href='#' class='catlink'>Bookshelves</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Bedroom</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Beds</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Upholstered Beds</a></li>
<li><a href='#' class='catlink'>Divans</a></li>
<li><a href='#' class='catlink'>Metal Beds</a></li>
<li><a href='#' class='catlink'>Storage Beds</a></li>
<li><a href='#' class='catlink'>Wooden Beds</a></li>
<li><a href='#' class='catlink'>Children's Beds</a></li>
</ul>
</li>
<li><a href='#' class='catlink'>Bedroom Sets</a></li>
<li><a href='#' class='catlink'>Chests & Dressers</a></li>
</ul>
</li>
<li><a href='#' class='catlink'>Home Office</a></li>
<li><a href='#' class='catlink'>Dining & Bar</a></li>
<li><a href='#' class='catlink'>Patio</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Jewelry & Watches</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Fine Jewelry</a></li>
<li><a href='#' class='catlink'>Fashion Jewelry</a></li>
<li><a href='#' class='catlink'>Watches</a></li>
<li>
<a href='#' class='catlink'>Wedding Jewelry</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Engagement Rings</a></li>
<li><a href='#' class='catlink'>Bridal Sets</a></li>
<li><a href='#' class='catlink'>Women's Wedding Bands</a></li>
<li><a href='#' class='catlink'>Men's Wedding Bands</a></li>
</ul>
</li>
</ul>
</li>
</ul>
One thing to note here - in your example, NONE of your nodes are empty. They all have children. Some have an "a" tag, and some have a "a" AND "ul" tag. Based on your example, it looks like you want to select all "li" elements that have NO "ul" tags as children. This is called a "parent selector", and cannot be done with CSS alone (unfortunately). But it can be done in javascript, and since you want an answer in javascript, this should work:
$('li:not(:has(ul))').addClass('link');
You can further refine your query as needed.
jsFiddle: https://jsfiddle.net/mspinks/68tguxza/
If you're looking only for li element without ul children then you can do this.
$('li:not(:has(ul))')

jQuery click function not binding to dynamic changed class

So using javaScript i set my last navigation link the class of 'contact'
$('#menu-main-menu li').last().addClass('contact');
Now i want to do a click function for this so i have tried:
$(document).on('click', '.contact', function(){
$('.contact-wrapper').show();
console.log('here');
});
Now this does not work and i do not see anything in the console.
Am i doing anything wrong here?
I have also tried to just do a simple
$('').click(function(){});
EDIT
<ul id="menu-main-menu" class="nav navbar-nav"><li class=" active"><a title="Home" href="http://jackmoodygroup/home/">Home</a></li>
<li><a title="About" href="http://jackmoodygroup/about/">About</a></li>
<li class=" dropdown"><a title="Landscaping" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Landscaping <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li><a title="Soft Landscaping & Fencing" href="http://jackmoodygroup/landscaping/soft-landscaping/">Soft Landscaping & Fencing</a></li>
<li><a title="Hard Landscaping & Fencing" href="http://jackmoodygroup/landscaping/hard-landscaping/">Hard Landscaping & Fencing</a></li>
<li><a title="Developer Landscaping Services" href="http://jackmoodygroup/landscaping/developer-landscaping-services/">Developer Landscaping Services</a></li>
<li><a title="Maintenance" href="http://jackmoodygroup/landscaping/maintenance/">Maintenance</a></li>
<li><a title="Domestic Landscaping Services" href="http://jackmoodygroup/landscaping/domestic-landscaping-services/">Domestic Landscaping Services</a></li>
<li><a title="Building & Development Services" href="http://jackmoodygroup/landscaping/building-development-services/">Building & Development Services</a></li>
<li><a title="Sports & Recreation" href="http://jackmoodygroup/landscaping/sports-recreation/">Sports & Recreation</a></li>
<li><a title="Plant Hire" href="http://jackmoodygroup/landscaping/plant-hire/">Plant Hire</a></li>
<li><a title="JMix Products" href="http://jackmoodygroup/landscaping/jmix-products/">JMix Products</a></li>
<li><a title="Nursery & Trade Services" href="http://jackmoodygroup/landscaping/nursery-trade-services/">Nursery & Trade Services</a></li>
</ul>
</li>
<li class=" dropdown"><a title="Recycling" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Recycling <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li><a title="Renewables" href="http://jackmoodygroup/recycling/renewables/">Renewables</a></li>
<li><a title="In-Vessel Composting" href="http://jackmoodygroup/recycling/in-vessel-composting/">In-Vessel Composting</a></li>
<li><a title="Consultancy" href="http://jackmoodygroup/recycling/consultancy/">Consultancy</a></li>
<li><a title="Research and Development" href="http://jackmoodygroup/recycling/research-and-development/">Research and Development</a></li>
<li><a title="Anaerobic Digestion" href="http://jackmoodygroup/recycling/anaerobic-digestion/">Anaerobic Digestion</a></li>
<li><a title="Food Waste Dryers" href="http://jackmoodygroup/recycling/food-waste-dryers/">Food Waste Dryers</a></li>
<li><a title="Envirofuels" href="http://jackmoodygroup/recycling/envirofuels/">Envirofuels</a></li>
<li><a title="Inert Recycling" href="http://jackmoodygroup/recycling/inert-recycling/">Inert Recycling</a></li>
<li><a title="Green Recycling" href="http://jackmoodygroup/recycling/green-recycling/">Green Recycling</a></li>
</ul>
</li>
<li><a title="Projects" href="http://jackmoodygroup/projects/">Projects</a></li>
<li><a title="Retail" href="http://jackmoodygroup/retail-2/">Retail</a></li>
<li><a title="Vacancies" href="http://jackmoodygroup/vacancies/">Vacancies</a></li>
<li class="contact"><a title="Contact" href="#contact-us">Contact</a></li>
</ul>
(function($) {
$('#menu-main-menu li').last().addClass('contact');
$(document).on('click', 'contact', function(){
$('.contact-wrapper').show();
console.log('here');
} );
$('.overlay').click(function(){
$('.contact-wrapper').hide();
});
})( jQuery );
Where's .content-wrapper and .overlay?
(function($) {
$('#menu-main-menu li').last().addClass('contact');
$(document).on('click', 'contact', function() {
$('.contact-wrapper').show();
console.log('here');
});
$('.overlay').click(function() {
$('.contact-wrapper').hide();
});
})(jQuery);
<ul id="menu-main-menu" class="nav navbar-nav">
<li class=" active"><a title="Home" href="http://jackmoodygroup/home/">Home</a>
</li>
<li><a title="About" href="http://jackmoodygroup/about/">About</a>
</li>
<li class=" dropdown"><a title="Landscaping" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Landscaping <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li><a title="Soft Landscaping & Fencing" href="http://jackmoodygroup/landscaping/soft-landscaping/">Soft Landscaping & Fencing</a>
</li>
<li><a title="Hard Landscaping & Fencing" href="http://jackmoodygroup/landscaping/hard-landscaping/">Hard Landscaping & Fencing</a>
</li>
<li><a title="Developer Landscaping Services" href="http://jackmoodygroup/landscaping/developer-landscaping-services/">Developer Landscaping Services</a>
</li>
<li><a title="Maintenance" href="http://jackmoodygroup/landscaping/maintenance/">Maintenance</a>
</li>
<li><a title="Domestic Landscaping Services" href="http://jackmoodygroup/landscaping/domestic-landscaping-services/">Domestic Landscaping Services</a>
</li>
<li><a title="Building & Development Services" href="http://jackmoodygroup/landscaping/building-development-services/">Building & Development Services</a>
</li>
<li><a title="Sports & Recreation" href="http://jackmoodygroup/landscaping/sports-recreation/">Sports & Recreation</a>
</li>
<li><a title="Plant Hire" href="http://jackmoodygroup/landscaping/plant-hire/">Plant Hire</a>
</li>
<li><a title="JMix Products" href="http://jackmoodygroup/landscaping/jmix-products/">JMix Products</a>
</li>
<li><a title="Nursery & Trade Services" href="http://jackmoodygroup/landscaping/nursery-trade-services/">Nursery & Trade Services</a>
</li>
</ul>
</li>
<li class=" dropdown"><a title="Recycling" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Recycling <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li><a title="Renewables" href="http://jackmoodygroup/recycling/renewables/">Renewables</a>
</li>
<li><a title="In-Vessel Composting" href="http://jackmoodygroup/recycling/in-vessel-composting/">In-Vessel Composting</a>
</li>
<li><a title="Consultancy" href="http://jackmoodygroup/recycling/consultancy/">Consultancy</a>
</li>
<li><a title="Research and Development" href="http://jackmoodygroup/recycling/research-and-development/">Research and Development</a>
</li>
<li><a title="Anaerobic Digestion" href="http://jackmoodygroup/recycling/anaerobic-digestion/">Anaerobic Digestion</a>
</li>
<li><a title="Food Waste Dryers" href="http://jackmoodygroup/recycling/food-waste-dryers/">Food Waste Dryers</a>
</li>
<li><a title="Envirofuels" href="http://jackmoodygroup/recycling/envirofuels/">Envirofuels</a>
</li>
<li><a title="Inert Recycling" href="http://jackmoodygroup/recycling/inert-recycling/">Inert Recycling</a>
</li>
<li><a title="Green Recycling" href="http://jackmoodygroup/recycling/green-recycling/">Green Recycling</a>
</li>
</ul>
</li>
<li><a title="Projects" href="http://jackmoodygroup/projects/">Projects</a>
</li>
<li><a title="Retail" href="http://jackmoodygroup/retail-2/">Retail</a>
</li>
<li><a title="Vacancies" href="http://jackmoodygroup/vacancies/">Vacancies</a>
</li>
<li class="contact"><a title="Contact" href="#contact-us">Contact</a>
</li>
</ul>
please use $(document).find to bind click event of dynamically appended class
please update your js code as below
(function($) {
$('#menu-main-menu li').last().addClass('contact');
$(document).find('.contact').click( function(){
$('.contact-wrapper').show();
console.log('here');
} );
$('.overlay').click(function(){
$('.contact-wrapper').hide();
});
})( jQuery );
refer working fiddle at here
Use code like this, add jquery file & start with document ready function
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-main-menu" class="nav navbar-nav"><li class=" active"><a title="Home" href="http://jackmoodygroup/home/">Home</a></li>
<li><a title="About" href="http://jackmoodygroup/about/">About</a></li>
<li class=" dropdown"><a title="Landscaping" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Landscaping <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li><a title="Soft Landscaping & Fencing" href="http://jackmoodygroup/landscaping/soft-landscaping/">Soft Landscaping & Fencing</a></li>
<li><a title="Hard Landscaping & Fencing" href="http://jackmoodygroup/landscaping/hard-landscaping/">Hard Landscaping & Fencing</a></li>
<li><a title="Developer Landscaping Services" href="http://jackmoodygroup/landscaping/developer-landscaping-services/">Developer Landscaping Services</a></li>
<li><a title="Maintenance" href="http://jackmoodygroup/landscaping/maintenance/">Maintenance</a></li>
<li><a title="Domestic Landscaping Services" href="http://jackmoodygroup/landscaping/domestic-landscaping-services/">Domestic Landscaping Services</a></li>
<li><a title="Building & Development Services" href="http://jackmoodygroup/landscaping/building-development-services/">Building & Development Services</a></li>
<li><a title="Sports & Recreation" href="http://jackmoodygroup/landscaping/sports-recreation/">Sports & Recreation</a></li>
<li><a title="Plant Hire" href="http://jackmoodygroup/landscaping/plant-hire/">Plant Hire</a></li>
<li><a title="JMix Products" href="http://jackmoodygroup/landscaping/jmix-products/">JMix Products</a></li>
<li><a title="Nursery & Trade Services" href="http://jackmoodygroup/landscaping/nursery-trade-services/">Nursery & Trade Services</a></li>
</ul>
</li>
<li class=" dropdown"><a title="Recycling" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Recycling <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li><a title="Renewables" href="http://jackmoodygroup/recycling/renewables/">Renewables</a></li>
<li><a title="In-Vessel Composting" href="http://jackmoodygroup/recycling/in-vessel-composting/">In-Vessel Composting</a></li>
<li><a title="Consultancy" href="http://jackmoodygroup/recycling/consultancy/">Consultancy</a></li>
<li><a title="Research and Development" href="http://jackmoodygroup/recycling/research-and-development/">Research and Development</a></li>
<li><a title="Anaerobic Digestion" href="http://jackmoodygroup/recycling/anaerobic-digestion/">Anaerobic Digestion</a></li>
<li><a title="Food Waste Dryers" href="http://jackmoodygroup/recycling/food-waste-dryers/">Food Waste Dryers</a></li>
<li><a title="Envirofuels" href="http://jackmoodygroup/recycling/envirofuels/">Envirofuels</a></li>
<li><a title="Inert Recycling" href="http://jackmoodygroup/recycling/inert-recycling/">Inert Recycling</a></li>
<li><a title="Green Recycling" href="http://jackmoodygroup/recycling/green-recycling/">Green Recycling</a></li>
</ul>
</li>
<li><a title="Projects" href="http://jackmoodygroup/projects/">Projects</a></li>
<li><a title="Retail" href="http://jackmoodygroup/retail-2/">Retail</a></li>
<li><a title="Vacancies" href="http://jackmoodygroup/vacancies/">Vacancies</a></li>
<li class="contact"><a title="Contact" href="#contact-us">Contact</a></li>
</ul>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#menu-main-menu li').last().addClass('contact');
jQuery(document.body).on('click', 'li.contact', function(){
jQuery('.contact-wrapper').show();
console.log('here');
} );
jQuery('.overlay').click(function(){
jQuery('.contact-wrapper').hide();
});
});
</script>

Bootstrap Inline List with Dropdown

I'm using Bootstrap 3 with the list-inline class (I know I could use the default, but I don't want any of the default styling)
<nav class='main-nav'>
<ul class="list-inline">
<li><a href='#'>Test</a></li>
<li>
Test
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
http://jsfiddle.net/9kVCZ/
But the dropdown doesn't appear under, it appears way at the bottom.
You need to add the class dropdown to your nav element.
<nav class='main-nav dropdown'>
<ul class="list-inline">
<li><a href='#'>Test</a></li>
<li>
Test
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
Working Fiddle
If the goal of your code is to show the dropdown menu just by clicking on the second "Test", you should add the class dropdown to its parent <li>
<nav class='main-nav'>
<ul class="list-inline">
<li><a href='#'>Test1</a></li>
<li class="dropdown">
Test2
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
Updated fiddle

Getting checkbox values with getElementsByClassName for Mapbox

I'm working on something similar to that : http://www.mapbox.com/mapbox.js/example/v1.0.0/filtering-markers/
But with multiple "checkbox" like this
<ul>
<li><a href='#' class='filter' id='douze' value='2008'>2008</a></li>
<li><a href='#' class='filter' id='douze' value='2009'>2009</a></li>
<li><a href='#' class='filter' id='douze' value='2010'>2010</a></li>
<li><a href='#' class='filter' id='douze' value='2011'>2011</a></li>
<li><a href='#' class='filter' id='douze' value='2012'>2012</a></li>
<li><a href='#' class='active' id='filter-all'>Toutes les années</a></li>
</ul>
I'm tyring to get the value linked to "checkbox" but it doesn't work.
var douze = "";
var inputElements = document.getElementsByClassName('filter');
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].className==="filter" && inputElements[i].checked){
douze = inputElements[i].value;
//console.warn(douze)
break;
}
}
It's trying to running here : http://temp.sharesand.info/prison/index5.html#
I'm trying to do it on plain JS, but i saw many versions with jquery.
here is the required
<ul>
<li><a href='#' class='filter' id='douze' onclick="abc(this);" name='2008'>2008</a></li>
<li><a href='#' class='filter' id='douze' onclick="abc(this);" name='2009'>2009</a></li>
<li><a href='#' class='filter' id='douze' onclick="abc(this);" name='2010'>2010</a></li>
<li><a href='#' class='filter' id='douze' onclick="abc(this);" name='2011'>2011</a></li>
<li><a href='#' class='filter' id='douze' onclick="abc(this);" name='2012'>2012</a></li>
<li><a href='#' class='active' id='filter-all'>Toutes les années</a></li>
</ul>
and use this in js file
function abc(me)
{
alert(me.name);
}
Akash Sarawagi did gratefuly the first part and the rest of the code has been changed a little bit.
div id='map-ui'>
<ul>
<li><a href='#' class='filter' id='douze' onclick="selectyear(this);" name='2008'>2008</a></li>
<li><a href='#' class='filter' id='douze' onclick="selectyear(this);" name='2009'>2009</a></li>
<li><a href='#' class='filter' id='douze' onclick="selectyear(this);" name='2010'>2010</a></li>
<li><a href='#' class='filter' id='douze' onclick="selectyear(this);" name='2011'>2011</a></li>
<li><a href='#' class='filter' id='douze' onclick="selectyear(this);" name='2012'>2012</a></li>
<li><a href='#' class='filter' id='douze' onclick="selectyear(this);" name='2013'>2013</a></li>
<li>Toutes les années</li>
</ul>
</div>
<div id='map'></div>
<div id='info'></div>
<script type='text/javascript'>
//loading background
var map = L.mapbox.map('map', 'n3b.map-xb4fp4td', { zoomControl: false })
.setView([47.145894, 2.581787], 6);
//loading markers
var markerLayer = L.mapbox.markerLayer()
.loadURL('http://temp.sharesand.info/prison/mortsPrisons.geojson')
.addTo(map);
//filter per year
var year = "all";
function selectyear(me)
{
var year = me.name;
document.querySelector('#map-ui a.active').classList.remove('active');
me.classList.add('active');
markerLayer.setFilter(function(f) {
if (year == "all") return true;
return (f.properties['DateTime'].indexOf(year) != -1);
});
};
Thanks to all for your help.

My own accordion javascript does not work.

<div id="wrapDesktopNavBar">
<ul class="desktopNavBar" id="accordion">
<li>
<form class="search">
<input type="text" placeholder="Search here" required>
</form>
</li>
<li><a class="firstLevel" href="#home" onclick="callthis()">Main Category 1</a></li>
<li><a class="firstLevel" href="#">Main category 2</a>
<ul>
<li><a class="secondLevel" href="#">Sub Category 1</a>
<li><a class="secondLevel" href="#">Sub Category 2</a>
<li><a class="secondLevel" href="#">Sub Category 3</a>
<li><a class="secondLevel" href="#">Sub Category 4</a>
<li><a class="secondLevel" href="#">Sub Category 5</a>
<li><a class="secondLevel" href="#">Sub Category 6</a>
</ul></li>
<li><a class="firstLevel" href="#">Main Category 3</a></li>
<li><a class="firstLevel" href="#">Main category 4</a>
<ul>...
This is my html and my javascript to get the sub categories to slide up:
$("#accordion > li").on('click', function () {
if (false == $(this).next('ul').is(':visible')) {
$('#accordion > ul').slideUp(300);
}
$(this).next('ul').slideToggle(300);
});
but when i clicked the main category, the sub categories won't come out. it's supposed to slide out nicely like the jquery ui accordion. Please help. I'm not very sure why the sub categories are not showing.
FIDDLE
$('.firstLevel').click(function () {
$(this).next().toggle(300);
});

Categories

Resources