How to make normal HTML page work as Chrome extension? - google-chrome-extension

i design my webpage and checked all the code. it works perfect as webpage. however, when i collect all the files to work as Chrome extension file. It doesn't work. specially the "TB" button it doesn't show the other buttons
this is my .HTML
<!DOCTYPE HTML>
<html>
<head>
<script src="popup.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Page</title>
<style type="text/css">
body
{
background-color: #FFFFFF;
color: #000000;
font-family: Arial;
font-size: 13px;
margin: 0;
padding: 0;
height: 473px;
width: 1315px;
}
nav {
max-width: 500px;
border-right: 1px solid gray;
border-top: 1px solid gray;
position: absolute;left:50px;top:150px;
}
article {
margin-left: 370px;
padding: 1em;
position: absolute; top:150px;
overflow: hidden;
}
</style>
<style type="text/css">
a
{
color: #0000FF;
text-decoration: underline;
}
a:visited
{
color: #800080;
}
a:active
{
color: #FF0000;
}
a:hover
{
color: #0000FF;
text-decoration: underline;
}
#Button1
{
border: 1px #A9A9A9 solid;
background-color: #F0F0F0;
color: #000000;
font-family: Arial;
font-size: 13px;
}
#Button2
{
border: 1px #A9A9A9 solid;
background-color: #F0F0F0;
color: #000000;
font-family: Arial;
font-size: 13px;
}
#Button3
{
border: 1px #A9A9A9 solid;
background-color: #F0F0F0;
color: #000000;
font-family: Arial;
font-size: 13px;
}
.button_sub
{
border: 1px #A9A9A9 solid;
background-color: #F0F0F0;
color: #000000;
font-family: Arial;
font-size: 13px;
}
</style>
</head>
<body>
<div>
<input type="button" id="Button1" value="TB" onclick="main_clicked(1)" style="position:absolute;left:100px;top:50px;width:96px;height:25px;z-index:1;">
</div>
<div id="tb_sub" class="sub_main" style=display:none;>
<input type="button" id="Button4" class="button_sub" value="G" onclick="sub_clicked(1)" style="position:absolute;left:50px;top:100px;width:96px;height:25px;z-index:5;">
<input type="button" id="Button5" class="button_sub" value="X" onclick="sub_clicked(2)" style="position:absolute;left:150px;top:100px;width:96px;height:25px;z-index:6;">
<input type="button" id="Button6" class="button_sub" value="MA" onclick="sub_clicked(3)" style="position:absolute;left:250px;top:100px;width:96px;height:25px;z-index:7;">
<input type="button" id="Button7" class="button_sub" value="T" onclick="sub_clicked(4)" style="position:absolute;left:350px;top:100px;width:96px;height:25px;z-index:8;">
<input type="button" id="Button8" class="button_sub" value="G" onclick="sub_clicked(5)" style="position:absolute;left:450px;top:100px;width:96px;height:25px;z-index:9;">
</div>
<div id="tb_y_sub" class="subsub" style=display:none;>
<nav>
<ol>
<li style="height:20px;" onmouseover="show('tb_y_sub1')" onmouseout="hide('tb_y_sub1')">Kids</li>
<li style="height:20px;" onmouseover="show('tb_y_sub2')" onmouseout="hide('tb_y_sub2')">Hateful and Dergatory</li>
<li style="height:20px;" onmouseover="show('tb_y_sub3')" onmouseout="hide('tb_y_sub3')">ILLEGAL ACTS AND SUBSTANCES</li>
<li style="height:20px;" onmouseover="show('tb_y_sub4')" onmouseout="hide('tb_y_sub4')">SEXUAL CONTENT</li>
<li style="height:20px;" onmouseover="show('tb_y_sub5')" onmouseout="hide('tb_y_sub5')">VIOLENCE, DEATH, TRAGEDY</li>
<li style="height:20px;" onmouseover="show('tb_y_sub6')" onmouseout="hide('tb_y_sub6')">HARMFUL, DANGEROUS AND MEDICAL ACTS</li>
<li style="height:20px;" onmouseover="show('tb_y_sub7')" onmouseout="hide('tb_y_sub7')">DEMEANING AND INCENDIARY CONTENT</li>
<li style="height:20px;" onmouseover="show('tb_y_sub8')" onmouseout="hide('tb_y_sub8')">INAPPROPRIATE LANGUAGE</li>
</ol>
</nav>
<article>
<div id="tb_y_sub1" style=display:none;>
<h1>Kids</h1>
<ul data-count="even" style="list-style-type:none">
<li>Kids Sub Policy</li>
<li>Kids Sub Policy</li>
</ul>
</div>
<div id="tb_y_sub2" style=display:none;>
<h1>Hateful and Dergatory</h1>
<ul data-count="even" style="list-style-type:none">
<li>Hateful and Dergatory Sub Policy</li>
<li>Hateful and Dergatory Sub Policy</li>
</ul>
</div>
<div id="tb_y_sub3" style=display:none;>
<h1>ILLEGAL ACTS AND SUBSTANCES</h1>
<ul data-count="even" style="list-style-type:none">
<li>ILLEGAL ACTS AND SUBSTANCES Sub Policy</li>
<li>ILLEGAL ACTS AND SUBSTANCES Sub Policy</li>
</ul>
</div>
<div id="tb_y_sub4" style=display:none;>
<h1>SEXUAL CONTENT</h1>
<ul data-count="even" style="list-style-type:none">
<li>SEXUAL CONTENT Sub Policy</li>
<li>SEXUAL CONTENT Sub Policy</li>
</ul>
</div>
<div id="tb_y_sub5" style=display:none;>
<h1>VIOLENCE, DEATH, TRAGEDY</h1>
<ul data-count="even" style="list-style-type:none">
<li>VIOLENCE, DEATH, TRAGEDY Sub Policy</li>
<li>VIOLENCE, DEATH, TRAGEDY Sub Policy</li>
</ul>
</div>
<div id="tb_y_sub6" style=display:none;>
<h1>HARMFUL, DANGEROUS AND MEDICAL ACTS</h1>
<ul data-count="even" style="list-style-type:none">
<li>HARMFUL, DANGEROUS AND MEDICAL ACTS Sub Policy</li>
<li>HARMFUL, DANGEROUS AND MEDICAL ACTS Sub Policy</li>
</ul>
</div>
<div id="tb_y_sub7" style=display:none;>
<h1>DEMEANING AND INCENDIARY CONTENT</h1>
<ul data-count="even" style="list-style-type:none">
<li>DEMEANING AND INCENDIARY CONTENT Sub Policy</li>
<li>DEMEANING AND INCENDIARY CONTENT Sub Policy</li>
</ul>
</div>
<div id="tb_y_sub8" style=display:none;>
<h1>INAPPROPRIATE LANGUAGE</h1>
<ul data-count="even" style="list-style-type:none">
<li>INAPPROPRIATE LANGUAGE Sub Policy</li>
<li>INAPPROPRIATE LANGUAGE Sub Policy</li>
</ul>
</div>
</article>
</div>
<div id="tb_x_sub" class="subsub" style=display:none;>
<nav>
<ol>
<li style="height:20px;" onmouseover="show('sub1')" onmouseout="hide('sub1')">xPolicy 1</li>
<li style="height:20px;" onmouseover="show('sub2')" onmouseout="hide('sub2')">xPolicy 2</li>
</ol>
</nav>
<article>
<div id="sub1">
<h1>Policy 1</h1>
<ul data-count="even" style="list-style-type:none">
<li>Sub Policy 1</li>
<li>Sub Policy 1</li>
</ul>
</div>
</article>
</div>
<div id="tb_ma_sub" class="subsub" style=display:none;>
<nav>
<ol>
<li style="height:20px;" onmouseover="show('sub1')" onmouseout="hide('sub1')">maPolicy 1</li>
<li style="height:20px;" onmouseover="show('sub2')" onmouseout="hide('sub2')">maPolicy 2</li>
</ol>
</nav>
<article>
<div id="sub1">
<h1>Policy 1</h1>
<ul data-count="even" style="list-style-type:none">
<li>Sub Policy 1</li>
<li>Sub Policy 1</li>
</ul>
</div>
</article>
</div>
<div id="tb_t_sub" class="subsub" style=display:none;>
<nav>
<ol>
<li style="height:20px;" onmouseover="show('sub1')" onmouseout="hide('sub1')">tPolicy 1</li>
<li style="height:20px;" onmouseover="show('sub2')" onmouseout="hide('sub2')">tPolicy 2</li>
</ol>
</nav>
<article>
<div id="sub1">
<h1>Policy 1</h1>
<ul data-count="even" style="list-style-type:none">
<li>Sub Policy 1</li>
<li>Sub Policy 1</li>
</ul>
</div>
</article>
</div>
<div id="tb_g_sub" class="subsub" style=display:none;>
<nav>
<ol>
<li style="height:20px;" onmouseover="show('sub1')" onmouseout="hide('sub1')">gPolicy 1</li>
<li style="height:20px;" onmouseover="show('sub2')" onmouseout="hide('sub2')">gPolicy 2</li>
</ol>
</nav>
<article>
<div id="sub1">
<h1>Policy 1</h1>
<ul data-count="even" style="list-style-type:none">
<li>Sub Policy 1</li>
<li>Sub Policy 1</li>
</ul>
</div>
</article>
</div>
<div id="tb_pg_sub" class="subsub" style=display:none;>
<nav>
<ol>
<li style="height:20px;" onmouseover="show('sub1')" onmouseout="hide('sub1')">pgPolicy 1</li>
<li style="height:20px;" onmouseover="show('sub2')" onmouseout="hide('sub2')">pgPolicy 2</li>
</ol>
</nav>
<article>
<div id="sub1">
<h1>Policy 1</h1>
<ul data-count="even" style="list-style-type:none">
<li>Sub Policy 1</li>
<li>Sub Policy 1</li>
</ul>
</div>
</article>
</div>
</body>
</html>
and this is my .JS file
function main_clicked(x){
document.getElementById("tb_sub").style.display = "none";
document.getElementById("Button1").style.background='#F0F0F0';
var elements = document.getElementsByClassName("button_sub");
for(var i = 0, length = elements.length; i < length; i++) {
if( elements[i].textContent == ''){
elements[i].style.background='#F0F0F0';
}
}
document.getElementById("tb_y_sub").style.display = 'none';
document.getElementById("tb_x_sub").style.display = 'none';
document.getElementById("tb_ma_sub").style.display = 'none';
document.getElementById("tb_t_sub").style.display = 'none';
document.getElementById("tb_g_sub").style.display = 'none';
if (x==1){
document.getElementById("Button1").style.background='#42a7f4';
document.getElementById("tb_sub").style.display = "block";
}
}
function sub_clicked(x){
var elements = document.getElementsByClassName("button_sub");
for(var i = 0, length = elements.length; i < length; i++) {
if( elements[i].textContent == ''){
elements[i].style.background='#F0F0F0';
}
}
document.getElementById("tb_y_sub").style.display = 'none';
document.getElementById("tb_x_sub").style.display = 'none';
document.getElementById("tb_ma_sub").style.display = 'none';
document.getElementById("tb_t_sub").style.display = 'none';
document.getElementById("tb_g_sub").style.display = 'none';
if (x==1){
document.getElementById("Button4").style.background='#42a7f4';
document.getElementById("tb_y_sub").style.display = 'block';
}
if (x==2){
document.getElementById("Button5").style.background='#42a7f4';
document.getElementById("tb_x_sub").style.display = 'block';
}
if (x==3){
document.getElementById("Button6").style.background='#42a7f4';
document.getElementById("tb_ma_sub").style.display = "block";
}
if (x==4){
document.getElementById("Button7").style.background='#42a7f4';
document.getElementById("tb_t_sub").style.display = "block";
}
if (x==5){
document.getElementById("Button8").style.background='#42a7f4';
document.getElementById("tb_g_sub").style.display = "block";
}
}
function show(x) {
document.getElementById(x).style.display = "block";
}
function hide(x) {
document.getElementById(x).style.display = "none";
}
and this is my manifest file
{
"name": "Easypolicy",
"description": "Easypolicy",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
i need to know and understand :
is there any specific programming language required to develop
the extension?.
is there any software can give me the last result
without using the coding?
why it doesn't work while im using the
right code?
thank you

Related

Bootstrap 5 card footer not staying at the end of the page

I am still new to creating websites with Bootstrap and have come across an issue with adding a footer to my base.html template in Django. What I want is that the footer stays at the end of page and shows when I scroll to the end of that page. Here is my base.html code:
{% load static %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Vlereso Profesorin</title>
<!-- Bootstrap -->
<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 JS -->
<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>
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="{% static 'vleresoprofesorin/css/master2.css' %}">
<link rel="stylesheet" href="{% static 'css/master.css' %}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light mynav">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav leftnav">
<li class="nav-item">
<a class="navbar-brand" href="{% url 'home' %}">Kreu</a>
</li>
<li class="nav-item dropdown">
<a class="navbar-brand dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Universitetet</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Universiteti i Tiranës</a></li>
<li><a class="dropdown-item" href="#">Universiteti Politeknik i Tiranës</a></li>
<li><a class="dropdown-item" href="#">Universiteti i Mjekësisë, Tiranë</a></li>
<li><a class="dropdown-item" href="#">Universiteti i Sporteve të Tiranës</a></li>
<li><a class="dropdown-item" href="#">Universiteti i Arteve Universitet</a></li>
<li><a class="dropdown-item" href="#">Universiteti Bujqësor i Tiranës</a></li>
<li><a class="dropdown-item" href="#">Universiteti "Aleksandër Moisiu", Durrës</a></li>
<li><a class="dropdown-item" href="#">Universiteti "Aleksandër Xhuvani", Elbasan</a></li>
<li><a class="dropdown-item" href="#">Universiteti "Luigj Gurakuqi", Shkodër</a></li>
<li><a class="dropdown-item" href="#">Universiteti "Eqrem Çabej", Gjirokastër</a></li>
<li><a class="dropdown-item" href="#">Universiteti "Fan S. Noli", Korçë</a></li>
<li><a class="dropdown-item" href="#">Universiteti "Ismail Qemali", Vlorë</a></li>
</ul>
</li>
</ul>
<a class="navbar-brand" id="logo" href="{% url 'home' %}">
<img src="{% static 'images/mainlogo.png' %}" alt="Missing image" width="260px" height="220px">
</a>
{% if user.is_authenticated %}
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item userbuttons">
<a class="nav-link active" href="{% url 'accounts:logout' %}">Logout</a>
</li>
</ul>
{% else %}
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="{% url 'accounts:login' %}" id="loginbtn">Login</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="{% url 'accounts:signup' %}" id="signupbtn">Rregjistrohu</a>
</li>
</ul>
{% endif %}
</div>
</div>
</nav>
<style>#import url('https://fonts.googleapis.com/css2?family=Benne&display=swap');</style>
<div class="container text-center mycontent">
{% block content %}
{% endblock %}
<div class="wrapper">
<div class="card text-center fixed-bottom">
<div class="card-header" style="font-family: 'Benne', serif;">
<q>Eksperiencat janë mësuesi më i mirë</q><br>
<em><i>-Jordan B. Peterson</i></em>
</div>
<div class="card-body">
<h5 class="card-title">Kontakto me Zhvilluesin</h5>
<p class="card-text">Për çdo problem ose paqartësi me faqen mund të na kontaktoni duke perdorur butonin më poshtë:</p>
Kontakto
</div>
<div class="card-footer text-muted">
Copyright © 2021
</div>
</div>
<div class="push"></div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
and here is my CSS file attached to the base.html template:
html, body {
height: 100%;
background: linear-gradient(to bottom, rgba(155, 207, 197, 0), rgba(155, 207, 197, 0.45));
font-family: 'Poppins', sans-serif;
}
h1 {
font-family: 'Poppins', sans-serif;
font-weight: 900;
margin-top: 20px;
margin-bottom: 20px;
}
p {
margin-top: 10px;
margin-bottom: 10px;
}
.container-fluid {
height: auto;
}
.leftnav {
margin-left: auto;
}
#logo {
margin-left: auto;
margin-right: auto;
}
#loginbtn {
margin-right: auto;
}
#signupbtn {
border: 2px solid rgba(155, 207, 197);
border-radius: 8px;
margin-right: auto;
margin-left: auto;
}
.mb-3 {
margin-left: auto;
margin-right: auto;
width: 500px;
}
.form-control {
margin-right: 10px;
margin-bottom: 10px;
margin-top: 10px;
width: 500px;
}
.btn-outline-primary {
margin-bottom: 10px;
margin-top: 10px;
}
#navbarDropdown {
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
}
.mycontent {
overflow: auto;
}
.card-body {
background-color: rgba(155, 207, 197, 0.3);
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -250px;
}
.footer, .push {
height: 250px;
}
Any help or guidance would be much appreciated. Thank you
Image without scrolling
Image with scrolling

How create a complex Bootstrap 4 layout

I just need put the box 7 below the box 6! But I can't...
All the code is below, to test in your machine please Include Bootstrap 4 from a CDN: https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp
Ps: that is the desktop version, I don't need think about this layout in mobile version now.
Thank You!
.row {
background-color: yellow;
}
.row .row>div {
border:solid 1px black;
min-height:200px;
}
#box5 {
height: 400px;
background-color: lightgray;
}
#box6 {
height: 200px;
}
#box7 {
height: 200px;
}
#box8 {
height: 600px;
background-color: lightgray;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-3">box 1</div>
<div class="col-9">box 2</div>
</div>
</div>
<div class="col-9">
<div class="row">
<div class="col-4">box 3</div>
<div class="col-8">box 4</div>
</div>
<div class="row">
<div class="col-4" id="box5">box 5</div>
<div class="col-8" id="box6">box 6</div>
<div class="col-8" id="box7">box 7</div>
</div>
</div>
<div class="col-3">
<div class="row">
<div class="col-12" id="box8">box 8</div>
</div>
</div>
</div>
</div>

#box5.col-4 and #box6.col-8 Both elements have fully occupied a row so that #box7 pushed out below #box5.
Use another div.row for #box6 and #box7 inside div.col-8.
.row {
background-color: yellow;
}
.row .row>div {
border: solid 1px black;
min-height: 200px;
}
#box5 {
height: 400px;
background-color: lightgray;
}
#box6 {
height: 200px;
}
#box7 {
height: 200px;
}
#box8 {
height: 600px;
background-color: lightgray;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-3">box 1</div>
<div class="col-9">box 2</div>
</div>
</div>
<div class="col-9">
<div class="row">
<div class="col-4">box 3</div>
<div class="col-8">box 4</div>
</div>
<div class="row">
<div class="col-4" id="box5">box 5</div>
<div class="col-8">
<div class="row">
<div class="col-12" id="box6">box 6</div>
<div class="col-12" id="box7">box 7</div>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="row">
<div class="col-12" id="box8">box 8</div>
</div>
</div>
</div>
</div>

Here a simple solution to create that layout dynamicly with PHP.
You can use the same logic with another web language if you prefer.
<style>
.row {
border: solid 1px black;
min-height: 200px;
}
#box2 {
background-color: lightblue;
}
#box5 {
height: 400px;
background-color: lightgray;
}
#box6 {
height: 200px;
}
#box7 {
height: 200px;
}
#box8 {
height: 600px;
background-color: lightgray;
}
.container {
background-color: lightgreen;
}
#footer {
background-color: orange;
}
</style>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<?php
$total = 6; //from 1 to 6
?>
<?php for ($i=1; $i <= $total; $i++) :
if ($i==1) :
?>
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-3">box 1</div>
<div id="box2" class="col-9">box 2</div>
</div>
</div>
<?php
endif;
if ($i==2) :
?>
<div class="col-9">
<div class="row">
<div class="col-4">box 3</div>
<?php
endif;
if ($i==3) :
?>
<div class="col-8">box 4</div>
</div>
<div class="row">
<div class="col-4" id="box5">box 5</div>
<?php
endif;
if ($i==4) :
?>
<div class="col-8">
<div class="row">
<div class="col-12" id="box6">box 6</div>
<?php
endif;
if ($i==5) :
?>
<div class="col-12" id="box7">box 7</div>
</div>
<?php
endif;
if ($i==6) :
?>
</div>
</div>
</div>
<div class="col-3">
<div class="row">
<div class="col-12" id="box8">box 8</div>
</div>
</div>
</div>
</div>
<?php
endif;
endfor;
if ($total == 1) { echo '</div></div></div></div>'; }
if ($total == 2) { echo '</div></div></div></div></div></div>'; }
if ($total == 3) { echo '</div></div></div></div></div></div>'; }
if ($total == 4) { echo '</div></div></div></div></div></div></div></div>'; }
if ($total == 5) { echo '</div></div></div></div></div></div></div>'; }
?>
<div class="container-fluid" id="footer">
<div class="row">
<div class="col-12">
</div>
</div>
</div>

Bootstrap 4 Navbar Spacing Issue

Hello I am trying to layout my navigation bar with Bootstrap 4 but some reason no matter it is not calling it out. It works in my Google developer inspector but when I insert the same code in my text editor nothing happens. Can someone help me understand what I am doing wrong?
HTML code:
<body>
<!--TOP Navigation -->
<nav class="navbar navbar-default navbar-toggleable-md ">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Delvin McCray
<!-- Right Side of Navbar w/ Dropdown Fatures-->
<ul class="nav navbar-nav">
<li class="dropdown">Women <span class="caret"></span>
<!--Dropdown Menu-->
<ul class="dropdown-menu" role="menu">
<li>Shirts</li>
<li>Dresses</li>
<li>Shoes</li>
<li>Accessories</li>
</ul><!--end of dropdown menu-->
</li>
<li class="dropdown">Men <span class="caret"></span>
<!--Dropdown Menu-->
<ul class="dropdown-menu" role="menu">
<li>Shirts</li>
<li>Dresses</li>
<li>Shoes</li>
<li>Accessories</li>
</ul><!--end of dropdown menu-->
</li>
<li>Off the Rack</li>
<li>Fall 2017</li>
</ul><!--End of navbar-right-->
</div>
<!-- Right side Navbar -->
<div class="collapse navbar-collapse justify-content-end"
id="navbarCollapse">
<ul class="navbar-nav">
<li><a class="nav-link" href="#">My Account <i class="fa fa-sign-in" aria-
hidden="true"></i> </a></li>
<li><a class="nav-link" href="#">Shopping Cart <i class="fa fa-shopping-bag"
aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</nav>
</body>
<div class="jumbotron">
<div class="col-sm-8 mx-auto">
<h1>Navbar examples</h1>
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the top and fixed top examples.</p>
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
<p>
<a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
CSS styling:
body {
padding-top: 50px;
}
.dropdown, .dropup {
position: relative;
margin-right: 20px;
}
.nav li {
margin-right: 40px;
}
ul.nav.navbar-nav li {
margin-right: 40px;
}

Drag and Drop cards in nodejs + ejs+ express framework

I am creating an app similar to LeanKit's Kanbanize app. LeanKit
Here is my HTML Code:
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
<title>Sign In</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/mycss.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/js/bootstrap.min.js"></script>
</head>
<script>
var onDragEnter = function(event) {
event.preventDefault();
$("#dropzone").addClass("dragover");
},
onDragOver = function(event) {
event.preventDefault();
if(!$("#dropzone").hasClass("dragover"))
$("#dropzone").addClass("dragover");
},
onDragLeave = function(event) {
event.preventDefault();
$("#dropzone").removeClass("dragover");
},
onDrop = function(event) {
event.preventDefault();
$("#dropzone").removeClass("dragover");
console.log(event.originalEvent.dataTransfer.files);
};
$("#dropzone")
.on("dragenter", onDragEnter)
.on("dragover", onDragOver)
.on("dragleave", onDragLeave)
.on("drop", onDrop);
</script>
<body style="margin:0; background-color: #F2F2F2;">
<!--Header-->
<div id = "header">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Welcome to Kanban View</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Add Card</li>
<li>Project Status</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container" style="width:900px; height:500px;padding-top:70px;">
<div class="row">
<div class="col-md-3">
<h4>Ready to Start</h4>
<ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice laneContents connectedSortable ui-sortable" cmenu="menu_LaneBody">
<div draggable="true"><li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="test1">Test 1</div>
</div>
</div>
</li>
</div>
<div draggable="true"><li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="test2">Test 2</div>
</div>
</div>
</li>
</div>
<div draggable="true"><li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="test3">Test 3</div>
</div>
</div>
</li>
</div>
<div draggable="true"><li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="test4">Test 4</div>
</div>
</div>
</li>
</div>
</ul>
</div>
<div class = "col-md-3">
<h4>In Progress</h4>
<div id='dropzone'><ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice laneContents connectedSortable ui-sortable" cmenu="menu_LaneBody">
<li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="Attach a Report!">Search Results Page</div>
</div>
</div>
</li>
</div> </div>
<div class = "col-md-3">
<h4>Ready for Review</h4>
<ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice laneContents connectedSortable ui-sortable" cmenu="menu_LaneBody">
<li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="Attach a Report!">Welcome Page</div>
</div>
</div>
</li>
</ul>
</div>
<div class = "col-md-3">
<h4>Recently Finished</h4>
<ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice laneContents connectedSortable ui-sortable" cmenu="menu_LaneBody">
<li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card cmVoice {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
<div class="card-background" style="background-color:#FDD29A;">
<div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>
<div class="card-header" style="background-color:rgb(196,140,67)">
<div class="cardtext elipses" title="Attach a Report!">Login Functionality</div>
</div>
</div>
</li>
</ul></div>
</div>
</div>
<!--Footer-->
<div id="footer">
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
</div> <!-- container-->
</div> <!-- navbar navbar-default navbar-fixed-bottom" -->
</div>
</body>
</html>
I added the drag and drop code based on this question. I can see by cards are dragging but cannot drop to In Progress section. The functionality is I should be able to drag a card from anywhere and drop to any of the 4 sections, based on the number of cards, each section should be responsive so they can fit the new card. Any advice would really be appreciated. Thank you so much.

You need to actually move the DOM element. Here's one way you could do it:
https://jsfiddle.net/z3o28qut/
var dragItem;
// You should make this selector more specific to your card elements
$("div")
.on("dragstart", function(event) {
dragItem = $(event.currentTarget).find('li') && $(event.currentTarget).find('li')[0];
});
onDrop = function(event) {
event.preventDefault();
$("#dropzone").removeClass("dragover");
var ul = $(this).find('ul')[0];
if (dragItem) {
ul.appendChild(dragItem);
}
};

nested mouseover not working

This works in FF but not I.E. The mouseover on the a tag won't activate. I want to be able to set the class for the a tag when user mouse over it.
<div class="selects-options" id="dropsort"
onmouseover="divshowsort();"
style="position: absolute; top: 8px; left: 1px; width: 153px;display:none;"
onmouseout="hidesort();">
<div class="drop-holder">
<div class="drop-list">
<ul>
<li class="items_selected" id="li1" rel="0">
<a onmouseover="sortclass('li1');"
onclick="divhidesort('R');" href="#">
<span>Relevance</span>
</a>
</li>
<li class="" id="li2" rel="1">
<a onmouseover="sortclass('li2');"
onclick="divhidesort('A');" href="#">
<span>Title A-Z</span>
</a>
</li>
<li class="" id="li3" rel="2">
<a onmouseover="sortclass('li3');"
onclick="divhidesort('D');" href="#">
<span>Newest</span>
</a>
</li>
</ul>
</div>
</div>
</div>

Resources