I have a DIV with an H2 inside. The DIV is completely separate from all the other work, placed at the bottom of the HTML, yet for some reason it is sticking to the top of the page, inside one of the other DIVs. I've tried Googling but to no avail, I need it below the background to start working on a new section. What should I be looking at?
https://jsfiddle.net/5vLvm3xx/
ps. I dont know how many people browse these forums, but I've been asking alot of questions here today because I keep running into these small issues that stop me from continuing (im a beginner). I hope it is no bother. :)
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>onepageskiw</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js.js"></script>
</head>
<body>
<div>
<nav>
<ul id="menu">
<li>Top</li>
<li>Om Eventet</li>
<li>Lokation</li>
<li>Kontakt</li>
</ul>
</nav>
</div>
<div id="logodiv">
<img src="../design/logotop.png">
</div>
<div id="overskrift">
<h1>EVENTET STARTER OM</h1>
</div>
<div id="countdowner">
<table id="table">
<tr>
<div id="countdown">
<td id="id1"></td>
<td id="id2"></td>
<td id="id3"></td>
<td id="id4"></td>
</div>
<tr>
<tr>
<td class="timeLabel">DAGE</td>
<td class="timeLabel">TIMER</td>
<td class="timeLabel">MIN</td>
<td class="timeLabel">SEK</td>
</tr>
</tr>
</tr>
</table>
</div>
<script>
CountDownTimer('06/25/2016 10:00 AM', 'id');
function CountDownTimer(dt, id)
{
var end = new Date(dt);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById(id).innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById(id+"1").innerHTML = days;
document.getElementById(id+"2").innerHTML = hours;
document.getElementById(id+"3").innerHTML = minutes;
document.getElementById(id+"4").innerHTML = seconds;
}
timer = setInterval(showRemaining, 1000);
}
</script>
<div id="information">
<h2>Help me. I'm stuck.</h2>
</div>
</body>
</html>
CSS
#charset "utf-8";
#import url(https://fonts.googleapis.com/css? family=Montserrat:400|Raleway:100,400|);
body {
margin:0;
}
html {
background:url(http://www.freelargeimages.com/wp- content/uploads/2014/12/Black_background.jpg) no-repeat center center fixed;
background-size: cover;
background-repeat: no-repeat;
/*background-position: top center;*/
}
#logodiv {
position:relative;
text-align:center;
}
#logodiv>img {
width:15%;
}
h1 {
font-family:raleway;
font-weight:100;
position:absolute;
width:100%;
text-align:center;
color:white;
letter-spacing:11px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-230%);
font-size:2.5em;
white-space: nowrap;
}
#countdowner {
font-family:sans-serif;
color:white;
position:absolute;
margin:0;
padding:0;
width:100%;
font-size:2em;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-20%);
}
#id1 {
font-size:2.5em;
}
#id2 {
font-size:2.5em;
}
#id3 {
font-size:2.5em;
}
#id4 {
font-size:2.5em;
}
.timeLabel {
font-size:0.7em;
color:#f1a01e;
font-family:montserrat;
font-weight:700;
}
#table {
margin:0 auto;
text-align:center;
}
#table td{
padding:0px 45px;
}
#menu {
position:absolute;
padding:0;
width:100%;
bottom:0;
text-align:center;
}
#menu>li {
font-size:20px;
list-style:none;
display:inline-block;
text-transform:uppercase;
letter-spacing:3px;
font-family:raleway;
font-weight:400;
}
#menu>li>a {
padding:0 15px;
text-decoration:none;
color:white;
}
#menu>li>a:hover {
color:#f1a01e;
}
#information {
position:relative;
clear:both;
color:red;
}
This is because all of your other elements are using position: absolute;
You may use the flex properties, height order and rearrange a bit the structure (1 wrapper and a class): https://jsfiddle.net/5vLvm3xx/2/
CountDownTimer('06/25/2016 10:00 AM', 'id');
function CountDownTimer(dt, id) {
var end = new Date(dt);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById(id).innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById(id + "1").innerHTML = days;
document.getElementById(id + "2").innerHTML = hours;
document.getElementById(id + "3").innerHTML = minutes;
document.getElementById(id + "4").innerHTML = seconds;
}
timer = setInterval(showRemaining, 1000);
}
#charset "utf-8";
#import url(https://fonts.googleapis.com/css?family=Montserrat:400|Raleway:100,400|);
body {
margin: 0;
}
html {
background-repeat: no-repeat;
/*background-position: top center;*/
}
#logodiv {
position: relative;
text-align: center;
}
#logodiv>img {
width: 15%;
}
h1 {
font-family: raleway;
font-weight: 100;
width: 100%;
text-align: center;
color: white;
letter-spacing: 11px;
font-size: 2.5em;
white-space: nowrap;
}
#countdowner {
font-family: sans-serif;
color: white;
margin: 0;
padding: 0;
width: 100%;
font-size: 2em;
}
#id1 {
font-size: 2.5em;
}
#id2 {
font-size: 2.5em;
}
#id3 {
font-size: 2.5em;
}
#id4 {
font-size: 2.5em;
}
.timeLabel {
font-size: 0.7em;
color: #f1a01e;
font-family: montserrat;
font-weight: 700;
}
#table {
margin: 0 auto;
text-align: center;
}
#table td {
padding: 0px 45px;
}
#menu {
padding: 0;
width: 100%;
bottom: 0;
text-align: center;
}
#menu>li {
font-size: 20px;
list-style: none;
display: inline-block;
text-transform: uppercase;
letter-spacing: 3px;
font-family: raleway;
font-weight: 400;
}
#menu>li>a {
padding: 0 15px;
text-decoration: none;
color: white;
}
#menu>li>a:hover {
color: #f1a01e;
}
#information {
position: relative;
clear: both;
color: red;
}
html,
body,
.splash {
height: 100%;
}
.splash {
display: flex;
flex-flow: column;
min-height:450px; background: url(http://www.freelargeimages.com/wp-content/uploads/2014/12/Black_background.jpg) no-repeat center center fixed;
background-size: cover;
}
.splash>* {
order: -1;
flex: 1;
}
.splash:before {
content: '';
display: block;
order: 0;
flex: 1;
}
.menu {
order: 1;
flex: none;
margin-top: auto;
margin-bottom: 0;
}
<div class="splash">
<div class="menu">
<nav>
<ul id="menu">
<li>Top
</li>
<li>Om Eventet
</li>
<li>Lokation
</li>
<li>Kontakt
</li>
</ul>
</nav>
</div>
<div id="logodiv">
<img src="../design/logotop.png">
</div>
<div id="overskrift">
<h1>EVENTET STARTER OM</h1>
</div>
<div id="countdowner">
<table id="table">
<tr>
<div id="countdown">
<td id="id1"></td>
<td id="id2"></td>
<td id="id3"></td>
<td id="id4"></td>
</div>
<tr>
<tr>
<td class="timeLabel">DAGE</td>
<td class="timeLabel">TIMER</td>
<td class="timeLabel">MIN</td>
<td class="timeLabel">SEK</td>
</tr>
</table>
</div>
</div>
<div id="information">
<h2>Help me. I'm stuck.</h2>
</div>
Related
I am using Anki (you don't have to be familiar with this) which is a flashcard app. When designing the cards, I cannot figure out what is going wrong.
The front of the card:
<div class="front">
{{#Title}}<div class="title">{{Title}}</div>{{/Title}}
<div class="subtitle">Details</div>
<table id="clozed">
<tr>
<td class="heading">Origin</td>
<td>{{cloze:Text1}}</td>
</tr>
<tr>
<td class="heading">Insertion</td>
<td>{{cloze:Text2}}</td>
</tr>
<tr>
<td class="heading">Innervation</td>
<td>{{cloze:Text3}}</td>
</tr>
<tr>
<td class="heading">Action</td>
<td>{{cloze:Text4}}</td>
</tr>
</table>
</div>
<script>
// Scroll to cloze
function scrollToCloze () {
const cloze1 = document.getElementsByClassName("cloze")[0];
const rect = cloze1.getBoundingClientRect();
const absTop = rect.top + window.pageYOffset;
const absBot = rect.bottom + window.pageYOffset;
if (absBot >= window.innerHeight) {
const height = rect.top - rect.bottom
const middle = absTop - (window.innerHeight/2) - (height/2);
window.scrollTo(0, middle);
};
}
if ( document.readyState === 'complete' ) {
setTimeout(scrollToCloze, 1);
} else {
document.addEventListener('DOMContentLoaded', function() {
setTimeout(scrollToCloze, 1);
}, false);
}
</script>
The back of the card:
<div class="back">
{{#Title}}<div class="title">{{Title}}</div>{{/Title}}
<div class="subtitle">Details</div>
<table id="clozed">
<tr>
<td class="heading">Origin</td>
<td>{{cloze:Text1}}</td>
</tr>
<tr>
<td class="heading">Insertion</td>
<td>{{cloze:Text2}}</td>
</tr>
<tr>
<td class="heading">Innervation</td>
<td>{{cloze:Text3}}</td>
</tr>
<tr>
<td class="heading">Action</td>
<td>{{cloze:Text4}}</td>
</tr>
</table>
</div>
<script>
// Remove cloze syntax from revealed hint
var hint = document.getElementById("original");
if (hint) {
var html = hint.innerHTML.replace(/\[\[oc(\d+)::(.*?)(::(.*?))?\]\]/mg,
"<span class='cloze'>$2</span>");
hint.innerHTML = html
};
// Scroll to cloze
function scrollToCloze () {
const cloze1 = document.getElementsByClassName("cloze")[0];
const rect = cloze1.getBoundingClientRect();
const absTop = rect.top + window.pageYOffset;
const absBot = rect.bottom + window.pageYOffset;
if (absBot >= window.innerHeight) {
const height = rect.top - rect.bottom
const middle = absTop - (window.innerHeight/2) - (height/2);
window.scrollTo(0, middle);
};
}
if ( document.readyState === 'complete' ) {
setTimeout(scrollToCloze, 1);
} else {
document.addEventListener('DOMContentLoaded', function() {
setTimeout(scrollToCloze, 1);
}, false);
}
// Reveal full list
var olToggle = function() {
var orig = document.getElementById('original');
var clozed = document.getElementById('clozed');
var origHtml = orig.innerHTML
orig.innerHTML = clozed.innerHTML
clozed.innerHTML = origHtml
}
</script>
The css styling of the card:
html {
/* scrollbar always visible in order to prevent shift when revealing answer*/
overflow-y: scroll;
}
.card {
border: 1px solid #404040;
padding: 8px;
font-weight: normal;
font-size: 16px;
text-align: left;
color: black;
background-color: white;
}
/* general layout */
.text {
/* center left-aligned text on card */
column-count: 2;
display: inline-block;
align: center;
text-align: left;
margin: auto;
max-width: 40em;
}
.hidden {
/* guarantees a consistent width across front and back */
font-weight: bold;
display: block;
line-height:0;
height: 0;
overflow: hidden;
visibility: hidden;
}
.title {
background-color: #edcac5;
color: #000000;
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
text-align: center;
}
.subtitle {
background-color: #3b3b3d;
color: #FFFFFF;
font-weight: bold;
font-size: 16px;
padding: 3px;
margin-bottom: 5px;
text-align: center;
}
.heading {
color: #6395ff;
font-weight: bold;
text-align: left;
width: 30%;
}
table {
table-layout: fixed;
width: 100%;
}
td {
word-wrap: break-word;
}
/* clozes */
.cloze {
/* regular cloze deletion */
font-weight: bold;
color: #FFFFFF;
}
.card21 #btn-reveal{
/* no need to display reveal btn on last card */
display:none;
}
/* additional fields */
.extra{
margin-top: 0.5em;
margin: auto;
max-width: 40em;
}
.extra-entry{
margin-top: 0.8em;
font-size: 0.9em;
text-align:left;
}
.extra-descr{
margin-bottom: 0.2em;
font-weight: bold;
font-size: 1em;
}
#btn-reveal {
font-size: 0.5em;
display:none;
}
.mobile #btn-reveal {
font-size: 0.8em;
display:none;
}
This is how it is supposed to look:
But this is how it ends up looking:
I think the table has something to do with this, I greatly appreciate any help/feedback.
I went ahead and threw a section id and called it wrapper and give it a with. This way will minimize any format issues.
// Scroll to cloze
function scrollToCloze () {
const cloze1 = document.getElementsByClassName("cloze")[0];
const rect = cloze1.getBoundingClientRect();
const absTop = rect.top + window.pageYOffset;
const absBot = rect.bottom + window.pageYOffset;
if (absBot >= window.innerHeight) {
const height = rect.top - rect.bottom
const middle = absTop - (window.innerHeight/2) - (height/2);
window.scrollTo(0, middle);
};
}
if ( document.readyState === 'complete' ) {
setTimeout(scrollToCloze, 1);
} else {
document.addEventListener('DOMContentLoaded', function() {
setTimeout(scrollToCloze, 1);
}, false);
}
// back of card
// Remove cloze syntax from revealed hint
var hint = document.getElementById("original");
if (hint) {
var html = hint.innerHTML.replace(/\[\[oc(\d+)::(.*?)(::(.*?))?\]\]/mg,
"<span class='cloze'>$2</span>");
hint.innerHTML = html
};
// Scroll to cloze
function scrollToCloze () {
const cloze1 = document.getElementsByClassName("cloze")[0];
const rect = cloze1.getBoundingClientRect();
const absTop = rect.top + window.pageYOffset;
const absBot = rect.bottom + window.pageYOffset;
if (absBot >= window.innerHeight) {
const height = rect.top - rect.bottom
const middle = absTop - (window.innerHeight/2) - (height/2);
window.scrollTo(0, middle);
};
}
if ( document.readyState === 'complete' ) {
setTimeout(scrollToCloze, 1);
} else {
document.addEventListener('DOMContentLoaded', function() {
setTimeout(scrollToCloze, 1);
}, false);
}
// Reveal full list
var olToggle = function() {
var orig = document.getElementById('original');
var clozed = document.getElementById('clozed');
var origHtml = orig.innerHTML
orig.innerHTML = clozed.innerHTML
clozed.innerHTML = origHtml
}
html {
/* scrollbar always visible in order to prevent shift when revealing answer*/
overflow-y: scroll;
}
.card {
border: 1px solid #404040;
padding: 8px;
font-weight: normal;
font-size: 16px;
text-align: left;
color: black;
background-color: white;
}
/* general layout */
.text {
/* center left-aligned text on card */
column-count: 2;
display: inline-block;
align-items: center;
text-align: left;
margin: auto;
max-width: 40em;
}
.hidden {
/* guarantees a consistent width across front and back */
font-weight: bold;
display: block;
line-height:0;
height: 0;
overflow: hidden;
visibility: hidden;
}
.title {
background-color: #edcac5;
color: #000000;
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
text-align: center;
}
.subtitle {
background-color: #3b3b3d;
color: #FFFFFF;
font-weight: bold;
font-size: 16px;
padding: 3px;
margin-bottom: 5px;
text-align: center;
}
.heading {
color: #6395ff;
font-weight: bold;
text-align: left;
width: 30%;
}
table {
table-layout: fixed;
width: 100%;
}
td {
word-wrap: break-word;
}
/* clozes */
.cloze {
/* regular cloze deletion */
font-weight: bold;
color: #FFFFFF;
}
.card21 #btn-reveal{
/* no need to display reveal btn on last card */
display:none;
}
/* additional fields */
.extra{
margin-top: 0.5em;
margin: auto;
max-width: 40em;
}
.extra-entry{
margin-top: 0.8em;
font-size: 0.9em;
text-align:left;
}
.extra-descr{
margin-bottom: 0.2em;
font-weight: bold;
font-size: 1em;
}
#btn-reveal {
font-size: 0.5em;
display:none;
}
.mobile #btn-reveal {
font-size: 0.8em;
display:none;
}
/* new css */
#wrapper {
width: 309px;
margin: auto;
}
<section id="wrapper">
<div class="front">
<div class="title">Title</div>
<div class="subtitle">Details</div>
<table id="clozed">
<tr>
<td class="heading">Origin</td>
<td>cloze:Text1</td>
</tr>
<tr>
<td class="heading">Insertion</td>
<td>cloze:Text2</td>
</tr>
<tr>
<td class="heading">Innervation</td>
<td>cloze:Text3</td>
</tr>
<tr>
<td class="heading">Action</td>
<td>cloze:Text4</td>
</tr>
</table>
</div>
<!-- back of card -->
<div class="back">
<div class="title">Title</div>
<div class="subtitle">Details</div>
<table id="clozed">
<tr>
<td class="heading">Origin</td>
<td>cloze:Text1</td>
</tr>
<tr>
<td class="heading">Insertion</td>
<td>cloze:Text2</td>
</tr>
<tr>
<td class="heading">Innervation</td>
<td>cloze:Text3</td>
</tr>
<tr>
<td class="heading">Action</td>
<td>cloze:Text4</td>
</tr>
</table>
</div>
</section>
How can i shuffle random (given) strings every refresh?
Every refresh, i want to show a different "author" you can ignore the 'quote' or 'order1' if you want
This is what i have:
(sorry i started learning the JS basics, this is the result of a page of what i want to accomplish)
Im a beginner so please explain the solution and go easy on me
Please fix according to
jsfiddle or create a similar one
const quotes = [
{
quote: 'QRimg1.jpg', //or https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=text1
author: 'text1',
order1: 'Order ID: #1'
},
{
quote: 'QRimg2.jpg', //or https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=text2
author: 'text2',
order1: 'Order ID: #2'
},
]
const quoteBtn = document.getElementById('quote-btn');
const quote = document.querySelector('.quote');
const author = document.querySelector('.author');
const order1 = document.querySelector('.order1');
function qrCode() {
let random = Math.floor(Math.random() * quotes.length);
quote.getElementsByTagName("IMG")[0].src = quotes[random].quote;
author.innerHTML = quotes[random].author;
order1.innerHTML = quotes[random].order1;
}
#box1{
margin-top:70px;
margin-left:35px;
width:430px;
}
.tablink {
background-color: #555;
color: black;
font-weight: 500;
float: left;
border: solid 1px black;
margin-top:0px;
outline: none;
cursor: pointer;
padding: 8px 8px;
font-size: 15px;
width:100%;
}
/* Style the tab content */
.tabcontent {
border:solid black 2px;
color: black;
display: none;
padding:100px;
text-align: center;
height:380px;
}
.container_box{
margin: 20px;
margin-top:50px;
width:455px;
height:400px;
}
.quote img{
width: 160px;
height: 160px;
margin-top:-85px;
display: block;
margin-left: 13px;
margin-right: auto;
margin-bottom:10px;
z-index:100;
}
.order1{
font-size:18px;
color:black;
font-weight:800;
left:50px;
position:absolute;
margin-top:-35px;
z-index:50;
}
*{
box-sizing:border-box;
}
.container{
width:50%;
}
.author{
font-size:15px;
color:black;
font-weight:400;
border:1px solid black;
border-radius:3px;
background-color: #f0f0f0;
width: 352px;
height:22px;
padding-top:2px;
}
.author{
position:absolute;
left:72px;
top:320px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id= "box1">
<div class="tablink" onclick="someFunction('orange', this, '#FF9900')" id="defaultOpen">Some text</div>
<div class="order1">ID: #0</div>
<div id="orange" class="tabcontent">
<div class="container_box">
<span class="quote"><img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=text0"></span>
</div>
<div class="author">text0</div>
</div>
</div>
<script>
//colorchange for topbar
function someFunction(otherName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(otherName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<script type="text/javascript">
window.onload = qrCode;
</script>
</body>
</html>
p.s sorry for not putting 'javascript' tag, it shows an error for some reason,
Please instead of closing my question, you can edit/add tag if you wish
it's a wrong call of qrCode function,
const quotes = [
{
quote: 'https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=text1', //or
author: 'text1',
order1: 'Order ID: #1'
},
{
quote: 'https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=text2', //or
author: 'text2',
order1: 'Order ID: #2'
},
]
const quoteBtn = document.getElementById('quote-btn');
const quote = document.querySelector('.quote');
const author = document.querySelector('.author');
const order1 = document.querySelector('.order1');
function qrCode() {
let random = Math.floor(Math.random() * quotes.length);
quote.getElementsByTagName("IMG")[0].src = quotes[random].quote;
author.innerHTML = quotes[random].author;
order1.innerHTML = quotes[random].order1;
}
qrCode();
#box1{
margin-top:70px;
margin-left:35px;
width:430px;
}
.tablink {
background-color: #555;
color: black;
font-weight: 500;
float: left;
border: solid 1px black;
margin-top:0px;
outline: none;
cursor: pointer;
padding: 8px 8px;
font-size: 15px;
width:100%;
}
/* Style the tab content */
.tabcontent {
border:solid black 2px;
color: black;
display: none;
padding:100px;
text-align: center;
height:380px;
}
.container_box{
margin: 20px;
margin-top:50px;
width:455px;
height:400px;
}
.quote img{
width: 160px;
height: 160px;
margin-top:-85px;
display: block;
margin-left: 13px;
margin-right: auto;
margin-bottom:10px;
z-index:100;
}
.order1{
font-size:18px;
color:black;
font-weight:800;
left:50px;
position:absolute;
margin-top:-35px;
z-index:50;
}
*{
box-sizing:border-box;
}
.container{
width:50%;
}
.author{
font-size:15px;
color:black;
font-weight:400;
border:1px solid black;
border-radius:3px;
background-color: #f0f0f0;
width: 352px;
height:22px;
padding-top:2px;
}
.author{
position:absolute;
left:72px;
top:320px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id= "box1">
<div class="tablink" onclick="someFunction('orange', this, '#FF9900')" id="defaultOpen">Some text</div>
<div class="order1">ID: #0</div>
<div id="orange" class="tabcontent">
<div class="container_box">
<span class="quote"><img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=text0"></span>
</div>
<div class="author">text0</div>
</div>
</div>
<script type="text/javascript">
//colorchange for topbar
function someFunction(otherName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(otherName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
This image slide show is positioned in the middle on my page how do I make it so that it's in the middle but slightly higher? The things I've tried don't currently work which includes my css code. the top: xx%; thing doesn't work either. As you can see the images are actually behind the question container and I want it so that it is above the question container (not in front).
html:
<div class="container2">
<img name="slide">
css
.slide {
width: auto;
max-width: 1%;
height: auto;
max-height: 30%;
position: absolute;
z-index: 1;
top: 50%;
}
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const image1 = document.getElementById('image1')
const answerButtonsElement = document.getElementById('answer-buttons')
const endbutton = document.getElementById('end-btn')
const trybutton = document.getElementById('try-btn')
const startmsgs = document.getElementById('startmsg')
var i = 0;
var images = [];
images[0] = "http://lorempixel.com/400/200/animals";
images[1] = "http://lorempixel.com/400/200/sports";
images[2] = "http://lorempixel.com/400/200/food";
images[3] = "http://lorempixel.com/400/200/people";
function changeImg(){
document.slide.src = images[i];
// Check If Index Is Under Max
if(i < images.length - 1){
// Add 1 to Index
i++;
} else {
// Reset Back To O
i = 0;
}
window.onload=changeImg;
}
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
currentQuestionIndex++
setNextQuestion()
changeImg()
})
endbutton.addEventListener('click', () => {
window.top.close()
})
trybutton.addEventListener('click', setNextQuestion)
function startGame() {
startButton.classList.add('hide')
startmsgs.classList.add('hide')
shuffledQuestions = questions.slice()
questionContainerElement.classList.remove('hide')
currentQuestionIndex = 0
setNextQuestion()
}
function setNextQuestion() {
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
questionElement.innerText = question.question
question.answers.forEach(answer => {
const button = document.createElement('button')
button.innerText = answer.text
button.classList.add('btn')
if (answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', selectAnswer)
answerButtonsElement.appendChild(button)
})
}
function resetState() {
clearStatusClass(document.body)
nextButton.classList.add('hide')
while (answerButtonsElement.firstChild) {
answerButtonsElement.removeChild(answerButtonsElement.firstChild)
}
trybutton.classList.add('hide')
}
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
setStatusClass(selectedButton, correct);
if(correct){
if (shuffledQuestions.length > currentQuestionIndex + 1) {
nextButton.classList.remove('hide')
} else {
endbutton.classList.remove('hide')
}
} else{
trybutton.classList.remove('hide')
}
}
function setStatusClass(element, correct) {
clearStatusClass(element)
if (correct) {
element.classList.add('correct')
}
else {
element.classList.add('wrong')
}
}
function clearStatusClass(element) {
element.classList.remove('correct')
element.classList.remove('wrong')
}
const questions = [
{
question: 'Are you excited to learn about the immune system?',
answers: [
{ text: 'Yes', correct: true },
{ text: 'YES!!!', correct: true },
{ text: 'No', correct: false },
{ text: 'YES!!!!!!!', correct: true }
]
},
{
question: 'Our immune system protects from the thousands of different viruses we encounter daily! Without it, a simple paper cut could mean death. So to demonstrate how the immune system functions to protect us from bacterias, viruses and foreign bodies, we start our journey with a paper cut!',
answers: [
{ text: 'I am exicted!', correct: true },
]
}
]
*, *::before, *::after {
box-sizing: border-box;
font-family: cursive,
'Times New Roman', Times, serif
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
/* background-color: #b61924; */
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
z-index: 1;
}
:root {
--hue-neutral: 200;
--hue-wrong: 0;
--hue-correct: 145;
}
body {
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: hsl(var(--hue), 100%, 20%);
}
body.correct {
--hue: var(--hue-correct);
}
body.wrong {
--hue: 0;
}
.container {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
z-index: 2;
position: absolute;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin: 20px 0;
}
.btn {
--hue: var(--hue-neutral);
border: 1px solid hsl(var(--hue), 100%, 30%);
background-color: hsl(var(--hue), 100%, 50%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
}
.btn:hover {
border-color: black;
}
.btn.correct {
--hue: var(--hue-correct);
color: black;
}
.btn.wrong {
--hue: var(--hue-wrong);
}
.next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
align-items: flex-end;
--hue: 245;
}
.start-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.end-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.try-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.container1 {
display: flex;
justify-content: center;
align-items: center;
font-family: Arial;
font-size: xx-large;
padding: 10px 10px;
}
.slide {
width: auto;
max-width: 1%;
height: auto;
max-height: 30%;
position: absolute;
z-index: 1;
top: 50%;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
.wrapper {
position: absolute;
top: 0px;
right: 0px;
}
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="styles.css">
<script defer src="script.js"></script>
<title>Quiz App</title>
</head>
<body>
</div>
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="container1">
<div id="startmsgcontainer" class="hide"></div>
<div id="startmsg">Adventure Into The Human Immune System</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start!</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
<button id="end-btn" class="end-btn btn hide">End (this will close the current tab)</button>
<button id="try-btn" class="try-btn btn hide">Try again!</button>
</div>
</div>
<div class="container2">
<img name="slide">
</div>
<div class="wrapper">
<img src="img/uni.png" alt="image">
</div>
</div>
<div id="particles-js"></div>
<script src="particles.js"></script>
<script src="app.js"></script>
<script src="slide.js"></script>
</body>
</html>
If I've understood what you want correctly, you'd need to add this to .slide:
transform: translateY(-50%)
top: 50% will put the top of the slider in the middle of the screen so this will push it back up based on the height of the slider.
Edit:
Based on your new code you could do the same thing on .container. Or you could use
margin-top: -100px
or
margin-bottom: 100px
or
position: relative;
top: -100px;
You can try:
Css-
Margin-top: -x;
And add !important
I am stuck on a portion of a project I have been working on today. The task is to sync the timestamp information from the embedded youtube video and display a custom progress bar matching the length of the song at the bottom of the page. Here is the layout so far:
So basically, how do I pull constant timestamps to update the progress and how do I animate the bar to complete 100% matching the end of the video.
I have already disabled the user's ability to scrobble the embedded youtube video. NOTE: the user should not be able to change the time of the youtube video using the custom progress bar either (it is just there for visual queue)!
Please let me know if you need more clarification. HTML and CSS are below. Thank you!! :)
HTML >>>
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="header-bar">
<div class="bar"></div>
<div class="dropshadow"></div>
</div>
<div class="container-middle-third">
<div class="youtube-video" style="float: left;">
<div class="DJ-text">Affinity FM DJ Room</div>
<div class="DJ-underline"></div>
<div class="transparent-layer"> <iframe width="850px" height="477px" src="https://www.youtube.com/embed/2GvIq2SpVFM?autoplay=0&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe></div>
</div>
<div class="chat" style="float: left;">
<div class="Chat-text">Chat</div>
<div class="Chat-underline"></div>
<input type="text" class="chat-name" placeholder="Chat">
<div class="info-rect">Info</div>
<div class="chat-messages"></div>
<textarea placeholder="Join the conversation..."></textarea>
<div class="chat-status">Status: <span>Idle</span></div>
</div>
</div>
<div class="bottom-bar">
<div class="thumbnail" style="float: left"></div>
<div class="title-bar" style="float: left;">
<div class="song-name">Finding Hope - Let Go (feat. Deverano)</div>
<div class="dj-playing">Affinity FM is playing</div>
<div class="progress-background"></div>
<div class="progress-bar"></div>
</div>
<div class="subscribe" style="float: left;"></div>
</div>
<script src="http://127.0.0.1:8080/socket.io/socket.io.js"></script>
<script>
(function() {
var getNode = function(s) {
return document.querySelector(s);
},
// Get required nodes
status = getNode('.chat-status span'),
messages = getNode('.chat-messages'),
textarea = getNode('.chat textarea'),
chatName = getNode('.chat-name'),
statusDefault = status.textContent,
setStatus = function(s){
status.textContent = s;
if(s !== statusDefault){
var delay = setTimeout(function(){
setStatus(statusDefault);
clearInterval(delay);
}, 3000);
}
};
//try connection
try{
var socket = io.connect('http://127.0.0.1:8080');
} catch(e){
//Set status to warn user
}
if(socket !== undefined){
//Listen for output
socket.on('output', function(data){
if(data.length){
//Loop through results
for(var x = 0; x < data.length; x = x + 1){
var message = document.createElement('div');
message.setAttribute('class', 'chat-message');
message.textContent = ': ' + data[x].message;
var name=document.createElement('span');
name.setAttribute('class', 'userName');
name.textContent = data[x].name;
message.insertBefore(name, message.firstChild);
//Append
messages.appendChild(message);
messages.insertBefore(message, messages.firstChild);
}
}
});
//Listen for a status
socket.on('status', function(data){
setStatus((typeof data === 'object') ? data.message : data);
if(data.clear === true){
textarea.value = '';
}
});
//Listen for keydown
textarea.addEventListener('keydown', function(event){
var self = this,
name = chatName.value;
if(event.which === 13 && event.shiftKey === false){
socket.emit('input', {
name: name,
message: self.value
});
}
});
}
})();
</script>
</body>
</html>
and CSS >>>
body {
background-color: #0f0f17;
margin: 0px;
width: 100%;
}
.container-middle-third{
margin-top: 20px;
margin-left: 155px;
}
body,
textarea,
input {
font: 13px "Raleway", sans-serif;
color: #ffffff;
}
.bar{
height: 80px;
width: 100%;
background-color: #15151d;
}
.DJ-text{
font-weight: 700;
/*position:relative;*/
text-transform: uppercase;
}
.Chat-text{
font-weight: 700;
text-transform: uppercase;
}
.DJ-underline{
width: 850px;
height: 1px;
position:relative;top:10px;
background-color: #3f3f45;
margin: 0px 0px 40px;
}
.Chat-underline{
width: 100%;
position:relative;
/*left:-140px;*/
float:right;
height: 1px;
position:relative;top:10px;
background-color: #3f3f45;
margin: 0px 0px 40px;
}
.transparent-layer{
width: 850px;
height: 477px;
pointer-events: none;
background-color: #ffffff;
}
.ad{
width: 728px;
height: 90px;
border: 1px solid #000000;
margin-left: 11px;
margin-top: 20px;
}
.chat {
min-width: 400px;
margin: 0px 0px 0px 135px;
}
.chat-messages,
.chat-textarea,
.chat-name {
border: 1px solid #1a1a23;
background-color: #1a1a23;
}
.userName{
font-weight: 700;
color: #079ce0;
}
.chat-messages {
width:380px;
height:400px;
overflow-y:scroll;
padding:10px;
}
.chat-message {
margin-bottom:10px;
}
.info-rect{
height: 40px;
width: 180px;
padding:10px;
max-width: 100%;
margin:0;
border:0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
text-transform: uppercase;
background-color: #15151d
}
.chat-name{
height: 40px;
max-width: 100%;
width: 180px;
padding:10px;
border:0;
margin:0;
font-weight: 700;
text-transform: uppercase;
float:left;
text-align: center;
}
.chat textarea {
width:380px;
padding:10px;
margin:0;
border-top:0;
max-width:100%;
border-top: 1px solid #0f0f17;
border-bottom: 1px solid #1a1a23;
border-right: 1px solid #1a1a23;
border-left: 1px solid #1a1a23;
background-color: #1a1a23;
}
.chat-status {
color: #bbb;
opacity: 0;
background-color: #0f0f17;
}
.info-rect,
.chat textarea,
.chat-name {
max-width: 100%;
}
.bottom-bar{
position: fixed;
bottom: 0;
width: 100%;
}
.thumbnail{
width: 80px;
height: 80px;
background-color: #ffffff
}
.title-bar{
width:1000px;
height: 80px;
background-color: #1a1a23;
}
.song-name{
font-weight: 700;
text-transform: uppercase;
margin-left: 30px;
margin-top: 25px;
}
.dj-playing{
margin-left: 30px;
}
.progress-background{
width: 1000px;
height: 4px;
background-color: #313139;
position: fixed;
bottom: 0;
}
.progress-bar{
width: 400px;
height: 4px;
background-color: #fa1d57;
position: fixed;
bottom: 0;
}
.subscribe{
width: 520px;
height: 80px;
background-color: #15151d;
}
Love your questions!
switch the iframe with a div with id="player" (any name you want, it could be "my_own_player" or "XYZ_player"...)
Then now you're all set to convert your iframe player into a Youtube player object so that you can accomplish what you desire, using the "IFrame player API".
Make sure you style your div the same way you wanted your iframe.
Just add the following script :
//This function creates an <iframe> (and YouTube player)
function onYouTubeIframeAPIReady()
{
player = new YT.Player("player",
{
height: "850",
width: "477",
videoId: "2GvIq2SpVFM",
events:
{
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
}
});
}
Replace videoId with your video's ID.
Replace height with your video's height.
Replace width with your video's width.
NOW, to get the "Video Time Stamps" like you say, in order to make the progress bar is easy. The player object has two methods that will do that:
getCurrentTime()
getDuration()
getDuration is the total time of the video in seconds. While getCurrentTime is the time where the video has played up to. Divide
getCurrentTime by getDuration and you'll get a ratio for the progress bar. Multiply it by 100 and you get the percentage you're looking for:
(player.getCurrentTime()/player.getDuration())*100;
That's it! Once you got a percentage that represents getCurrentTime / getDuration, you don't need anything else for an html progress bar. Just style that html bar element's width to that percentage. Just make sure that red "bar" has a background (another div) that's easily recognized as the outward limit for the progress bar. Or just put it inside another div that's visible on the page like so :
<div id="progress" style="width: 800px; height: 10px; border: 1px solid #fff;">
<div id="bar" style="width: 1px; height: 10px; background: #f00;"></div>
</div>
Please, just try out your modified HTML:
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="header-bar">
<div class="bar"></div>
<div class="dropshadow"></div>
</div>
<div class="container-middle-third">
<div class="youtube-video" style="float: left;">
<div class="DJ-text">Affinity FM DJ Room</div>
<div class="DJ-underline"></div>
<div class="transparent-layer"> <div id="player" style="width: 850px; height: 477px;"></div></div>
</div>
<div class="chat" style="float: left;">
<div class="Chat-text">Chat</div>
<div class="Chat-underline"></div>
<input type="text" class="chat-name" placeholder="Chat">
<div class="info-rect">Info</div>
<div class="chat-messages"></div>
<textarea placeholder="Join the conversation..."></textarea>
<div class="chat-status">Status: <span>Idle</span></div>
</div>
</div>
<div class="bottom-bar">
<div class="thumbnail" style="float: left"></div>
<div class="title-bar" style="float: left;">
<div class="song-name">Finding Hope - Let Go (feat. Deverano)</div>
<div class="dj-playing">Affinity FM is playing</div>
<div class="progress-background">
<div id="progress-bar" class="progress-bar"></div>
</div>
</div>
<div class="subscribe" style="float: left;"></div>
</div>
<script src="http://127.0.0.1:8080/socket.io/socket.io.js"></script>
<script>
(function() {
var getNode = function(s) {
return document.querySelector(s);
},
// Get required nodes
status = getNode('.chat-status span'),
messages = getNode('.chat-messages'),
textarea = getNode('.chat textarea'),
chatName = getNode('.chat-name'),
statusDefault = status.textContent,
setStatus = function(s){
status.textContent = s;
if(s !== statusDefault){
var delay = setTimeout(function(){
setStatus(statusDefault);
clearInterval(delay);
}, 3000);
}
};
//try connection
try{
var socket = io.connect('http://127.0.0.1:8080');
} catch(e){
//Set status to warn user
}
if(socket !== undefined){
//Listen for output
socket.on('output', function(data){
if(data.length){
//Loop through results
for(var x = 0; x < data.length; x = x + 1){
var message = document.createElement('div');
message.setAttribute('class', 'chat-message');
message.textContent = ': ' + data[x].message;
var name=document.createElement('span');
name.setAttribute('class', 'userName');
name.textContent = data[x].name;
message.insertBefore(name, message.firstChild);
//Append
messages.appendChild(message);
messages.insertBefore(message, messages.firstChild);
}
}
});
//Listen for a status
socket.on('status', function(data){
setStatus((typeof data === 'object') ? data.message : data);
if(data.clear === true){
textarea.value = '';
}
});
//Listen for keydown
textarea.addEventListener('keydown', function(event){
var self = this,
name = chatName.value;
if(event.which === 13 && event.shiftKey === false){
socket.emit('input', {
name: name,
message: self.value
});
}
});
}
})();
</script>
<script>
var time_total;
var timeout_setter;
var player;
var tag = document.createElement("script");//This code loads the IFrame Player API code asynchronously
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
//This function creates an <iframe> (and YouTube player) OR uses the iframe if it exists at the "player" element after the API code downloads
function onYouTubeIframeAPIReady()
{
player = new YT.Player("player",
{
height: "850",
width: "477",
videoId: "2GvIq2SpVFM",
events:
{
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
}
});
}
//The API will call this function when the video player is ready
function onPlayerReady(event)
{
event.target.playVideo();
time_total = convert_to_mins_and_secs(player.getDuration(), 1);
loopy();
}
function loopy()
{
var current_time = convert_to_mins_and_secs(player.getCurrentTime(), 0);
document.getElementById("progress-bar").style.width = (player.getCurrentTime()/player.getDuration())*100+"%";
console.log( current_time + " / " + time_total);
timeout_setter = setTimeout(loopy, 1000);
}
function convert_to_mins_and_secs(seconds, minus1)
{
var mins = (seconds>=60) ?Math.round(seconds/60):0;
var secs = (seconds%60!=0) ?Math.round(seconds%60):0;
var secs = (minus1==true) ?(secs-1):secs; //Youtube always displays 1 sec less than its duration time!!! Then we have to set minus1 flag to true for converting player.getDuration()
var time = mins + ":" + ((secs<10)?"0"+secs:secs);
return time;
}
// 5. The API calls this function when the player's state changes
function onPlayerStateChange(event)
{
if (event.data == YT.PlayerState.ENDED)
{
console.log("END!");
clearTimeout(timeout_setter);
}
else
{
console.log(event.data);
}
}
</script>
</body>
</html>
With your CSS:
body {
background-color: #0f0f17;
margin: 0px;
width: 100%;
}
.container-middle-third{
margin-top: 20px;
margin-left: 155px;
}
body,
textarea,
input {
font: 13px "Raleway", sans-serif;
color: #ffffff;
}
.bar{
height: 80px;
width: 100%;
background-color: #15151d;
}
.DJ-text{
font-weight: 700;
/*position:relative;*/
text-transform: uppercase;
}
.Chat-text{
font-weight: 700;
text-transform: uppercase;
}
.DJ-underline{
width: 850px;
height: 1px;
position:relative;top:10px;
background-color: #3f3f45;
margin: 0px 0px 40px;
}
.Chat-underline{
width: 100%;
position:relative;
/*left:-140px;*/
float:right;
height: 1px;
position:relative;top:10px;
background-color: #3f3f45;
margin: 0px 0px 40px;
}
.transparent-layer{
width: 850px;
height: 477px;
pointer-events: none;
background-color: #ffffff;
}
.ad{
width: 728px;
height: 90px;
border: 1px solid #000000;
margin-left: 11px;
margin-top: 20px;
}
.chat {
min-width: 400px;
margin: 0px 0px 0px 135px;
}
.chat-messages,
.chat-textarea,
.chat-name {
border: 1px solid #1a1a23;
background-color: #1a1a23;
}
.userName{
font-weight: 700;
color: #079ce0;
}
.chat-messages {
width:380px;
height:400px;
overflow-y:scroll;
padding:10px;
}
.chat-message {
margin-bottom:10px;
}
.info-rect{
height: 40px;
width: 180px;
padding:10px;
max-width: 100%;
margin:0;
border:0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
text-transform: uppercase;
background-color: #15151d
}
.chat-name{
height: 40px;
max-width: 100%;
width: 180px;
padding:10px;
border:0;
margin:0;
font-weight: 700;
text-transform: uppercase;
float:left;
text-align: center;
}
.chat textarea {
width:380px;
padding:10px;
margin:0;
border-top:0;
max-width:100%;
border-top: 1px solid #0f0f17;
border-bottom: 1px solid #1a1a23;
border-right: 1px solid #1a1a23;
border-left: 1px solid #1a1a23;
background-color: #1a1a23;
}
.chat-status {
color: #bbb;
opacity: 0;
background-color: #0f0f17;
}
.info-rect,
.chat textarea,
.chat-name {
max-width: 100%;
}
.bottom-bar{
position: fixed;
bottom: 0;
width: 100%;
}
.thumbnail{
width: 80px;
height: 80px;
background-color: #ffffff
}
.title-bar{
width:1000px;
height: 80px;
background-color: #1a1a23;
}
.song-name{
font-weight: 700;
text-transform: uppercase;
margin-left: 30px;
margin-top: 25px;
}
.dj-playing{
margin-left: 30px;
}
.progress-background{
width: 1000px;
height: 4px;
background-color: #313139;
position: fixed;
bottom: 0;
}
.progress-bar{
width: 400px;
height: 4px;
background-color: #fa1d57;
position: fixed;
bottom: 0;
}
.subscribe{
width: 520px;
height: 80px;
background-color: #15151d;
}
Or just look at the result there :
http://lespointscom.com/a/misc/demo/2016_06_19/main.html
IFrame player API reference:
https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
This is what I have: http://codepen.io/auble220/pen/rOPBKP. I added media queries here: http://codepen.io/auble220/pen/avyZZE, which isn't too bad, but I know there has to be a better way. I tried using Bootstrap's clearfix class, but that doesn't change anything. This is the code for that section:
html:
<div id="brkSesDiv" class="row">
<div id="breakDiv" class="col-md-6 text-right">
<button class="plusMinus" id="plus1">+</button>
<h1 id="breakLen">05</h1>
<button id="minus1" class="plusMinus">-</button>
<h4>break length</h4>
</div>
<div id="sesDiv" class="col-md-6 text-left">
<button id="plus2" class="plusMinus">+</button>
<h1 id="sesLen">25</h1>
<button id="minus2"class="plusMinus">-</button>
<h4>session length</h4>
</div>
</div>
css:
#brkSesDiv {
margin: 30px 0 0 0;
height: 100px;
width: 350px;
margin: auto;
}
#breakDiv {
display: inline;
}
#breakLen {
display: inline;
}
#sesDiv {
float: left;
}
#sesLen {
display: inline;
}
Here's an example of you how you can make this mobile first and may give you a base to adjust to your needs.
I would (personally) avoid mixing classes/IDs with structural elements like containers/rows/columns other then pure styling (ie color, text etc) as this can effect how the grid is designed to operate. You can however place your content inside these columns with much better results (generally speaking).
Have a fixed width for this isn't necessary, so I removed that as well as place everything inside of rows/columns instead of combining them:
#brkSesDiv {
margin: 30px 0 0 0;
height: 100px;
width: 350px;
margin: auto;
}
See working example Snippet.
var sec = 0;
var min;
var breakLenCount = 5;
var sesLenCount = 25;
var breakTimer;
var timerRunning = false;
$(document).ready(function() {
$('#plus1').click(function() {
if (breakLenCount < 9) {
$('#breakLen').html('0' + (breakLenCount += 1));
} else {
$('#breakLen').html(breakLenCount += 1);
}
});
$('#minus1').click(function() {
if (breakLenCount < 9) {
$('#breakLen').html('0' + (breakLenCount -= 1));
} else {
$('#breakLen').html(breakLenCount -= 1);
}
});
$('#plus2').click(function() {
if (sesLenCount < 10) {
$('#sesLen').html('0' + (sesLenCount += 1));
$('#min').html(sesLenCount);
} else {
$('#sesLen').html(sesLenCount += 1);
$('#min').html(sesLenCount);
}
});
$('#minus2').click(function() {
if (sesLenCount < 11) {
$('#sesLen').html('0' + (sesLenCount -= 1));
$('#min').html(sesLenCount);
} else {
$('#sesLen').html(sesLenCount -= 1);
$('#min').html(sesLenCount);
}
});
min = sesLenCount;
sec = 0;
$('#timer').click(function() {
if (timerRunning) {
clearInterval(sesTimer);
timerRunning = false;
return;
} else {
sesTimer = setInterval(time, 1000);
}
});
function time() {
timerRunning = true;
sec--;
if (sec < 00) {
sec = 59;
min--;
}
if (sec < 10) {
sec = '0' + sec;
}
if (min < 1 && sec < 1) {
timerRunning = false;
clearInterval(sesTimer);
min = breakLenCount;
$('#min').html(min);
$('#sec').html(00);
bTimer = setInterval(breakTimer, 1000);
}
$('#min').html(min);
$('#sec').html(sec);
}
function breakTimer() {
sec--;
if (sec < 00) {
sec = 59;
min--;
}
if (sec < 10) {
sec = '0' + sec;
}
if (min < 1 && sec < 1) {
clearInterval(bTimer);
min = sesLenCount;
$('#min').html(min);
$('#sec').html(00);
setInterval(time, 1000);
}
$('#sec').html(sec);
$('#min').html(min);
}
});
body {
font-family: Arial, sans-serif;
}
h1#pTimer {
font-size: 5em;
}
h1.title {
font-size: 4em;
color: #444444;
text-shadow: 3px 3px 5px;
}
#brkSesDiv {
padding-top: 10px;
}
#breakDiv {
display: inline;
}
#breakLen {
display: inline;
}
#sesLen {
display: inline;
}
.plusMinus {
border-radius: 25%;
border: 1px solid transparent;
background-color: transparent;
color: #444;
font-size: 2.5em;
font-weight: bold;
}
#timer {
margin: 25px auto 0 auto;
width: 300px;
height: 300px;
border: 3px solid #444;
border-radius: 50%;
box-shadow: 0px 0px 25px;
background-color: #fff;
cursor: pointer;
display: table;
vertical-align: middle;
}
#time {
display: table-cell;
vertical-align: middle;
}
#media (max-width: 480px) {
h1#pTimer {
font-size: 2.5em;
}
h1.title {
font-size: 2em;
}
#timer {
margin: 10px auto 0 auto;
width: 175px;
height: 175px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="text-center">
<h1 id="pTimer">Pomodoro Timer</h1>
</div>
<div class="row">
<div id="brkSesDiv">
<div class="col-xs-6 text-right">
<div id="breakDiv">
<button class="plusMinus" id="plus1">+</button>
<h1 class="title" id="breakLen">05</h1>
<button id="minus1" class="plusMinus">-</button>
<h4>break length</h4>
</div>
</div>
<div class="col-xs-6 text-left">
<div id="sesDiv">
<button id="plus2" class="plusMinus">+</button>
<h1 class="title" id="sesLen">25</h1>
<button id="minus2" class="plusMinus">-</button>
<h4>session length</h4>
</div>
</div>
</div>
</div>
<div id="timer" class="text-center">
<div id="time">
<h1 class="title">Session</h1>
<h1 class="title"><span id="min">25</span>:<span id="sec">00</span></h1>
</div>
</div>
</div>