Trigger alert on clicking of second li - javascript

I am trying to show alert upon clicking of second li in navigation bar under element homenav. You can checkout the complete code on codepen
var linkButton = document.getElementById('#homenav li:nth-child(2) a');
if(linkButton) {
linkButton.addEventListener('click', function() {
alert('Test');
});
}
HTML
<div id="homenav">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"></ul>
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Table Ranking
</li>
<li>
Blog
</li>
</ul>
</div>
</div>
</div>
</div>

Document#getElementById takes the ID of the element to locate.
If you want to use a selector, try Document#querySelector:
const linkButton = document.querySelector('#homenav li:nth-child(2) a');
if(linkButton) {
linkButton.addEventListener('click', function() {
alert('Test');
});
}
<div id="homenav">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"></ul>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Table Ranking</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
</div>

Related

Dropdown inside dropdown

I have a navbar with a main dropdown li tag called A, then when I display the dropdown it shows A-1 and A-2 options, A-2 it's another dropdown with other options, I tried copying the same code like if was a main dropdown but doesn't works properly, I have the code right here
However below is the code.
$(document).ready(function () {
console.log("Hi...");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top" id="Nav">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">APBPV</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
A <span class="caret"></span>
<ul class="dropdown-menu">
<li>A-1</li>
<li class="dropdown">A-2<b class="caret"></b>
<ul class="dropdown-menu">
<li>A-2-1</li>
<li>A-2-2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
You will need some javascript for this to work:
$(document).ready(function(){
$('a.dropdown-toggle').on("click", function(e){
$(this).closest('li').toggleClass('open');
e.stopPropagation();
e.preventDefault();
});
});
Here is the explanation regarding the above code:
Once you click on an anchor that has the dropdown-toggle class (which mean - it's an anchor that should open the next drop-down menu) - set the class open on the above li element (which tells the next-menu to open) and prevent the default behavior of the current element.
$(document).ready(function(){
$('a.dropdown-toggle').on("click", function(e){
$(this).closest('li').toggleClass('open');
e.stopPropagation();
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top" id="Nav">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">APBPV</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
A <span class="caret"></span>
<ul class="dropdown-menu">
<li>A-1</li>
<li class="dropdown">A-2<b class="caret"></b>
<ul class="dropdown-menu">
<li>A-2-1</li>
<li>A-2-2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

jquery fadein on buttonclick

I'm making a Bootstrap site and I want jQuery to fade in my text on a button click. This is my code:
$(document).ready(function() {
$('div.hidden').fadeIn(1000).removeClass('hidden');
});
$(#homebutton).onclick(function() {
$('#homebutton.hidden').fadein(1000).removeClass('hidden');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">J&J Services</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Information</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<section class=" section0 homecontent col-md-12">
<div class="container-fluid">
<div class="hidden" style="display:none;">
<h1>welcome to J&J services.
<hr>
<button id="homebutton" class="btn btn-success btn-large">
click here to learn about us today.
</h1>
</div>
</div>
</section>
<section class="section1 information ">
<div class="container-fluid hidden"></div>
</section>
</div>
</section>
I'm new to jQuery and I don't know what I did wrong. Thanks in advance,
With revised HTML and jquery targets:
$(document).ready(function() {
$('.section0 .hidden').fadeIn(1000).removeClass('hidden');
});
$('#homebutton').on('click', function() {
$('.section1 .hidden').fadeIn(1000).removeClass('hidden');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">J&J Services</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Information
</li>
<li>Services
</li>
<li>Pricing
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<section class="section0 homecontent col-md-12">
<div class="container-fluid">
<div class="hidden" style="display:none;">
<h1>welcome to J&J services.
<hr>
<button id="homebutton" class="btn btn-success btn-large">
click here to learn about us today.
</button>
</h1>
</div>
</div>
</section>
<section class="section1 information ">
<div class="container-fluid hidden" style="display:none;">Information</div>
</section>
</section>
I think you wanna fade in section1 text when u click the button, update like this:
$('#homebutton').on('click', function() {
$('.container-fluid').fadeIn(1000).removeClass('hidden');
});

how to use JS function to change class of list dynamically

I want to change the class of list item dynamically according to user's click on it. I have a menu and I want to assign .active class to only that menu which is clicked by user and initially Home Menu must be active
Here is my code
function activeclass(id)
{
document.getElementById(id).className += "active";
}
<section id="menu-area">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<!-- TEXT BASED LOGO <a class="navbar-brand" href="index.html">Inventive</a> -->
<!-- IMG BASED LOGO -->
<a class="navbar-brand" href="index.html"><img class="img-responsive" src="assets/images/logo.png" alt="logo" width="200"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
#yield('logo')
<li id="home">Home</li>
<li id="aboutus">About Us</li>
<li id="products">Products</li>
<li id="gallery"><a href="{{ URL::route('gallery') }}" onclick="activeclass(id)" >Gallery</a></li>
<li id="contactus">Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</section>
in CSS file active class with li will be used to highlight the selected page menu
Although there are better ways to achieve the thing you want (like the #Jitendra Tiwari's answer or my example below), I want to point you to the problem in your code.
The problem is that you pass to the function activeclass an unknown parameter: id.
When you debug your code you can see that the id param is empty:
You need to pass a string parameter with the relevant id:
function activeclass(id) {
document.getElementById(id).className += "active";
}
.active {
background:red;
}
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<!-- TEXT BASED LOGO
<a class="navbar-brand" href="index.html">Inventive</a> -->
<!-- IMG BASED LOGO -->
<a class="navbar-brand" href="index.html"><img class="img-responsive" src="assets/images/logo.png" alt="logo" width="200"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
#yield('logo')
<li id="home">Home</li>
<li id="aboutus">About Us</li>
<li id="products">Products</li>
<li id="gallery"><a href="#" onclick="activeclass('gallery')" >Gallery</a></li>
<li id="contactus">Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
http://jsbin.com/dadoqop/edit?html,css,js
Also, remove the public keyword from your code. It's not in javascript
A working example without jQuery:
[].forEach.call(document.querySelectorAll('#top-menu a'), function(elm) {
elm.addEventListener('click', function() {
var active = document.querySelector('.active');
if (active) {
active.classList.remove('active');
}
elm.parentNode.classList.add('active');
});
});
.active {
background:red;
}
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<!-- TEXT BASED LOGO
<a class="navbar-brand" href="index.html">Inventive</a> -->
<!-- IMG BASED LOGO -->
<a class="navbar-brand" href="index.html"><img class="img-responsive" src="assets/images/logo.png" alt="logo" width="200"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
#yield('logo')
<li id="home">Home</li>
<li id="aboutus">About Us</li>
<li id="products">Products</li>
<li id="gallery">Gallery</li>
<li id="contactus">Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
You need to remove active class from other li and add on currently clicked item.
Try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('li').click(function(){
// Step 1 - remove active class from all `li`
$('li').removeClass('active');
// Step 2 - add active class on currently clicked li
$(this).addClass('active');
});
});
</script>
Don't forgot to include jquery library.
Using Javascript, you can use the below code:
var ul = document.getElementById("top-menu");
var li = ul.getElementsByTagName("li");
//Set the Home menu as active for first time
li[0].classList.add("active");
//add click event listener for each menu item, and add class active on current clicked menu item.
for(var i=0; i<li.length; i++){
li[i].addEventListener("click", function(){
removeActiveClass();
this.classList.add("active");
});
}
//Remove the active class from the menu items
function removeActiveClass() {
for(var i=0; i<li.length; i++){
li[i].classList.remove("active");
}
}
I have not used any jQuery. Hope this helps you. You do not need to add click event on HTML. Just the below HTML is enough:
<ul id="top-menu">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
Try this method.
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
#yield('logo')
<li id="home">Home</li>
<li id="aboutus">About Us</li>
<li id="products">Products</li>
<li id="gallery"><a href="{{ URL::route('gallery') }}" class="{{ \Request::route()->getName() == 'gallery' ? 'active' : '' }}" >Gallery</a></li>
<li id="contactus">Contact</li>
</ul>

bootstrap menu not hiding after click the button?

This is the website here
When we view it minimized mode, the menu toggles ON after clicking the button, but when we click the button gain, it does not toggle off?
How to make this work ?
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Click<span>Desti</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main_nav">
<li><b>Show Categories</b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</li>
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Team</li>
<li>Blog</li>
<li>Contacts</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

Bootstrap 3 scroll spy

Hi I'm trying to get scroll spy working in my navigation but it's not
Here's a link to my site: http://www.saracook.coffeecup.com
Here's how I implemented it:
<body class="body" data-spy="scroll" data-target=".navbar-collapse collapse">
<div class="main">
<!--HOMEPAGE-->
<section id="home_page">
<div class="home_page">
<!--NAVBAR-->
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Seems scrollspy works good, but there is some trouble with prettyPhoto() plugin. Maybe you forget to include javascript for this plugin on the page.

Categories