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>
Related
So i built a chatroom in node.js here and socket.io and i append all the users messages to a div called chatlog-display-div but the div keeps being displayed under the other div and when i try to make the height smaller (80%) it doesnt resize at all here is all my style
body{
background:rgb(28,28,29);
padding:0;
margin:0;
}
.main-div{
}
#chat-rooms-div{
padding-top:30px;
position:fixed;
left:0;
width:300px;
top:50px;
height:100%;
background:#2e3136;
bottom:0;
}
#chat-rooms-div-a{
color:darkcyan;
font-family: helvetica;
font-style:none;
}
#chat-rooms-div-li{
list-style:none;
display: inline;
margin-left: 5px;
margin-right:5px;
}
#main-header-div{
z-index: 1;
background:#24272b;
top:0;
left:0;
position:fixed;
width:100%;
height:50px;
}
#chat-box-div{
padding: 0;
font-family: helvetica;
position:fixed;
top:50px;
height:100%;
width:100%;
background-color:#36393e;
left:300px;
overflow-y: scroll;
overflow-x: none;
}
#main-header-div-text{
width:120px;
color:darkcyan;
font-family: helvetica;
font-size: 20px;
vertical-align: center;
margin-top:15px;
margin-left: 90px;
}
#main-header-div-text:hover{
transition:ease-in-out .3s;
color:white;
}
::-webkit-input-placeholder {
color: darkcyan;
}
:-moz-placeholder { /* Firefox 18- */
color: darkcyan;
}
::-moz-placeholder { /* Firefox 19+ */
color: darkcyan;
}
:-ms-input-placeholder {
color: darkcyan;
}
#chatlog-display-div{
padding-left: 5px;
padding-top:10px;
font-family: helvetica;
position:fixed;
top:50px;
width:100%;
background-color:transparent;;
left:300px;
overflow-y: scroll;
overflow-x: none;
bottom:52px;
}
#chatroom-box{
padding-top:8px;
width:300px;
height: 20px;
background:transparent;
color:darkcyan;
font-family: helvetica;
}
#chatroom-box-link{
font-family: helvetica;
color:darkcyan;
text-decoration:none;
}
#chatroom-box-link:hover{
transition:ease-in-out .3s;
color:#006666;
}
#chat-box-div-hr{
left:305px;
width:95%;
position:fixed;
bottom:45px;
margin-right:5px;
}
hr{
border:1px solid;
color:#424549;
}
#chat-box-div-submit{
margin-left:0;
height:30px;
background:darkcyan;
width:70px;
outline: none;
}
#chat-box-div-txtinpt{
width:69%;
min-width:100px;
margin-top:10px;
margin-bottom:10px;
margin-left: 10px;
margin-right:0;
outline-color: darkcyan;
padding-left: 10px;
}
#chat-controls-div{
padding: 0;
width: 100%;
height: 55px;
background:transparent;
position: fixed;
bottom:0;
left:300px;
}
.submit{
background:darkcyan;
border:0;
border-radius:4px;
}
#main-header-div-search-txtinpt{
position:fixed;
width:60%;
height:35px;
top:7px;
margin-right:50%;
right:-30%;
background:transparent;
border:2px solid darkcyan;
border-radius:4px;
padding-left:10px;
color:darkcyan;
outline-color: darkcyan;
}
.big-txtinpt{
height:30px;
background: transparent;
border-radius:4px;
border:2px solid darkcyan;
color:darkcyan;
}
.servertxt{
color:cyan;
}
here is my index.html
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<meta name="author" content="Nicholas Hendricks">
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
<title>BillIsChill-2.0</title>
<link type="text/css" rel="stylesheet" href="http://billischill.ddns.net/billischill-2.0/css/masterStyle.css" />
<link type="text/css" rel="stylesheet" href="http://billischill.ddns.net/billischill-2.0/css/animate.css" />
</head>
<body>
<div id="main-header-div">
<p id="main-header-div-text">BillIsChill-2.0<p>
<form>
<input id="main-header-div-search-txtinpt" class="search" placeholder="Search" name="search"/>
</form>
</div>
<div id="chat-rooms-div" class="main-div">
<div id="rooms">
</div>
</div>
<div id="chat-box-div" class="main-div">
<div id="chatlog-display-div">
</div>
<form id="chatform" action="">
<hr id="chat-box-div-hr">
<div id="chat-controls-div">
<input id="chat-box-div-txtinpt" class="big-txtinpt"type="text" spellcheck="false" placeholder="Message">
<input id="chat-box-div-submit" class="submit" type="submit" value="Send">
</div>
</form>
</div>
<div id="online-users-div">
<div>
<script>
var socket = io();
socket.on('connect', function(){
socket.emit('adduser', prompt("What's your name?"));
});
socket.on('updatechat', function (username, data) {
$('#chatlog-display-div').append(username + data);
});
socket.on('welcomeuser', function(data, username){
jQuery("#chatlog-display-div").append(data + username);
});
socket.on('updaterooms', function(rooms, current_room) {
$('#rooms').empty();
$.each(rooms, function(key, value) {
if(value == current_room){
$('#rooms').append('<div id="chatroom-box"><center>' + value + '<center></div><hr>');
}
else {
$('#rooms').append('<div id="chatroom-box"><center><a id="chatroom-box-link" href="#" onclick="switchRoom(\''+value+'\')">' + value + '</a></center></div><hr>');
}
});
});
function switchRoom(room){
socket.emit('switchRoom', room);
}
$('form').submit(function(e) {
e.preventDefault();
//gets the value from the message text feild and sets it as the message var
var message = {
text : $('#chat-box-div-txtinpt').val()
}
if (message.text.trim().length !== 0) {
socket.emit('chat-message',message);
//append the message to the chatlog-display-div
$('#chat-box-div-txtinpt').focus().val('');
jQuery("#chatlog-display-div").append('<div>'+message.text+'</div><hr>');
}
});
socket.on('chat-message', function (message) {
jQuery("#chatlog-display-div").append('<div>'+message.text+'</div><hr>');
});
</script>
can someone please help me
From what i understand i think you want to scroll the div to the last message entered. For that add the following line after each time you append text using jQuery("#chatlog-display-div").append
$("#chatlog-display-div").scrollTop($("#chatlog-display-div").prop("scrollHeight"));
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
While I understand that aligning two div's side by side is a common question, I am having a little bit of an issue getting the YouTube video and chat box to align next to each other. I should be using a span, since this would allow the chatbox in the same space as the youtube video correct? I'm still learning the ropes here in HTML. Here is what the page currently looks like:
Here is my current HTML code, the divs dealing with the youtube video is class name "youtube-video" and div dealing with the chat box is class "chat"
<!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="DJ-text">Affinity FM DJ Room
<span class="Chat-text">Chat</span>
<div class="DJ-underline"></div>
<div class="Chat-underline"></div></div>
<div class="youtube-video" style="float: left;">
<iframe width="900px" height="500px" src="https://www.youtube.com/embed/2GvIq2SpVFM" frameborder="0" allowfullscreen></iframe>
</div>
<div class="chat" style="float: left; padding: 0px 0px 0px 12px;">
<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>
<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>
Here is my CSS for youtube-video and chat:
body {
background-color: #0f0f17;
margin: 0px;
width: 100%;
}
body,
textarea,
input {
font: 13px "Raleway", sans-serif;
color: #ffffff;
}
.bar{
height: 115px;
width: 100%;
background-color: #15151d;
}
.DJ-text{
font-weight: 700;
position:relative;left:50px;
position:relative;top:80px;
text-transform: uppercase;
}
.Chat-text{
position:relative;left:900px;
}
.DJ-underline{
width: 900px;
height: 1px;
position:relative;top:20px;
background-color: #3f3f45;
}
.Chat-underline{
width: 400px;
position:relative;left:-140px;
float:right;
height: 1px;
position:relative;top:20px;
background-color: #3f3f45;
}
/*.youtube-video{
position: relative; left: 50px;
position: relative; top: 130px;
}
.chat {
max-width: 400px;
background-color: #0f0f17;
position:relative;left:1093px;
position:relative;top:150px;
}*/
.chat-messages,
.chat-textarea,
.chat-name {
border: 1px solid #1a1a23;
background-color: #1a1a23;
}
.userName{
font-weight: 700;
color: #079ce0;
}
.chat-messages {
width:100%;
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;
}
.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:100%;
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;
background-color: #0f0f17;
}
.info-rect,
.chat textarea,
.chat-name {
max-width: 100%;
}
Using the code above supplied by #georges_user2251342, this is what the page looks like:
Here is the reference PSD: http://imgur.com/4XU62C9
It is true what they say! If I understand correctly, by centering, you mean to put 2 things side by side, next to each other so to speak.
In your case, the "youtube-video" element and the "chat" element need to be put side by side with percentages, yes. However, I would use 66% with 33% for percentages instead of 80% with 20%. Because your "chat" element doesn't look good with just 20%. It looks crunched up.
Look at these :
(66%-33%) http://lespointscom.com/a/misc/demo/2016_06_18/main_4.html
(80%-20%) http://lespointscom.com/a/misc/demo/2016_06_18/main_5.html
AGAIN THE NEW HTML :
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<link rel="stylesheet" href="main6.css">
</head>
<body>
<div class="header-bar">
<div class="bar"></div>
<div class="dropshadow"></div>
</div>
<div class="container">
<div class="youtube-video">
<div class="DJ-text">Affinity FM DJ Room</div>
<div class="DJ-underline"></div>
<iframe class="iframe" src="https://www.youtube.com/embed/2GvIq2SpVFM" frameborder="0" allowfullscreen></iframe>
</div>
<div class="chat">
<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>
<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>
AGAIN THE NEW CSS :
.youtube-video{
float: left;
width:66%;
}
.chat {
float: left;
width:33%;
}
.iframe {
width:98%;
min-height:500px;
}
.container {
width:98%;
}
body {
background-color: #0f0f17;
margin: 0px;
width: 100%;
}
body,
textarea,
input {
font: 13px "Raleway", sans-serif;
color: #ffffff;
}
.bar{
height: 115px;
width: 100%;
background-color: #15151d;
}
.DJ-text{
font-weight: 700;
/*position:relative;
left:50px;
top:80px;*/
text-transform: uppercase;
}
.Chat-text{
font-weight: 700;
/*position:relative;left:900px;*/
text-transform: uppercase;
}
.DJ-underline{
width: 98%;
height: 1px;
position:relative;top:20px;
background-color: #3f3f45;
margin: 0px 0px 50px;
}
.Chat-underline{
width: 100%;
position:relative;
/*left:-140px;*/
float:right;
height: 1px;
position:relative;top:20px;
background-color: #3f3f45;
margin: 0px 0px 50px;
}
.chat-messages,
.chat-textarea,
.chat-name {
border: 1px solid #1a1a23;
background-color: #1a1a23;
}
.userName{
font-weight: 700;
color: #079ce0;
}
.chat-messages {
width:95%;
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;
}
.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:95%;
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;
background-color: #0f0f17;
}
.info-rect,
.chat textarea,
.chat-name {
max-width: 100%;
}
#media only screen and (max-width: 772px) and (min-width: 0px)
{
.youtube-video{
width:100%;
}
.chat{
width:100%;
}
}
#media only screen and (max-width: 1254px) and (min-width: 0px)
{
.info-rect{
width:30%;
}
}
#media only screen and (max-width: 1054px) and (min-width: 0px)
{
.info-rect{
width:10%;
}
}
You can bring the chat box to the right by using position property.
Add this css for youtube-video
width:80%;
height:100%;
position:absolute;
left:0;
top:0;
Add this css for chat
width:20%;
height:100%;
position:absolute;
right:0;
top:0;
So, by doing this, you can bring the chat box to right.
Here is the Plnkr
Hope it works for you :)
Just put a float: left; to both divs :
<!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="DJ-text">Affinity FM DJ Room
<span class="Chat-text">Chat</span>
<div class="DJ-underline"></div>
<div class="Chat-underline"></div></div>
<div class="youtube-video" style="float: left;">
<iframe width="900px" height="500px" src="https://www.youtube.com/embed/2GvIq2SpVFM" frameborder="0" allowfullscreen></iframe>
</div>
<div class="chat" style="float: left; padding: 0px 0px 0px 12px;">
<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>
<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 for a better look, add padding: 0px 0px 0px 12px; or a similar small padding to seperate both divs.
Add this css for youtube-video
width:80%;
float:left;
Add this css for chat
width:20%;
float:left;
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>
The banner image in the header is 130 pixels tall, but it says the header in total is 135 pixels. I can't find where this is happening. Where is this extra space coming from?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Taft Power Equipment</title>
<link rel="stylesheet" type="text/css" href="js\jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
<script type="text/javascript" language="Javascript" src="js\jquery.min.js"></script>
<script src="js/jquery.horizontalNav.js"></script>
<script src="js\jquery-migrate-1.2.1.js"></script>
<script>
// When document is ready...
$(document).ready(function() {
$('.full-width').horizontalNav({}); // Call horizontalNav on the navigations wrapping element
$("#main-content").load("home.html");
});
</script>
<script>
$(document).ready(function() {
$("#home").click(function() {
$("#main-content").load("home.html");
});
$("#work").click(function() {
$("#main-content").load("work.html");
});
$("#blog").click(function() {
$("#main-content").load("blog.html");
});
$("#about").click(function() {
$("#main-content").load("about.html");
});
$("#contact").click(function() {
$("#main-content").load("contact.html");
});
$("#parts").click(function() {
$("#main-content").load("parts.html");
});
$("#people").click(function() {
$("#main-content").load("people.html");
});
});
</script>
<script>
$(function() {
$("button").button()
.click(function(event) {
event.preventDefault();
});
});
</script>
<script>
function showParts(str) {
if (str == "") {
document.getElementById("results").innerHTML = "";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("results").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "partsearch_2.php?q=" + str, true);
xmlhttp.send();
}
</script>
<script>
function showPeople(str) {
if (str == "") {
document.getElementById("results").innerHTML = "";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("results").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "peoplesearch.php?q=" + str, true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="page-wrap">
<div id="inside">
<div id="header">
<img src="images/taft_banner_960_blackandwhite.png" />
</div>
<div id="menu">
<nav class="horizontal-nav full-width horizontalNav-notprocessed">
<ul>
<li>Home
</li>
<li>Work
</li>
<li>Blog
</li>
<li>About
</li>
<li>Contact
</li>
<li>Parts Look Up
</li>
<li>People
</li>
</ul>
</nav>
</div>
<div id="main-content"></div>
<div id="footer">
<p>© Copy Right Taft Power Equipment Corp</p>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
html, body {
margin:0;
padding-top:0;
height:100%;
}
p, li {
}
a {
}
b {
}
table {
border-collapse: collapse;
/* 'cellspacing' equivalent */
}
table th {
font: 1.5em Tahoma;
border: 3px solid #0e7079;
border-radius: 6px;
padding: 0em 1em 0em 1em;
}
table td {
font: 1.3em sans-serif;
border-radius: 1px;
border: 0px solid #0e7079;
padding: 0 1em 0 1em;
}
h1 {
font: 2.0em Tahoma, sans-serif;
color: white;
height: 0px;
}
h2 {
font: 1.8em Tahoma, sans-serif;
color: green;
margin-bottom: 10px;
}
ul {
margin-left: 0px;
}
img {
border: none;
}
/* ========================================================================================== */
#page-wrap {
!margin: 10px auto;
display: inline;
}
#inside {
width: 960px;
margin: 0 auto;
background: blue;
min-height:100%;
position:relative;
}
#searchbar {
width: 30%;
background: #747474;
border: 1px solid red;
display: inline-block;
}
#results {
background: #4c4c4c;
min-height: 100px;
width:50%;
display: inline-block;
border-radius: 6px;
border: 1px solid #0e7079;
}
#results b {
font: 2.0em Tahoma, sans-serif;
color: white;
height: 0px;
}
#main-content {
margin-bottom: 10px;
padding:10px;
padding-bottom:30px;
/* Height of the footer */
}
#header {
}
#menu {
}
#left-sidebar {
width: 150px;
float: left;
padding-left: 15px;
padding-top: 20px;
}
#footer {
background: #000000;
text-align: center;
padding-top: 0px;
color: white;
position:absolute;
bottom:0;
width:960px;
height:30px;
/* Height of the footer */
}
/* ========================================================================================== */
.horizontal-nav {
background: #efefef;
border-radius: 6px;
}
.horizontal-nav ul {
background: #ff4505;
float: left;
text-align: center;
border-radius: 6px;
border: 0px solid #0e7079;
margin-left: 0px;
}
.horizontal-nav ul li {
float: left;
border-left: 1px solid #0e7079;
}
.horizontal-nav ul li:first-child {
border-left: 0 none;
}
.horizontal-nav ul li a {
display: block;
padding: 10px 20px;
color: #fff;
border-top: 1px solid rgba(255, 255, 255, 0.25);
border-left: 1px solid rgba(255, 255, 255, 0.25);
text-decoration: none;
}
.horizontal-nav ul li:first-child a {
border-left: 0 none;
}
.horizontal-nav ul li a:hover {
background: #12808a;
}
.horizontal-nav ul li:first-child a {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.horizontal-nav ul li:last-child a {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
http://jsfiddle.net/5b48H/
Thank you!
Either add display:block or vertical-align:top to the img element.
jsFiddle example - display:block
#header img {
display:block;
}
jsFiddle example - vertical-align:top
#header img {
vertical-align:top;
}
Note - The default vertical-align property is baseline. Changing it to top, middle or bottom fixes the issue.
If you can set the image's display style to block that should solve the problem. Setting vertical-align to bottom or middle should also work. I think the problem comes about because Firefox tries to position inline images so their bottom edge is aligned with the baseline of the text, and so there is space below the image for the text descenders. source
header img
{
display: block;
margin: 0;
padding: 0;
}
I believe setting line-height: 1; on the image will also fix this problem, especially if it's in a block by itself.
source