I'm not able to get my jquery code to work with my Bootstrap 4. div.
My goal is to have two divs (fluid bootstrap containers) in the banner section, however one showing upon loading the page for about 5sec. and then gradually fading out while the next div gradually fades in.
I'd appreciate your help and if possible an explanation why my second block of code won't work.
PS: I know that the 2nd code block does not represent my goal, but it should also work and does not.
This works:
setTimeout(
function() {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').show();
},
4000
);
But this doesn't work:
setTimeout(function(){
$("#div-a").fadeOut("slow", function () {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').show();
});
}, 2000);
In my CSS file I have the following:
#div-b {
display: none;
}
In my HTML file I have the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>TEXATREK</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-expand-lg navbar-light bg-light" id="navi">
<a class="navbar-brand" href="">
<img class="brand-logo" src="images/logos/Trexatek_Logo_AND_Name_Gold-Orange.png" alt="">
</a>
<!--HAMBURGER Toggler Icon-->
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu" >
<span class="navbar-toggler-icon"></span>
</button>
<!-- NAVBAR -> div BELLOW -->
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ml-auto mr-5 ">
<li class="nav-item mr-5"><a class="nav-link" href="">Users</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="">Products</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="">Items</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="">Pigis</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="">Rolls</a></li>
</ul>
</div>
</nav>
<!-- SECTION 1 -->
<!--WELLCOME PAGE SECTION-->
<div id="div-a" class=" mt-2 px-0 pt-05 container-fluid">
<div class="row">
<div class="hex-container mx-0 px-0 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<img class="hex-banner img-fluid" src="images/Banner/Hexagon-Banner/Hexagon_Photo_Grid_with_logo_in_middle 1915x615.png" alt="">
</div>
</div>
</div>
<!--REPLACEMENT AFTER 5 SECONDS -- START-->
<div id="div-b" class=" mt-2 px-0 pt-05 container-fluid">
<div class="row">
<div class="hex-container mx-0 px-0 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h1>SIGN UP NOW BITCHES</h1>
</div>
</div>
</div>
<!--REPLACEMENT AFTER 5 SECONDS -- END-->
<!-- SECTION 2 -->
<!--INFORMATION ABOUT TEXATREK 1. US 2.OUR STRENGTH 3. WHY TEXATREK-->
<div class="container-fluid pt-5">
<div class="row">
<div class="mx-0 px-0 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<!--WHAT WE DO info section-->
<div class="texatrek-info what-we-do">
<h2>WHAT WE DO</h2>
<h3>Our company specializes in sourcing precision components that are manufactured in India by our network of carefully selected, high quality suppliers, all of which are ISO 9001 certified. Our goal is to ensure reliable supplies at competitive costs and with zero defects.</h3>
</div>
<!--OUR STRENGTHS info section-->
<div class="texatrek-info our-strengths">
<h2>OUR STRENGTH IS YOUR ADVANTAGE</h2>
<h3> We manage and expand our carefully selected Indian supplier base to meet the ever-growing demand of our customers. By offering a broad selection of manufacturing technologies we are able to support you to meet the challenges you are facing in terms of design and supply chain, that is optimized for manufacturing and thus resulting in reduced unit cost. </h3>
</div>
<!--BACKGROUND IMAGE HEXAGONS-->
<div class="product-background">
<img class="img-fluid product-background-img" src="images/Background/Background-info_cropped.png" alt="">
</div>-
</div>
</div>
</div>
<!-- SECTION 3 -->
<!--PRODUCTS AND SERVICES SECTION-->
<div class="container-fluid pt-5">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
<img id="products-services" class="img-fluid"src="images\Info_Graphics\Products and Services.png" alt="">
</div>
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="solutions-container">
<!--THE BLACK IN THE BLUE BLOCK (div)-->
<div class="solutions-inside">
<h3 class="solutions text-left">SOLUTIONS SOLUTIONS SOLUTIONS THAT FIT</h3>
<h5 class="solutions-para text-left">paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</h5>
</div>
</div>
</div>
</div>
</div>
<!-- SECTION 4 -->
<div class="container-fluid pt-5">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
</div>
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="TrexatekNavbar_V3_Bootstrap.css">
<script>
$('#div-a').fadeOut('slow').promise().done(function() {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').fadeIn('slow');
});
/*
setTimeout(function(){
$("#div-a").fadeOut("slow", function () {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').show();
});
}, 2000);
setTimeout(
function() {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').show();
},
4000
);
*/
</script>
</body>
</html>
Related
This is a new question, based off this question which was nicely resolved.
Here's the temp site which I'm creating for the client. Here's how this all originated.
That all being said, however, when you scroll to or click on PROJECT, you'll be scrolled to the completed projects section. This is good.
However, when you click or SCROLL to Blog, Roofing or Contact, the targeting is off.
Blog is not active but Roofing is and so on for Roofing and Contact.
So, I don't understand when you scroll past or into or click to Blog, Roofing and Contact, the Active feature is off kilter. #kmoser helped with my previous question and I didn't want to turn it into a discussion so I made a new question. Thank you everyone.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light sticky-top" id="ftco-navbar">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars"></span> Menu
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Services</li>
<li class="nav-item">Project</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Roofing</li>
<li class="nav-item">Contact</li>
</ul>
<div class="d-flex align-items-center justify-content-center">
<img src="images/logos/weathertight-logo.png" class="logosmaller" alt="" />
<!-- <span class="flaticon-roof-2"></span> -->
</div>
<div class="col-3 d-flex justify-content-end align-items-center">
<div class="social-media">
<p class="mb-0 d-flex">
<span class="fa fa-facebook"><i class="sr-only">Facebook</i></span>
<span class="fa fa-twitter"><i class="sr-only">Twitter</i></span>
<span class="fa fa-instagram"><i class="sr-only">Instagram</i></span>
<span class="fa fa-dribbble"><i class="sr-only">Dribbble</i></span>
</p>
</div>
</div>
</div>
</div>
</nav>
<section id="bloglink" class="ftco-section">
<div class="container">
<div class="row justify-content-center pb-5 mb-3">
<div class="col-md-7 heading-section text-center ftco-animate">
<span class="subheading">News & Blog</span>
<h2>Latest news from our blog</h2>
</div>
</div>
</div>
</section>
<section id="roofinglink" class="ftco-section bg-light">
<div class="container">
<div class="row justify-content-center pb-5 mb-3">
<div class="col-md-12 heading-section text-center ftco-animate">
<span class="subheading">Roofing</span>
<h2>Roofing that Pays for Itself</h2>
<div class="sec-title text-center wow animated fadeInDown">
<h2>Commercial Roofing that Pays for Itself!</h2>
<p>The heating and AC loss you have been experiencing in your commercial building can be significantly reduced with one of our energy saving roofing systems! WeatherTight Systems’ completely air-tight roofing systems seal in your building’s cool
air and heat. For most of our flat top roofing materials we also apply a seamless, high-solids silicone and acrylic based material as a way of ensuring there will be no water leaks into your commercial building. The result is a roof that is
truly protected from the scorching sun and other destructive weather elements.</p>
</div>
</div>
</div>
</div>
</section>
<section id="contactlink" class="ftco-section bg-light">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="wrapper">
<div class="row no-gutters">
Contact link section
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
I am trying to include a 400 x 100 png logo as a Navbar Brand image in Bootstrap 5. However, The logo appears to be a bit too big and even if I reduce the size of the logo, it still overlaps the black container and text input box underneath the Navbar in desktop view. In mobile devices, the logo and associated navbar overlaps even more. Also, the toggle button on the right is not aligned horizontally with the brand image on the left. I would like them to be on the same line. Attaching some screenshots for clarity. Can someone please help?
Desktop View
Mobile View
I would also want the brand image to be more aligned to the left in the mobile view. I am atatching the HTML code for review.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Localhost Site - Classroom Attendance</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Testing HTML 5 and Bootstrap 5">
<meta name="keywords" content="html5,bootstrap5">
<meta name="author" content="classroom">
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<!-- Navbar Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="media/fadmeter-logo.png" alt="Classroom Logo" width="250" height="62.5">
</a>
</div>
<!-- Toggler/Collapsible Button -->
<div class="container-fluid">
<button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav ms-2 align-items-end">
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
<li>
<a class="nav-link" href="#">Login</a>
</li>
<li>
<form action="#">
<input type="submit" class="btn btn-primary" value="Register">
</form>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br>
<!-- Code Input Area -->
<div class="container rounded mt-5 pt-3 pb-1 bg-dark text-white" style="width:400px">
<form action="#">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" placeholder="Enter Code">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Go</button>
</div>
</div>
</form>
</div>
<br>
<!-- Headline and Description -->
<div class="container">
<h3>My Headline Text</h3>
<p><span style="color:blue">Localhost</span> is a test page for HTML 5 and Bootstrap 5.</p>
</div>
<!-- Headline and Description -->
<div class="row mx-5">
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/1.png" style="width: 96px" alt="1">
<div class="card-body">
<h5 class="card-title">Class 1</h5>
<p class="card-text">All students in class room 1.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/2.png" style="width: 96px" alt="2">
<div class="card-body">
<h5 class="card-title">Class 2</h5>
<p class="card-text">All students in class room 2.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/3.png" style="width: 96px" alt="3">
<div class="card-body">
<h5 class="card-title">Class 3</h5>
<p class="card-text">All students in class room 3.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/4.png" style="width: 96px" alt="4">
<div class="card-body">
<h5 class="card-title">Class 4</h5>
<p class="card-text">All students in class room 4.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
Remove the width height from image tag and use "img-fluid" class in image tag.
Or in mobile view you can use position absolute
Thanks for the suggestion provided by #Minhaj. I tweaked my code and it works fine now. I incorrectly placed the brand image in a separate div outside the navbar div. This is my new code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Localhost Site - Classroom Attendance</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Testing HTML 5 and Bootstrap 5">
<meta name="keywords" content="html5,bootstrap5">
<meta name="author" content="classroom">
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<!-- Navbar Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="media/fadmeter-logo.png" alt="Fadmeter Logo" width="200" height="50" style="position:absolute; top:0; left:0">
</a>
<!-- Toggler/Collapsible Button -->
<button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav ms-2 align-items-end">
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
<li>
<a class="nav-link" href="#">Login</a>
</li>
<li>
<form action="#">
<input type="submit" class="btn btn-primary" value="Register">
</form>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br>
<!-- Code Input Area -->
<div class="container rounded mt-5 pt-3 pb-1 bg-dark text-white" style="width:400px">
<form action="#">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" placeholder="Enter Code">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Go</button>
</div>
</div>
</form>
</div>
<br>
<!-- Headline and Description -->
<div class="container">
<h3>My Headline Text</h3>
<p><span style="color:blue">Localhost</span> is a test page for HTML 5 and Bootstrap 5.</p>
</div>
<!-- Headline and Description -->
<div class="row mx-5">
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/1.png" style="width: 96px" alt="1">
<div class="card-body">
<h5 class="card-title">Class 1</h5>
<p class="card-text">All students in class room 1.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/2.png" style="width: 96px" alt="2">
<div class="card-body">
<h5 class="card-title">Class 2</h5>
<p class="card-text">All students in class room 2.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/3.png" style="width: 96px" alt="3">
<div class="card-body">
<h5 class="card-title">Class 3</h5>
<p class="card-text">All students in class room 3.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/4.png" style="width: 96px" alt="4">
<div class="card-body">
<h5 class="card-title">Class 4</h5>
<p class="card-text">All students in class room 4.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
I'm trying to make my navbar links turn active when clicked. I imagine I'd do this by adding the active class when being clicked; however, I'm not sure how to stop the current active link from being active. Also, I'm not sure
let links = document.querySelectorAll('.nav-link');
links.addEventListener('click', function() {
this.classList.add('active');
});
Also, I have this for making the link active; however, I can't get it to run after the html runs, so it doesn't work.
https://jsfiddle.net/ysejr17L/2/
TL;DR
don't know how to make JS find the currently active link and remove it's active class
code for making clicked link active loads before HTML, so it doesn't work
Check out this snippet:
let links = document.querySelectorAll('.nav-link');
for(let i=0; i<links.length; i++){
links[i].addEventListener('click', function() {
for(let j=0; j<links.length; j++)
links[j].classList.remove('active');
this.classList.add('active');
});
}
body {
background: linear-gradient(0.1turn, #673fa6, #e1f5f8, #f6c43c);
}
nav {
opacity: 0.8;
}
.text-shadow {
text-shadow: 5px 5px 15px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- My CSS -->
<link rel="stylesheet" href="styles/style.css">
<title>Justice Dunn</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">
<img src="node_modules/bootstrap-icons/icons/kanban-fill.svg" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
Justice Dunn
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" href="#bg1">Home</a>
<a class="nav-link" href="#bg2">Background</a>
<a class="nav-link" href="#bg3">Hobbies</a>
<a class="nav-link" href="#bg4">Achievements</a>
<a class="nav-link" href="#bg5">The Future</a>
<a class="nav-link" href="#bg6">Gallery</a>
</div>
</div>
</nav>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg1">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-shadow display-3">Hello!</h1>
<p class="text-center text-shadow h4">I'm Justice Dunn, a 19-year-old developer in Cheyenne, Wyoming.</p>
</div>
</div>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg2">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-black text-shadow display-3">Background</h1>
<p class="text-center text-black mt-3 h5">I decided that I wanted to become a developer for a few reasons.</p>
<p class="text-center text-black mt-3 h5">I've always been a creative person, and I've always enjoyed problem solving. Being a developer just seems to be an occupation that naturally incorporates both of those things.</p>
</div>
</div>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg3">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-black text-shadow display-3">Hobbies</h1>
<p>Writing Music</p>
<p>Digital Art</p>
<p>3D Modeling</p>
</div>
</div>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg4">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-black text-shadow display-3">Achievements</h1>
<p class="text-center h5 mt-3">I don't have a lot of life experience yet, so I'd say my greatest achievement was getting accepted into the Array apprenticeship program!</p>
</div>
</div>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg5">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-black text-shadow display-3">The Future</h1>
<p class="text-center h5 mt-3">After this Array apprenticeship, I want to begin developing apps and write, record, and produce an album.</p>
</div>
</div>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg6">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-black text-shadow display-3">Gallery</h1>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS and local JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="/scripts/script.js"></script>
</body>
</html>
We are adding click event listener to each element of class .nav-link which at first remove .active class from all the elements and then add class .active to the element which is clicked.
You could try this also without using a loop on each load.
document.body.addEventListener('click', function(e) {
if(e.target.className==='nav-link'){
document.getElementsByClassName('nav-link active')[0].classList.remove('active');
e.target.classList.add('active');
}
});
body {
background: linear-gradient(0.1turn, #673fa6, #e1f5f8, #f6c43c);
}
nav {
opacity: 0.8;
}
.text-shadow {
text-shadow: 5px 5px 15px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- My CSS -->
<link rel="stylesheet" href="styles/style.css">
<title>Justice Dunn</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">
<img src="node_modules/bootstrap-icons/icons/kanban-fill.svg" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
Justice Dunn
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" href="#bg1">Home</a>
<a class="nav-link" href="#bg2">Background</a>
<a class="nav-link" href="#bg3">Hobbies</a>
<a class="nav-link" href="#bg4">Achievements</a>
<a class="nav-link" href="#bg5">The Future</a>
<a class="nav-link" href="#bg6">Gallery</a>
</div>
</div>
</nav>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg1">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-shadow display-3">Hello!</h1>
<p class="text-center text-shadow h4">I'm Justice Dunn, a 19-year-old developer in Cheyenne, Wyoming.</p>
</div>
</div>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg2">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-black text-shadow display-3">Background</h1>
<p class="text-center text-black mt-3 h5">I decided that I wanted to become a developer for a few reasons.</p>
<p class="text-center text-black mt-3 h5">I've always been a creative person, and I've always enjoyed problem solving. Being a developer just seems to be an occupation that naturally incorporates both of those things.</p>
</div>
</div>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg3">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-black text-shadow display-3">Hobbies</h1>
<p>Writing Music</p>
<p>Digital Art</p>
<p>3D Modeling</p>
</div>
</div>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg4">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-black text-shadow display-3">Achievements</h1>
<p class="text-center h5 mt-3">I don't have a lot of life experience yet, so I'd say my greatest achievement was getting accepted into the Array apprenticeship program!</p>
</div>
</div>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg5">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-black text-shadow display-3">The Future</h1>
<p class="text-center h5 mt-3">After this Array apprenticeship, I want to begin developing apps and write, record, and produce an album.</p>
</div>
</div>
<div class="container vh-100 vw-100 d-flex align-items-center" id="bg6">
<div class="container d-flex-inline justify-content-center">
<h1 class="text-center text-black text-shadow display-3">Gallery</h1>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS and local JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="/scripts/script.js"></script>
</body>
</html>
I have created dynamic list using bootstrap and thymeleaf, list also contains collapse functionality which is not working properly, aria-expanded = "false" is not working, I browsed a lot but not any solution for dynamically created list using thymeleaf.
When the page loads all collapsible panel should be closed for that I used aria-expanded="false", but it is not working.
As the list comes into from it takes few clicks to achieve collapse.
Below there is the code and image.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="/resources/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="/resources/css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="/resources/css/style.css" rel="stylesheet">
<link href="/resources/css/jquery.qtip.min.css" rel="stylesheet"/>
<link href="/resources/css/icheck.css" rel="stylesheet" />
<link href="/resources/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="/resources/css/sweet-alert.css" rel="stylesheet" />
<link href="/resources/css/custom-accordin.css" rel="stylesheet" />
</head>
<body>
<div class="container" th:fragment="content">
<header>
<!--Main Navigation-->
<nav class="navbar fixed-top scrolling-navbar navbar-expand-lg navbar-dark blue-grey darken-2">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="nav-link" href="EmployerDashboard.html"><i class="fa fa-chevron-left fa-2x"></i></a> </li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="navbar-brand" href="#">Submission status</a> </li>
</ul>
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item"><i class="fa fa-bars fa-2x"></i></li>
</ul>
</nav>
</header>
<!--Main Navigation-->
<div class="container-fluid">
<!--Grid row-->
<div class="row">
<div class="col-12">
<div class="mx-auto">
<div class="alert blue-grey lighten-4" role="alert" style="border-top: 2px solid #000;">
<div class="row">
<div class="col text-center">
<p class="h6"><strong th:text="${efiledHdrBean.payPeriod}"></strong><br/>
<small>Submission Period</small></p>
</div>
<div class="col text-center">
<p class="h6"><strong th:text="${#codeMapUtil.getCodeValue(efiledHdrBean.payFreq, 'PAY_FREQ_DESC').concat('ly')}"></strong><br/>
<small>Pay Frequency</small></p>
</div>
<div class="col text-center">
<p class="h6"><strong th:text="${efiledHdrBean.ppType}"></strong><br/>
<small>Pension Prov.</small></p>
</div>
</div>
</div>
<div class="alert alert-success alert-dismissible" role="alert">
<p class="text-center"><i class="fa fa-check fa-2x text-success"></i> Your Contribution data is accepted by NEST<br />
Amount Due to Pension provider: <strong>£ 40.72</strong></p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<ul class="list-group" >
<div class="accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- <li class="list-group-item" th:each="listBean,iterator: ${contributionStatus}"> -->
<li class="list-group-item">
<div class="card" th:each="listBean,iterator: ${contributionStatus}" >
<div class="card-header" role="tab" th:id="'heading' + ${iterator.index}"> <a class="collapsed black-text" data-toggle="collapse" th:href="'#collapse' + ${iterator.index}" aria-expanded="false" th:attr = "aria-controls='collapse' + ${iterator.index}"> <i class="fa fa-angle-down rotate-icon float-right"></i>
<div class="row">
<div class="col-7"> <span class="icon-round pull-left">
<p class="icon"><span th:text=" ${#strings.substring(listBean.eeSurname,0,1) + #strings.substring(listBean.eeFname,0,1)}"></span></p>
</span>
<p class="h5 list-group-item-heading"><strong><span th:text="${listBean.eeSurname}"></span> , <span th:text="${listBean.eeFname}"></span></strong></p>
<p class="list-group-item-text mb-2"><span th:text="${listBean.eeWksNo}"></span> <span class="badge grey lighten-2 black-text" th:text="${listBean.assessStatus}"></span></p>
</div>
<div class="col-4 pr-0">
<p class="h5 list-group-item-heading text-right"><span class="float-left">£</span><span th:text="${listBean.eePenEarnings}"></span></p>
</div>
</div>
</a> </div>
<div th:id="'collapse' + ${iterator.index}" class="collapse show" role="tabpanel" data-parent="#accordionEx" th:attr="aria-labelledby='heading' + ${iterator.index}">
<div class="card-body black-text">
<p class="h6">Pensionable Earnings: £ <span th:text="${listBean.eePenEarnings}"></span></p>
<ul class="list-group" >
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Employer</p>
</div>
<div class="col-4 p-0">
<p class="list-group-item-heading mb-0">Rate(%): <span th:text="${listBean.erContribRate}"></span></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.erDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Employee</p>
</div>
<div class="col-4 p-0">
<p class="list-group-item-heading mb-0">Rate(%): <span th:text="${listBean.eeContribRate}"></span></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.eeDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-heading mb-0">Additional Voluntary Contribution (AVC)</p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.eeAvcDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item grey lighten-4">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-heading mb-0"><strong>Total Contribution</strong></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><strong><span class="float-left">£</span><span th:text="${listBean.erContribution}"></span></strong></p>
</div>
</div>
</li>
</ul>
<ul class="list-group mt-4" aria-hidden="true">
<li class="list-group-item grey lighten-3">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-text mb-0"><strong>Partial / Non-Payment of Contribution</strong></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Reason</p>
</div>
<div>
<p class="list-group-item-heading text-right mb-0"><span th:text="${listBean.partialContribReason}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Effective Date</p>
</div>
<div>
<p class="list-group-item-heading text-right mb-0"><span th:text="${listBean.partialContribEffectiveDate}"></span></p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</div>
</ul>
</div>
<!--/.Card-->
</div>
</div>
</div>
<!--Main container-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" th:src="#{/resources/js/jquery.3.2.1.min.js}"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" th:src="#{/resources/js/popper.min.js}"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" th:src="#{/resources/js/bootstrap.min.js}"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" th:src="#{/resources/js/mdb.min.js}"></script><!--
<script type="text/javascript" th:src="#{/resources/js/thymol.js}"></script>
<script type="text/javascript" th:src="#{/resources/js/thymolconfig.js}"></script> -->
<script type="text/javascript" th:src="#{/resources/js/custom.js}"></script>
<script th:src="#{/resources/js/numericfield.js}"></script>
<script th:src="#{/resources/js/moment.2.10.6.min.js}"></script>
<!-- SCRIPTS -->
<!-- <!-- thymol JavaScript -->
<script th:src="#{/resources/js/main.js}"></script>
<script th:src="#{/resources/js/sweet-alert.min.js}"></script>
<script th:src="#{/resources/js/utils.js}"></script>
<script th:src="#{/resources/js/numericfield.js}"></script>
<script th:src="#{/resources/js/date.js}"></script>
<script th:src="#{/resources/js/icheck.min.js}"></script>
<script th:src="#{/resources/js/dynamicFormFields.js}"></script>
<script th:src="#{/resources/js/moment.js}"></script>
<script th:src="#{/resources/js/bootstrap-datetimepicker.min.js}"></script>
<script th:src="#{/resources/js/jquery.qtip.min.js}"></script>
<script th:src="#{/resources/js/bc-quicklink.js}"></script>
<script th:inline="javascript">
/*<![CDATA[*/
// SideNav Initialization
$(document).ready(function () {
$(".button-collapse").sideNav({
edge: 'right',
closeOnClick: true
});
var container = document.getElementById('slide-out');
Ps.initialize(container);
});
</script>
<script>
// Material Select Initialization
$(document).ready(function () {
$('.mdb-select').material_select();
});
/*]]>*/
</script>
</div>
</body>
</html>
Help me to solve the problem.
<title>TheSaaS - Responsive Bootstrap SaaS, Software & WebApp Template</title>
<script>if (top !== self) top.location.replace(self.location.href +'?utm_source=themeforest&utm_medium=preview&utm_campaign=thesaas');</script>
<!-- Styles -->
<link type="text/css" href="{{url_for('static',filename='assets/css/core.min.css')}}" rel="stylesheet">
<link type="text/css" href="{{url_for('static',filename='assets/css/thesaas.min.css')}}" rel="stylesheet">
<link type="text/css" href="{{url_for('static',filename='assets/css/style.css')}}" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" href="{{url_for('static',filename='assets/img/apple-touch-icon.png')}}">
<link rel="icon" href="{{url_for('static',filename='assets/img/favicon.png')}}">
<!-- Open Graph Tags -->
<meta property="og:title" content="TheSaaS">
<meta property="og:description" content="A responsive, professional, and multipurpose SaaS, Software, Startup and WebApp landing template powered by Bootstrap 4.">
<meta property="og:image" content="http://thetheme.io/thesaas/assets/img/og-img.jpg">
<meta property="og:url" content="http://thetheme.io/thesaas/">
<meta name="twitter:card" content="summary_large_image">
<!-- Topbar -->
<nav class="topbar topbar-inverse topbar-expand-md topbar-sticky">
<div class="container">
<div class="topbar-left">
<button class="topbar-toggler">☰</button>
<a class="topbar-brand" href="index.html">
<img class="logo-default" src="{{url_for('static',filename='assets/img/logo.png')}}" alt="logo">
<img class="logo-inverse" src="{{url_for('static',filename='assets/img/logo-light.png')}}" alt="logo">
</a>
</div>
</div>
</nav>
<!-- END Topbar -->
<!-- Header -->
<header class="header fadeout header-inverse pb-0 h-fullscreen" style="background-image: linear-gradient(to bottom, #243949 0%, #517fa4 100%);">
<canvas class="constellation"></canvas>
<div class="container">
<div class="row h-full">
<div class="col-12 text-center align-self-center">
<h1 class="fs-50 fw-600 lh-15 hidden-sm-down">Built for <span class="text-primary" data-type="Authors, Startups, Entrepreneurs, SaaS, WebApps"></span></h1>
<h1 class="fs-35 fw-600 lh-15 hidden-md-up">Built for<br><span class="text-primary" data-type="Authors, Startups, Entrepreneurs, SaaS, WebApps"></span></h1>
<br>
<p class="fs-20 hidden-sm-down"><strong>TheSaaS</strong> is an elegant, modern and fully customizable SaaS and WebApp template</p>
<p class="fs-16 hidden-md-up"><strong>TheSaaS</strong> is an elegant, modern and fully customizable SaaS and WebApp template</p>
<br>
<hr class="w-60 hidden-sm-down">
<br>
<a class="btn btn-xl btn-round btn-primary fs-20 fw-500 w-350 shadow-3 hidden-sm-down" href="https://themeforest.net/item/thesaas-responsive-bootstrap-saas-software-webapp-template/19778599?license=regular&open_purchase_for_item_id=19778599&purchasable=source&ref=thethemeio">Purchase Now - $19</a>
<a class="btn btn-lg btn-round btn-primary w-250 shadow-3 hidden-md-up" href="https://themeforest.net/item/thesaas-responsive-bootstrap-saas-software-webapp-template/19778599?license=regular&open_purchase_for_item_id=19778599&purchasable=source&ref=thethemeio">Purchase Now - $19</a>
<br>
<p class="mt-2 mt-md-4"><small>or purchase an Extended License</small></p>
</div>
<div class="col-12 align-self-end text-center pb-70">
<a class="scroll-down-2 scroll-down-inverse" href="#" data-scrollto="section-demo"><span></span></a>
</div>
</div>
</div>
</header>
<!-- END Header -->
<!-- Main container -->
<main class="main-content">
<!--
|‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
| Sample Landing Pages
|‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
!-->
<section class="section overflow-hidden" id="section-demo">
<div class="container">
<header class="section-header">
<small>Demo</small>
<h2>Sample Landing Pages</h2>
<hr>
<p class="lead">Apart from internal pages, we have designed several single sample pages to get start with.</p>
</header>
<div class="row gap-y text-center">
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-helpato-sm.jpg')}}" alt="demo helpato landing"></p>
<p><strong>Helpato</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="150">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-trello-sm.jpg')}}" alt="demo helpato landing"></p>
<p><strong>Trello</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-gmail-sm.jpg')}}" alt="demo helpato landing"></p>
<p><strong>Gmail</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-skype-sm.jpg')}}" alt="demo helpato landing"></p>
<p><strong>Skype</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="150">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-github-sm.jpg')}}" alt="demo github landing"></p>
<p><strong>GitHub</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-app-sm.jpg')}}" alt="demo app landing"></p>
<p><strong>Mobile App</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-bootstrap-sm.jpg')}}" alt="demo bootstrap landing"></p>
<p><strong>Bootstrap</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4 hidden-sm-down" data-aos="fade-up" data-aos-delay="150">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-slack-sm.jpg')}}" alt="demo slack landing"></p>
<p><strong>Slack</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4 hidden-sm-down" data-aos="fade-up" data-aos-delay="300">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-zendesk-sm.jpg')}}" alt="demo zendesk landing"></p>
<p><strong>Zendesk</strong></p>
</div>
</div>
</div>
</section>
</main>
<!-- END Main container -->
<!-- Footer -->
<footer class="site-footer">
<div class="container">
<div class="row gap-y align-items-center">
<div class="col-12 col-lg-3">
<p class="text-center text-lg-left">
<img src="{{url_for('static',filename='assets/img/logo.png')}}" alt="logo">
</p>
</div>
<div class="col-12 col-lg-6">
<ul class="nav nav-inline nav-primary nav-hero">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page-feature.html">Features</a>
</li>
<li class="nav-item hidden-sm-down">
<a class="nav-link" href="page-pricing.html">Pricing</a>
</li>
<li class="nav-item hidden-sm-down">
<a class="nav-link" href="page-contact.html">Contact</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-3">
<div class="social text-center text-lg-right">
<a class="social-facebook" href="https://www.facebook.com/thethemeio"><i class="fa fa-facebook"></i></a>
<a class="social-twitter" href="https://twitter.com/thethemeio"><i class="fa fa-twitter"></i></a>
<a class="social-instagram" href="https://www.instagram.com/thethemeio/"><i class="fa fa-instagram"></i></a>
<a class="social-dribbble" href="https://dribbble.com/thethemeio"><i class="fa fa-dribbble"></i></a>
</div>
</div>
</div>
</div>
</footer>
<!-- END Footer -->
<!-- Scripts -->
<script src="{{url_for('static',filename='assets/js/core.min.js')}}"></script>
<script src="{{url_for('static',filename='assets/js/thesaas.min.js')}}"></script>
<script src="{{url_for('static',filename='assets/js/script.js')}}"></script>
Hello,
This is a template which I have modified .. outside flask when I am running this, this works fine ( without url_for ). But when I am trying to use within flask, the javascript files are not working .. please help me
Make sure your directory structure is modified for the root of you flask application, otherwise you're requesting js files that aren't there
You don't have to use url_for. Instead try:
<link type="text/css" src="{static/assets/css/core.min.css}" rel="stylesheet">