Bootstrap nav pills - 'active' class doesn't work in opened modal - javascript

I have following code for nav-pills component:
<ul id="steps" class="nav nav-pills form-steps">
<li class="active"><a data-toggle="pill" href="#options"></a></li>
<li><a data-toggle="pill" href="#payments"></a></li>
</ul>
This is how the look of active a is made (basically it's just a circle filled with special color):
.form-steps > li.active > a {
background-color: #931f2a;
}
And here's code for a regular a:
.promoter-form-steps > li > a {
border: 2px solid #931f2at;
height: 30px;
width: 30px;
border-radius: 100%;
}
I suppose that by adding .active class to corresponding li element makes a element filled with color, but it doesn't when I open modal where this component is placed for the fist time. When I open modal for the second time after I click on another link, I see correct behavior, i.e .active class is filled with color. It's an SPA and I have another nav-pills like this with exact markup and it works just fine and I don't quite understand why this behavior doesn't work on second nav-pills. I double checked that class names and ids don't repeat each others and I am sure that no custom js was involved into this.
Can you please give me a direction to inspect what I did wrong? Thanks in advance!

Here's the recommended format as determined by Twitter Docs:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Your list tags need to have a class of nav-item and your anchors need a class of nav-link before it can use the active class

Related

how can I add javascript or Jquery to my navbar

I am trying to add js to my navbar, I want to make it like if I click another button, the class of that button become 'active', and the others become normal one
<ul>
<li><a class="nav-link active" href="">Home</a></li>
<li><a class="nav-link" href="">Semester</a></li>
<li><a class="nav-link" href="">Course</a></li>
<li><a class="nav-link" href="">Class</a></li>
<li><a class="nav-link" href="">Lecturer</a></li>
<li><a class="nav-link" href="">Student</a></li>
<li><a class="nav-link" href="">Student Attendance</a></li>
$(document).ready(function() {
$(".nav-link").click(function () {
$(".nav-link").removeClass("active");
$(this).addClass("active");
});
});
do this and move the .nav-link class to li tag
$(document).ready(function() {
$(".nav-link").click(function () {
$(this).addClass("active").siblings().removeClass('active');
});
});
This an effective way to create visual and operational navigation bars on web pages. The code adds the active class to li that was clicked and remove from every other li within its parent ul

How to manage more effectively html button click events?

It looks ridiculous to do so many tasks on a button click while every button should have its own events:
function allStories() {
$('#zero-md').hide();
$('.container-aboutme').hide();
$('.container-allstories').show();
$('.container-allstories').load("pages/allstories.html");
$("#home").removeClass("nav-link active").addClass("nav-link");
$("#aboutme").removeClass("nav-link active").addClass("nav-link");
$("#allposts").removeClass("nav-link").addClass("nav-link active");
}
function aboutMe() {
$('#zero-md').hide();
$('.container-allstories').hide();
$('.container-aboutme').show();
$('.container-aboutme').load("pages/about.html");
$("#home").removeClass("nav-link active").addClass("nav-link");
$("#allposts").removeClass("nav-link active").addClass("nav-link");
$("#aboutme").removeClass("nav-link").addClass("nav-link active");
}
<li class="nav-item">
<a class="nav-link" id="allposts" onclick="allStories()" href="#">All posts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="aboutme" onclick="aboutMe()" href="#">About me</a>
</li>
Is there is a better, more effective way to organize such events with less code?
You mean this
$("#nav").on("click",".nav-link",function(e) {
e.preventDefault(); // stop the link
const id = this.id;
const $thisContainer = $('.container'+id);
$('#zero-md').hide();
$('.container').hide(); // hide all containers
$thisContainer.load("pages/"+id+".html",function() { // perhaps not load if already loaded
$thisContainer.fadeIn("slow");
}) ;
$(".nav-link").removeClass("active")
$(this).addClass("active")
})
<ul id="nav">
<li class="nav-item">
<a class="nav-link" id="allposts" href="#">All posts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="about" href="#">About me</a>
</li>
</ul>
Yes. Try to keep your code DRY (don't repeat yourself.)
Add an event listener in your JS.
Use e.target to determine what was clicked.
Chain your commands together when they're operating on the same elements.
Don't remove a class and then add the same class back. Just remove the one you want to get rid of.
I've added some stand in elements since not everything was present in your HTML.
$('.nav-link').click( (e)=>{
let theLink = $(e.target).attr('id');
const container = '.container-'+$(theLink).attr('id');
$('#zero-md').hide();
$('.container').hide();
$(container).show().load("pages/"+theLink+".html");
alert('loading: pages/'+theLink+'.html');
$("#home").removeClass("nav-link active").addClass("nav-link");
$(".nav-link").removeClass("active");
$("#"+theLink).addClass("active");
});
.active {
font-size: 1.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="nav-item">
<a class="nav-link" id="allstories" href="#">All posts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="aboutme" href="#">About me</a>
</li>
<div class="container container-allstories">All Stories</div>
<div class="container container-aboutme">About Me</div>
<div id="zero-md">Zero MD</div>

Can't reduce font-size in navbar when scrolling

I've managed to put together some code that will allow my navbar to shrink when the user scrolls, however I also want the nav links to reduce in font-size but I seem to be missing something, nothing happens no matter how I write my code.
Since I don't want to target each link text individually I've tried to set a class and target the class using getElementsByClassName and using style.fontsize. I also tried to create a CSS class and applying it when scrolling.
Here's my js code:
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("navbarTop").style.padding = "10px 0px";
document.getElementById("logo").style.width = "40%";
document.getElementsByClassName("nav-link .topItem").addClass('scrollFontSize');
} else {
document.getElementById("navbarTop").style.padding = "40px 10px";
document.getElementById("logo").style.width = "50%";
}
}
Here's the HTML:
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item ml-auto active">
<a class="nav-link topItem" href="#">HEM<span class="sr-only"> (Aktiv)</span></a>
</li>
<li class="nav-item ml-auto">
<a class="nav-link topItem" href="#">BLOGG</a>
</li>
<li class="nav-item ml-auto">
<a class="nav-link topItem" href="#">RESURSER</a>
</li>
<li class="nav-item ml-auto">
<a class="nav-link topItem" href="#">KONTAKT</a>
</li>
</ul>
</div>
And CSS:
.scrollFontSize {
font-size: 12px;
}
It looks like you are mixing jQuery syntax with pure JavaScript.
Try to replace the line where you set the scrollFontSize class with this:
document.querySelectorAll("a.nav-link, a.topItem").forEach(function(childElement){
childElement.classList.add('scrollFontSize');
});
A better solution will be to use jQuery.
Finally I stumbled over a solution to my problem. There's a Codepen link to a possible solution in the second post in this thread:
https://css-tricks.com/forums/topic/change-font-size-while-scrolling/

Navbar active class resets on page load

Using bootstrap 4 and asp.net core for a personal project I've been tinkering with for the past couple of months. I've got a navbar in my _Layout that is shared across my entire site. I've also got some css that styles the navbar link text.
I'm trying to change the active class on the links so the currently-visited controller is highlighted with a different color. I'm using js to do this. The color is changing initially, so I'm sure that the js is adding the active class to the new link and removing it from the previous active link, but when the page finishes loading, they reset and the active class goes back to Home.
Here is my navbar in _Layout.cshtml:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<img src="~/images/logo1.png" width="40" height="40" alt="" />
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="nav navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" asp-action="Index" asp-controller="Home">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="Index" asp-controller="aaaa">Aaaa</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="Index" asp-controller="bbbb">Bbbb</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="Index" asp-controller="cccc">Cccc</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="Index" asp-controller="dddd">Dddd</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<button class="btn btn-outline-danger btn-sm"
type="submit" asp-action="Login" asp-controller="Account">
Login
</button>
</form>
</div>
Here is the js that I'm declaring in the #scripts section of _Layout:
$( '.navbar-inverse .navbar-nav a' ).on( 'click', function () {
$( '.navbar-inverse .navbar-nav' ).find( 'li.active' ).removeClass( 'active' );
$( this ).parent( 'li' ).addClass( 'active' );
});
And my css:
.navbar-inverse .navbar-nav .open > .nav-link,
.navbar-inverse .navbar-nav .active > .nav-link,
.navbar-inverse .navbar-nav .nav-link.open,
.navbar-inverse .navbar-nav .nav-link.active {
color: yellow;
}
Why is the active link being reset when the new page loads? I know the js is working because while the page is loading, "Home" is not yellow anymore, but the new link I clicked in the navbar is yellow. But when the loading is complete, the yellow goes back to Home. Any insights would be appreciated, I'm rather new at software development.
You're setting active on click. However, when the browser actually goes to that URL following the click, a completely different view is rendered. Therefore, there's no concept of anything having been set a certain way or done previously.
Instead, you need to either have your JS run onload, or simply just send the HTML with the correct item active in the first place, and throw away the JS. The easiest way to do that is something like:
#{ string url; }
Then for each nav link:
#{ url = Url.Action("Foo", "Bar"); }
<li class="#(Request.Path.StartsWith(url) ? "active" : null)">
Foo
</li>
Setting the url variable is mostly just a way to not repeat yourself with the action/controller for the link, since you need the link URL in two different places.
The meat is in the ternary. If the current URL path starts with this link's URL (which should cover both the scenario of being equal to and just being a parent of the current URL), then you apply the active class.
EDIT
Because of using StartsWith, a link for "Home" will basically always be set as active, since every URL would start with /. You probably want to make an exception on that link and instead just do:
#{ url = Url.Action("Index", "Home"); }
<li class="#(Request.Path == url ? "active" : null)">
Home
</li>
Then, that link will only be marked active if the URL is actually /.
Thanks to #Chris Pratt for his guidance. I got this working albeit with a couple of changes, possibly due to me changing my mind on the navbar and moving to a tabbed navbar (like Twitter's mobile app uses). Here's my navbar code in _Layout.cshtml:
<!--navbar-->
#{ string url; }
<ul class="nav navbar-dark bg-dark nav-tabs nav-fill">
#{ url = Url.Action("Index", "Home"); }
<li class="nav-item">
<a class="nav-link #(Context.Request.Path == url ? "active" : null)" href="#url">Home</a>
</li>
#{ url = Url.Action("Index", "Spells"); }
<li class="nav-item">
<a class="nav-link #(Context.Request.Path.StartsWithSegments(url) ? "active" : null)" href="#url">Spells</a>
</li>
#{ url = Url.Action("Index", "Crits"); }
<li class="nav-item">
<a class="nav-link #(Context.Request.Path.StartsWithSegments(url) ? "active" : null)" href="#url">Crits</a>
</li>
#{ url = Url.Action("Index", "Journal"); }
<li class="nav-item">
<a class="nav-link #(Context.Request.Path.StartsWithSegments(url) ? "active" : null)" href="#url">Journal</a>
</li>
</ul>
Now that the active class switching is working as expected, I can add some styling, and replace the text with icons that I'll make.
Gave you an upvote, Chris Pratt, but my rep is too low to show it publicly for now. Thanks again.

jQuery adding active class to navbar doesnt work

So instead of adding an active class to the navbar using HTML I instead wanted to add it through jQuery but my code doesn't seem to work.
$('.navbar-nav li a[href="' + location.pathname + '"]').addClass('active');
<nav>
<ul class="navbar-nav">
<li class="nav-item" >
<a class="nav-link active" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Wat is het?</a>
</li>
</ul>
</nav>
Can anybody help me out?
I think what do you need is window.location.href.
Something like this:
var pathname = window.location.href;
$('.navbar-nav li a').attr('href',pathname).addClass('active');
Check this example: https://jsfiddle.net/tbx56gtL/7/
Maybe you can do it like this:
$(function() {
var currentLoc = window.location.href;
if(/PageYouWant/.test(currentLoc) {
$('.navbar-nav li a').addClass('active');
}
});
If you want to set active in anchor tag you can do one of the following options.
Asign ids to every a tag
Asign a data attrib and add a class toggleClassX
Use $(this).addClass("active")
The following are the examples of each recomendation :
1 html:
<nav>
<ul class="navbar-nav">
<li class="nav-item" >
<a class="nav-link active" id="myId1" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="myId2" href="">Wat is het?</a>
</li>
</ul>
</nav>
2 html:
<nav>
<ul class="navbar-nav">
<li class="nav-item" >
<a class="nav-link toggleClass1 active" data-tclass="1" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link toggleClass2" data-tclass="2" href="">Wat is het?</a>
</li>
</ul>
</nav>
3 html: your structure is ok for the last example
1 js:
$("element").click(function(){
$("#myId1").addClass("active")
});
2 js:
$(".nav-link").click(function(){
var tclass = $(this).data("tclass)
$(".toggleClass"+tclass).addClass("active")
});
3 js:
$(".nav-link").click(function(){
$(this).addClass("active")
});
Hope the above answer your question.

Categories

Resources