Vertically align sans-serif font precisely using jquery/css - javascript

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

Related

Calculating the area of a rectangle with different images

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.

Dynamic transform style property while scrolling

I'm in a blind spot with my small jQuery script.
The point is that I'm trying to make an element to rotate, and to apply the rotation value dynamically as the user is scrolling through the page.
It works here on stackoverflow but I can't get this to work on my website...
The only external library I'm using is JQuery.
Can you please tell me where is the problem?
var $animObject = $('.animateObject');
var $window = $(window);
$window.on('scroll', function() {
var fromTop = $window.scrollTop() / -4;
$animObject.css('transform', 'rotate(' + fromTop + 'deg)')
});
.header {
width: 100%;
height: 100vh;
background-image: url('https://simply-design.ml/dev/img/start1.jpg');
display: flex;
justify-content: center;
align-items: center;
}
.header-content {
padding: 30px;
max-width: 470px;
}
.header-wrapper {
padding: 50px;
border: solid 3px #fff;
}
.header h1 {
font-size: 30px;
color: #fff;
text-align: center;
}
.header p {
font-size: 20px;
color: #fff;
text-align: center;
}
.p-title {
font-size: 14px;
color: #fff;
}
.head-button {
padding: 10px 25px;
background-color: #3b88df;
color: #fff;
font-size: 20px;
cursor: pointer;
font-family: 'Source Sans Pro', sans-serif;
}
.head-button:hover {
background-color: #2c78ce;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<header class="header">
<div class="header-content">
<center>
<div class="header-wrapper animateObject">
<h1>title</h1>
<div style="height: 2px; width: 70px; background-color: #fff; margin: 20px;"></div>
<p>subtitle</p>
</div>
</center>
</div>
</header>
<div style="height: 1000px"></div>
Check this example I've made without jQuery, which shows how to rotate an element based on the scroll position of the window, but only once the element is in view.
I've decided to do this without jQuery because it's better for performance, working directly with the DOM instead of passing through jQuery, and also because it's relatively simple code, understandable.
Find out how much was scrolled
Get the target's element absolute position
Calculate if the element is within the viewport (if not, break)
If it's in, save the scroll value at that point
Subtract that value from the current scroll value to get the value from that point on
Use the new value as baseline for the transformation
var elm = document.querySelector('b');
var onScroll = (function(){
var startPos;
function run(){
var fromTop = window.pageYOffset,
rect = elm.getBoundingClientRect(),
scrollDelta;
// check if element is in viewport
if( (rect.top - window.innerHeight) <= 0 && rect.bottom > 0 )
startPos = startPos === undefined ? fromTop : startPos;
else{
startPos = 0;
return;
}
scrollDelta = (fromTop - startPos) * 1; // "speed" per scrolled frame
elm.style.transform = `translateX(${scrollDelta}px) rotate(${scrollDelta}deg)`;
console.clear();
console.log(scrollDelta);
}
run();
return run;
})()
window.addEventListener('scroll', onScroll);
html, body{ height:100%; }
body{ height:1500px; }
b{
position:fixed;
top: 20px;
left:20px;
width:100px;
height:100px;
background:red;
}
<b></b>
inspect the <b> element while scrolling and see that it only gets transform when it is in view.

Responsive text size with absolute position over image

Over the responsive calendar image I would like to have a text with the date. When the screen is resized to that point that the image will start to resize, the text over that image should resize as well, so that it stays the same relative to the image width and height.
I have achieved that by using javascript as I was unable to do it only with CSS. My question is, how can I do that only with CSS. Is it possible? If yes, please show that in the code that I have created on fiddle:
https://jsfiddle.net/bej0od7r/
HTML:
<div class="datePictureHolder">
<img class="img-responsive" alt="News Icon" src="http://shrani.si/f/u/13K/4rB6HshN/news-icon.png"/>
<div class="datePictureText">
<div class="year">2017</div>
<div class="day">25. Feb</div>
</div>
</div>
JAVASCRIPT
ResizeDateIcons();
window.onresize = function () {
ResizeDateIcons();
};
function ResizeDateIcons() {
// constants
var imageWidth = 150; // width and height must be the same
var dayTextSize = 36; // text size on maximum image width
var yearTextSize = 23; // text size on maximum image width
var yearLineHeigh = 70;
//
var allImages = document.getElementsByTagName("img");
var allDayTexts = document.getElementsByClassName("day");
var allYearTexts = document.getElementsByClassName("year");
var j = 0;
for (var i = 0; i < allImages.length; i++) {
if (allImages[i].alt === "News Icon") {
allDayTexts[j].style.fontSize = (allImages[i].width / imageWidth) * dayTextSize + "px";
allYearTexts[j].style.fontSize = (allImages[i].width / imageWidth) * yearTextSize + "px";
allYearTexts[j].style.lineHeight = (allImages[i].width / imageWidth) * yearLineHeigh + "px";
j++;
}
}
}
CSS:
.datePictureHolder {
position: relative;
display: inline-block;
}
.datePictureText {
position: absolute;
left: 0;
top: 5%;
width: 100%;
text-align: center;
color: white;
}
.datePictureText .year {
font-size: 23px;
line-height: 70px;
}
.datePictureText .day {
font-size: 36px;
font-weight: bold;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
Sorry, this is a bit rushed, but it might help! The green container is only there for testing purposes.
https://codepen.io/anon/pen/gxwZge
.container {
width:20%;
float:left;
background:green;
}
.datePictureHolder {
width:auto;
float:left;
position:relative;
}
.datePictureHolder img {
width:100%;
float:left;
}
.datePictureText {
top:0;
left:0;
position:absolute;
color:white;
width:100%;
text-align:center;
padding:40% 0;
box-sizing:border-box;
font-size:1.2rem;
}
<div class="container">
<div class="datePictureHolder">
<img class="img-responsive" alt="News Icon" src="http://shrani.si/f/u/13K/4rB6HshN/news-icon.png"/>
<div class="datePictureText">
<div class="year">2017</div>
<div class="day">25. Feb</div>
</div>
</div>
</div>
You can achieve your result using either media query or using em for fonts
html {
font-size: 16px;
#media (min-width: 800px) {
font-size: 18px;
}
#media (min-width: 1200px) {
font-size: 20px;
}
}
<!--- or try em for mobile web dev. 1em is 16px-->
.font-resize {
font-size : 0.5 em;
}
<div>Text Text</div>

Move to specific div based on button click

I was trying to move the divs (here it's question number) based on the prev and next button. So that the selected question is always visible on screen.
Here is the demo : http://jsfiddle.net/arunslb123/trxe4n3u/12/
Screen :
click and question number and click prev or next button to understand my issue.
My code :
$("#next")
.click(function () {
$(".c.current-question")
.each(function () {
var divIdx = $(this)
.attr('id');
var scrollTo = $('#' + divIdx)
.position()
.left;
$("#scrollquestion")
.animate({
'scrollLeft': scrollTo
}, 800);
});
});
$("#prev")
.click(function () {
$(".c.current-question")
.each(function () {
var divIdx = $(this)
.attr('id');
var scrollTo = $('#' + divIdx)
.position()
.left;
$("#scrollquestion")
.animate({
'scrollLeft': -scrollTo
}, 800);
});
});
Using scrollLeft is a bit tricky. I did a small redo of your use-case based on positioning and then moving it based on left of the container. The tricky part is to reliably calculate the negative position when scrolled to the extreme right. Also, need to take into account the widths and margins.
Check the below snippet:
var $wrap = $("#numWrap"), $strip = $("#strip"),
$leftArrow = $(".wrapper > .arrows").first(),
wrapWidth = $wrap.width() + $leftArrow.width(),
margin = 10;
fill(20); select($(".numberItem").first());
$strip.on("click", ".numberItem", function() { select($(this)); });
function select($elem) {
$(".numberItem").removeClass("selected");
$elem.addClass("visited").addClass("selected");
focus($elem[0]);
}
function focus(elem) {
var stripPos = $strip.position(),
numPos = $(elem).offset(),
elemWidth = $(elem).width() + margin,
numRight = numPos.left + elemWidth;
if (numRight > wrapWidth) {
$strip.css({"left": stripPos.left - elemWidth});
}
if (numPos.left < (margin + $leftArrow.width())) {
$strip.css({"left": stripPos.left + elemWidth});
}
}
$(".wrapper").on("click", "a.arrow", function() {
var stripPos = $strip.position();
if (this.id == "lft") {
$strip.css({"left": stripPos.left + (wrapWidth / 2)});
} else {
$strip.css({"left": stripPos.left - (wrapWidth / 2)});
}
});
$(".controls").on("click", "a.arrow", function() {
var $sel = $(".selected"), numPos, $sel, elemWidth;
$elem = $sel.length > 0 ? $sel.first() : $(".numberItem").first();
if (this.id == "lft") {
$sel = $elem.prev().length > 0 ? $elem.prev() : $elem;
select($sel);
} else {
$sel = $elem.next().length > 0 ? $elem.next() : $elem;
select($sel);
}
numPos = $sel.offset(); elemWidth = $sel.width() + margin;
numRight = numPos.left + elemWidth;
if (numPos.left > wrapWidth) {
$strip.css({"left": -($sel.text()) * $sel.width() });
}
if (numRight < 0) {
$strip.css({"left": +($sel.text()) * $sel.width() });
}
});
function fill(num){
for (var i = 1; i <= num; i++) {
var $d = $("<a href='#' class='numberItem'>" + i + "</a>");
$strip.append($d);
}
}
* { box-sizing: border-box; padding: 0; margin: 0; font-family: sans-serif; }
div.wrapper {
background-color: #ddd; width: 100vw; height: 64px;
clear: both; overflow: hidden; margin-top: 16px;
}
div.arrows {
float: left; width: 10%; min-width: 24px; height: 64px; line-height: 64px;
text-align: center; vertical-align: middle; overflow: hidden;
}
div.numWrap {
float: left; height: 64px; line-height: 64px;
width: 80%; vertical-align: middle;
overflow: hidden; position: relative;
}
div.strip {
position: absolute; left: 0px;
width: auto; white-space: nowrap;
transition: left 1s;
}
a.numberItem {
display: inline-block; text-align: center; margin: 0px 8px;
background-color: #fff; border-radius: 50%; width: 48px; height: 48px;
font-size: 1.2em; line-height: 48px; text-decoration: none;
}
a.numberItem.visited { background-color: #fff; color: #000; border: 2px solid #01aebc; }
a.numberItem.selected { background-color: #01aebc; color: #fff; }
div.controls { clear: both; }
div.controls > div.arrows { width: auto; margin: 0 12px; }
a, a:focus, a:active, a:link, a:visited {
display: inline-block;
text-decoration: none; font-weight: 600;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="arrows">
<a id="lft" class="arrow" href="#">〈</a>
</div>
<div id="numWrap" class="numWrap">
<div id="strip" class="strip"></div>
</div>
<div class="arrows">
<a id="rgt" class="arrow" href="#">〉</a>
</div>
</div>
<div class="controls">
<div class="arrows">
<a id="lft" class="arrow" href="#">〈 Previous</a>
</div>
<div class="arrows">
<a id="rgt" class="arrow" href="#">Next 〉</a>
</div>
<div>
Explanation:
Using absolute positioning on the number container, which is nested to get 100% width.
Markup:
<div class="wrapper">
<div class="arrows"><a id="lft" class="arrow" href="#">〈</a></div>
<div id="numWrap" class="numWrap">
<div id="strip" class="strip"></div> <!-- nesting here -->
</div>
<div class="arrows"><a id="rgt" class="arrow" href="#">〉</a></div>
</div>
CSS:
div.wrapper {
background-color: #ddd; width: 100vw; height: 64px;
clear: both; overflow: hidden; margin-top: 16px;
}
div.arrows {
float: left; width: 10%; min-width: 24px; height: 64px; line-height: 64px;
text-align: center; vertical-align: middle; overflow: hidden;
}
div.numWrap {
float: left; height: 64px; line-height: 64px;
width: 80%; vertical-align: middle;
overflow: hidden; position: relative; /* relatively positioned */
}
div.strip {
position: absolute; left: 0px; /* absolutely positioned */
width: auto; white-space: nowrap;
transition: left 1s; /* instead of jquery animate */
}
With this structure, we can now use left to control the scrolling.
For partially obscured numbers, try to gently focus-in (nudge into view) a number which is partially obscured. This can be done by checking the position relative to parent and adding the width/margin to it and also accounting for width of the left arrow (it might peep thru).
Javascript:
function focus(elem) {
var stripPos = $strip.position(),
numPos = $(elem).offset(),
elemWidth = $(elem).width() + margin,
numRight = numPos.left + elemWidth;
// if it is towards right side, nudge it back inside
if (numRight > wrapWidth) {
$strip.css({"left": stripPos.left - elemWidth});
}
// if it is towards left side, nudge it back inside
if (numPos.left < (margin + $leftArrow.width())) {
$strip.css({"left": stripPos.left + elemWidth});
}
}
Once the user has scrolled the list too far and then tries to click on previous / next buttons to select a question, then we need to move the entire container upto the selected number. We can easily do this by multiplying the question number with element width and then changing the left in positive (if towards right) or in negative (if towards left).
Javascript:
// if left of element is more than the width of parent
if (numPos.left > wrapWidth) {
$strip.css({"left": -($sel.text()) * $sel.width() });
}
// if right of element is less than 0 i.e. starting position
if (numRight < 0) {
$strip.css({"left": +($sel.text()) * $sel.width() });
}
Here is a fiddle to play with: http://jsfiddle.net/abhitalks/aw166qhx/
You will need to further adapt it to your use-case, but you get the idea.

Having a DIV 'stick' for x amount of scrolls

I need a 'Page section' to stick in place for (x) amount of scrolling and then move onto the next section. I've tried putting them into the child theme but nothing... Can someone tell me a good way to do wthis that's not Javascript heavy?
CSS
.isSticky {
top: 0;
position: fixed;
}
HTML
<div>
<section id="top"></section>
<section id="test2"></section>
<section id="bottom"></section>
</div>
JS
$(document).ready(function () {
var el = $('#test2');
var elTop = el.position().top;
$(window).scroll(function () {
var windowTop = $(window).scrollTop();
if (windowTop >= elTop) {
el.addClass('isSticky');
} else {
el.removeClass('isSticky');
}
This answer might not be 100% pragmatic, due to current lack of support, but soon you will be able to use the position: sticky property of CSS, currently supported in Firefox and prefixed in Safari/iOS (Caniuse).
The feature was previously enabled in Chrome, but then subsequently removed in the interest of re-doing it more efficiently.
html, body {
margin: 0;
}
body * {
margin: 20px;
padding: 20px;
}
.header {
margin: 0;
padding: 20px;
background: #000;
}
.header span {
display: block;
color: #fff;
margin: 0 auto;
text-align: center;
padding: 0;
}
.placeholder {
border: 1px solid black;
margin: 0 auto;
text-align: center;
height: 300px;
}
.slider {
background: #006264;
color: white;
font-weight: bold;
margin: 0 auto;
position: sticky;
top: 0px;
}
<div class="header"><span>This is a header</span></div>
<div class="placeholder">This div holds place</div>
<div class="slider">This should slide up and then stick.</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>

Categories