Calculating the area of a rectangle with different images - javascript

I am in the process of making a website for calculating the area of differing lego bricks and am unsure on how to do this. I have created 13ish images of lego bricks with assigned heights and widths.one has been copied below I understand how to do the multiplication and checking (response of user vs actual answer) aspect of this website but don't know how randomise these images and then store the variables for them such as length and width (to calculate the area). Would you be able to suggest any ideas on the javascript for this?
var number1;
var number2;
var response;
var calcanswer;
var score = 0;
window.onload = areaquestion;
var areas = new Array("Images/1*1.png","Images/2*1.png","Images/2*2.png","Images/3*1.png","Images/3*2.png","Images/4*1.png","Images/4*2.png","Images/4*3.png","Images/5*1.png","Images/5*2.png","Images/6*1.png","Images/6*2.png","Images/6*4.png");
function areaquestion() {
var randomNum = Math.floor(Math.random() * areas.length);
document.getElementById("question").src = areas[randomNum];
number1 = Math.floor( 1 + Math.random() * 9 );
number2 = Math.floor( 1 + Math.random() * 9 );
var question = document.getElementById("question");
question.innerHTML = "What is the area of this shape?";
calcanswer = (number1*number2);
}
function check()
{
var statusDiv = document.getElementById("status");
response=document.getElementById("answer").value;
if(response != calcanswer)
statusDiv.innerHTML="Incorrect";
else
if (response==calcanswer)
{
statusDiv.innerHTML="Very good!";
score ++;
document.getElementById("score").textContent = score
document.getElementById("answer").value = "";
problem();
}
}
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 30px;
text-align: center;
background: yellow;
color: black;
font-family: Arial, Helvetica, sans-serif;
}
.score {
display:flex;
flex-wrap: wrap;
float: right;
}
#answer {
width: 30%;
background-color: yellow;
color:black;
border-color: black;
padding: 12px 20px;
float: initial;
text-size-adjust: 30;
}
#solve {
width: 20%;
background-color: blue;
color:rgb(255, 255, 255);
border-color: black;
padding: 12px 20px;
font-size: 100%;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex: 50%;
background-color: #ffffff;
padding: 20px;
color:#000;
}
/* Main column */
.main {
flex: 50%;
background-color: white;
padding: 20px;
}
/* Footer */
.footer {
display: flex;
flex-wrap: wrap;
padding: 100px;
text-align: right;
background: #fff;
flex-direction: column;
}
#practicebtn{
padding:30px;
}
#playbtn{
padding:30px;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 700px) {
.row, .navbar, .footer {
flex-direction: column;
}
}
<!DOCTYPE html>
<html>
<title>Lego Area</title>
<head>
<link rel="stylesheet" href="CSS/Play.css">
<script src="JavaScript/Play.js"></script>
</head>
<body onload="problem();">
<div class="header">
<h1>LEGO AREA</h1>
<p>Calculating <b>area</b> with Emmet.</p>
<div id="score" class="score" value="SCORE:"></div>
</div>
<form>
<div class="row">
<div class="side">
<div id="question"></div>
<div id ="prompt"></div>
<input type="text" id="answer"/>
</div>
<div class="main">
<input id="solve" type="button" value="CHECK!" onclick="check()" />
</div>
</div>
</form>
<div id="status"></div>
<!-- Footer -->
<div class="footer">
<div class="practice"> <img src="Images/legoBlue2.png" id="practicebtn" width="20%"></div>
<div class="play"> <img src="Images/legored2.png" id="playbtn" width="20%"></div>
</div>
</body>
</html>

Could you create an array of objects containing all your legos with key/value pairs indicating the source image, the length, width, and area of each? Such as:
const legos = [
{
name: lego01
image: "image01.png",
len: 10,
wid: 4,
area: 40
},
{
name: lego02
image: "image02.png",
len: 6,
wid: 6,
area: 36
}
{
name: lego03
image: "image03.png",
len: 12,
wid: 8,
area: 96
}
]
Then you can have your program choose a random lego. And you can access it's area or length and width using the syntax randomLego.width.
I hope I understood what you were wanting to do.

Related

Added a scroll event listener to an element, but it moves the right way only when scrollTop !== 0

So I wrote this small script which has two lists - Finished/Active tasks, and you can either switch a task's list by hitting a button or read more about the task by hitting "more info". when hitting more info there's a new div element created, which I wanted to follow its hosts element Y position, and it halfway works.
So this is how it looks: enter image description here
And here's the bug that im pretty sure happens when ever the scrollable-elements scrollTop isn't 0 (it is created the right way, and whenever I start scrolling it jumps right up and covers the task itself) : enter image description here.
Here's the part of my code that's is incharge of identifying the amount of px scrolled, scroll direction and moving the "more info" div element, as well as the part that's incharge of creating it, I couldn't figure out where is the problem as I'm pretty new to coding overall and I'm not really familiar with css/html either.
createTooltip() {
const tooltipElement = document.createElement('div');
tooltipElement.className = 'card';
const toolTipTemplate = document.getElementById('tooltip');
const tooltipBody = document.importNode(toolTipTemplate.content, true);
tooltipBody.querySelector('p').textContent = this.text;
tooltipElement.append(tooltipBody);
const hostElPosLeft = this.hostElement.offsetLeft;
const hostElPostop = this.hostElement.offsetTop;
const hostElHeight = this.hostElement.clientHeight;
const parentElementScrolling = this.hostElement.parentElement.scrollTop;
const x = hostElPosLeft + 20;
const y = hostElPostop + hostElHeight - parentElementScrolling - 10;
tooltipElement.style.position = 'absolute';
tooltipElement.style.left = x + 'px';
tooltipElement.style.top = y + 'px';
const scrollHandler = () => {
ulElement.addEventListener('scroll', yLogger);
};
tooltipElement.addEventListener('click', this.closeToolTip);
tooltipElement.addEventListener('click', scrollHandler);
this.element = tooltipElement;
const ulElement = this.hostElement.parentElement;
console.log(ulElement);
let pxPosition = [0];
let currentY = y;
const yLogger = () => {
let scrollDirection;
let pxScrolled = 0;
if (pxPosition.length <= 1) {
pxPosition.push(ulElement.scrollTop);
} else {
pxPosition.push(ulElement.scrollTop);
pxPosition.shift(ulElement);
}
console.log(pxPosition);
if (pxPosition[1] < pxPosition[0]) {
scrollDirection = 'up';
pxScrolled = pxPosition[0] - pxPosition[1];
} else if (pxPosition[0] < pxPosition[1]) {
scrollDirection = 'down';
pxScrolled = pxPosition[1] - pxPosition[0];
}
console.log(pxScrolled);
console.log(scrollDirection);
if (scrollDirection === 'down') {
currentY = currentY - pxScrolled;
console.log(currentY);
tooltipElement.style.top = currentY + 'px';
} else {
scrollDirection === 'up';
currentY = currentY + pxScrolled;
console.log(currentY);
tooltipElement.style.top = currentY + 'px';
}
};
this.hostElement.closest('ul').addEventListener('scroll', yLogger);
}
}
I'm adding the HTML and CSS snippets although I don't think they're neccesary since it was written by the course's instructor which im attending.
Here's the HTML snippet:
<!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" />
<title>Project Board</title>
<link rel="stylesheet" href="assets/styles/app.css" />
<script src="assets/scripts/app.js" defer></script>
</head>
<body>
<template id="tooltip">
<h2>More Info</h2>
<p></p>
</template>
<header id="main-header">
<h1>Project Planner</h1>
</header>
<section id="active-projects">
<header>
<h2>Active Projects</h2>
</header>
<ul>
<li
id="p1"
data-extra-info="Got lifetime access, but would be nice to finish it soon!"
class="card"
draggable="true"
>
<h2>Finish the Course</h2>
<p>Finish the course within the next two weeks.</p>
<button class="alt">More Info</button>
<button>Finish</button>
</li>
<li
id="p2"
data-extra-info="Not really a business topic but still important."
class="card"
draggable="true"
>
<h2>Buy Groceries</h2>
<p>Don't forget to pick up groceries today.</p>
<button class="alt">More Info</button>
<button>Finish</button>
</li>
</ul>
</section>
<section id="finished-projects">
<header>
<h2>Finished Projects</h2>
</header>
<ul>
<li
id="p3"
data-extra-info="Super important conference! Fictional but still!"
class="card"
draggable="true"
>
<h2>Book Hotel</h2>
<p>
Academind conference takes place in December, don't forget to book a
hotel.
</p>
<button class="alt">More Info</button>
<button>Activate</button>
</li>
</ul>
</section>
<footer>
<button id="im-done-btn">I'm Done!</button>
</footer>
</body>
</html>
And here's the CSS snippet if relevant:
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
body {
margin: 0;
}
#main-header {
width: 100%;
height: 6rem;
display: flex;
justify-content: center;
align-items: center;
background: #ff0062;
}
#main-header h1 {
color: white;
margin: 0;
}
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 1rem 0;
}
section {
margin: 1rem auto;
width: 40rem;
max-width: 90%;
}
section ul {
padding: 1rem;
max-height: 20rem;
overflow: scroll;
}
section > h2 {
color: white;
margin: 0;
}
button {
font: inherit;
background: #ff0062;
color: white;
border: 1px solid #ff0062;
padding: 0.5rem 1.5rem;
cursor: pointer;
}
button.alt {
background: white;
color: #ff0062;
}
button:focus {
outline: none;
}
button:hover,
button:active {
background: #ff2579;
border-color: #ff2579;
color: white;
}
.card {
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
padding: 1rem;
background: white;
}
.droppable {
background: #ffe0ec
}
#active-projects {
border: 1px solid #870099;
}
#active-projects > header {
background: #870099;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
#active-projects header h2 {
color: white;
margin: 0;
}
#finished-projects {
border: 1px solid #535353;
}
#finished-projects > header {
background: #535353;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
#finished-projects header h2 {
color: white;
margin: 0;
}
The problem can be solved through CSS, and you can remove the following from your Javascript code:
tooltipElement.style.position = 'absolute';
tooltipElement.style.left = x + 'px';
tooltipElement.style.top = y + 'px';
Instead of that, change your CSS, by adding these:
li.card {
position: relative;
}
div.card {
position: absolute;
top: 0; /* or some other value, experiment until you find the one which works for you */
left: 0; /* same as above */
z-index: 1;
}
For this to work, the div.card element, which you are creating in your Javascript code, needs to be a child element of the appropriate li.card element. I'm also (perhaps erroneously) assuming that your original code is similar to the one I found earlier, and posted in the comment to your question, since I couldn't get your original code to run.
Your position:absolute wasn't working originally, because the position of the li.card parent was not explicitly set, which was defaulting it to static.
EDIT Forgot to mention the z-index bit. This is needed because your info box wouldn't be fully visible (it would be under the next li.card element).

How can I write in the text area through js

// Add an external book
let inupt = document.getElementById("external-book");
let ptn = document.getElementById("add-external-book");
let settings = document.getElementById("add-settings");
// _____________________start add_____________________________________
let myAddText = [];
function textAddSettings() {
settings.innerHTML = "";
let index = 0;
for (task of myAddText) {
let content = `
<div class="settings">
<h4 class="book-name">${task.name}</h4>
<button id ="asx" onclick="missionCompleted(${index})" class="button-css">ending</button>
</div>
`;
settings.innerHTML += content;
index++;
}
};
ptn.addEventListener("click", function () {
let textBk = inupt.value;
let myAddTextObjkt = {
name: textBk,
removeLeFather: ""
};
myAddText.push(myAddTextObjkt);
//innerHTML
textAddSettings();
inupt.value = '';
});
// ___________________Department of Executed Tasks____________________
let executedTasks = document.getElementById("executed-tasks");
let execute = [];
function textAddExecute() {
executedTasks.innerHTML = "";
let index = 0;
for (task of execute) {
let content =
`
<div class="all-tasks-box">
<div class="my-list">
<h4 class="book-name">${task.name}</h4>
<div class="all-star">
<button onclick="changeColorPnt(${index})" id = "nx" class="button-css">Notes</button>
</div>
</div>
<div class="text-box-m xxxxx ${task.showAndNoneBox ? "show-none" : ""}">
<textarea id = "taw" class="${task.colorArea ? "color-green" : "color-white"}" type ="text" ${task.textAreaReadonly ? "readonly" : ""} > ${task.textareaValue}</textarea>
<button onclick="editAndSave(${index})" >${task.editTextArea ? "Edit" : "save"}</button>
</div>
</div>
`;
executedTasks.innerHTML += content;
index++;
}
};
// Adds the element to the new array while deleting the element from the old array
function missionCompleted(index) {
// task name
let element = myAddText[index].name;
let myexecute = {
name: element,
showAndNoneBox: "false",
textAreaReadonly: "true",
colorArea: "true",
textareaValue: "false",
editTextArea: "false"
};
execute.push(myexecute);
textAddExecute();
// delete the element from the old array
// We will get the index of the item and delete it
myAddText.splice(index, 1);
//innerHTML Updates the old text data
textAddSettings();
};
// ________________Notes button__________________________
function changeColorPnt(index) {
let element = execute[index];
if (element.showAndNoneBox) {
// text area
element.showAndNoneBox = false;
element.textAreaReadonly = false;
} else {
// text area
element.showAndNoneBox = true;
}
textAddExecute();
};
//_____________________________
function editAndSave(index) {
let btn = execute[index];
if (btn.editTextArea) {
// edit or save button
btn.editTextArea = false;
// The text area is allowed to write in
btn.textAreaReadonly = false;
// Change the color of the text area
btn.colorArea = false;
btn.textareaValue = document
.querySelector(`.text-box-m textarea`)
.value.trim();
} else {
btn.textareaValue = document
.querySelector(`.text-box-m textarea`)
.value.trim();
// Modify button
btn.editTextArea = true;
// The text area is not allowed to be written in
btn.textAreaReadonly = true;
// Change the color of the text area
btn.colorArea = true;
}
textAddExecute();
};
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
direction:rtl;
}
.contnire {
margin: 0 auto;
min-height: 100vh;
width: 900px;
background-color: #176a63;
}
/* Start title */
.contnire .title {
width: 100%;
height: 70px;
background-color: #176a63;
display: flex;
align-items: center;
justify-content: space-around;
}
.contnire .title .add-book {
display: flex;
width: 200px;
height: 25px;
}
.contnire .title .add-book input:focus {
background-color: aquamarine;
outline: none;
}
.contnire .title h1 {
text-align: center;
margin-right: 200px;
color: white;
padding: 20px;
font-size: 40px;
}
/* End title */
/* Start box-body */
.box-body {
display: flex;
flex-direction: column;
padding: 20px;
background-color: #3F51B5;
width: 100%;
}
/* Start content */
.content {
padding: 20px;
background-color: white;
border-bottom: 2px solid #7044b2;
box-shadow: 0px -1px 13px 4px #b9b3b3;
}
/* Start box */
.content .box {
text-align: center;
background-color: #009688;
width: 100%;
}
.box .mybox {
display: flex;
align-items: center;
justify-content: center;
background-color: #3F51B5;
}
.box .mybox h3 {
padding: 20px;
}
.content .control-book .settings {
display: flex;
align-items: center;
height: 50px;
border-bottom: 2px solid #ccc;
padding: 5px;
}
/* End box */
/* End content */
/* Start box-down */
.box-down .add-list {
display: flex;
padding-top: 20px;
justify-content: space-around;
}
.add-list .Waiting-list-two {
width: calc(100% - 10px);
}
.add-list .my-list-one {
background-color: #7044b2;
}
.add-list .my-list-one h2 {
padding: 20px;
}
.add-list .my-list {
padding: 5px;
background-color: #009688;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #ccc;
}
/* End box-down */
/* all */
.button-css {
padding: 4px 10px;
margin-right: 4px;
}
.book-name {
padding: 10px;
width: 220px;
background-color: #f9f3f3fa;
}
textarea {
padding: 5px;
line-height: 1.6;
word-spacing: -6px;
overflow: auto;
width: 100%;
height: 100px;
font-size: 18px;
}
textarea:disabled {
color: #000000e6;
background-color: #8bc34a57;
}
.show-none {
display: none;
}
textarea.color-green {
background-color: #4caf505e;
}
textarea.color-white {
background-color: white;
}
<div class="contnire">
<!-- Start title -->
<div class="title">
<div class="add-book">
<input id="external-book" class="book-name" type="text">
<button id="add-external-book" class="button-css">add</button>
</div>
<h1>My tasks</h1>
</div>
<!-- End title -->
<!-- Start box-body -->
<div class="box-body">
<!-- Start content -->
<div class="content">
<!-- Start box -->
<div class="box">
<div class="mybox">
<h3>required tasks</h3>
</div>
<div id="add-settings" class="control-book"></div>
</div>
<!-- End box -->
</div>
<!-- End content -->
<!-- Start box-down -->
<div class="box-down">
<div class="add-list">
<div class="Waiting-list-two">
<div class="my-list-one">
<h2>The tasks that were performed</h2>
</div>
<div id="executed-tasks" class="all-list">
</div>
</div>
</div>
<!-- End box-down -->
</div>
</div>
</div>
I write the name of the task, then press the "Add" button, the item appears, and next to it the "Finish" button. When I press Finish, the item appears in the To Do section, and next to the item, the Notes button. When I press the notes button, the text area appears and disappears, and in the text area there is an edit button. When I click on it I can type a comment inside the text area, and by pressing the save button the edit is locked into the problematic text area? When I add more than one element the entire text area takes the same as the first comment and I want each element to be stable writing the text area so I can modify the comment in any element without affecting the rest

Auto center horizontal scrollbar

I've found some related cases but no answer works for me. My page have a big horizontal image but I need to start scrolling it from the middle (just horizontally), always and in any resolution.
var body = document.body; // For Safari
var html = document.documentElement; // Chrome, Firefox, IE and Opera
body.scrollLeft = (html.clientWidth - body.scrollWidth) / 2
html.scrollLeft = (html.clientWidth - body.scrollWidth) / 2
body {
background-color: 0178fa;
padding: 0;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
}
#page {
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
display: block;
}
#wrap-landing {
position: relative;
margin: 0 auto;
padding: 0;
content: url(https://i.imgur.com/gb6EyHk.png);
width: 1920px;
height: 1080px;
}
<div id="page">
<div id="wrap-landing"></div>
</div>
You could use standard javascript: window.scroll(x, y).
Ex:
window.addEventListener('load', function() {
setTimeout(function() {
window.scroll(x, y);
},1)
})
x-coord is the pixel along the horizontal axis of the document that you want displayed in the upper left.
y-coord is the pixel along the vertical axis of the document that you want displayed in the upper left.
window.addEventListener('load', function() {
setTimeout(function() {
window.scroll(screen.width/2, 0);
},1)
})
body{
background-color:0178fa;
padding:0;
text-align:center;
display: flex;
justify-content: center;
align-items: center;
overflow:auto;
}
#page {
width:100%;
height:100%;
margin:0 auto;
padding:0;
display:block;
}
#wrap-landing{
position:relative;
margin:0 auto;
padding:0;
content:url(https://i.imgur.com/gb6EyHk.png);
width:1920px;
height:1080px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="page">
<div id="wrap-landing">
</div>
</div>
</body>
</html>
The math would be:
centerX = (el.scrollWidth - el.clientWidth) / 2
Example on a scrollable #page Element:
const el = (sel, par) => (par || document).querySelector(sel);
const elPage = el("#page");
const centerX = (elPage.scrollWidth - elPage.clientWidth) / 2;
const centerY = (elPage.scrollHeight - elPage.clientHeight) / 2;
elPage.scrollTo(centerX, centerY);
#page {
display: flex;
overflow: scroll;
height: 200px;
}
#image {
flex: 0 0 auto;
margin: auto;
content: url(https://i.imgur.com/gb6EyHk.png);
width: 1920px;
height: 1080px;
}
/*
PS: flex and margin:auto is used to center
#image in case is smaller than the parent.
*/
<div id="page">
<div id="image"></div>
</div>

jQuery each() first iteration is wrong, the rest are correct

So, I'm creating a piece of code so the images in my div are automatically centered and adjusted, so they fit in a squared box.
Currently, I've managed to do so, but, something is wrong with the first iteration, because I get the wrong result, let me show you the code.
// news section height calculator
$(window).load(function () {
$('.news-picture').find('img').each(function () {
var screenImage = $(this);
var theImage = new Image();
theImage.src = screenImage.attr("src");
// Get accurate measurements from that.
var imageWidth = theImage.width;
var imageHeight = theImage.height;
var $imgClass = (imageWidth / imageHeight);
var $imgPos = -((imageWidth - $(window).width()) / 2);
console.log(imageWidth);
console.log($(window).width());
if ($imgClass >= 1) {
$(this).addClass('wide').css("left" , $imgPos);
} else {
$(this).addClass('tall');
}
});
});
<div class="news-picture">
<?php the_post_thumbnail('large'); ?>
<div class="news-title">
<h1><?php the_title(); ?></h1>
<div class="datetime"><span><time datetime="<?php the_time('l, F j, Y'); ?>"><?php the_time('l, F j, Y'); ?></time></span></div>
</div>
</div>
As you may notice, I'm working with Wordpress, and specifically with post images.
The case; The iteration runs 3 times, it is supposed to assign a class, and a left value, which will center the image.
But, the first iteration gets the height value of the second iteration, which in first place should be getting the width, of its own iteration. Weird huh.
I'll attach an image of what i'm trying to accomplish, maybe you have suggestions as to how to approach this dilemma.Structure
Thank you for paying attention, I actually fixed by adding two lines only, specifying the current and rendered width and height of the image.
// news section height calculator
$(window).load(function () {
$('.news-picture').find('img').each(function () {
var screenImage = $(this);
var theImage = new Image();
theImage.src = screenImage.attr("src");
theImage.width = screenImage.attr("width");
theImage.height = screenImage.attr("height");
// Get accurate measurements from that.
var imageWidth = theImage.width;
var imageHeight = theImage.height;
var $imgClass = (imageWidth / imageHeight);
var $imgPos = -((imageWidth - $(window).width()) / 2);
console.log(imageWidth);
console.log($(window).width());
if ($imgClass >= 1) {
$(this).addClass('wide').css("left" , $imgPos);
} else {
$(this).addClass('tall');
}
});
});
body {
margin:0;
}
.news-content {
background-color: #fff;
margin: 25px auto;
}
.news-picture {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
position: relative;
overflow: hidden;
width: 100vw;
height: 100vw;
margin: 0 auto;
}
.news-picture:after {
-moz-box-shadow: 0 0 10em #000 inset;
-webkit-box-shadow: 0 0 10em #000 inset;
box-shadow: 0 0 10em #000 inset;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
}
.news-picture a {
border: 0;
display: block;
}
.wide {
height: 100vw;
width: auto;
max-width: initial;
position: relative;
}
h1 {
}
.news-title {
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
position: absolute;
bottom: 0;
width: 100%;
}
.news-title h1 {
padding: 15px 10px 0 10px;
margin: 0;
text-align: center;
line-height: 22px;
font-size: 16px;
}
.news-title h1 a {
color: #fff;
margin: 0;
text-decoration: none;
font-family: "Oswald", sans-serif;
}
.datetime {
font-family: "Titillium Web", sans-serif;
font-size: 10px;
padding: 5px;
margin-bottom: 5px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-container">
<div class="news-content">
<div class="news-picture">
<img width="1298px" height="934px" src="http://www.elliotjaystocks.com/assets/article_digest_1.png">
<div class="news-title">
<h1>First Iteration of the problem</h1>
<div class="datetime"><span><time datetime="Sunday, October 23, 2016">Sunday, October 23, 2016</time></span></div>
</div>
</div>
</div>
<div class="news-content">
<div class="news-picture">
<img src="https://guides.area17.com/app/uploads/sites/2/2015/10/05.08_AI_smart_guides-680x301.png">
<div class="news-title">
<h1>Second Iteration of the problem</h1>
<div class="datetime"><span><time datetime="Sunday, October 23, 2016">Sunday, October 23, 2016</time></span></div>
</div>
</div>
</div>
<div class="news-content">
<div class="news-picture">
<img src="https://s-media-cache-ak0.pinimg.com/736x/d6/05/49/d60549cbc19204feee1a672f71e43cee.jpg">
<div class="news-title">
<h1>Third Iteration of the problem</h1>
<div class="datetime"><span><time datetime="Sunday, October 23, 2016">Sunday, October 23, 2016</time></span></div>
</div>
</div>
</div>
</div>

Vertically align sans-serif font precisely using jquery/css

I'm trying to align a sans-serif headline precisely with menu elements in other div-Elements, so basically this:
Header
A B C
where A is aligned to the left end of the Header and C to the right end. I use float to distribute the -Elements and I compute the font-size to fit the header into the div width. The problem is that I use a sans-serif font. The problem is demonstrated in a fiddle
http://jsfiddle.net/ksuTQ/2/
<div id="Hideheader" class="Header" style="position: absolute;font-size:40pt;padding:0px;visibility: hidden;width:auto;height:auto;">HEADER</div>
<div id="header" class="Header">HEADER</div>
<div id="menubar" class="menubar">
<div class="menubutton_left">A
</div>
<div class="menubutton_middle">B
</div>
<div class="menubutton_right">C
</div> <span class="stretch"></span>
</div>
jscript
resizeHead("#Hideheader", "#header");
function resizeHead(p1, p2) {
var fontsize = parseFloat($(p1).css("font-size"));
var spacing = parseFloat($(p1).css("letter-spacing"));
var initWidth = $(p1).width();
initWidth = initWidth - spacing;
var outWidth = $(p2).width();
var s = outWidth / initWidth;
s = fontsize * s;
$(p2).css({
"font-size": s
});
}
CSS
div.Header {
font-family:sans-serif;
text-align:justify;
white-space: nowrap;
}
div.menubar {
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
margin-bottom: 0px;
position: relative;
}
div.menubutton_left, div.menubutton_middle, div.menubutton_right {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
width:60px;
}
div.menubutton_left {
}
div.menubutton_middle {
text-align: center;
}
div.menubutton_right {
text-align: right;
}
.stretch {
border: 2px dashed #444;
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
How do I align the beginning of the A with the H of the header for a sans-serif font?
You can add margin-left:12px to left menubutton div.
See the Demo

Categories