I am including header and footer file in home.ejs file in my project but I want to pass a string that will be a CSS stylesheet file name , like I am including that header file in my home.ejs file so when I include I want to pass a string to include() and add it to href of my link tag in header.ejs file in that way I can add diff stylesheet for diff ejs files
the link tag above which I have commented // custom stylesheet that's the link tag
code for header.ejs file
<!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">
<!-- fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Reggae+One&display=swap" rel="stylesheet">
<!-- boostrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- custom CSS stylesheet -->
<link rel="stylesheet" href="/css/styles.css" >
<title>Yuvraj</title>
</head>
<body>
<nav class="navbar navbar-expand-lg ">
<div class="container-fluid">
<a class="navbar-brand" href="#">Yuvraj Agarkar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<img class="navbar-toggler-icon" src="../images/More.svg" alt="not found" style="height: 50px; width: 50px;">
<!-- <span class="navbar-toggler-icon"></span> -->
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/newsletter">Newsletter</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Posts</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">fundamentals</a></li>
<li><a class="dropdown-item" href="#">top iOS tips</a></li>
<li><a class="dropdown-item" href="#">General programmic habbits</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
code for home.ejs file , here I want to pass that string name
<%- include('partials/header') -%>
<div class="introDiv">
<div class="intro">
<h2 class="introLine">I am a aspiring <span class="profSpan"> </span> <span class="cur">|</span></h2>
</div>
<div class="imageDiv">
<img class="svgImages" src="/images/catSleeping.svg" alt="Not found">
<h4 class="hustle">**Keep Hustling**</h4>
</div>
</div>
<div class="container">
<div class="row color">
<div class="col-sm-12 col-lg-6 article">
<img src="/images/laptop-code.jpg" alt="article-image" class="article-img">
<h3>
Foundation of programming
</h3>
<h5>
lorem ipsm is the dummy rext rerbsite the dummy rext rerbsite the dummy rext rerbsite
</h5>
</div>
<div class="col-sm-12 col-lg-6 article">
<img src="/images/man-code.jpg" alt="article-image" class="article-img">
<h3>
Basics of programming
</h3>
<h5>
lorem ipsm is the dummy rext rerbsite the dummy rext rerbsite the dummy rext rerbsite
</h5>
</div>
</div>
</div>
<%- include('partials/footer') -%>
Related
I'm new to this. I have a working navbar with dropdown that has 3 links. After expansion, the dropdown links display a card upon clicking (cards show contact info), and all works fine...except for when I go to mobile view below <576px.
I've used a template with CDNs directly from Boostrap for CSS, Javascript bundle, and Icons.
Why does this work, but it becomes not responsive once below <576px ????
Soon as I go greater than >576px it works again. This is driving me nuts.
<!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" />
<!-- Bootstrap CSS CDN -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<!-- Bootstrap Icons CDN -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css"
/>
<style>
.bg-dark-transparent {
background-color: rgba(0, 0, 0, 0.5);
}
</style>
<title>Bio Website</title>
</head>
<body class="vh-100 bg-dark text-light">
<!-- NAVIGATION -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container-fluid">
<span class="badge bg-danger shadow">Joe Noobie</span>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarMain"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMain">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" style="z-index: 10">
<li class="nav-item">
<a
href=""
class="nav-link active"
data-bs-toggle="collapse"
data-bs-target=".multi-collapse"
aria-expanded="false"
aria-controls="about contact"
>Info</a
>
</li>
<li class="nav-item">
<a
href="#about"
role="button"
class="nav-link"
data-bs-toggle="collapse"
aria-expanded="false"
aria-controls="about"
>About</a
>
</li>
<li class="nav-item">
<a
href="#contact"
role="button"
class="nav-link"
data-bs-toggle="collapse"
aria-expanded="false"
aria-controls="contact"
>Contact</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- HEADER -->
<header class="container fixed-top text-end mt-5">
<!-- HEADER > About & Contact dropdown content -->
<div class="row mt-3">
<!-- About -->
<div class="col-md-6 mt-3">
<div class="collapse multi-collapse" id="about">
<div class="card card-body text-start shadow bg-dark-transparent">
<h5 class="card-title text-danger">About</h5>
<div class="card-text">
<h3 class="text-white-50 ms-3">Joe Noobie</h3>
<ul class="list-unstyled ms-5">
<li>CEO of Noobie Media</li>
<li>Web Developer</li>
<li>Tech Support</li>
<li>Graphic Designer</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Contact -->
<div class="col-md-6 mt-3">
<div class="collapse multi-collapse" id="contact">
<div class="card card-body text-start shadow bg-dark-transparent">
<h5 class="card-title text-danger">Contact</h5>
<div class="card-text">
<h3 class="text-white-50 ms-3">Get in touch:</h3>
<ul class="list-unstyled ms-5">
<li><i class="bi bi-house me-2 text-danger"></i>City: The City</li>
<li><i class="bi bi-signpost me-2 text-danger"></i>Street: 21 Jump Str.</li>
<li><i class="bi bi-telephone me-2 text-danger"></i>Phone: +555-555-555</li>
<li>
<i class="bi bi-envelope me-2 text-danger"></i>Email: JoeNoobie#Noobalicious.com
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
Remove the "fixed-top" class from nav and header tags, removing this class makes the tags rendered one-after the other in the default "static" positioning way.
<nav class="navbar navbar-expand-md navbar-dark">
<header class="container text-end mt-5">
I am having an issue implementing a tab with a drop-down nav as demonstrated in the Bootswatch examples. I should note that this does not work on the demo page either for me, but the way it seems to be written implies that it should work.
My end goal is that on one of my tabs I have a drop-down and populate the tab body by the selection made. The other tabs work as expected, but the drop-down doesn't display the expected div contents.
Below is basically the demo code from the Bootswatch page, with some of the fluff pulled out to simplify it.
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/cerulean/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="/">Title</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01"
aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Settings <span class="sr-only">(current)</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</span></a>
</li>
</ul>
</div>
</nav>
</header>
<main role="main" class="flex-shrink-0">
<div class="container" id="settingsapp">
<div class="page-header" id="banner">
<h1>Settings</h1>
</div>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" style="">
<a class="dropdown-item" data-toggle="tab" href="#dropdown1">Action</a>
<a class="dropdown-item" data-toggle="tab" href="#dropdown2">Another action</a>
</div>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade show active" id="home">
<p>Home tab content.</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Profile tab content.</p>
</div>
<div class="tab-pane fade" id="dropdown1">
<p>Dropdown 1 content.</p>
</div>
<div class="tab-pane fade" id="dropdown2">
<p>Dropdown 2 content.</p>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.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>
My ability to work with Bootstrap and Bootswatch is limited to finding something which does what I need and then editing it to look as I want, so this is a little out of my depth. I am learning, however, each time.
With Bootstrap there is usually Jquery.js and bootstrap.js <script> tags included that takes care of the user interactions . I think you might be missing those .
<head>
<meta charset="utf-8">
<title>Bootswatch: Cerulean</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../4/cerulean/bootstrap.css" media="screen">
<link rel="stylesheet" href="../_assets/css/custom.min.css">
<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>
A collaborator helped me figure this out. I was missing the "data-toggle" argument within the dropdown-menu div:
<div class="dropdown-menu" style="">
<a class="dropdown-item" href="#dropdown1">Action</a>
<a class="dropdown-item" href="#dropdown2">Another action</a>
</div>
becomes:
<div class="dropdown-menu" style="">
<a class="dropdown-item" data-toggle="tab" href="#dropdown1">Action</a>
<a class="dropdown-item" data-toggle="tab" href="#dropdown2">Another action</a>
</div>
Now I guess I'll see how I can submit a PR over on Bootswatch since this came off their examples.
I have edited the question above to include the corrected HTML.
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 html code working with bootstrap 4. In my case when navbar toggle button clicked the navbar open and hidden automatically. How to manually open and hidden navbar when clicked? Thanks anyone.
<title>SuperEvent</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<img src="img/iklan.JPG" class="iklan float-right">
</div>
</div>
<div class="cleafix"></div>
<nav class="navbar navbar-expand-lg " id="nav" >
<a class="navbar-brand" href="#">Super Event</a>
<button class="navbar-toggler custom-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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
This can help:
<!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.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.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="#">Link</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>
</ul>
</div>
</nav>
<br>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
<p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>
</div>
</body>
</html>
For more details follow by link - https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp
If you want to use Bootstrap 5, include just this in your HTML file:
<script src="js/bootstrap.js"></script>
Implementation example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark">
<div class="container-fluid">
<!--LOGO IMAGE-->
<a class="navbar-brand" href="#">
<img src="images/img_avatar1.png" alt="Avatar Logo" style="width:50px;" class=" rounded-pill">
</a>
<a class="navbar-brand" href="#"><span style="font-size: 30px;">Alex Luca</span></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" aria-expanded="false" aria-controls="collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!--Using justify-content-end, you can align the links at the right-->
<div class="collapse navbar-collapse justify-content-end text-center" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item px-3">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown px-3">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
<li><a class="dropdown-item" href="#">A third link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid mt-3">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu in the navbar.</p>
</div>
<!--For the dropdown menu and collapsed meniu-->
<script src="js/bootstrap.js"></script>
<script src="js/script.js"></script>
</body>
</html>
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>