I want to align my dropdown menu (responsively) on the right side of the page while keeping the "Create Event" button on the left. The docs call for adding .dropdown-menu-end to the ul class--which didn't work--so I've added it to every class for my dropdown and still no luck.
What's going on with my code?
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
</head>
<body>
<div>
<a class="btn btn-primary mb-2" href="/events/new">Create event</a>
<span class="dropdown dropdown-menu-end">
<a class="btn btn-outline-primary dropdown-toggle bi bi-filter mb-2 dropdown-menu-end" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Events
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="/events">All Events</a></li>
<li><a class="dropdown-item" href="/events/?future=true">Upcoming Events</a></li>
<li><a class="dropdown-item" href="/events/?past=true">Past Events</a></li>
</ul>
</span>
</div>
<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>
You can use Bootstrap's flex utilities to justify the buttons with space between them. I've added d-flex and justify-content-between to the parent element.
The reason your approach didn't work is because that documentation refers to dropdown alignment with respect to the button, not the button with respect to the page (or parent element).
I've also converted your surrounding span to a div. Spans are usually associated with inline content. If nothing else it makes your markup more intuitive to the reader. It also makes the code auto-format a bit more cleanly. Compare your snippet to mine--I used the Tidy button on both.
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
</head>
<body>
<div class="d-flex justify-content-between">
<a class="btn btn-primary mb-2" href="/events/new">Create event</a>
<div class="dropdown dropdown-menu-end">
<a class="btn btn-outline-primary dropdown-toggle bi bi-filter mb-2 dropdown-menu-end" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Events
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="/events">All Events</a></li>
<li><a class="dropdown-item" href="/events/?future=true">Upcoming Events</a></li>
<li><a class="dropdown-item" href="/events/?past=true">Past Events</a></li>
</ul>
</div>
</div>
<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>
Related
I created a dropdown list by follow code, but in implementation I can't see its sub-item, actually its item "game" in this code doesn't have shown.
Is any other CDN required?
implementation's pic
<head>
<title>...</title>
<link href="{% static 'auctions/styles.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
...................................................
<ul class="nav justify-content-end">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Category</a>
<div class="dropdown">
<a class="dropdown-item" href="#"> game</a>
<a class="dropdown-item" href="#"> tech</a>
<a class="dropdown-item" href="#"> learn</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="">Active Listings</a>
</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-dropdown/2.0.3/jquery.dropdown.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
(bootstrap.min.js) CDN shouldn't be in <head> it's should be at the end of the <body>.
I've been trying to implement wow.js into my HTML code but I'm having trouble making it work. Am I missing script loads or loading the wrong scripts? What might I be doing wrong? Maybe I couldn't initiate wow.js the right way? The code is given below, I could've excluded the nav part out since it will not use animations, but I didn't want to cut any code out. The animation is called in the bottom div part.
Thanks for any help in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta hhtp-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Okan Sen</title>
<link rel="shortcut icon" type="image/jpg" href="OKANSENLogoWineRed.jpg">
<!-- ANIMATE CSS LINK (REQUIRED) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="global.css">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/#popperjs/core#2.4.0/dist/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- WOW ANIMATION LIB LINK -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
// WOW INIT
new WOW().init();
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
<div class="container-fluid">
<a class="navbar-brand" href="#">OKAN</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" href="#" tabindex="-1" aria-disabled="true">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-fluid bg animated wow zoomIn">
</div>
<section class="sec1 animated wow zoomIn">
<h1>LELELELELEL</h1>
</section>
</body>
</html>
I have created vary basic working example
<head>
<link rel="stylesheet" type="text/css"
href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
new WOW().init();
</script>
</head>
<body>
<div class="wow bounce">
Content to Reveal Here
</div>
</body>
Edit: Your Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta hhtp-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Okan Sen</title>
<link rel="shortcut icon" type="image/jpg" href="OKANSENLogoWineRed.jpg">
<!-- ANIMATE CSS LINK (REQUIRED) -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="global.css">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/#popperjs/core#2.4.0/dist/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- WOW ANIMATION LIB LINK -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
// WOW INIT
new WOW().init();
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
<div class="container-fluid">
<a class="navbar-brand" href="#">OKAN</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" href="#" tabindex="-1" aria-disabled="true">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-fluid bg animated wow zoomIn">
</div>
<section class="sec1 animated wow zoomIn">
<h1>LELELELELEL</h1>
</section>
</body>
</html>
Edit 2: Some Explanation
When I looked at the version of animate.css 4.1.1, as per link it's not compatible. and this
So I used a bit older version.
Some recommended AOS for animation
And for your last question, you can use your own styles as long as we
are not overriding some original styles from animation
I was trying to create a navbar component in a .js file so I can use it on multiple pages(not allowed to use react or other libraries for this project). I copied the navbar from bootstrap and pasted it in my navBar.js.
The CSS style worked fine but when I clicked the button the dropdown menu didn't show up.
Could anyone tell me what's the problem and how can I solve it?
another question, I saw some online comments say don't use web components. Should I keep on using it or just pasted the navbar into my index.html(in where the dropdown button works fine)
Here is my navBar.js:
const navTemplate = document.createElement('template');
navTemplate.innerHTML =
`
<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">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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" 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" href="#" tabindex="-1" aria-disabled="true">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>
`;
class NavBar extends HTMLElement{
constructor(){
super();
this.attachShadow({mode:'open'});
this.shadowRoot.appendChild(navTemplate.content);
}
connectedCallback(){
}
}
window.customElements.define('nav-bar', NavBar);
And this is my index.html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<nav-bar></nav-bar>
<script src='../components/navBar.js'></script>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
-->
</body>
</html>
I solved this problem by adding below to carousel.css, Shadow DOM works now!
.dropdown:hover .dropdown-menu {display: block;}
The problem seems to be that the dropdowns aren't initialized correctly. You could do that yourself with new bootstrap.Dropdown(dropdownToggleEl) in connectedCallback,
but that leaves you with work for opening, closing and triggering events on clicks and such. The "culprit" is Shadow DOM.
This is one of those cases where we would suggest to not use Shadow DOM. You are just wraping the layout into a component and even importing the CSS. Unless there is a reason to use Shadow DOM (like custom CSS encapsulation), skip it. It's fine to have components without Shadow DOM alongside others that do.
Or you could alternatively use slots. Replace the li tags in your components template
...
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<slot></slot>
</ul>
...
</div>
...
and declare them with the markup of your component in the index.html:
<nav-bar>
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</nav-bar>
I am creating a portfolio website using Bootstrap 4, animate.css, typed.js and custom css.
Everything works fine when using localhost in VS Code but when viewing it in Github pages all styles and JS do not work. I am sure my links in head tag are correct but other opinions would be great! Please see code below.
<html lang="en">
<head>
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<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" href="/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,400,700,900|Titillium:100,200,400,700,900+Web&display=swap"
rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- JS -->
<script src="/js/typed.js"></script>
<title>Ryan Mottram Online Portfolio</title>
</head>
<body>
<!-- NAV BAR START -->
<nav class="navbar navbar-expand-lg navbar-light sticky-top animated slideInDown">
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<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="me.html">Ryan Mottram</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Projects
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="projects.html">View All</a>
<a class="dropdown-item" href="wally-project.html">Where's Wally?</a>
<a class="dropdown-item" href="haskell-te-project.html">Haskell Text Editor</a>
<a class="dropdown-item" href="gtb-project.html">Going to Boston</a>
<a class="dropdown-item" href="pathfinder-project.html">Path Finder</a>
<a class="dropdown-item" href="webauth-project.html">Web Authoring Assessment</a>
<a class="dropdown-item" href="cipher-project.html">Caesar Cipher</a>
<a class="dropdown-item" href="algorithms-project.html">Searching and Sorting Algorithms</a>
<a class="dropdown-item" href="shufflegame-project.html">Shuffle Game</a>
<a class="dropdown-item" href="compsci-project.html">Computer Science Project</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- NAV BAR END -->
<div class="jumbotron jumbotron-fluid animated">
<div id="container">
<h2 class="typing-anim"><span class="type"></span></h2>
</div>
</div>
<br><br>
<!-- <div id="particles-js"> -->
<div class="card">
<img src="/assets/me_hs.jpg" class="rounded-circle img-fluid animated fadeIn">
<div class="card-body"> <br>
<h1 class="animated slideInLeft">Who Am I?</h1> <br>
<p class="card-text animated slideInRight">An undergraduate originally from Lowestoft attending the University of Lincoln, UK studying
Computer Science. Giving you an insight to what I have done/doing/can do and would like to do for myself or even you?
<br> <br> So what you waiting for? Take a look at what I have done or read more about me and make your own opinion.</p>
</div>
</div>
<!-- </div> -->
<script src="/js/particles.js"></script>
<script src="/js/app.js"></script>
<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>
<script src="/js/script.js"></script>
</body>
</html>
It looks like there is a problem with your paths.
So this is what GitHub is trying to get:
https://rmottram.github.io/js/script.js
What you want is probably:
https://rmottram.github.io/Portfolio/js/script.js
So I would suggest changing your paths from
/js/typed.js
to
./js/typed.js
Thank you both for your input, I turned out I needed to place './' before the path as Damien suggested, again thank you both!
I'm trying to make a simple sign in program for use in a podium at my office. All that this program is responsible for is allowing clients to put in their name, username, description of their problem, and click submit. this information will then get put into a CSV.
This all works fine, however the Bootstrap 4 dropdown menu I have included is always stuck open. It defaults to expanded when the page loads, and remains open regardless of clicking the button or not.
My code is almost exactly the same as the example code shown on Bootstraps site:
<div class="row">
<div class="col-sm">
<div class="dropdown">
<button class="btn btn-secondary btn btn-block dropdown-toggle" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Reason for your visit
</button>
<div class="col-sm">
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="display: block">
<a class="dropdown-item" href="javascript:dropDownSelection('Scantron Dropoff')">Scantron dropoff</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Scantron Pickup')">Scantron pickup</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Wifi issues')">Wifi issues</a>
<a class="dropdown-item" href="javascript:dropDownSelection('DUO Enrollment issues')">DUO Enrollment issues</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Password Issues')">Password issues</a>
</div>
</div>
</div>
</div>
</div>
And here are my imports:
<script src="node_modules/jquery/dist/jquery.js"></script>
<link rel="stylesheet"
href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="custom.css">
EDIT: This issue seems to only exist within the Electron/Node.JS enviornment. running my html/css within chrome (by launching the index.html file) works as expected and does not show any errors in the developer console.
"the Bootstrap 4 dropdown menu I have included is always stuck open"
The dropdown remains "open" because it has inline style "style:display:block". Remove this and follow the normal dropdown structure...
<div class="col-sm">
<div class="dropdown">
<button class="btn btn-secondary btn btn-block dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Reason for your visit
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="javascript:dropDownSelection('Scantron Dropoff')">Scantron dropoff</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Scantron Pickup')">Scantron pickup</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Wifi issues')">Wifi issues</a>
<a class="dropdown-item" href="javascript:dropDownSelection('DUO Enrollment issues')">DUO Enrollment issues</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Password Issues')">Password issues</a>
</div>
</div>
</div>
Demo: https://www.codeply.com/go/ViKYGOigbL
You have to import bootstraps.bundle.js, too. Otherwise it will not toggle:
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
take note that you're importing jquery before importing boottsraps js-file
You also have to remove style="display: block" from your dropdown-menu. This display: block; is the reason why your menu stucks in expanded position.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>
<!-- imported jquery, bootstraps css and bootstraps bundle.js -->
<div class="row">
<div class="col-sm">
<div class="dropdown">
<button class="btn btn-secondary btn btn-block dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Reason for your visit
</button>
<div class="col-sm">
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- removed style="display: block;" -->
<a class="dropdown-item" href="javascript:dropDownSelection('Scantron Dropoff')">Scantron dropoff</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Scantron Pickup')">Scantron pickup</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Wifi issues')">Wifi issues</a>
<a class="dropdown-item" href="javascript:dropDownSelection('DUO Enrollment issues')">DUO Enrollment issues</a>
<a class="dropdown-item" href="javascript:dropDownSelection('Password Issues')">Password issues</a>
</div>
</div>
</div>
</div>
</div>