I am trying to make a quiz app. The question buttons seem to have a vertical orientation, whereas I want them in a horizontal configuration. I am not sure where I might be doing the mistake. I have set the display-inline-block and it still does not seem to work. I have tried changing the orientation of my screen as well. I tried making an array of a number of blocks, but that too didn't seem to work.
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({
width: progressBarWidth
}, 500).html(Math.floor(timeleft / 60) + ":" + timeleft % 60);
if (timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(2700, 2700, $('#progressBar'));
body {
background-color: lightblue;
}
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px;
/* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
/* Do not take in account */
html {
padding-top: 30px
}
a.solink {
position: fixed;
top: 0;
width: 100%;
text-align: center;
background: #f3f5f6;
color: #cfd6d9;
border: 1px solid #cfd6d9;
line-height: 30px;
text-decoration: none;
transition: all .3s;
z-index: 999
}
a.solink::first-letter {
text-transform: capitalize
}
a.solink:hover {
color: #428bca
}
/* Create two unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
}
.left {
width: 75%;
height: 100%;
}
.right {
width: 25%;
height: 100%;
display: flex;
flex-flow: row wrap;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* button */
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 20px 20px;
text-align: center;
text-decoration: none;
font-size: 18px;
margin: 2px 2px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<div id="progressBar">
<div class="bar"></div>
</div>
<body>
<script src="scripts.js">
</script>
<div class="row">
<div class="column left" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column right" style="background-color:#bbb;">
<div>
<p>
<h2>Questions</h2>
</p>
</div>
<div>
<button class="button">1</button>
</div>
<div>
<button class="button">2</button>
</div>
<div>
<button class="button">3</button>
</div>
<div>
<button class="button">4</button>
</div>
<div>
<button class="button">5</button>
</div>
</div>
</div>
</body>
</html>
you want the element in question's css property display to be grid or flex.
flex is easier to work with and better generally for most things.
display:flex;
flex-flow: row nowrap;
here is a link to mdn docs that go over flex stylings:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow
Related
I am trying to create a chat webpage using Python Flask as a backend. I want to align messages that are received and sent recently to be aligned in the bottom and when new ones arrive that msg should move up and new ones should be placed in that place. How to do that? I have read similar questions but couldn't understand how to implement it for my needs.
My chat page structure is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="{{
url_for('static', filename = 'static/css/jquery/jquery.js')
}
}
">\x3C/script>')
</script>
<script type=text/javascript>
$SCRIPT_ROOT = {
{
request.script_root | tojson | safe
}
};
$(function() {
$('#send_btn').bind('click', function() {
$.getJSON($SCRIPT_ROOT + '/serve_msg', {
msg: $('input[name="msg"]').val(),
}, function(data) {
var msg = document.createElement('div');
msg.className = 'msg';
msg.innerHTML = '<img src="" alt="You"><p id="send_msg"> document.getElementById("msg").value </p><span class="time-left">11:00</span>';
document.getElementById('msg_box').appendChild(msg);
$('#send_msg').text($('input[name="msg"]').val())
$("#reply").text(data.reply);
});
return false;
});
});
</script>
<!--<link rel="stylesheet" href="webi/templates/style.css">-->
<style type="text/css">
body {
background-color: #2a4982;
}
.container {
border: 2px solid #dedede;
background-color: #555555;
border-radius: 5px;
align-self: center;
padding-bottom: 3%;
margin-top: 4%;
margin-left: 16%;
margin-right: 10%;
}
.chatbox {
border: 2px solid #dedede;
background-color: #cac6f1;
border-radius: 5px;
align-self: center;
padding-bottom: 6%;
margin-left: 15%;
margin-right: 15%;
}
.main_heading {
font-weight: bolder;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 30px;
color: #2981bc;
-webkit-text-stroke: 1px cornsilk;
padding-top: -8%;
padding-bottom: -8%;
}
.text_input_area {
margin-top: 1%;
margin-bottom: -1%;
}
.msg_box {
position: relative;
background: rgb(22, 29, 34);
/*padding-bottom: 50%;*/
height: 450px;
width: 770px;
overflow: scroll;
}
.msg_input {
width: 85%;
padding-bottom: 3%;
}
.msg_sent {}
.msg_recieved {}
/* Style time text */
.time-right {
float: right;
color: #aaa;
}
/* Style time text */
.time-left {
float: left;
color: #999;
}
.msg {
position: relative;
;
border: 2px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
height: 40px;
width: fit-content;
margin: 15px 0;
bottom: 0px;
}
/* Darker chat container */
.msg_recieved {
border-color: #ccc;
background-color: #ddd;
}
/* Clear floats */
.container::after {
content: "";
clear: both;
display: table;
}
/* Style images */
.container img {
float: left;
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
}
/* Style the right image */
.container img.right {
float: right;
margin-left: 20px;
margin-right: 0;
}
</style>
<title>AVE - WEB INTERFACE</title>
</head>
<body>
<div class="container" align="center">
<p class="main_heading"> AVE - AI Virtual Entity</p>
<div class="chatbox">
chatbox
<div class="msg_box">
<div class="msg msg_recieved">
<img src="" alt="Ave">
<p id="reply">Hello. How are you today?</p>
<span class="time-right">11:00</span>
</div>
</div>
<div class="input-group mb-3">
<input type="text" name="msg" id="msg" class="form-control" placeholder="Type your message here!" aria-label="input_area" aria-describedby="send_btn">
<div class="input-group-append">
<button class="btn btn-primary" type="button" id="send_btn" onclick="display_send_msg">Send</button>
</div>
</div>
</div>
</div>
</body>
</html>
Sorry for the bad code! I am new to this whole idea. There may be lots of errors. Sorry for that
Let say you have a basic markup structure like
<main id="msgs">
<div>Message #0</div>
<div>Message #1</div>
<div>Message #2</div>
<div>Message #3</div>
<div>Message #4</div>
<!-- new messages are appended here -->
</main>
Using Flexbox you could place them in reverse order so every new message is visible on top of the page
main {
display: flex;
flex-flow: column-reverse nowrap;
}
Then via Javascript, once you appended the new message you need to scroll the main element via scrollTo(0, 0); The scroll could even be improved via CSS with scroll-behavior: smooth;
Here below a snippet that simulates a new message every 5s:
var messageArea = document.getElementById('msgs');
messageArea.scrollTo(0, 0);
setInterval(() => {
/* create a new message element */
var msgEl = document.createElement('div');
/* create a string with the message */
var msgText = 'Message #' + messageArea.children.length;
/* set the textContent of the element with the message */
msgEl.textContent = msgText;
/* append the new message in the container of the messages */
messageArea.appendChild(msgEl);
/* finally scroll the message area to (0, 0) coords. */
messageArea.scrollTo(0, 0);
}, 5000)
main {
height: 100vh;
display: flex;
overflow: auto;
padding: 1em .5em;
flex-flow: column-reverse nowrap;
scroll-behavior: smooth;
}
div {
border: 1px #ccc solid;
border-radius: 10px;
padding: 1em;
margin-top: 1.5em;
width:60%;
align-self: flex-start;
}
div:nth-child(2n) {
align-self: flex-end;
}
<main id="msgs">
<div>Message #0</div>
<div>Message #1</div>
<div>Message #2</div>
<div>Message #3</div>
<div>Message #4</div>
</main>
The best thing would be to just normally append new message to the messages div and use JavaScript/jQuery to scroll to bottom of that div.
jQuery:
$('.messages').scrollTop($('.messages').height())
This question already has answers here:
onclick calling hide-div function not working
(3 answers)
JavaScript function close() {} [duplicate]
(3 answers)
Closed 4 years ago.
i'm making a cookie clicker, and the shop opens fine. The problem is, it doesn't close. There are two functions: the opener, and the closer. Since the opener is being hidden, then the closer opens. I don't know why this isn't really working, and not closing. Again, the opener works fine like it is supposed to, but the closer doesn't do anything at all. I even tried using console.log it just doesn't run the function. Thanks Here is my code:
var clicks = 0;
var newthing;
var deg;
function add() {
clicks = clicks + 1;
newthing = 20 * clicks;
deg = newthing + "deg"
document.getElementById('inner').innerHTML = "You have: " + clicks + " cookies";
document.body.style.background = `linear-gradient(${deg}, #ff8080, lightgreen, skyblue)`;
}
function toggleshop() {
document.getElementById('shop').classList.toggle('hide');
document.getElementById('toggler1').classList.toggle('hide');
}
function close() {
console.log('asdf');
document.getElementById('shop').classList.toggle('hide');
console.log('asdfad');
document.getElementById('toggler1').classList.toggle('hide');
}
body {
background: linear-gradient(#ff8080, lightgreen, skyblue);
height: 100vw;
text-align: center;
}
h1 {}
.cookie {
margin-top: 0px;
background-image: url(cookie.png);
padding: 150px;
display: inline-block;
color: black;
background-position: center;
background-repeat: no-repeat;
margin: auto;
transition: 1s;
position: relative;
text-align: center;
margin-right: auto;
}
.cookie:hover {
border: 2px solid black;
border-radius: 1000000000px;
/* padding-left: -10px;
padding-top: 180px; */
}
#inner {
max-width: 50%;
margin: auto;
}
#inner:hover {}
#shop {
width: 75%;
border: 2px solid black;
margin: auto;
margin-top: 90px;
}
#row1 {
width: 49%;
border: 1px solid black;
height: 300px;
display: inline-block;
}
#row2 {
width: 49%;
border: 1px solid black;
height: 300px;
display: inline-block;
}
button {
width: 75%;
background-color: black;
color: white;
height: 10%;
font-size: 100%;
cursor: pointer;
}
.hide {
display: none;
}
#shop {
background-color: white;
position: relative;
z-index: 10;
bottom: 400px;
opacity: .9;
}
.hide1 {}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Baker</h1>
<p>Click the Cookie to make cookies!</p>
<div class="cookie" onclick="add();">
<h1 id="inner">Click Me!</h1>
</div>
<button onclick="toggleshop();" id="toggler1">Open Shop</button>
<div id="shop" class="hide">
<h1>Shop</h1>
<button onclick="close();">Close Shop</button>
<div id="row1">
<h2>Click Multipliers:</h2>
<button>2x per click</button>
<button>3x per click</button>
<button>5x per click</button>
<button>10x per click</button>
<button>15x per click</button>
</div>
<div id="row2">
<h2>Auto Clickers</h2>
<button>+1 per second</button>
<button>+2 per second</button>
<button>+3 per second</button>
<button>+5 per second</button>
<button>+10 per second</button>
</div>
</div>
</body>
</html>
It looks like "close" might be a reserve word. I changed the function name to "closed" and updated the reference in the button and it's working.
var clicks = 0;
var newthing;
var deg;
function add() {
clicks = clicks + 1;
newthing = 20 * clicks;
deg = newthing + "deg"
document.getElementById('inner').innerHTML = "You have: " + clicks + " cookies";
document.body.style.background = `linear-gradient(${deg}, #ff8080, lightgreen, skyblue)`;
}
function toggleshop() {
document.getElementById('shop').classList.toggle('hide');
document.getElementById('toggler1').classList.toggle('hide');
}
function closed() {
console.log('asdf');
document.getElementById('shop').classList.toggle('hide');
console.log('asdfad');
document.getElementById('toggler1').classList.toggle('hide');
}
body {
background: linear-gradient(#ff8080, lightgreen, skyblue);
height: 100vw;
text-align: center;
}
h1 {}
.cookie {
margin-top: 0px;
background-image: url(cookie.png);
padding: 150px;
display: inline-block;
color: black;
background-position: center;
background-repeat: no-repeat;
margin: auto;
transition: 1s;
position: relative;
text-align: center;
margin-right: auto;
}
.cookie:hover {
border: 2px solid black;
border-radius: 1000000000px;
/* padding-left: -10px;
padding-top: 180px; */
}
#inner {
max-width: 50%;
margin: auto;
}
#inner:hover {}
#shop {
width: 75%;
border: 2px solid black;
margin: auto;
margin-top: 90px;
}
#row1 {
width: 49%;
border: 1px solid black;
height: 300px;
display: inline-block;
}
#row2 {
width: 49%;
border: 1px solid black;
height: 300px;
display: inline-block;
}
button {
width: 75%;
background-color: black;
color: white;
height: 10%;
font-size: 100%;
cursor: pointer;
}
.hide {
display: none;
}
#shop {
background-color: white;
position: relative;
z-index: 10;
bottom: 400px;
opacity: .9;
}
.hide1 {}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Baker</h1>
<p>Click the Cookie to make cookies!</p>
<div class="cookie" onclick="add();">
<h1 id="inner">Click Me!</h1>
</div>
<button onclick="toggleshop();" id="toggler1">Open Shop</button>
<div id="shop" class="hide">
<h1>Shop</h1>
<button onclick="closed();">Close Shop</button>
<div id="row1">
<h2>Click Multipliers:</h2>
<button>2x per click</button>
<button>3x per click</button>
<button>5x per click</button>
<button>10x per click</button>
<button>15x per click</button>
</div>
<div id="row2">
<h2>Auto Clickers</h2>
<button>+1 per second</button>
<button>+2 per second</button>
<button>+3 per second</button>
<button>+5 per second</button>
<button>+10 per second</button>
</div>
</div>
</body>
</html>
Simply rename the function to something else than close() since it is a reserved word for closing the window.
From the following page:
In addition to the above reserved words, you'd better avoid the following identifiers as names of JavaScript variables. These are predefined names of implementation-dependent JavaScript objects, methods, or properties (and, arguably, some should have been reserved words): ... close ...
Here is your code with close() renamed to closeShop().
var clicks = 0;
var newthing;
var deg;
function add() {
clicks = clicks + 1;
newthing = 20 * clicks;
deg = newthing + "deg"
document.getElementById('inner').innerHTML = "You have: " + clicks + " cookies";
document.body.style.background = `linear-gradient(${deg}, #ff8080, lightgreen, skyblue)`;
}
function toggleshop() {
document.getElementById('shop').classList.toggle('hide');
document.getElementById('toggler1').classList.toggle('hide');
}
function closeShop() {
console.log('asdf');
document.getElementById('shop').classList.toggle('hide');
console.log('asdfad');
document.getElementById('toggler1').classList.toggle('hide');
}
body {
background: linear-gradient(#ff8080, lightgreen, skyblue);
height: 100vw;
text-align: center;
}
h1 {}
.cookie {
margin-top: 0px;
background-image: url(cookie.png);
padding: 150px;
display: inline-block;
color: black;
background-position: center;
background-repeat: no-repeat;
margin: auto;
transition: 1s;
position: relative;
text-align: center;
margin-right: auto;
}
.cookie:hover {
border: 2px solid black;
border-radius: 1000000000px;
/* padding-left: -10px;
padding-top: 180px; */
}
#inner {
max-width: 50%;
margin: auto;
}
#inner:hover {}
#shop {
width: 75%;
border: 2px solid black;
margin: auto;
margin-top: 90px;
}
#row1 {
width: 49%;
border: 1px solid black;
height: 300px;
display: inline-block;
}
#row2 {
width: 49%;
border: 1px solid black;
height: 300px;
display: inline-block;
}
button {
width: 75%;
background-color: black;
color: white;
height: 10%;
font-size: 100%;
cursor: pointer;
}
.hide {
display: none;
}
#shop {
background-color: white;
position: relative;
z-index: 10;
bottom: 400px;
opacity: .9;
}
.hide1 {}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Baker</h1>
<p>Click the Cookie to make cookies!</p>
<div class="cookie" onclick="add();">
<h1 id="inner">Click Me!</h1>
</div>
<button onclick="toggleshop();" id="toggler1">Open Shop</button>
<div id="shop" class="hide">
<h1>Shop</h1>
<button onclick="closeShop();">Close Shop</button>
<div id="row1">
<h2>Click Multipliers:</h2>
<button>2x per click</button>
<button>3x per click</button>
<button>5x per click</button>
<button>10x per click</button>
<button>15x per click</button>
</div>
<div id="row2">
<h2>Auto Clickers</h2>
<button>+1 per second</button>
<button>+2 per second</button>
<button>+3 per second</button>
<button>+5 per second</button>
<button>+10 per second</button>
</div>
</div>
</body>
</html>
I have a html page with a filter_options and content. Inside the filter_options there are some options listed. I have given scroll access and on scroll-Y it would change the scroll-X of those options. But with that the content scroll is also working. How can I allow the filter_options scroll to only work when it is being scrolled?
index.html
document.getElementById("options").addEventListener('mousewheel', function(e) {
if (e.wheelDelta > 0) {
this.scrollLeft -= 100;
} else {
this.scrollLeft += 100;
}
});
body {
margin: 0;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: white;
}
::-webkit-scrollbar-thumb {
background: orange;
border-radius: 30px;
}
#filter_options {
width: 80%;
height: 100%;
position: fixed;
top: 0;
z-index: 2;
background-color: rgba(66, 60, 60, 0.13);
float: left;
overflow: scroll;
}
#filter_options div {
background-color: rgb(51, 51, 51);
text-align: center;
overflow: auto;
white-space: nowrap;
margin-top: 5%;
}
#filter_options div div {
color: white;
background-color: orange;
padding: 12px;
font-size: 20px;
font-family: "Comic Sans MS", cursive, sans-serif;
display: inline-block;
user-select: none;
}
#content {
height: 5000px;
width: 90%;
margin-left: 5%;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="filter_options">
<div id="options">
<div>Option 1</div><div>Option 2</div><div>Option 3</div><div>Option 4</div><div>Option 5</div><div>Option 6</div><div>Option 7</div><div>Option 8</div><div>Option 9</div><div>Option 10</div>
</div>
</div>
<div id="content"></div>
</body>
</html>
Try to use
#content {overflow: hidden}
I just thought of a solution. By using e.preventDefault() before the if statement.
JSFiddle
I nested 3 columns in the row div to align them horizontally and the social media icons will not be part of the row. I put width: 100%, float: left, and tried different ways to make the 3 columns lined up straight - no success.
This graphic below is the goal I need to succeed.
HTML and CSS
p {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
}
h3 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 27px;
}
.box {
background-color: #f3f3f3;
color: #fff;
font-size: 150%;
width: 100%;
}
.box .box {
background-color: #f3f3f3;
color: #444;
}
.placeholder {
grid-column: col 3 / span 2;
grid-row: row 2;
display: grid;
}
.sm-stw {
grid-column: 1;
grid-row: 1;
width: 573px;
}
.stw-box {
border: solid 1px #ff0000;
width: 75%;
margin: 0 auto;
padding: 0 auto;
}
div.vertical-line {
width: 1px;
background-color: #979797;
height: 100%;
float: left;
margin: 0 15px 0 15px;
}
.sm-svrs {
grid-column: 2;
grid-row: 1;
text-align: left;
}
.sm-hashtag-stw {
grid-column: 1/3;
grid-row: 2;
text-align: center;
}
<div class="box placeholder">
<div class="box sm-stw">
<div class="stw-box">
<div class="col">
<div class="sm-icon"><img src="imgs/icon-fb.png" alt="Seek the World | Facebook"></div>
<div class="sm-logo"><img src="imgs/icon-ins.png" alt="Seek the World | Instagram"></div>
</div>
<div class="col">
<div class="vertical-line" style="height: 75px;"></div>
</div>
<div class="col">
<h3>Seek the World</h3>
<p>(short content place here)</p>
</div>
</div>
</div>
</div>
I clean a little your css code, and i replace the grid with flex. Also there a lot of stuff that i think were useless, so i removed them.
As #hungerstar said in comment, you can set a border to one of the col, and add a little padding to make the vertical line.
It is better this way because it does not pollute the html.
Check the code, and tell me I you need more explanation !
$('#removeGrayMargin').on('click', function(){
if(!$(this).hasClass('active')) {
$(this).text('Put back gray margins');
$(this).addClass('active');
$('.main-container').addClass('with-margin');
}else {
$(this).text('Remove the gray margin');
$(this).removeClass('active');
$('.main-container').removeClass('with-margin');
}
});
.main-container {
background-color: #f3f3f3;
color: #444;
font-size: 150%;
width: 100%;
}
.box {
display: flex;
align-items: center;
justify-content: center;
border: solid 1px #ff0000;
width: 75%;
margin: 0 auto;
padding: 30px 0;
}
.main-container.with-margin {
background: transparent;
}
.main-container.with-margin .box{
background: #f3f3f3;
}
.col-1 {
width: 30%;
text-align: right;
padding-right: 20px;
}
.col-2 {
width: 70%;
border-left: 1px solid #8C8C8C;
padding-left: 20px;
}
.col-2-title,
.col-2-p {
font-family: 'Source Sans Pro', sans-serif;
}
.col-2-p {
font-size: 14px;
margin-top: 0;
}
.col-2-title{
font-size: 27px;
margin-top: 5px;
margin-bottom: 20px;
}
.sm-logo + .sm-logo{
margin-top: 8px;
}
img {
/* Trick to remove the white space under the image */
vertical-align: middle;
}
button {
border-radius: 0;
background: #262626;
color: white;
border: 0;
padding: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
<div class="box">
<div class="col-1">
<div class="sm-logo"><img src="http://www.sorensonvrs.com/assets/images/svrsv2/logo-facebook.png" alt="Seek the World | Facebook" width="25px"></div>
<div class="sm-logo"><img src="http://www.sorensonvrs.com/assets/images/svrsv2/logo-instagram.png" alt="Seek the World | Instagram" width="25px"></div>
</div>
<div class="col-2">
<h3 class="col-2-title">Seek the World</h3>
<p class="col-2-p">(short content place here)</p>
</div>
</div>
</div>
<p>
Bonus because i don't know if you want exactly your image, or if you want the gray margin as your js fiddle.
</p>
<button id="removeGrayMargin">Remove the gray margin</button>
I am designing a stat board for a call center and I am having trouble getting 2 elements to size up correctly. I have used an automatic text resizer called FitText(link below). I have gotten every other element to work with FitText except the 100% and 100 listed in the code. I cannot figure out why the 100% and the 100 just stay so small compared to the sizes of the divs they are contained in. Both containers are 100% width. I have played around with hundreds of CSS combinations to no avail. Any help will be greatly appreciated. Via the requests below, here is the JSFiddle link.
http://jsfiddle.net/neggly/57tVW/
CSS
#wrap {
position: absolute;
height:100%;
width:100%;
margin:0 auto;
background-color: black;
}
#statuscolorwrap
{
background-color: aqua;
float: left;
width: 1%;
height: 100%;
}
#numberwrap
{
background-color: #ff0;
float: left;
width: 20%;
height: 100%;
}
#announcementwrap
{
background-color: coral;
float: left;
width: 79%;
height: 100%;
}
#queuewrapper
{
height:40%;
width:100%;
float: top;
background-color: darkorchid;
}
#queuecolors
{
height:40%;
width:100%;
float: top;
background-color: cadetblue;
}
#queuepercentage
{
height: 50%;
width: 100%;
float: top;
background-color: chartreuse;
}
#queueholding
{
height: 50%;
width: 100%;
float: bottom;
background-color: crimson;
}
#topcolor
{
height: 50%;
width: 100%;
float: top;
background-color: darkseagreen;
}
#bottomcolor
{
height: 50%;
width: 100%;
float: bottom;
background-color: moccasin;
}
#datetimewrapper
{
width:100%;
height:5%;
float: top;
background-color: deepskyblue;
}
#messages
{
width: 100%;
height: 60%;
float: top;
background-color: darkorchid;
overflow-y: auto;
}
.messagewrapper
{
width: 100%;
height: 100px;
float:top;
background-color: azure;
}
.messageimportance
{
float:left;
width: 5%;
height: 100%;
background-color: darkslategrey;
}
.messagesubject
{
float:left;
width: 95%;
height: 100%;
background-color: blanchedalmond;
}
h1
{
font: Helvetica, sans-serif;
margin:0;
padding:0;
text-align: center;
}
h2
{
font: Helvetica, sans-serif;
margin:0;
padding:0;
text-align: center;
}
h3
{
font: Helvetica, sans-serif;
font-weight: bold;
margin:0;
padding:0;
text-align: center;
}
#anpicturewrap
{
float:top;
width:100%;
height:45%;
background-color: darkcyan;
}
#antextwrap
{
float:top;
width:100%;
height:50%;
background-color: darkkhaki;
overflow-y: auto;
}
img
{
max-width: 100%;
max-height: 100%;
display:block;
margin:auto;
}
h4
{
font: Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: left;
}
#text
{
width: auto;
margin-left: 40px;
margin-right:40px;
margin-bottom: 30px;
}
.subjecttext
{
height: 100%;
width:100%;
margin-left: 10px;
margin-right: 10px;
margin-top: auto;
margin-bottom: auto;
}
HTML
<html>
<head>
<title>Virginia Summary</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" href="base.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/libs/jquery/jquery.fittext.js" type="text/javascript"></script>
</head>
<body>
<div id="wrap">
<div id="numberwrap">
<div id="queuewrapper">
<div id="queuepercentage">
<div class="subjecttext">
<h1 id="fittext1">1</h1>
</div>
</div>
<div id="queueholding">
<h1 id="fittext2">100</h1>
</div>
</div>
<div id="messages">
<div class="messagewrapper">
<div class="messagesubject">
<div class="subjecttext">
<h2 id="fittext3">Enter Subject here</h2>
</div>
</div>
<div class="messageimportance">
</div>
</div>
</div>
</div>
<div id ="statuscolorwrap">
<div id="queuecolors">
<div id="topcolor">
</div>
<div id="bottomcolor">
</div>
</div>
</div>
<div id="announcementwrap">
<div id="datetimewrapper">
<h3 id="fittext4">12/12/2014 18:00</h3>
</div>
<div id="anpicturewrap">
<img src="images/pic.jpg" alt=""/>
</div>
<div id="antextwrap">
<div id="text">
<h4 id="fittext5">sample text</h4>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("h1").fitText(1);
$("#fittext2").fitText(1.2);
$("#fittext3").fitText(1.2);
$("#fittext4").fitText(1.2, {minFontSize: '20px', maxFontSize: '30px'});
$("#fittext5").fitText(1.2);
</script>
</body>
</html>
https://github.com/davatron5000/FitText.js
Default margins on headings and some of the margins you have set are causing some of the alignment issues. If you switched some of that to padding, and used box-sizing:border-box; on some of those divs, it would make things a bit easier to style:
div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
In the JS fiddle example, it doesn't look the Javascript to resize the text is actually being called on anything. When I turn on JQuery in the fiddle and then actually call the text-resize stuff on your elements it does work to resize the elements.
$(document).ready( function(){
jQuery("#fittext1").fitText(.2);
jQuery("#fittext2").fitText(.3);
jQuery("#fittext3").fitText(.6);
jQuery("#fittext4").fitText(1, {minFontSize: '20px', maxFontSize: '30px'});
jQuery("#fittext5").fitText(1.2);
});
Edit: I updated some of your CSS so it worked the way you might have expected it to. I moved normalize to the top of your CSS, since it should be the first thing added. You will probably want to add some space and things in some of the boxes, but since I added the border-box, you can just do this with padding on the percentage sized elements.
http://jsfiddle.net/57tVW/2/