I have been trying to crack this one out, whenever I click the link in the << li >> tag, it responds nothing.
<div id="navbar" class="navbar-collapse navbar-right collapse">
<ul class="nav navbar-nav navbar-right cross-effect" id="cross-effect">
<li><a class="cross-effect" href="#features">ES Values</a></li>
<li><a class="cross-effect" href="#about">About ES</a></li>
<li><a class="cross-effect" href="#testimonial">ES Testimonials</a></li>
<li><a class="cross-effect" href="#stats">ES Stats</a></li>
<li><a class="cross-effect" href="http://www.google.com">ES Gallery</a></li>
<li><a class="cross-effect" href="/groups.html" target="_self">ES Groups</a></li>
<li><a class="cross-effect" href="/updates.html" target="_self">ES Updates</a></li>
<li><a class="cross-effect" href="/contact.html" target="_self">Contact ES</a></li>
</ul>
please help me out. it's from the cubicle template from w3layouts
I figured out that the problem is because those that you are clicking, they do not lead to this section page that you divided by id, the lead to another page, and this animation that you added for smooth scroll, is firing even on those links that lead to another page, so add a class to those lists that have id, for example, give class test and change your code to this:
jQuery(document).ready(function($) {
$(".scroll, .navbar li.test a, .footer li a").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
<ul class="nav navbar-nav navbar-right cross-effect" id="cross-effect">
<li class="test"><a class="cross-effect" href="#features">ES Values</a></li>
<li class="test"><a class="cross-effect" href="#about">About ES</a></li>
<li class="test"><a class="cross-effect" href="#testimonial">ES Testimonials</a></li>
<li class="test"><a class="cross-effect" href="#stats">ES Stats</a></li>
<li><a class="cross-effect" href="http://www.google.com">ES Gallery</a></li>
<li><a class="cross-effect" href="/groups.html" target="_self">ES Groups</a></li>
<li><a class="cross-effect" href="/updates.html" target="_self">ES Updates</a></li>
<li><a class="cross-effect" href="contact.html" target="_blank" style="
pointer-events: all;
">Contact ES</a></li>
</ul>
Related
I'm trying to keep dropdown menu opened when I click on the second selector by using
$event.stopPropagation()
but it's not working as expected.
<ul class="dropdown-menu">
<li class="dropdown-header"><b>Example</b></li>
<li><a>Example 1</a></li>
<li><a onclick="$event.stopPropagation()">Example 2</a></li>
<li><a>Example 3</a></li>
<li><a>Example 4</a></li>
<li><a >Example 5</a></li>
</ul>
Please suggest is there any other way to handle this using CSS -keeping ''open' class active on click..
Try this hope it helps,thanks
$('.dropdown-menu').click(function(e){
console.log('List has been clicked')
})
$(".link").click(function(event){
event.stopPropagation();
});
.link
{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="dropdown-menu">
<li class="dropdown-header"><b>Example</b></li>
<li><a>Example 1</a></li>
<li><a class="link">Example 2</a></li>
<li><a>Example 3</a></li>
<li><a>Example 4</a></li>
<li><a >Example 5</a></li>
</ul>
If I have this html code:
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
As you see there are two <li> elements with the inactive class.
I tried to do this and I have
$("#tabs").children();
But how can I search the specific <li> without class inactive?
Thanks for any help
$('#tabs li a').not('.inactive').css('color','red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
</ul>
Use method .not()
Description: Remove elements from the set of matched elements.
Use :not() and :has() pseudo-class selectors.
$("#tabs").children(':has(>:not(.inactive))');
// or with a single selector
$("#tabs > :has(>:not(.inactive))");
console.log($("#tabs").children(':has(>:not(.inactive))').length);
// or with a single selector
console.log($("#tabs > :has(>:not(.inactive))").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
UPDATE 1 : Or without using jQuery :has() instead using parent() method.
$("#tabs > li > :not(.inactive)").parent()
console.log($("#tabs>li>:not(.inactive)").parent().length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
UPDATE 2 : If you just want to select the a tag then :not() is enough to get it with a single selector string.
$("#tabs > li > :not(.inactive)")
$("#tabs>li>:not(.inactive)").css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
You can use .not() function
$("#tabs").find('a').not('.inactive');
You can use following code
$('ul#list li:not([class])')
in your case [class] will be inactive
By using javascript we can complete this way:-
var liWithoutHtml = document.getElementById('tabs').querySelector("li>a:not(.completed):not(.selected)");
alert(liWithoutHtml.innerHTML)
Jsfiddle link
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>
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
<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);
});