bootstrap dropdown doesn't show dropdowns on click - javascript

I've been learning bootstrap and I have a very basic page I'm working on to learn hands on with. I tried adding in a dropdown and it doesn't dropdown at all when it is clicked, I checked to forum and the main thing was people not having the bootstrap js link, so I made sure I included that, and I'm pretty sure that I have all the proper links for it to work. (code is being weird in snippet, works normally on everything else) Thanks for the help, my code is:
.div1 {
background-color:#80bfff;
}
.div2 {
background-color:#ccffff;
}
.div3 {
background-color:#80bfff;
}
.row {
height: calc(100vh - 300px);
}
#main {
background-color: #3333ff;
}
#main_head {
height: 150px;
margin: 0;
}
#main_foot {
height: 150px;
background-color:#3333ff;
margin: 0;
position: absolute;
left: 0;
right: 0;
}
h1 {
color: black;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
<div class="btn-group-vertical">
<h4>These buttons don't work yet because I haven't implemented anything yet</h4>
<button type="button" class="btn btn-warning">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<button type="button" class="btn btn-success">Button 3</button>
</div>
</div>
<div class="col-sm-8 div2">
</div>
<div class="col-sm-2 div3">
<div class="container">
<h4>This is a dropdown menu</h4>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Click the dropdown menu
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3t</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>


First you'r calling two bootstrap version one in the head and one on the footer , second you need to call popper.js before bootstrap.js
see snippet
.div1 {
background-color:#80bfff;
}
.div2 {
background-color:#ccffff;
}
.div3 {
background-color:#80bfff;
}
.row {
height: calc(100vh - 300px);
}
#main {
background-color: #3333ff;
}
#main_head {
height: 150px;
margin: 0;
}
#main_foot {
height: 150px;
background-color:#3333ff;
margin: 0;
position: absolute;
left: 0;
right: 0;
}
h1 {
color: black;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
<div class="btn-group-vertical">
<h4>These buttons don't work yet because I haven't implemented anything yet</h4>
<button type="button" class="btn btn-warning">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<button type="button" class="btn btn-success">Button 3</button>
</div>
</div>
<div class="col-sm-8 div2">
</div>
<div class="col-sm-2 div3">
<div class="container">
<h4>This is a dropdown menu</h4>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Click the dropdown menu
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3t</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
</div>
</body>
</html>


I think you sould try using another CDN files, this worked for me
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Related

Using the Same jQuery Function in Separate Buttons

I'm trying to get each button to change color on click. However, I want to separate buttons 1-3 from buttons 4-6 so they are independent from each other. I want to be able to click buttons 1-3 and they change color without affecting 4-6 and vice versa. My code is attached. I'm sure this is very simple but my feeble mind can't figure it out :-) Any suggestions?
$(document).ready(function(){
$("button").click(function() {
$(".featuredBtn.active").removeClass("active");
$(this).addClass("active");
});
});
$(document).ready(function(){
$("button").click(function() {
$(".featuredBtn2.active").removeClass("active");
$(this).addClass("active");
});
});
.featuredBtn.active,
.featuredBtn2.active {
background-color: #bf9471;
color: white;
}
.featuredBtn,
.featuredBtn2 {
width: 250px;
height: 50px;
color: #8c8c8c;
font-weight: 700;
background-color: #f4efeb;
border: none;
letter-spacing: 2px;
outline: none;
}
.row {
margin-bottom: 40px;
}
<!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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="row">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
<button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
<button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
</div>
</div>
<div class="row2">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
<button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
<button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
</div>
</div>
</body>
</html>

Instead of applying both handlers to all instances of $('button'), specifically target the instances you want. Your current markup separates them by class, so you can use $(".featuredBtn") and $(".featuredBtn2") to identify those elements:
$(document).ready(function(){
$(".featuredBtn").click(function() {
$(".featuredBtn.active").removeClass("active");
$(this).addClass("active");
});
});
$(document).ready(function(){
$(".featuredBtn2").click(function() {
$(".featuredBtn2.active").removeClass("active");
$(this).addClass("active");
});
});
.featuredBtn.active,
.featuredBtn2.active {
background-color: #bf9471;
color: white;
}
.featuredBtn,
.featuredBtn2 {
width: 250px;
height: 50px;
color: #8c8c8c;
font-weight: 700;
background-color: #f4efeb;
border: none;
letter-spacing: 2px;
outline: none;
}
.row {
margin-bottom: 40px;
}
<!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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="row">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
<button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
<button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
</div>
</div>
<div class="row2">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
<button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
<button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
</div>
</div>
</body>
</html>

Simple, just use the classes that you have already supplied in the selector.
Also, note that you only need one ready handler, not two.
$(document).ready(function(){
$("button.featuredBtn").click(function() {
$(".featuredBtn.active").removeClass("active");
$(this).addClass("active");
});
$("button.featuredBtn2").click(function() {
$(".featuredBtn2.active").removeClass("active");
$(this).addClass("active");
});
});
.featuredBtn.active,
.featuredBtn2.active {
background-color: #bf9471;
color: white;
}
.featuredBtn,
.featuredBtn2 {
width: 250px;
height: 50px;
color: #8c8c8c;
font-weight: 700;
background-color: #f4efeb;
border: none;
letter-spacing: 2px;
outline: none;
}
.row {
margin-bottom: 40px;
}
<!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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="row">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
<button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
<button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
</div>
</div>
<div class="row2">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
<button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
<button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
</div>
</div>
</body>
</html>

Your error is that you add both click handlers to every button instead of only adding the appropriate handler to the appropriate buttons. So every time you push a button, you call both handlers consecutively, rather than just the handlers for that button set.
Replacing the first $("button") with $(".featuredBtn") and the second $("button") with $(".featuredBtn2") achieves what you're tying to achieve.
Note that there's no need to call $(document).ready() twice. You can just call it once combine the code for both handlers in that single call. Technically, this is not an error, but your code is cleaner if you just call $(document).ready() here.
Demo
$(document).ready(function(){
$(".featuredBtn").click(function() {
$(".featuredBtn.active").removeClass("active");
$(this).addClass("active");
});
$(".featuredBtn2").click(function() {
$(".featuredBtn2.active").removeClass("active");
$(this).addClass("active");
});
});
.featuredBtn.active,
.featuredBtn2.active {
background-color: #bf9471;
color: white;
}
.featuredBtn,
.featuredBtn2 {
width: 250px;
height: 50px;
color: #8c8c8c;
font-weight: 700;
background-color: #f4efeb;
border: none;
letter-spacing: 2px;
outline: none;
}
.row {
margin-bottom: 40px;
}
<!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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="row">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
<button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
<button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
</div>
</div>
<div class="row2">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
<button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
<button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
</div>
</div>
</body>
</html>

Jquery code to switch navigation tabs not working

I am creating a website, using html, bootstrap css and jquery.
This is the html code:
<!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">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Exo&display=swap">
<link rel="stylesheet" href="styles.css">
<title>TimeGuard</title>
</head>
<body>
<div class="main">
<div>
<nav class="navbar">
<ul id="firstul" class="nav nav-tabs nav-justified">
<li class="nav-item active" style="width:200px"><a class="nav-link"
href="#dashboard">DASHBOARD</a></li>
<li class="nav-item inactive" style="width:200px;"><a class="nav-link"
href="#reports">REPORTS</a></li>
<li class="nav-item inactive" style="width:500px;"><a class="nav-link"
href="#addict">ADDICT SETTINGS</a></li>
</ul>
</nav>
</div>
<div class="tab-content" style="padding:20px;">
<div class="tab-pane fade show active" role="tab-panel" id="dashboard">
<div>
<h1>OVERVIEW</h1>
<div class="container-fluid box">
<div class="row justify-content-around">
<div class="overview col-3">
<div style="font-size:79px;">
00:00:00
</div>
</div>
<div class="overview col-3">
<div style="font-size:79px;">
00
</div>
</div>
</div>
<div class="row justify-content-center" style="margin-top:50px;">
<div class="overview col-3">
<div style="font-size:79px;">
00:00:00
</div>
</div>
</div>
</div>
</div>
<div>
<h1>TARGET WEBSITES</h1>
<div class="box container-fluid">
<div class="row justify-content-center">
<div class="tarweb col-7">
TARGET WEBSITES
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" role="tab-panel" id="reports">
<div class="box">
</div>
</div>
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
Following is the jquery code, with a purpose to switch the between the navigation tabs (DASHBOARD, REPORTS and ADDICT SETTINGS). But the action does not take place on all the tabs.
$(document).ready(function(){
$("#firstul li.inactive").on("click",function(){
$("#firstul li.active").removeClass("active").addClass("inactive");
$(this).removeClass("inactive").addClass("active");
});
});
I will be glad if someone could help me out.
Also this is the CSS code if required:
body{
font-family: 'Exo', sans-serif;
}
.main{
background-color:rgb(4, 209, 4);
margin:30px;
border-radius:10px;
padding-top: 0px;
padding-bottom:20px;
}
.navbar{
background-color:white;
padding-left:0px;
padding-right:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
}
.nav-link{
color:black;
}
li{
font-size:25px;
text-align:center;
}
li.active{
background-color: rgb(4, 209, 4);
color:black;
border:5px double;
border-bottom:none;
}
li.inactive{
background-color: green;
}
.box{
border:1px solid rgb(92, 86, 86);
border-radius:10px;
padding:20px;
}
.overview{
background-color: white;
padding:5px;
justify-content:center;
border-radius:50px;
text-align:center;
}
.tarweb{
background-color: white;
padding:5px;
justify-content:center;
border-radius:50px;
}

Try to have look at this entry
I don't think that removing and adding classes is the way to go.
Or is this what you want?

Try:
$(document).ready(function(){
$("#firstul li").on("click",function(){
$("#firstul li").removeClass("active").addClass("inactive");
$(this).removeClass("inactive").addClass("active");
});
});
The problem in your solution is that you do not add the click handler to the active tab item. In the solution above we:
Add the handler to all tab items
On click, inactivate all tab items
Activate only the clicked item

How to make textareas sortable? do i have to put textareas inside lis?

Here is my jquery:
$(".time-block .listgroup").sortable({
connectWith: $(".time-block .listgroup"),
items: "> textarea",
placeholder: "highlight",
//helper: "clone",
update: function(event){
var changeArr= []
$(this).each(function(){
changeArr.push({
text: $(this)
.children()
.find("textarea")
.val()
})
})
// update on localstorage object and save and get on page refresh
saveEvent()
}
})
Here is what the html looks like:
<div class="container">
<!-- Timeblocks go here-->
<div class ="time-block">
<div class ="hour" id="9"> 9 AM</div>
<ul class= "listgroup">
<textarea name="" id="" cols="80" rows="5"></textarea>
</ul>
<button class ="saveBtn"><i class="fas fa-save"></i></button>
</div>
<div class ="time-block">
<div class ="hour" id="10"> 10 AM</div>
<ul class= "listgroup">
<textarea name="" id="" cols="80" rows="5"></textarea>
</ul>
<button class ="saveBtn"><i class="fas fa-save"></i></button>
</div>
I believe I put the appropriate CDNs at the bottom of the body:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-touch-punch#0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="assets/script.js"></script>
</body>
I'm a beginner trying to experiment with different functionalities and I don't really understand what is going wrong here. Appreciate the help in advance.

The jQuery UI Sortable needs to be applied to the parent element that contains the items you want sorted. I think you will get successful results when you create the container in the right place. Application test image, sample codes and references are available below:
$(function () {
$('#container').sortable({
placeholder: "ui-state-highlight",
helper: 'clone'
});
})
#container {
margin-left: 300px;
margin-top: 100px;
position: relative;
}
.newStep {
cursor: pointer;
float: right;
font-size: 10px;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: -12px;
margin-top: 0 !important;
padding: 3px 7px;
width: 80px !important;
}
.step {
border-top-left-radius: 0 !important;
font-family: lucida Grande;
margin: 4px;
}
.stepNumber {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
left: -20px;
padding: 10px;
position: absolute;
top: 3px;
}
.inset {
color: white;
background: none repeat scroll 0 0 #000000;
border-radius: 5px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</head>
<body>
<div style="float:left; clear:both;" id="container">
<div style="position: relative;" class="sortable">
<span class="stepNumber inset">1</span>
<textarea placeholder="1 A.M." name="" id="" cols=100 class="step valid" style="margin-left: 10px;"></textarea>
</div>
<div style="position: relative;" class="sortable">
<span class="stepNumber inset">2</span>
<textarea placeholder="2 A.M." name="" id="" cols=100 class="step valid" style="margin-left: 10px;"></textarea>
</div>
<div style="position: relative;" class="sortable">
<span class="stepNumber inset">3</span>
<textarea placeholder="3 A.M." name="" id="" cols=100 class="step valid" style="margin-left: 10px;"></textarea>
</div>
</div>
</body>
</html>
References
jQuery Sortable Post

Consider the following based on the Demo: Sortable | jQuery UI | Include / exclude Items.
$(function() {
function toArray(sort) {
var results = [];
$("li", sort).each(function(i, el) {
if ($(el).hasClass("hour")) {
results.push({
hour: $(el).attr("id"),
details: $(el).next().find("textarea").text()
});
}
});
return results;
}
function saveEvent(string) {
//localStorage.setItem("hours", string);
console.log("Saving", string);
}
$(".time-blocks").sortable({
cancel: ".hour",
handle: ".fa-grip-lines-vertical",
update: function(event) {
saveEvent(JSON.stringify(toArray(this)));
}
});
});
.time-blocks {
list-style-type: none;
margin: 0;
padding: 0;
width: 60%;
}
.time-blocks .ui-widget-header {
padding-left: 1.5em;
}
.time-blocks textarea {
width: calc(100% - 50px);
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<div class="container">
<!-- Timeblocks go here-->
<ul class="time-blocks ui-widget">
<li class="hour" id="9">
<div class="ui-widget-header">9 AM</div>
</li>
<li class="content">
<div class="ui-widget-content">
<i class="fas fa-grip-lines-vertical"></i>
<textarea rows="5">Details 1</textarea>
<button class="saveBtn"><i class="fas fa-save"></i></button>
</div>
</li>
<li class="hour" id="10">
<div class="ui-widget">
<div class="ui-widget-header">10 AM</div>
</div>
</li>
<li class="content">
<div class="ui-widget-content">
<i class="fas fa-grip-lines-vertical"></i>
<textarea rows="5">Details 2</textarea>
<button class="saveBtn"><i class="fas fa-save"></i></button>
</div>
</li>
<li class="hour" id="11">
<div class="ui-widget">
<div class="ui-widget-header">11 AM</div>
</div>
</li>
<li class="content">
<div class="ui-widget-content">
<i class="fas fa-grip-lines-vertical"></i>
<textarea rows="5">Details 3</textarea>
<button class="saveBtn"><i class="fas fa-save"></i></button>
</div>
</li>
</ul>
</div>
You have one primary list. Each List Item has either Hours or Details. We exclude (cancel) the Hours and only worry about sorting the details into Hours.
Since this does not align well, we need a function that can combine the data. This combines the relative data so that we get an Array of Object where the Hours relate to the Details.
Sortable may not be best for this since I suspect you7 only want 1 textarea per hour. There is a chance the User may drag one into another.

How to run function on expand and on close dropdown bootstrap

the following code generates a bootstrap navbar with a notification icon and I want to execute a function when I click the notification button to expand the dropdown and when I close the dropdown how do I do this in javascript?
I have try'd selecting the dropdown and modifying the click function but that executes when you click a element in the dropdown not when you click the button.
#ex4 {
color: white;
width: auto;
}
#ex4 .p1.has-badge:after {
position: absolute;
right: 10%;
top: 8%;
content: attr(data-count);
font-size: 40%;
padding: .2em;
border-radius: 50%;
line-height: 1em;
color: white;
background: rgba(255, 0, 0, .85);
text-align: center;
min-width: 1.5em;
}
form.logout {
padding-left: 10px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap CSS -->
<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">
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Font awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Page style -->
<link rel="stylesheet" href="CSS/index.css">
<!-- Title -->
<title>Social Feed</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Social Feed</a>
<div class="d-flex align-items-center">
<div class="dropdown">
<a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<div id="ex4">
<span class="p1 fa-stack fa-2x has-badge" data-count="0" id="badge">
<i class="p2 fa fa-bell fa-stack-1x xfa-inverse"></i>
</span>
</div>
</a>
<div class="dropdown-menu dropdown-menu-end">
<div id="notifications-header">
<h1>Notifications</h1>
</div>
<div id="notifications">
</div>
</div>
</div>
<form a name="logout" class="logout" action="PHP/Logout.php" method="get">
<button type="submit" class="btn btn-danger">Log Out</button>
</form>
</div>
</div>
</nav>
</body>
</script>
</html>

Hook into the Dropdown events
var myDropdown = document.getElementById('myDropdown')
//expand/open
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something when opened...
})
//hide/close
myDropdown.addEventListener('hide.bs.dropdown', function () {
// do something when closed...
})
Codeply

Random white space beneath my website caused by image and video

In between my main body elements and my footer, there is a bunch of random white space in my website. I've figured out that by removing my cat image and videoplayer, the space goes away. But, of course, I don't want to have to do that, so I was wondering what's creating the white space. The only way I've been able to get rid of it is by REMOVING the video and image. Taking away certain css or all of the css doesn't work.
Sorry in advance for posting all of my code, but the problem is only visible when all of my code is there. Posting text or anything else as a replacement for my code doesn't show the problem. Thats why there's so much code there.
function length() {
var video = document.getElementById("sample");
len = video.duration;
document.getElementById("vidlen").innerHTML = len.toFixed(1);
}
.videoplayer {
position: relative;
right: -400px;
bottom: 290px;
width: 35%;
}
#footer {
position: relative;
bottom: 0;
width: 100%;
height: 2.5rem;
}
#pgselect {
position: absolute;
width: 133.859375px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
}
#catbanner {
position: relative;
left: 470px;
bottom: 260px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster One">
<script type="text/javascript" src="functions.js"></script>
<title>My Webpage</title>
</head>
<body style="background-color:#EBEDF3;">
<div class="videoplayer">
<div class="videoheader">
<div class="card card-body">
<div style="clear: both;" class="card-header">
<div style="font-family:'Faster One'; float:left;">Earth Spinning Video</div>
<div id="vidlen" style="font-family:'Faster One'; float:right;"></div>
</div>
<video id="sample" onloadedmetadata="length()" controls enablejavascript="true">
<source src="sample.mp4">
</video>
</div>
</div>
</div>
<div id="catbanner" class="card card-body">
<img src="catbanner.jpg" alt="Four Cats">
</div>
<footer id="footer">
<div id="pgselect" class="btn-group" role="group" aria-label="Button group with nested dropdown">
<div class="btn-group" role="group">
<button id="dropdownMenuButton" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Page 1
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item disabled">1</a>
<a class="dropdown-item" href="page2.html">2</a>
<a class="dropdown-item" href="page3.html">3</a>
<a class="dropdown-item" href="page4.html">4</a>
</div>
</div>
<button onclick="window.location.href='page2.html';" type="btn" class="btn btn-secondary">-></button>
</div>
</footer>
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript" src="functions.js"></script>
<audio src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true"></audio>
<audio src="death.wav" autostart="false" width="0" height="0" id="death" enablejavascript="true"></audio>
<script>
var death = document.getElementById("death");
death.volume = 0.2;
</script>
</body>
</html>
NOTE: The cat image and video aren't the actual image and video because they're not in a directory, but when they're full size the white space is more noticable.

Now that there is less code to debug, it is easier to see where the problem is :)
You are setting the bottom property for the elements, which is adding that space to the bottom of the container. If you remove this value from the divs, it fixes the problem.
Note: You could still have problems due to setting the right or left on Bootstrap cards. It would be better to just use the Bootstrap classes, without trying to "pull" some elements out of it's layout by specifying their positions.
Mixing custom positioning with Bootstrap like this is going to cause problems. Bootstrap is a complete framework that creates the layout for you - if you make changes to some elements, it is going to have an effect on the overall layout of the page.
Working Example:
(I replaced your video and image in the example below so you can see what is happening).
function length() {
var video = document.getElementById("sample");
len = video.duration;
document.getElementById("vidlen").innerHTML = len.toFixed(1);
}
.videoplayer {
position: relative;
right: -400px;
/* bottom: 290px;*/
width: 35%;
}
#footer {
position: relative;
bottom: 0;
width: 100%;
height: 2.5rem;
}
#pgselect {
position: absolute;
width: 133.859375px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
}
#catbanner {
position: relative;
left: 470px;
/* bottom: 260px;*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster One">
<script type="text/javascript" src="functions.js"></script>
<title>My Webpage</title>
</head>
<body style="background-color:#EBEDF3;">
<div class="videoplayer">
<div class="videoheader">
<div class="card card-body">
<div style="clear: both;" class="card-header">
<div style="font-family:'Faster One'; float:left;">Earth Spinning Video</div>
<div id="vidlen" style="font-family:'Faster One'; float:right;"></div>
</div>
<img src="http://placekitten.com/g/200/200">
</div>
</div>
</div>
<div id="catbanner" class="card card-body">
<img src="http://placekitten.com/g/200/400" alt="Four Cats">
</div>
<footer id="footer">
<div id="pgselect" class="btn-group" role="group" aria-label="Button group with nested dropdown">
<div class="btn-group" role="group">
<button id="dropdownMenuButton" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Page 1
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item disabled">1</a>
<a class="dropdown-item" href="page2.html">2</a>
<a class="dropdown-item" href="page3.html">3</a>
<a class="dropdown-item" href="page4.html">4</a>
</div>
</div>
<button onclick="window.location.href='page2.html';" type="btn" class="btn btn-secondary">-></button>
</div>
</footer>
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript" src="functions.js"></script>
<audio src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true"></audio>
<audio src="death.wav" autostart="false" width="0" height="0" id="death" enablejavascript="true"></audio>
<script>
var death = document.getElementById("death");
death.volume = 0.2;
</script>
</body>
</html>

Categories