Create your own cookie banner

Create your own cookie banner - javascript

I have a problem. I want to use a cookie banner for my website.
I have the problem that I built my website with Boostrap. And as soon as I insert this code into my real website, the banner is displayed at the top and no longer in the style.
So it's displayed above stored. How can I insert this code so that it works properly?
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cookie Consent Banner</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="cookiePopup" class="hide">
<img src="cookie.png" />
<p>
Our website uses cookies to provide your browsing experience and
relevant information. Before continuing to use our website, you agree &
accept of our Cookie Policy & Privacy.
</p>
<button id="acceptCookie">Accept</button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
style.css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f5f8ff;
}
#cookiePopup {
background-color: #ffffff;
position: absolute;
font-size: 14px;
width: 70vw;
max-width: 42.85em;
box-shadow: 0 0 2em rgba(5, 0, 31, 0.15);
font-family: "Poppins", sans-serif;
text-align: justify;
line-height: 1.8em;
padding: 2em 1.4em;
border-radius: 6px;
transition: all 0.5s ease-in;
}
#cookiePopup img {
display: block;
width: 3.75em;
transform: translateZ(0);
position: relative;
margin: auto;
}
#cookiePopup p {
text-align: center;
margin: 1.4em 0;
}
#cookiePopup button {
background-color: #6859fe;
border: none;
color: #ffffff;
font-size: 1.2em;
padding: 1em 1.4em;
display: block;
position: relative;
margin: auto;
border-radius: 5px;
}
#cookiePopup a {
color: #6859fe;
}
.hide {
visibility: hidden;
bottom: 0;
right: 2em;
}
.show {
visibility: visible;
bottom: 2em;
right: 2em;
}
#media only screen and (max-width: 37.5em) {
#cookiePopup {
width: 100%;
}
.hide {
bottom: 2em;
right: 0;
}
.show {
right: 0;
bottom: 0;
}
}
script.js
let popUp = document.getElementById("cookiePopup");
//When user clicks the accept button
document.getElementById("acceptCookie").addEventListener("click", () => {
//Create date object
let d = new Date();
//Increment the current time by 1 minute (cookie will expire after 1 minute)
d.setMinutes(2 + d.getMinutes());
//Create Cookie withname = myCookieName, value = thisIsMyCookie and expiry time=1 minute
document.cookie = "myCookieName=thisIsMyCookie; expires = " + d + ";";
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
});
//Check if cookie is already present
const checkCookie = () => {
//Read the cookie and split on "="
let input = document.cookie.split("=");
//Check for our cookie
if (input[0] == "myCookieName") {
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
} else {
//Show the popup
popUp.classList.add("show");
popUp.classList.remove("hide");
}
};
//Check if cookie exists when page loads
window.onload = () => {
setTimeout(() => {
checkCookie();
}, 2000);
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin:700&display=swap">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/Footer-Dark.css">
<link rel="stylesheet" href="assets/css/Hero-Clean-Reverse.css">
<link rel="stylesheet" href="assets/css/untitled.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
<link rel="stylesheet" href="assets/css/style.css" />
/>
</head>
<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="77" style="background: var(--bs-body-bg);font-family: Cabin, sans-serif;--bs-primary: #42DCA3;--bs-primary-rgb: 66,220,163;">
<div id="cookiePopup" class="hide">
<img src="assets/img/cookie.png" />
<p>
Our website uses cookies to provide your browsing experience and
relevant information. Before continuing to use our website, you agree &
accept of our Cookie Policy & Privacy.
</p>
<button id="acceptCookie">Accept</button>
</div>
<nav class="navbar navbar-light navbar-expand-md fixed-top" id="mainNav">
<div class="container"><a class="navbar-brand" href="index.html">Name</a><button data-bs-toggle="collapse" class="navbar-toggler navbar-toggler-right" data-bs-target="#navbarResponsive" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" value="Menu"><i class="fa fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item nav-link"><a class="nav-link active" href="kontakt.html" style="background: rgba(255,255,255,0);">Kontakt</a></li>
<li class="nav-item nav-link"></li>
<li class="nav-item nav-link"></li>
</ul>
</div>
</div>
</nav>
</section>
<section class="mb-5"></section>
<footer class="text-center bg-dark" style="background: rgb(0,0,0);">
...
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/smart-forms.min.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>

If your banner is displayed at the top and no longer in the style it could be some problem in the css;
Try commenting out these css one at a time, and by reloading the page you can see if one of them is the culprit:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/Footer-Dark.css">
<link rel="stylesheet" href="assets/css/Hero-Clean-Reverse.css">
<link rel="stylesheet" href="assets/css/untitled.css">
Alternatively, you can put the css "style.css" inside the html code and add !important
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"><!--EDIT for coding-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin:700&display=swap">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/Footer-Dark.css">
<link rel="stylesheet" href="assets/css/Hero-Clean-Reverse.css">
<link rel="stylesheet" href="assets/css/untitled.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"/>
<!--<link rel="stylesheet" href="assets/css/style.css" />-->
</head>
<!-- Stylesheet on the html -->
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f5f8ff;
}
#cookiePopup {
background-color: #ffffff;
position: absolute;
font-size: 14px;
width: 70vw;
max-width: 42.85em;
box-shadow: 0 0 2em rgba(5, 0, 31, 0.15);
font-family: "Poppins", sans-serif;
text-align: justify;
line-height: 1.8em;
padding: 2em 1.4em;
border-radius: 6px;
transition: all 0.5s ease-in;
}
#cookiePopup img {
display: block;
width: 3.75em;
transform: translateZ(0);
position: relative;
margin: auto;
}
#cookiePopup p {
text-align: center;
margin: 1.4em 0;
}
#cookiePopup button {
background-color: #6859fe;
border: none;
color: #ffffff;
font-size: 1.2em;
padding: 1em 1.4em;
display: block;
position: relative;
margin: auto;
border-radius: 5px;
}
#cookiePopup a {
color: #6859fe;
}
.hide {
visibility: hidden;
bottom: 0;
right: 2em;
}
.show {
visibility: visible;
bottom: 2em;
right: 2em;
}
#media only screen and (max-width: 37.5em) {
#cookiePopup {
width: 100%;
}
.hide {
bottom: 2em;
right: 0;
}
.show {
right: 0;
bottom: 0;
}
}
</style>
<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="77" style="background: var(--bs-body-bg);font-family: Cabin, sans-serif;--bs-primary: #42DCA3;--bs-primary-rgb: 66,220,163;">
<!--COOKIES-->
<div id="cookiePopup" class="hide">
<img src="cookie.png" />
<p>
Our website uses cookies to provide your browsing experience and
relevant information. Before continuing to use our website, you agree &
accept of our Cookie Policy & Privacy.
</p>
<button id="acceptCookie">Accept</button>
</div>
<nav class="navbar navbar-light navbar-expand-md fixed-top" id="mainNav">
<div class="container"><a class="navbar-brand" href="index.html">Name</a><button data-bs-toggle="collapse" class="navbar-toggler navbar-toggler-right" data-bs-target="#navbarResponsive" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" value="Menu"><i class="fa fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item nav-link"><a class="nav-link active" href="kontakt.html" style="background: rgba(255,255,255,0);">Kontakt</a></li>
<li class="nav-item nav-link"></li>
<li class="nav-item nav-link"></li>
</ul>
</div>
</div>
</nav>
<!--Section-->
<section class="mb-5"></section>
<!--Footer-->
<footer class="text-center bg-dark" style="background: rgb(0,0,0);">
...
</footer>
<!-- Script -->
<script>
let popUp = document.getElementById("cookiePopup");
//When user clicks the accept button
document.getElementById("acceptCookie").addEventListener("click", () => {
//Create date object
let d = new Date();
//Increment the current time by 1 minute (cookie will expire after 1 minute)
d.setMinutes(2 + d.getMinutes());
//Create Cookie withname = myCookieName, value = thisIsMyCookie and expiry time=1 minute
document.cookie = "myCookieName=thisIsMyCookie; expires = " + d + ";";
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
});
//Check if cookie is already present
const checkCookie = () => {
//Read the cookie and split on "="
let input = document.cookie.split("=");
//Check for our cookie
if (input[0] == "myCookieName") {
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
} else {
//Show the popup
popUp.classList.add("show");
popUp.classList.remove("hide");
}
};
//Check if cookie exists when page loads
window.onload = () => {
setTimeout(() => {
checkCookie();
}, 2000);
};
</script>
<footer class="text-center bg-dark" style="background: rgb(0,0,0);">
...
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"></script><!--EDIT for coding-->
<script src="assets/js/smart-forms.min.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
In my browser works fine

Related

I started working before giving the function at JS

I just put some JavaScript code for show nav. I mean when I click my navbar icon then show my all nav item. Yeah! perfectly this working, then I need again 2nd time when I click navbar icon then automatic should will remove nav all item by Javascript function remove code. that's is rules. but still i not giving any remove Javascript function code for remove navbar item. But working without remove Javascript function code. So my Question how this remove working Without code.
It(navbar) will only work below 768px in browser display size.
Sorry for double text for publishing my question.
I just put some JavaScript code for show nav. I mean when I click my navbar icon then show my all nav item. Yeah! perfectly this working, then I need again 2nd time when I click navbar icon then automatic should will remove nav all item by Javascript function remove code. that's is rules. but still i not giving any remove Javascript function code for remove navbar item. But working without remove Javascript function code. So my Question how this remove working Without code.
It(navbar) will only work below 768px in browser display size.
// MENU SHOW
const first = document.getElementById('nav-toggle')
const second = document.getElementById('nav-menu')
first.addEventListener('click',()=>{
second.classList.toggle('show')
} )
<!-- begin snippet: js hide: false console: true babel: false -->
<!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>E-Commerce Responsive Website</title>
<link rel="stylesheet" href="./style.css">
<!-- Box icon -->
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="l-header" id="header">
<nav class="nav bd-grid">
<div class="nav__toggle" id="nav-toggle">
<i class="bx bxs-grid"></i>
</div>
Shohel
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">Featured</li>
<li class="nav__item">Women</li>
<li class="nav__item">New</li>
<li class="nav__item">Shop</li>
</ul>
</div>
<div class="nav__shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="./script.js"></script>
</body>
</html>
}
html{
scroll-behavior: smooth;
}
body{
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
font-weight: var(--font-meduim);
color: var(--dark-color);
line-height: 1.6;
}
h1,h2,h3,p,ul{
margin: 0;
}
ul{
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: var(--dark-color);
}
img{
max-width: 100%;
height: auto;
display: block;
}
/* Class Css */
.section{
padding: 5rem 0 2rem;
}
.section-title{
position: relative;
font-size: var(--big-font-size);
margin-bottom: var(--mb-4);
text-align: center;
letter-spacing: .1rem;
}
.section-title::after{
content: '';
position: absolute;
width: 56px;
height: .18rem;
top: -1rem;
left: 0;
right: 0;
margin: auto;
background-color: var(--dark-color);
}
/* Layout */
.bd-grid{
max-width: 1024px;
display: gird;
grid-template-columns: 100%;
column-gap: 2rem;
width: calc(100%-2rem);
margin-left: var(--mb-2);
margin-right: var(--mb-2);
}
.l-header{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background-color: var(--dark-color-lighten);
}
/* nav */
.nav{
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
#media screen and (max-width:768px) {
.nav__menu{
position: fixed;
top: var(--header-height);
left: -100%;
width: 70%;
height: 100vh;
padding: 2rem;
background-color: var(--white-color);
transition: .5s;
}
}
.nav__item{
margin-bottom: var(--mb-4);
}
.nav__logo{
font-weight: var(--font-semi-bold);
}
.nav__toggle, .nav__shop{
font-size: 1.3rem;
cursor: pointer;
}
.show{
left: 0;
}
<!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>E-Commerce Responsive Website</title>
<link rel="stylesheet" href="./style.css">
<!-- Box icon -->
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="l-header" id="header">
<nav class="nav bd-grid">
<div class="nav__toggle" id="nav-toggle">
<i class="bx bxs-grid"></i>
</div>
Shohel
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">Featured</li>
<li class="nav__item">Women</li>
<li class="nav__item">New</li>
<li class="nav__item">Shop</li>
</ul>
</div>
<div class="nav__shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="./script.js"></script>
</body>
</html>

queryselector can not find id

I am trying to query a cloned element in my dom and queryselector can not find it. Specifically #reply_form brings up nothing despite the id being used in the template. I've also tried ("#reply_form"+post_id) since I re id it at the bottom before pushing it to the dom and nothing. I'm all out of ideas.
Here is the code:
<template id="reply_template">
<div class="lk">
<img class="profile_image" />
<div>
<div class="user">
<div class="reply_author"></div>
<div class="reply-body"></div>
</div>
<div class="reply">
<div class="d-flex align-items-center">
<i id="upvote" class="fas fa-arrow-up hover"></i>
<span id="upvote_count_badge" class="badge bg-secondary"></span>
<i id="downvote" class="fas fa-arrow-down hover"></i>
</div>
<div class="reply_comment" id="reply">Reply</div>
<div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal">
<i class="fas fa-award hover"></i>
</div>
</div>
<div id="vl" class="vl"></div>
<form id="reply_form" class="form-hidden">
<img class="profile_image"/>
<input class="cmt-reply" type="text" placeholder="Write a reply2"/>
</form>
<div id="reply_loader"><!--Nested Replies go here--></div>
</div>
</div>
</template>
<script>
function loadReplies(post_id, count) {
var reply_loader = document.querySelector('#reply_loader'+post_id)
var reply_template = document.querySelector('#reply_template');
if (count==0) {
fetch('/_load_replies?f='+post_id).then((response) => {
// Convert the response data to JSON
response.json().then((data) => {
for (var i = 0; i < data.length; i++) {
//add_post(template, counter)
// Clone the HTML template
let template_clone = reply_template.content.cloneNode(true);
// Query & update the template content
let post_id=data[i].post_id;
let post_url=data[i].post_url;
let author=data[i].author;
let author_id=data[i].author_id;
let post_saved=data[i].current_user.post_saved;
let post_upvoted=data[i].current_user.post_upvoted;
let post_downvoted=data[i].current_user.post_downvoted;
let current_user=data[i].current_user.current_user;
let is_moderator=data[i].current_user.is_moderator;
let is_big_top_moderator=data[i].current_user.is_big_top_moderator;
let awards=data[i].awards;
let media_url=data[i].media_url;
let community=data[i].community;
profile_images=template_clone.querySelectorAll(".profile_image");
for(var k=0; k<profile_images.length; k++) {
profile_images[k].src=data[i].post_profile_image;
}
let top=data[i].author;
top+=" "+moment(data[i].timestamp).fromNow();
if (awards) {
top+=' ';
for(var key in awards) {
top+=awards[key]+' '+key;
}
}
if (post_upvoted) {
template_clone.querySelector("#upvote").setAttribute("style", "color: white");
template_clone.querySelector("#downvote").setAttribute("style", "color: gray");
} else if (post_downvoted) {
template_clone.querySelector("#upvote").setAttribute("style", "color: gray");
template_clone.querySelector("#downvote").setAttribute("style", "color: white");
} else {
template_clone.querySelector("#upvote").setAttribute("style", "color: gray");
template_clone.querySelector("#downvote").setAttribute("style", "color: gray");
}
template_clone.querySelector("#upvote").setAttribute("onclick", "vote("+post_id+",1)");
template_clone.querySelector("#downvote").setAttribute("onclick", "vote("+post_id+",0)");
template_clone.querySelector("#post_award_modal").setAttribute("onclick", "build_award_modal("+post_id+")");
template_clone.querySelector(".reply_author").innerHTML=top
template_clone.querySelector(".reply-body").innerHTML=data[i].body;
template_clone.querySelector("#upvote_count_badge").innerHTML=data[i].upvotes-data[i].downvotes;
//it finds #reply no problem
template_clone.querySelector("#reply").addEventListener("click", (e)=>{
e.target.classList.toggle("blue");
//It can not find this at all no matter what. I re id it at the bottom
console.log(template_clone.querySelector("#reply_form"+post_id))
template_clone.querySelector("#reply_form"+post_id).setAttribute("style", "color: blue")
template_clone.querySelector("#vl")
});
//re id
template_clone.querySelector("#upvote").id="upvote"+post_id;
template_clone.querySelector("#upvote_count_badge").id="upvote_count_badge"+post_id;
template_clone.querySelector("#downvote").id="downvote"+post_id;
template_clone.querySelector("#reply_loader").id="reply_loader"+post_id;
template_clone.querySelector("#reply").id="reply"+post_id;
template_clone.querySelector("#reply_form").id="reply_form"+post_id;
template_clone.querySelector("#vl").id="vl"+post_id;
reply_loader.appendChild(template_clone);
}
})
})
}
}
</script>
Here is a code snippet:
function open_form(post_id) {
console.log("reply"+post_id)
document.getElementById("#reply"+post_id).classList.toggle("blue")
document.getElementById("#reply_form"+post_id).classList.toggle("open")
document.getElementsByID("#vl"+post_id).classList.toggle("open");
}
.like-comment, .reply_comment{
cursor: pointer;
}
.vl{
border-left: 1px solid white;
border-bottom: 1px solid white;
border-bottom-left-radius: 30px;
width: 5%;
top: 25px;
position: absolute;
height: 100%;
left: -20px;
display: none;
}
.thumb.open, .vl.open, .form-hidden.open{
display: flex;
}
.form-hidden{
position: relative;
transform: translateX(35px);
display: none;
}
.profile_image{
width: 30px;
height: 30px;
border-radius: 50%;
}
.cmt-reply{
width: 75%;
height: 30px;
padding: 5px;
border-radius: 8px;
border: none;
margin-left: 5px;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link href="/static/css/style.css" rel="stylesheet">
<script src="https://js.stripe.com/v3/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<!--Broken Code here-->
<div class="reply_comment" id="reply64" onclick="open_form(64)">Reply</div>
<div id="vl64" class="vl"></div>
<form id="reply_form64" class="form-hidden">
<img class="profile_image" src="/avatars/1be25219994e4ef695e1c6f0d4d128ac_m.png">
<input class="cmt-reply" type="text" placeholder="Write a reply2">
</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>

When using getElementById you don't need to pass # in the string. check following snippet.
function open_form(post_id) {
console.log("reply" + post_id)
document.getElementById("reply" + post_id).classList.toggle("blue");
document.getElementById("reply_form" + post_id).classList.toggle("open");
document.getElementById("vl" + post_id).classList.toggle("open");
}
.like-comment,
.reply_comment {
cursor: pointer;
}
.vl {
border-left: 1px solid white;
border-bottom: 1px solid white;
border-bottom-left-radius: 30px;
width: 5%;
top: 25px;
position: absolute;
height: 100%;
left: -20px;
display: none;
}
.thumb.open,
.vl.open,
.form-hidden.open {
display: flex;
}
.form-hidden {
position: relative;
transform: translateX(35px);
display: none;
}
.profile_image {
width: 30px;
height: 30px;
border-radius: 50%;
}
.cmt-reply {
width: 75%;
height: 30px;
padding: 5px;
border-radius: 8px;
border: none;
margin-left: 5px;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link href="/static/css/style.css" rel="stylesheet">
<script src="https://js.stripe.com/v3/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<!--Broken Code here-->
<div class="reply_comment" id="reply64" onclick="open_form(64)">Reply</div>
<div id="vl64" class="vl"></div>
<form id="reply_form64" class="form-hidden">
<img class="profile_image" src="/avatars/1be25219994e4ef695e1c6f0d4d128ac_m.png">
<input class="cmt-reply" type="text" placeholder="Write a reply2">
</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
Here is getElementById documentation on mdn.

Fix position of Image without position:fixed

I have a SideMenu bar. The Header of the sidemenu contains an image and below that are contents. It is scrollable. i want to make the menu scrollable and not the image. I cant use position:fixed because its a collapsable menu and some other reasons. How can i make only the contents scrollable?
CODE
document.write('<div> <img style="width:80%;margin:10%;"src="Files/Logo.png"/> <hr> </div>');
document.write('<div class="scroll">'+
document.write(
'<button class="list" href="#X1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Home </button>'+
'<div class="show list-unstyled" id="X1">'+
'<a href="'+myArray[0][0]+'" class="'+myArray[0][1]+'" > Site 1 </a> '+
'<a href="'+myArray[1][0]+'" class="'+myArray[1][1]+'" > Site 2 </a> '+
'</div>'
);
document.write('</div>');
I tried putting seperat DIV but doesnt work
CSS
.scroll {
max-height: 500px;
overflow-y: scroll;
background: #000000;
}
#sidebar {
min-width: 210px;
max-width: 210px;
background: #000000;
color: #fff;
transition: all 0.3s;
}
FULL CODE
#sidebar {
min-width: 210px;
max-width: 210px;
background: #000000;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active , button div a {
padding-left: 30px;
margin-left: 0;
font-size: 0.9em;
font-family: Verdana;
background: #ffffff;
}
#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar.active .dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 0;
background: #000000;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
COMPLETE CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Collapsible sidebar using Bootstrap 4</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style.css">
<!-- <link rel="stylesheet" type="text/css" href="CSS/Tags.css">
<link rel="stylesheet" type="text/css" href="CSS/Nav.css">
<link rel="stylesheet" type="text/css" href="CSS/Card.css"> -->
<!-- <link rel="stylesheet" type="text/css" href="CSS/Buttons.css"> -->
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<nav id="sidebar">
<script src="C-NavigationBar.js"></script>
<script src="JavaScript/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var y = document.getElementById(1);
y.className += " w3-show";
y.previousElementSibling.className += " w3-theme ";
function myAccFunc(n) {
var x = document.getElementById(n);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-theme ";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace("w3-theme", "");
}
}
var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
editor.session.setMode("ace/mode/c_cpp");
editor.setReadOnly(true);
editor.resize();
</script>
</nav>
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button style="width:auto;"type="button" id="sidebarCollapse" class="btn btn-dark">
<i class="fas fa-align-justify"></i>
<span>Menu</span>
</button>
</div>
</nav>
</div>
</div>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
</body>
</html>
EDIT
var myArray = [
["Site1.php", 0],
["Site1.php", 0],
];
var X = window.location.href.substring(window.location.href.lastIndexOf("/")+1);
var i;
for (i = 0; i < myArray .length; i++) {
if (X == myArray [i][0]) {
myArray [i][1] = 'active';
break;
}
}
function Previous() {
window.location.href = myArray [i-1][0];
}
function Next() {
window.location.href = myArray [i+1][0];
}
document.write('<div> <img
class="header"tyle="width:80%;margin:10%;"src="Files/Logo.png"/> <hr> </div>');
document.write(
'<button class="list" href="#X1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Home </button>'+
'<div class="show list-unstyled" id="X1">'+
'<a href="'+myArray [0][0]+'" class="'+myArray [0][1]+'" > 1 </a> '+
'<a href="'+myArray [1][0]+'" class="'+myArray [1][1]+'" > 2</a> '+
'</div>'
);

I would suggest you to use Jquery to achieve what you want.
At first, make the position: fixed.
But as you said, I can't take a position fixed, because the menu is collapsable. Now the jquery comes into play.
Wherever you wrote the "collapse" function, add one more line of jquery code to hide your header image.
When the collapsed menu will be shown again, you have to make your header image visible using jquery again.
When all doors get closed, create your own cleverly.

I am getting this errors so before fixing or replicate the issue. I need to resolve the below errors. So if you can please attach the code files would be great.

JQuery Add Text Element To Nav When It Reaches Top Of Page

I am making a website with a stick navbar. I would like to add the text elemnent "▲" to the left of the navbar when it reaches the top of the webpage and "sticks". I would also like to remove the element when the navbar "unsticks" (leaves the top of the webpage). Below is the JQuery and HTML I am using:
var distance = $('div').offset().top,
$window = $(window);
$window.scroll(function() {
if ($window.scrollTop() >= distance) {
$("#nav").prepend("<li style=\"float: left;\" id=\"navSymbol\">▲</li>");
} else {
$("#navSymbol").remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav" class="sticky">
<li>HOME</li>
<li>CAPABILITIES</li>
<li>ABOUT US</li>
<li>RFQ</li>
<li>CONTACT US</li>
</ul>
However when I scroll the JQuery just inserts a million symbols into the navbar whenever I scroll instead of just one when it reaches the top like this:
This is very frustrating so I help someone can help.
Edit:
The complete code is below, not sure if it helps :) (It is not responsive yet so doesn't look right without being expanded)
#import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900&display=swap');
#keyframes shadow-pulse {
0% {
text-shadow: 0 0 0px black;
}
100% {
text-shadow: 0 0 10vw black;
}
}
#headerTriangle {
font-size: 6vw !important;
animation: shadow-pulse 3s infinite;
}
#header {
text-align: center;
padding-top: 8vw;
}
.headerText {
font-family: 'Rubik', sans-serif;
font-size: 5vw;
padding: 2vw 0vw 2vw 0vw;
}
#nav {
padding-top: 4vw;
text-align: center;
}
#nav li {
display: inline;
}
#nav a {
text-decoration: none;
padding: 0 30px;
font-family: 'Rubik', sans-serif;
color: black;
}
#nav a:hover {
animation: shadow-pulse 2s 1;
}
.sticky {
position: sticky;
top: 0;
width: 100%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Handmade Studios</title>
<meta name="description" content="">
<meta name="author" content="Alex Hawking">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Fonts-->
</head>
<body>
<div id="header">
<h1 id="headerTriangle">▲</h1>
<h1 class="headerText" style="font-weight: 500;">Hello World</h1>
<h1 class="headerText" style="font-weight: 300; font-size: 3vw !important;">This is some random stuff I've made.
</h1>
</div>
<ul id="nav" class="sticky">
<li id="navSymbol">▲</li>
<li>HOME</li>
<li>CAPABILITIES</li>
<li>ABOUT US</li>
<li>RFQ</li>
<li>CONTACT US</li>
</ul>
<div style="height: 100vw;"></div>
<!--Scripts-->
<script src="js/scripts.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
console.log($('div:last').offset().top)
var distance = $('div').offset().top,
$window = $(window);
$window.scroll(function() {
if ($window.scrollTop() >= distance) {
$("#navSymbol").hide();
} else {
$("#navSymbol").show();
}
});
</script>
</body>
</html>

Try this
#import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900&display=swap');
#keyframes shadow-pulse {
0% {
text-shadow: 0 0 0px black;
}
100% {
text-shadow: 0 0 10vw black;
}
}
#headerTriangle {
font-size: 6vw !important;
animation: shadow-pulse 3s infinite;
}
#header {
text-align: center;
padding-top: 8vw;
}
.headerText {
font-family: 'Rubik', sans-serif;
font-size: 5vw;
padding: 2vw 0vw 2vw 0vw;
}
#nav {
padding-top: 4vw;
text-align: center;
}
#nav li {
display: inline;
}
#nav a {
text-decoration: none;
padding: 0 30px;
font-family: 'Rubik', sans-serif;
color: black;
}
#nav a:hover {
animation: shadow-pulse 2s 1;
}
.sticky {
position: sticky;
top: 0;
width: 100%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Handmade Studios</title>
<meta name="description" content="">
<meta name="author" content="Alex Hawking">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Fonts-->
</head>
<body>
<div id="header">
<h1 id="headerTriangle">▲</h1>
<h1 class="headerText" style="font-weight: 500;">Hello World</h1>
<h1 class="headerText" style="font-weight: 300; font-size: 3vw !important;">This is some random stuff I've made.
</h1>
</div>
<ul id="nav" class="sticky">
<li id="navSymbol">▲</li>
<li>HOME</li>
<li>CAPABILITIES</li>
<li>ABOUT US</li>
<li>RFQ</li>
<li>CONTACT US</li>
</ul>
<div style="height: 100vw;"></div>
<!--Scripts-->
<script src="js/scripts.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
console.log($('#navSymbol').offset().top)
var distance = $('#navSymbol').offset().top,
$window = $(window);
$window.scroll(function() {
console.log($window.scrollTop());
if ($window.scrollTop() <= 0) {
$("#navSymbol").show();
} else {
$("#navSymbol").hide();
}
});
</script>
</body>
</html>

Random background generator with Javascript and CSS

I'm trying to make the background change randomly when coming to my site.
I saved some images as 1.jpg, 2.jpg etc and I tried to do a bit of javascript random. Can any one suss why this would not work? I know you won't be able to see the photos, but any help would be great.
Here is the jsbin - notice the background is selected in #topContainer in css
https://jsbin.com/qodukozuqi/edit?html,output
<script type="text/javascript">
function randomBackground () {
var randomPicture = [Math.floor(Math.random() * 4)+ '.jpg'];
}
return randomPicture;
</script>
Here is the full 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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Tenor+Sans::latin', 'Rock+Salt::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
<script type="text/javascript">
function randomBackground () {
var randomPicture = [Math.floor(Math.random() * 4)+ '.jpg'];
return randomPicture;
}
</script>
<title>NaturallyPizza</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href='https://fonts.googleapis.com/css?family=Tenor+Sans|Rock+Salt' rel='stylesheet' type='text/css'/>
<style>
.navbar-collapse{
color: white;
}
.navbar-brand {
font-size: 1.5em;
font-family: 'Rock Salt', sans-serif;
color: white;
}
.navbar-default {
margin-top: 30px;
background-color: transparent;
border: hidden;
font-family: 'Tenor Sans', sans-serif;
}
.listing a{
font-size: 1.5em;
color: white;
}
#topContainer {
background-image: url("images/background/"+randomPicture);
height: 500px;
width: 100%;
opacity: 0.95;
background-size: cover;
color: white;
}
.navbar-default .navbar-brand {
color: white;
}
#media (max-width: 760px) {
.navbar-default {
background-color: lightgrey;
opacity: 0.95;
}
}
#topRow {
margin-top: 130px;
font-family: 'Tenor Sans', sans-serif;
}
.center {
text-align: center;
}
.title {
font-size: 3em;
color: white;
}
.backing {
background-color: grey;
opacity: 0.6;
border-radius: 10px;
}
.marginTop {
margin-top: 30px;
}
.jumbotron {
background-image: url("images/background/1.jpg");
background-size: cover;
}
</style>
</head>
<body>
<script type="text/javascript">alert(randomBackground);</script>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar color-me"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">NaturallyPizza</a>
</div> <!-- class="navbar-header" -->
<div class="collapse navbar-collapse navbar-right listing">
<ul class="nav navbar-nav">
<li class="color-me">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div> <!-- class="collapse navbar-collapse" -->
</div>
</div> <!-- class="navbar navbar-default" -->
<div class="container-fluid contentContainer" id="topContainer">
<div class="row-fluid">
<div class="col-md-8 col-md-offset-2 backing" id="topRow">
<h1 class="title marginTop center">Learn to make great Pizza!</h1>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$(".contentContainer").css("min-height", $(window).height());
</script>
</body>
</html>

You cannot use JS inside a CSS, you have to set the style directly with javascript (put this code at the end of the page, after #topContainer):
<script>
var el = document.getElementById('topContainer');
el.style.backgroundImage = 'url(images/background/' + Math.floor(Math.random() * 4) + '.jpg)';
</script>

Your return statement is outside of your function.
Just use this
function randomBackground() {
var randomPicture = [Math.floor(Math.random() * 4) + '.jpg'];
return randomPicture;
}
jsFiddle : https://jsfiddle.net/hbhz3x4L/

We Keep Coding

JavaScript is the programming language of the Web.

Create your own cookie banner - javascript

Related

I started working before giving the function at JS

queryselector can not find id

Fix position of Image without position:fixed

JQuery Add Text Element To Nav When It Reaches Top Of Page

Random background generator with Javascript and CSS

Categories

Resources

We Keep Coding

JavaScript is the programming language of the Web.

Create your own cookie banner - javascript

Related

I started working before giving the function at JS

queryselector can not find id

Fix position of Image without **position:fixed**

JQuery Add Text Element To Nav When It Reaches Top Of Page

Random background generator with Javascript and CSS

Categories

Resources

Fix position of Image without position:fixed