I am trying to create a navigation menu using Bootstrap 5. Unfortunately, I can't manage to cleanly solve the "Active" status of the menu buttons using on-board tools.
When a link in a drop-down menu is clicked, I want the drop-down title to be set to Active. My JS solution causes the Active status to be set, but it takes 2 more clicks on another menu item afterwards to remove the Active status. The page is a one-page layout with anchor links.
Using JavaScript I got further, but the problem still exists.
Javascript Code:
<script>
/* mouse-over effect */
$('.dropdown').mouseover(function () {
$(this).addClass('show').attr('aria-expanded', 'true');
$(this).find('.dropdown-menu').addClass('show');
}).mouseout(function () {
$(this).removeClass('show').attr('aria-expanded', 'false');
$(this).find('.dropdown-menu').removeClass('show');
});
</script>
<script>
/* Code for changing active link on clicking */
var btns = $("#navbar .nav-item-count");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function () {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
var hrefValue = current[0].attributes[1].value;
const element1 = document.getElementById("ul1");
const element2 = document.getElementById("ul2");
if (hrefValue == "#section3") {
element.classList.add("active");
} else { element.classList.remove("active"); }
if ((hrefValue == "#section4") || (hrefValue == "#section5")) {
element2.classList.add("active");
} else { element2.classList.remove("active"); }
});
}
/* Code for changing active link on Scrolling */
$(window).scroll(function () {
var distance = $(window).scrollTop();
$('.page-section').each(function (i) {
if ($(this).position().top <= distance + 120) {
$('#navbar .nav-item-count.active').removeClass('active');
$('#navbar .nav-item-count').eq(i).addClass('active');
}
});
}).scroll();
</script>
HTML code:
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/bootstrap/bootstrap-icons/bootstrap-icons.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="row">
<div id="tiny-area" class="col apro-shrink">
<div class="apro-top-bar">
<div class="top-bar-left">
<ul class="social-icons">
<li><i class="bi bi-facebook"></i></li>
<li><i class="bi bi-twitter"></i></li>
<li><i class="bi bi-linkedin"></i></li>
<li><i class="bi bi-skype"></i></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="social-icons">
<li><i class="bi bi-phone-fill"></i>+49 123 456 789</li>
<li> </li>
<li><i class="bi bi-envelope-at-fill"></i>max#mustermann.com</li>
</ul>
</div>
</div>
</div>
</div>
<nav id="navbar" class="navbar sticky-top navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse main-nav" id="navbarSupportedContent">
<ul class="nav nav-pills me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active nav-item-count" href="#section1">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link nav-item-count" href="#section2">Link 2</a>
</li>
<li class="nav-item dropdown">
<a id="ul1" class="nav-link dropdown-toggle button-item-count" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item nav-item-count" href="#section3">Link 3</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a id="ul2" class="nav-link dropdown-toggle button-item-count" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item nav-item-count" href="#section4">Link 4</a></li>
<li><a class="dropdown-item nav-item-count" href="#section5">Link 5</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link nav-item-count" href="#section6">Link 6</a>
</li>
<li class="nav-item">
<a class="nav-link nav-item-count" href="#section7">Link 7</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div data-bs-spy="scroll" data-bs-target="#navbar" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2">
<!-- Section 1 -->
<h1 id="section1" class="page-section">Seite 1</h1>
<p>
Lorem ipsum...
</p>
<!-- Section 2 -->
<h1 id="section2" class="page-section">Seite 2</h1>
<p>
Lorem ipsum...
</p>
<!-- Section 3 -->
<h1 id="section3" class="page-section">Seite 3</h1>
<p>
Lorem ipsum...
</p>
<!-- Section 4 -->
<h1 id="section4" class="page-section">Seite 4</h1>
<p>
Lorem ipsum...
</p>
<!-- Section 5 -->
<h1 id="section5" class="page-section">Seite 5</h1>
<p>
Lorem ipsum...
</p>
<!-- Section 6 -->
<h1 id="section6" class="page-section">Seite 6</h1>
<p>
Lorem ipsum...
</p>
<!-- Section 7 -->
<h1 id="section7" class="page-section">Seite 7</h1>
<p>
Lorem ipsum...
</p>
</div>
</main>
<footer>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script>
<!-- Javascript code see above -->
</script>
</html>
Can anyone help me with this? Thanks for help
Related
I'm working on a website which is used to display the news using vertically collapsing accordions.I'm using an external API to fetch the news.
I need only news to be visible at a time.
When I click on the 2nd news title, I need the 1st news description to be hidden/collapsed. Similarly, when I click on any of the news , I want the rest to be kept collapsed/hidden , but this doesn't work . (See web page snip)
Here are the html and JS codes.
JS :
let display = document.getElementById("display");
const xhr = new XMLHttpRequest;
xhr.open("GET", "https://newsapi.org/v2/top-headlines?sources=bbc-news&apiKey=70893d07e43d413faf7813e13df0f8aa", true)
xhr.onload = function () {
let strHtml = "";
if (this.status === 200) {
let newsObj = JSON.parse(this.responseText);
let newsArticles = newsObj.articles;
console.log(newsArticles)
newsArticles.forEach(function (element, index) { //newsArticle --> an array which contains the news data including the title and description of the news
let str = `<div class="accordion-item">
<h2 class="accordion-header" id="heading${index}">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse${index}" aria-expanded="false" aria-controls="collapse${index}">
${element.title}
</button>
</h2>
<div id="collapse${index}" class="accordion-collapse collapse" aria-labelledby="heading${index}" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong> ${element.description}</strong>
Learn more</button>
</div>
</div>
</div>`
strHtml += str; //append news data into strHtml string
});
}
else {
console.log("some error")
}
display.innerHTML = strHtml; //to display the news on the page
}
xhr.send();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">BBC News</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="container my-3">
<h3><span class="badge bg-primary">Top news</span>
</h3>
</div>
<hr>
<div class="container accordionExample" >
<div class="accordion" id="display">
</div>
</div>
</div>
<script src="./JS/index.js"></script>
<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>
</body>
</html>
You need a <div> around your accordion with a parent ID:
<div class="accordion" id="accordionExample">
And in your .collapse element you need that
data-bs-parent="#accordionExample"
You already have that. So I guess it's just the missing wrapper.
trying replacing the 'str' variable with the below one. It should work then.
let str = `<div class="card">
<div class="accordion-header" id="heading${index}">
<h5 class="mb-0">
<button class="btn" data-toggle="collapse" data-target="#collapse${index}" aria-expanded="true" aria-controls="collapse${index}">
${element.title}
</button>
</h5>
</div>
<div id="collapse${index}" class="collapse collapse" aria-labelledby="heading${index}">
<div class="accordion-body">
<strong> ${element.description}</strong>
Learn more</button>
</div>
</div>
</div>`
I'm not able to hide the navbar after the link is clicked. I'm using bootstrap 3. I have added the script that should work. I'm not able to find the error. Can someone go through this code. Please
$('.navbar-collapse ul li a').click(function() {
$(".navbar-collapse").collapse('hide');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<ul class="nav navbar-nav navbar-left">
<li>
<a class="navbar-brand" href="#"><img src="images/logo-inv.png" width="30" height="30" alt=""></a>
</li>
<li><a class="navbar-brand" href="#" onMouseOver="this.style.color='#fff'">पBrand</a></li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#aboutUs"><span class="glyphicon glyphicon-question-sign"></span>
About Us</a></li>
<li><a href="#"><span class="glyphicon glyphicon-picture"></span>
Gallery</a></li>
<li><span class="glyphicon glyphicon-pawn"></span> Awards</li>
<li><a href="#"><span class="glyphicon glyphicon-paste"></span>
Documents</a></li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
According to docs you have to put collapse in class
.collapse hides content
.collapsing is applied during transitions
.collapse.in shows content
But this is not enough.
I'm not able to hide the navbar after the link is clicked.
Would you like to hide the whole navbar or the menu section which appears on small screen sizes?
If you want the first one you have to put classes in nav tag and use different query in jquery
Example
$(function() {
$('.navbar-collapse ul li a').click(function() {
$(".navbar-collapse").collapse('hide'); // hides menu on lower screens
//$(".navbar").collapse('hide'); // hides the whole navbar
});
})
html,
body {
height: 100%;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js"></script>
<div class="container">
<nav class="collapse in navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<ul class="nav navbar-nav navbar-left">
<li>
<a class="navbar-brand" href="#"><img src="images/logo-inv.png" width="30" height="30" alt=""></a>
</li>
<li><a class="navbar-brand" href="#" onMouseOver="this.style.color='#fff'">पBrand</a></li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse in navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#aboutUs"><span class="glyphicon glyphicon-question-sign"></span>
About Us</a></li>
<li><a href="#"><span class="glyphicon glyphicon-picture"></span>
Gallery</a></li>
<li><span class="glyphicon glyphicon-pawn"></span> Awards</li>
<li><a href="#"><span class="glyphicon glyphicon-paste"></span>
Documents</a></li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
Did you try Something like this :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#aboutUs"><span class="glyphicon glyphicon-question-sign"></span>
About Us</a>
</li>
<li class="nav-link" class="nav-item">
<a class="nav-link" href="#"><span class="glyphicon glyphicon-picture"></span>
Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="glyphicon glyphicon-pawn"></span> Awards</a>
</li>
</ul>
</div>
</nav>
<br>
</body>
</html>
Use this in js
$(function () {
$(".navbar-collapse ul li a").click(function() {
$(".navbar-collapse").collapse('hide');
});
$(".navbar-collapse ul li a").click(function (event) {
$(event.target).focus();
});
});
I have a web page with a menu made with the bootstrap framework. This menu in its mobile version appears when you click on the toggle button that appears in the upper right corner. This menu slides from the top down and looks like this:
The code of this header menu is this:
<!--========== HEADER ==========-->
<header class="header navbar-fixed-top">
<!-- Navbar -->
<nav class="navbar">
<div class="container" id="main_header_container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="menu-container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="toggle-icon"></span>
</button>
<!-- Logo -->
<div class="logo">
<a class="logo-wrap" href="https://pixels.com/index">
<img class="logo-img logo-img-main" src="img/logo2.png" alt="Logo">
<img class="logo-img logo-img-active" src="img/logo2.png" alt="Logo">
</a>
</div>
<!-- End Logo -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-collapse">
<div class="menu-container">
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/index">HOME</a></li>
<li class="nav-item dropdown">
<a class="nav-item-child nav-item-hover" id="a_leistungen" href="#">LEIST</a><a id="arrow_to_dropdown-mob" onclick="myFunction()" class="nav-item-child dropbtn">LEIST</a>
<ul class="dropdown-menu" id="ul_dropdownIDDesktop" aria-labelledby="dLabel">
<li><a class="dropdown-item" href="https://pixels.com/webdesign">Webdesign</a></li>
<li><a class="dropdown-item" href="https://pixels.com/marketing">Marketing</a></li>
<li><a class="dropdown-item" href="https://pixels.com/corporate-design">Corporate Design</a></li>
</ul>
</li>
<div id="myDropdown" class="dropdown-content">
<li><a class="drop-item" href="https://pixels.com/webdesign">Webdesign</a></li>
<li><a class="drop-item" href="https://pixels.com/marketing">Marketing</a></li>
<li><a class="drop-item" href="https://pixels.com/corporate-design">Corporate Design</a></li>
</div>
<li class="nav-item dropdown">
<a class="nav-item-child nav-item-hover" id="a_lasungen" href="#">LOSING</a>
<a id="arrow_to_dropdown-mob" onclick="myFunctiondrop()" class="nav-item-child dropbtn">LOSING</a>
<ul class="dropdown-menu" id="ul_dropdownIDDesktop" aria-labelledby="dLabel">
<li class="dropdown-item"><a class="drop-item" href="https://nivamedia.ch/kurier-lieferdienst">PixelsMarket</a></li>
</ul>
</li>
<div id="myDropdown1" class="dropdown-content1">
<li class="drop-item"><a class="drop-item" href="https://pixels.com/kurier">PixelsMarket</a></li>
</div>
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/referns">REFERNS</a></li>
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/contact">CONTACT</a></li>
</ul>
</div>
</div>
<!-- End Navbar Collapse -->
</div>
</nav>
<!-- Navbar -->
</header>
<!--========== END HEADER ==========-->
What I would like to do is that the header menu slide from left to right, something like this:
How Can I do that with css?
change this class : navbar-nav-right to navbar-nav-left
<ul class="navbar-nav navbar-nav-left">
<li class="nav-item"><a class="nav-item-child nav-item-
hover" href="https://pixels.com/index">HOME</a></li>
I am new to this so please bear with me. I copied this navbar code from Bootstrap and tweaked it to fit my code.
I have a dropdown list with three dropdown items. I want the user to have two options. They can go to the portfolio page and find the links there or they can use the dropdown menu.
The link to the portfolio page does not work when the last script that contains bootstrap.min.js is in the code. Not sure why this is not working. If I take out the dropdown and make it a regular link it goes to the portfolio page. Here is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel ="stylesheet" type="text/css" href="style.css">
<title>Do You Know Jennipher</title>
</head>
<nav class="navbar sticky-top navbar-expand-lg">
<a class="navbar-brand" href="index.html">Do You Know Jennipher</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutme.html">About Me</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="previous_work.html">Portfolio</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="previous_work.html">Egyptian Petrdise</a>
<a class="dropdown-item" href="previous_work.html">Movie Madness</a>
<a class="dropdown-item" href="previous_work.html">George's Safari Adventure</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="say_hello.html">Say Hello</a>
</li>
</ul>
</div>
</nav>
<header>
<div class="flex-container">
<img src="images/banner_ad.jpg" class="banner" alt="banner ad">
</div>
</header>
<body>
<section class="intro">
<div class="container">
<div class="row">
<div class="col-6">
<img src="images/mountains.jpg" alt="rocky mountains" class="mountain" width="500px">
</div>
<div class="col-6">
<p class="intro-text">Hello, my name is Jennipher </p>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</body>
<footer>
<p class="footer">© Copyright 2019 Jennipher Samms</p>
</footer>
</html>
There's nothing wrong with min.js library. Only you should follow perfect body layout and syntax. It's better to always keep your <script> files before </body> tag ends. End you forgot write some elements inside the body instead you wrote them outside body tag. I just adjusted some of your code. Check it once.
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel ="stylesheet" type="text/css" href="style.css">
<title>Do You Know Jennipher</title>
</head>
<body>
<nav class="navbar sticky-top navbar-expand-lg">
<a class="navbar-brand" href="index.html">Do You Know Jennipher</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutme.html">About Me</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="previous_work.html">Portfolio</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="previous_work.html">Egyptian Petrdise</a>
<a class="dropdown-item" href="previous_work.html">Movie Madness</a>
<a class="dropdown-item" href="previous_work.html">George's Safari Adventure</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="say_hello.html">Say Hello</a>
</li>
</ul>
</div>
</nav>
<header>
<div class="flex-container">
<img src="images/banner_ad.jpg" class="banner" alt="banner ad">
</div>
</header>
<section class="intro">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="images/mountains.jpg" alt="rocky mountains" class="mountain" width="500px">
</div>
<div class="col-md-6">
<p class="intro-text">Hello, my name is Jennipher </p>
</div>
</div>
</div>
</section>
<footer>
<p class="footer text-center">© Copyright 2019 Jennipher Samms</p>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
For better practice please go through this link
I have a header created in index.html and a separate page in test.html. I'm able to use scripts on the index.html page but not on the test.html page I can't seem to find out why.
In the following file the console log logs the test statement and i'm able to see it in the browser.
Index.html:
<html lang="en">
<head>
<base href="/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Main Angular Files -->
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-route.js"></script>
<script src="assets/js/angular-animate.js"></script>
<!-- Angular Config/Routes -->
<script src="app/app.js"></script>
<script src="app/routes.js"></script>
<!-- Angular Controllers -->
<script src="app/controllers/userCtrl.js"></script>
<script src="app/controllers/mainCtrl.js"></script>
<script src="app/controllers/emailCtrl.js"></script>
<script src="app/controllers/managementCtrl.js"></script>
<script> console.log('test'); </script>
<!-- Angular Services -->
<script src="app/services/userServices.js"></script>
<script src="app/services/authServices.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<!-- Cascade Style Sheets -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<title>MEAN Stack App</title>
</head>
<body ng-app="userApp" ng-controller="mainCtrl as main" ng-show="main.loadme" ng-cloak>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 page-scroll" href="/">MEAN Stack</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden active">
</li>
<li class="dropdown">
<a ng-show="!main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
<a ng-show="!main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/dashboard/{{ main.userid }}">Dashboard</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/mytests/{{ main.userid }}">My tests</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/comments">Comments</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/subscriptions">Subscriptions</a>
</li>
<li class="dropdown">
<a ng-show="main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/recruitafriend">Invite friend and earn MONEY</a>
</li>
<li class="dropdown">
<a ng-show="main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hello {{ main.username }} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="#" ng-click="main.logout();">Logout</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn && main.authorized" class="page-scroll" href="/management">Management</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn && main.authorized" class="page-scroll" href="/orders">Orders</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/profile">Hello {{ main.username }}</a>
</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="">
<a ng-show="!main.isLoggedIn" class="page-scroll" href="#">About</a>
</li>
<li class="">
<a ng-show="!main.isLoggedIn" class="page-scroll" href="#">Help</a>
</li>
<li class="">
<a ng-show="!main.isLoggedIn" class="page-scroll" href="/login">Login</a>
</li>
<li class="">
<a ng-show="!main.isLoggedIn" class="page-scroll" href="/register">Register</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header ng-show="main.home">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">David Acosta</div>
<div class="intro-heading">MongoDB, ExpressJS, AngularJS, NodeJS</div>
<a ng-show="!main.isLoggedIn" href="/login" class="page-scroll btn btn-xl">Sign In</a>
<a ng-show="!main.isLoggedIn" href="/register" class="page-scroll btn twitterbtn">Register</a>
<a ng-show="main.isLoggedIn" href="#" ng-click="main.logout();" class="page-scroll btn btn-xl">Logout</a>
<a ng-show="main.isLoggedIn && main.authorized" href="/management" class="page-scroll btn facebookbtn">View</a>
</div>
</div>
</header>
<section id="services">
<div class="container">
<div class="row">
<!-- Angular View -->
<div ng-view></div>
<!-- Angular View -->
</div>
</div>
</section>
<!-- Portfolio Grid Section -->
<section ng-show="main.home" id="portfolio" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">About This Page</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="glyphicon glyphicon-film"></span>
<h4 class="service-heading">YouTube</h4>
<p class="text-muted">Ensure you check out the YouTube video series associated with this web page. Visit:
https://www.youtube.com/playlist?list=PL3vQyqzqjZ637sWpKvniMCxdqZhnMJC1d
</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-usd"></span>
<h4 class="service-heading">Facebook</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-save"></span>
<h4 class="service-heading">Github</h4>
<p class="text-muted">Ensure you check out the GitHub page associated with this web page. Visit:
https://github.com/gugui3z24
</p>
</div>
</div>
</div>
</section>
<footer ng-show="main.home">
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="copyright">Copyright © David Acosta</span>
</div>
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li><i class="fa fa-twitter"></i>
</li>
<li><i class="fa fa-facebook"></i>
</li>
<li><i class="fa fa-linkedin"></i>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-inline quicklinks">
<li>Privacy Policy
</li>
<li>Terms of Use
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- BootstrapJS Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button ng-hide="main.hideButton" type="button" ng-click="main.endSession();" class="close" data-dismiss="modal">×</button>
<!-- Modal Header -->
<h4 class="modal-title">{{ main.modalHeader }}</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p>{{ main.modalBody }}</p>
<div ng-show="main.hideButton" class="dizzy-gillespie"></div>
</div>
<div class="modal-footer">
<!-- Modal 'Yes' & 'No' Buttons -->
<button type="button" ng-hide="main.hideButton" ng-click="main.renewSession();" class="btn btn-primary" data-dismiss="modal">Yes</button>
<button type="button" ng-hide="main.hideButton" ng-click="main.endSession();" class="btn btn-danger" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<!-- BootstrapJS Modal -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery-3.1.1.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
The test.html won't execute the code within the script tags. But the h1 will show.
Test.html:
<div>
<h1> Hello Test </h1>
<script type="text/javascript">
console.log('2');
</script>
</div>
If you do not use jquery, Angular uses jqlite. once view is loaded, than inspect it in chrome. You will not find script tag in view.Because Angular don't what to do with script tag hence removes it. When angular detects jquery, it will use jquery instead jqlite for dom manipulation and jquery treat the script tag as special.
< <script src="path/jquery.js"></script>
<!-- Main Angular Files -->
<script src="assets/js/angular.js"></script>
<div>
<h1> Hello Test </h1>
<script type="text/javascript">
console.log('2');
</script>
</div>