Random background generator with Javascript and CSS - javascript

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/

Related

Create your own cookie banner

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

How can I hide a specific div when its clicked using an event listener?

The thing I want to accomplish it's to hide the specific div you clicked, and show another one instead, I already tried some things but didn't work
One of them was this, as you will see I was trying its to hide the clicked element passing the id of the element by a parameter but didn't work
var el = document.getElementById(obj);
el.style.display = 'none';
}
This is how it should work: https://www.screencast.com/t/WGeokVkv
Until now I've had accomplish showing the next sibling of the clicked element, but I can't hide the one that was clicked either I can't hide the next sibling when its clicked again
How can I do that?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<!-- Our css -->
<title>FAQ</title>
<style>
.card{
box-shadow: 0px 5px 10px #000000;
border-radius: 25px 25px 25px 25px;
}
.fa-question-circle{
font-size: 2rem;
color: #FFC600;
}
.card-subtitle{
font-family: Impact, Charcoal, sans-serif;
color: #31261B !important;
}
.hr-yellow-border{
border: 2px solid #FFC600 ;
}
.card-text{
color: #315470 !important;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.hr-grey-border{
border: 2px solid #AB989D ;
}
.labels-text{
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.labels-wrapper{
background: #315470 !important;
height: 3rem;
display: flex;
align-items: center ;
/*Take care with the transition*/
transition: 0.4s;
}
div.col-11 > .panel > p {
font-size: small;
}
.plus-icon{
cursor: pointer;
transition: 0.4s;
display: inline;
}
.panel{
display: none;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container-fluid d-flex justify-content-center align-items-center">
<div class="col-9">
<br>
<div class="card" style="height: min-content;">
<div class="card-body">
<i class="fas fa-question-circle d-flex justify-content-center mb-3"></i>
<div class="col-11 mx-auto">
<hr class="hr-yellow-border">
<br>
<div class="labels-wrapper d-flex justify-content-between" id="question" onClick="hide('question')">
<h5 class="ml-2 text-white labels-text my-auto"> How do I access the event on the day of the conference?</h5><h4 class="plus-icon ml-auto mr-2 text-warning my-auto" id="question" onClick="hide('question')">+</h4>
</div>
<div class="panel">
<div class="row">
<h4 class="card-text ml-3">How do I access the event on the day of the conference?</h4><h4 class="plus-icon ml-auto mr-4 text-warning">-</h4>
</div>
<hr class="hr-grey-border">
<p class="ml-3">On October 15, 2020 at 10:00 AM EST, the login button will accept your registration credentials to access the online platform</p>
</div>
<br>
</div>
</div>
</div>
<br>
<br>
</div>
</div>
<!-- Bootstrap and jQuery -->
<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>
var acc = document.getElementsByClassName("labels-wrapper");
var i;
//var question = document.getElementById("question")
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
//this.classList.toggle("panel");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
function hide(obj) {
var el = document.getElementById(obj);
el.style.display = 'none';
}
</script>
<script>
</script>
</body>
</html>
The reason your code is not working because flex library has style display:flex!important if you add display:none its will be override by library style due to important. In your javascript you have do it same way.
here is running snippet. Added solution to explain why its not working you can optimise code more.
var acc = document.getElementsByClassName("labels-wrapper");
var i;
//var question = document.getElementById("question")
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
//this.classList.toggle("panel");
/* Toggle between hiding and showing the active panel */
// console.log(this);
// this.style.display = "none!important";
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
function hide(obj) {
console.log(obj);
var el = document.getElementById(obj);
el.setAttribute('style', 'display:none !important');
}
function openQuestion(obj) {
var el = document.getElementById(obj);
console.log(obj);
el.setAttribute('style', 'display:block');
var panel = el.nextElementSibling;
panel.style.display = "none";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<!-- Our css -->
<title>FAQ</title>
<style>
.card {
box-shadow: 0px 5px 10px #000000;
border-radius: 25px 25px 25px 25px;
}
.fa-question-circle {
font-size: 2rem;
color: #FFC600;
}
.card-subtitle {
font-family: Impact, Charcoal, sans-serif;
color: #31261B !important;
}
.hr-yellow-border {
border: 2px solid #FFC600;
}
.card-text {
color: #315470 !important;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.hr-grey-border {
border: 2px solid #AB989D;
}
.labels-text {
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.labels-wrapper {
background: #315470 !important;
height: 3rem;
display: flex;
align-items: center;
/*Take care with the transition*/
transition: 0.4s;
}
div.col-11>.panel>p {
font-size: small;
}
.plus-icon {
cursor: pointer;
transition: 0.4s;
display: inline;
}
.panel {
display: none;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container-fluid d-flex justify-content-center align-items-center">
<div class="col-9">
<br>
<div class="card" style="height: min-content;">
<div class="card-body">
<i class="fas fa-question-circle d-flex justify-content-center mb-3"></i>
<div class="col-11 mx-auto">
<hr class="hr-yellow-border">
<br>
<div class="labels-wrapper d-flex justify-content-between" id="question" onClick="hide('question')">
<h5 class="ml-2 text-white labels-text my-auto"> How do I access the event on the day of the conference?</h5>
<h4 class="plus-icon ml-auto mr-2 text-warning my-auto" id="question" onClick="hide('question')">+</h4>
</div>
<div class="panel" onClick="openQuestion('question')">
<div class="row">
<h4 class="card-text ml-3">How do I access the event on the day of the conference?</h4>
<h4 class="plus-icon ml-auto mr-4 text-warning">-</h4>
</div>
<hr class="hr-grey-border">
<p class="ml-3">On October 15, 2020 at 10:00 AM EST, the login button will accept your registration credentials to access the online platform</p>
</div>
<br>
</div>
</div>
</div>
<br>
<br>
</div>
</div>
<!-- Bootstrap and jQuery -->
<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>
</body>
</html>
Update: Demo with complete code as requested by OP.
function toggleDivs() {
$("#div1").toggle();
$("#div2").toggle();
}
.div {
margin:50px;
height:200px;width:200px;background:blue;
}
#div2 {
background:red;display:none;
}
#div1 {z-index:10;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="toggleDivs()">Toggler</button>
<div class="div" id="div1"></div>
<div class="div" id="div2"></div>
With jQuery, you can use toggle() function to show or hide the element on click.
$('#question').toggle();
$('#question').click(function(){
$(this).toggle();
});
or if you wish to use class instead of ID attribute, you use event delegation to target the specific element.
$('.question').on('click', function(){
$(this).toggle();
});
Please try this,
I remove same - icon in html.
This can change the icon with js
$(this).children(".plus-icon").text("+");// for + icon
$(this).children(".plus-icon").text("-");// for - icon
var acc = document.getElementsByClassName("labels-wrapper");
for (var i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
$(this).children(".plus-icon").text("+");
} else {
panel.style.display = "block";
$(this).children(".plus-icon").text("-");
}
});
}
.card{
box-shadow: 0px 5px 10px #000000;
border-radius: 25px 25px 25px 25px;
}
.fa-question-circle{
font-size: 2rem;
color: #FFC600;
}
.card-subtitle{
font-family: Impact, Charcoal, sans-serif;
color: #31261B !important;
}
.hr-yellow-border{
border: 2px solid #FFC600 ;
}
.card-text{
color: #315470 !important;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.hr-grey-border{
border: 2px solid #AB989D ;
}
.labels-text{
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.labels-wrapper{
background: #315470 !important;
height: 3rem;
display: flex;
align-items: center ;
/*Take care with the transition*/
transition: 0.4s;
}
div.col-11 > .panel > p {
font-size: small;
}
.plus-icon{
cursor: pointer;
transition: 0.4s;
display: inline;
}
.panel{
display: none;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<!-- Our css -->
<title>FAQ</title>
</head>
<body>
<div class="container-fluid">
<div class="col-11">
<br>
<div class="card">
<div class="card-body">
<i class="fas fa-question-circle d-flex justify-content-center"></i>
<div class="row">
<div class="col-12">
<hr class="hr-yellow-border">
<br>
<div class="labels-wrapper d-flex justify-content-between" id="question">
<h5 class="ml-2 text-white labels-text my-auto"> How do I access the event on the day of the conference?</h5>
<h4 class="plus-icon ml-auto mr-2 text-warning my-auto">+</h4>
</div>
<div class="panel">
<p class="mt-2">On October 15, 2020 at 10:00 AM EST, the login button will accept your registration credentials to access the online platform</p>
</div>
<br>
</div>
</div>
</div>
</div>
<br>
<br>
</div>
</div>
<!-- Bootstrap and jQuery -->
<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>
</script>
</body>
</html>

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.

Bootstrap .container-fluid overflow

I have look for lots of solutions for this in StackOverflow but none solved it, so I hope someone could helo me directly in this post.
I'm making a simple navegation bar for a web page and I wanted it to full fill the width of the browser window, so I gave it the class .container-fluid, and it worked perfectly in a big computer, but when using a laptop, the elements inside the .container-fluid overflows the window like this:
A better look at it is this:
Why is this happening?
Here is the code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>__codekup__</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div class="header container-fluid">
<div class="row align-items-center justify-content-between">
<div class="col-sm-2 text-center">
<h1>Pliki</h1>
</div>
<div class="col-sm-2">
<div class="row align-items-center">
<div class="col-sm-6 text-center">
Instructions
</div>
<div class="col-sm-6 text-center">
<button type="button" class="btn btn-outline-primary pull-right">
Download Game
</button>
</div>
</div>
</div>
</div>
</div>
<div class="main"></div>
<!-- Bootstrap dependencies and jQuery library -->
<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>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
SASS
#import url('https://fonts.googleapis.com/css?family=Lato');
$primary-color: rgb(118, 200, 136);
$bg-color: rgb(33, 37, 43);
.header {
background-color: $bg-color;
height: 70px;
color: $primary-color;
.row {
height: 100%;
}
h1 {
font-family: Courier, sans-serif;
}
.btn {
color: $primary-color;
border-color: $primary-color;
font-family: Lato, sans-serif;
&:hover {
color: $bg-color;
background-color: $primary-color;
}
}
}
.main {
background: black;
}
JAVASCRIPT
$(document).ready(function () {
var h = window.innerHeight;
$('.main').css('height', h + 'px');
});
The .col-sm-2 class that wraps the button is too narrow to fit the contents. I would remove the .col-* classes from those columns, remove .row from the buttons' parent and use .d-flex instead, apply a margin between the buttons and a padding to the .header .row (to match similar to what you had before - though it isn't necessary).
Here's a pen for your changes in scss https://codepen.io/mcoker/pen/qjxmLr
$(document).ready(function () {
var h = window.innerHeight;
$('.main').css('height', h + 'px');
});
#import url("https://fonts.googleapis.com/css?family=Lato");
.header {
background-color: #21252b;
height: 70px;
color: #76c888;
}
.header .row {
height: 100%;
padding: 0 30px;
}
.header h1 {
font-family: Courier, sans-serif;
}
.header .btn {
color: #76c888;
border-color: #76c888;
font-family: Lato, sans-serif;
margin-left: 1em;
}
.header .btn:hover {
color: #21252b;
background-color: #76c888;
}
.main {
background: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>__codekup__</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div class="header container-fluid">
<div class="row align-items-center justify-content-between">
<div>
<h1>Pliki</h1>
</div>
<div>
<div class="d-flex align-items-center">
<div>
Instructions
</div>
<div>
<button type="button" class="btn btn-outline-primary pull-right">
Download Game
</button>
</div>
</div>
</div>
</div>
</div>
<div class="main"></div>
<!-- Bootstrap dependencies and jQuery library -->
<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>
<script src="main.js" type="text/javascript"></script>
</body>
</html>

trying to horizontally align a countdown timer (first time coding/building)

This is my first time building a website. I picked a free bootstrap 3 theme and started editing it from there to try and get the hang of it all. So far it has been going well but I am having problems trying to horizontally center the countdown timer on my site (http://romy.landofthelegend.com/index.php?cID=1)
I tried fidgeting with the HTML, js, and CSS but if there is change the timer will still be aligned left but have a word-break instead.
var finalDate = '2017/04/14';
$('div#counter').countdown(finalDate)
.on('update.countdown', function(event) {
$(this).html(event.strftime('<div class=\"half\">' +
'<span>%D <sup>days</sup></span>' +
'<span>%H <sup>hours</sup></span>' +
'</div>' +
'<div class=\"half\">' +
'<span>%M <sup>mins</sup></span>' +
'<span>%S <sup>secs</sup></span>' +
'</div>'));
});
.main-content-tablecell {
display: table-cell;
vertical-align: bottom;
z-index: 700;
}
.main-content-tablecell .row {
position: relative;
padding-top: 4.2rem;
padding-bottom: 15rem;
}
.main-content-tablecell #counter {
margin-bottom: 4.2rem;
}
.main-content-tablecell #counter:before,
.main-content-tablecell #counter:after {
content: "";
display: table;
}
.main-content-tablecell #counter:after {
clear: both;
}
.main-content-tablecell #counter .half {
float: left;
}
.main-content-tablecell #counter span {
float: left;
text-align: right;
color: #FFFFFF;
font-family: "roboto-black", sans-serif;
font-size: 12rem;
line-height: 1;
padding: 0;
margin-bottom: 1.5rem;
}
.main-content-tablecell #counter span sup {
font-family: "roboto-bold", sans-serif;
font-size: .17em;
color: rgba(255, 255, 255, 0.3);
top: -3.6em;
right: 1em;
}
.main-content-tablecell h1 {
font-size: 4.2rem;
line-height: 1.143;
color: #FFFFFF;
margin-bottom: 1.2rem;
max-width: 600px;
position: relative;
}
.main-content-tablecell p {
color: rgba(255, 255, 255, 0.3);
font-family: "roboto-regular", sans-serif;
font-size: 1.8rem;
max-width: 400px;
<div class="row">
<div class="col-md-2 col-md-offset-5">
<div class="col-twelve">
<div id="counter">
<div class="center-div">
<span class="inner">94 <sup>days</sup></span>
<span class="inner">23 <sup>hours</sup></span>
</div>
<div class="center-div">
<span class="inner"> 40 <sup>mins</sup></span>
<span class="inner">03 <sup>secs</sup></span>
</div>
</div>
</div>
</div>
</div>
please try to make it as simple as possible with explaining, since I am still learning :)
Thank you in advance!
I would suggest first go over bootstrap css and understand grid system and existing components structure. Try to reuse what is already. http://getbootstrap.com/css/#overview
<!DOCTYPE html>
<html lang="en">
<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 -->
<title>Bootstrap</title>
<!-- Bootstrap -->
<link href="http://getbootstrap.com/dist/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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="contianer"> <!-- Boostrap main contianer (Bootstrap requires a containing element to wrap site contents and house in grid system.) http://getbootstrap.com/css/#overview-container-->
<div class="row">
<div class="col-md-2 col-md-offset-5">
<div class="col-twelve">
<div id="counter" class="text-center"></div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="http://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>
<script>
var finalDate = '2017/04/14';
$('#counter').countdown(finalDate)
.on('update.countdown', function(event) {
$(this).html(event.strftime('<div>' +
'<span>%D <sup>days</sup></span>' +
'<span>%H <sup>hours</sup></span>' +
'</div>' +
'<div class=\"half\">' +
'<span>%M <sup>mins</sup></span>' +
'<span>%S <sup>secs</sup></span>' +
'</div>'));
});
</script>
</body>
</html>

Categories