Bootstrap 5 card footer not staying at the end of the page - python-3.x

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

Related

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>

How to make normal HTML page work as 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

SVG output of MathJax

I have a basic MathJax code of
<script type="text/javascript">
MathJax.Hub.Config({
extensions: ["tex2jax.js", "TeX/AMSmath.js"],
jax: ["input/TeX", "output/SVG"],
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<div>$$a = b + c$$</div>
I expect the formula should be replaced with an SVG code, but the result is the same as HTML output, MathML codes:
<div>
<span class="MathJax_Preview" style="color: inherit; display: none;"></span>
<span class="mjx-chtml MJXc-display" style="text-align: center;">
<span id="MathJax-Element-1-Frame" class="mjx-chtml MathJax_CHTML" tabindex="0" data-mathml="
<math
xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>a</mi>
<mo>=</mo>
<mi>b</mi>
<mo>+</mo>
<mi>c</mi>
</math>" role="presentation" style="font-size: 113%; text-align: center; position: relative;">
<span id="MJXc-Node-1" class="mjx-math" aria-hidden="true">
<span id="MJXc-Node-2" class="mjx-mrow">
<span id="MJXc-Node-3" class="mjx-mi">
<span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.224em; padding-bottom: 0.279em;">a</span>
</span>
<span id="MJXc-Node-4" class="mjx-mo MJXc-space3">
<span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.058em; padding-bottom: 0.335em;">=</span>
</span>
<span id="MJXc-Node-5" class="mjx-mi MJXc-space3">
<span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.279em;">b</span>
</span>
<span id="MJXc-Node-6" class="mjx-mo MJXc-space2">
<span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.279em; padding-bottom: 0.445em;">+</span>
</span>
<span id="MJXc-Node-7" class="mjx-mi MJXc-space2">
<span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.224em; padding-bottom: 0.279em;">c</span>
</span>
</span>
</span>
<span class="MJX_Assistive_MathML MJX_Assistive_MathML_Block" role="presentation">
<math
xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>a</mi>
<mo>=</mo>
<mi>b</mi>
<mo>+</mo>
<mi>c</mi>
</math>
</span>
</span>
</span>
<script type="math/tex; mode=display" id="MathJax-Element-1">a = b + c</script>
</div>
How can I get the output as SVG vector elements?

MathJax configuration script should be type of text/x-mathjax-config not text/javascript. Moreover ?config=TeX-MML-AM_CHTML seems to be somehow overriding the output/SVG. I used ?config=default. You can get more information about the configuration files here
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js", "TeX/AMSmath.js"],
jax: ["input/TeX", "output/SVG"],
})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=default"></script>
<div>$$a = b + c$$</div>

In case anyone is still using MathJax 2.7.x, modifying the config parameter will work for rendering svg on initial load.
So change TeX-AMS_CHTML to TeX-AMS_SVG
or change TeX-MML-AM_CHTML to TeX-MML-AM_SVG
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_SVG"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_SVG"></script>

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;
}

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