fix digit image on hanging board without losing responsiveness - javascript

I have class numberdisplay which I want to display number inside a handing board.
I have the below code which display nine boxes exactly inside a name board with responsiveness.
My problem is that the digit of numberdisplay didn't get displayed in hanging board and is not responsive and is fixed, when window resizes the size an alignment changes.
I want the numberdisplayed to be fixed inside the hanging board and should be responsive.
How can this be done and how to achieve this?
.box {
width: calc(33.3% - 4px);
display: inline-block;
border-radius: 5px;
border: 2px solid #333;
border: #000 border-color: #e6e600;
margin: -2px;
border-radius: 10%;
background-color: #99ffff;
}
.numberdisplay {
margin-left: 73.99%;
margin-top: 20%;
margin-bottom: 100%;
background-color: #ffff00 2px;
border: px solid #000066;
}
.containerr {
border: px solid #FF3399;
}
.pic {
background-size: 100% 100%;
}
p {
font: "Courier New", Courier, monospace;
color: #000000;
text-align: center;
}
body {
background-image: url(https://image.ibb.co/eV5WW9/background.jpg);
background-size: 100vw 100vh;
}
.box {
height: 15vh;
display: inline-flex;
align-items: center;
justify-content: center
}
.container2 {
width: 35vw;
position: fixed;
top: 41.5vh;
left: 14vw;
}
.box p {
font-size: calc(2vw + 10px);
}
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box" id="10">
<p name="values" data-item-index="0">1:40</p>
</div>
<div class="box" id="11">
<p name="values" data-item-index="7">8:10</p>
</div>
<div class="box" id="12">
<p name="values" data-item-index="4">5:35</p>
</div>
</div>
<div id="2container">
<div class="box" id="10">
<p name="values" data-item-index="11">12:50</p>
</div>
<div class="box" id="11">
<p name="values" data-item-index="9">10:40</p>
</div>
<div class="box" id="12">
<p name="values" data-item-index="11">12:50</p>
</div>
</div>
<div id="3container">
<div class="box" id="10">
<p name="values" data-item-index="0">1:40</p>
</div>
<div class="box" id="11">
<p name="values" data-item-index="3">4:45</p>
</div>
<div class="box" id="12">
<p name="values" data-item-index="2">3:50</p>
</div>
</div>
</div>
</div>
</div>
<div class="numberdisplay" id="2">
<img src="https://via.placeholder.com/75x75?text=11" style="width:160px; height:160px; border-radius: 50%;" border="rounded" />
</div>


I can't think of any way to calculate the width and height of a part of an image using CSS or JS.
But, I can calculate it by hit-and-trial method and it comes out that the hanging board was 0.16% of the background width always.
Changes done in CSS:
/* for .numberdisplay */
margin-left: 72.5%;
margin-top: 16%;
/* for body */
background-size: 100vw auto;
The Javascript:
var body = document.querySelector('body');
var number11 = document.querySelector('.numberdisplay img');
function changeSize() {
var length = parseInt(window.getComputedStyle(body, null).width) * 0.16; // based on hit and trial
number11.style.height = length + 'px';
number11.style.width = length + 'px';
}
window.onresize = changeSize;
changeSize();
I had used window.getComputedStyle(Element, null).property to retrieve width of body.
Here is a Pen that will display the responsiveness.

Related

CSS flip not aligned when parent has zero width

Given two rows of cards, I'm trying to combine the following animations:
Move the first card on the first row over the second card on the second row.
This is done by changing the top and left style properties.
Flip the first card on the first row.
I'm flipping the card based on this w3schools example.
Move the second card on the first row to the left.
The card is moved to the left by giving the div next to it zero width.
Animation 3) seems to conflict with animation 2).
Normally, a 'flip' involves swapping the front facing div with the back facing div.
However, when animation 3) gives the parent div zero width, the front and back are no longer aligned and both sides can be seen.
The following snippet demonstrates that a 'flip' seems to work, while 'move and flip' goes wrong.
Can you help me fix this such that all animations work correctly together?
function flipCard() {
const flipCard = document.querySelector('.top .flip-card')
const rect = flipCard.getBoundingClientRect()
flipCard.classList.add('moving')
flipCard.classList.add('flipped')
return [flipCard, rect]
}
function moveFlipCard() {
const srcSleeve = document.querySelector('.top .sleeve')
srcSleeve.classList.add('closed')
const [srcFlipCard, srcRect] = flipCard()
const targetFlipCard = document.querySelectorAll('.bottom .sleeve')[1]
const targetRect = targetFlipCard.getBoundingClientRect()
const offset = {
top: targetRect.top - srcRect.top,
left: targetRect.left - srcRect.left,
}
srcFlipCard.style.top = offset.top + 'px'
srcFlipCard.style.left = offset.left + 'px'
}
const flipButton = document.getElementById('flipCard')
flipButton.addEventListener('click', flipCard)
const moveFlipButton = document.getElementById('moveFlipCard')
moveFlipButton.addEventListener('click', moveFlipCard)
* {
font-family: sans-serif;
font-size: 24px;
}
.cards {
display: flex;
position: relative;
}
.sleeve {
position: relative;
width: 60px;
height: 76px;
transition: width 1s;
}
.sleeve.closed {
width: 0;
}
.card {
position: relative;
width: 50px;
height: 70px;
border: 3px solid black;
border-radius: 5px;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
font-size: 24px;
margin: 0 2px;
transition: top 1s, left 1s;
}
.card.closed {
background-color: rgb(125, 171, 250);
color: black;
}
.card.open {
background-color: rgb(218, 218, 218);
}
.card.black {
color: black;
}
.card.red {
color: red;
}
/* Based on https://www.w3schools.com/howto/howto_css_flip_card.asp */
.flip-card {
position: relative;
perspective: 1000px;
transition: top 1s, left 1s;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
}
.flip-card.flipped .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-back {
transform: rotateY(180deg);
}
.flip-card.moving {
z-index: 1;
}
<div id="app">
<div class="top cards">
<div class="sleeve">
<div class="flip-card" style="top: 0; left: 0;">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card open black">A♣</div>
</div>
<div class="flip-card-back">
<div class="card closed">?</div>
</div>
</div>
</div>
</div>
<div class="sleeve">
<div class="flip-card" style="top: 0; left: 0;">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card open black">2♣</div>
</div>
<div class="flip-card-back">
<div class="card closed">?</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom cards">
<div class="sleeve">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card open red">5♥</div>
</div>
<div class="flip-card-back">
<div class="card closed">?</div>
</div>
</div>
</div>
</div>
<div class="sleeve">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card open red">6♥</div>
</div>
<div class="flip-card-back">
<div class="card closed">?</div>
</div>
</div>
</div>
</div>
</div>
<button id="flipCard">flip</button>
<button id="moveFlipCard">move and flip</button>
</div>

TLDR: To solve this, I explicitly set transform-origin: 30px 0 0. Now the point around which a transformation is applied no longer depends on the size of the bounding box.
I now see where it goes wrong. The problem lies with the transform-origin.
The transform origin is the point around which a transformation is applied.
For animation 2) this corresponds to the point around which the card is rotated 180 degrees over the y-axis (transform: rotateY(180deg)).
The default value of the transform-origin property is 50% 50% 0, where the values correspond to the offset over the x-axis, y-axis and z-axis, respectively.
However, what does 50% mean? 50% of what?
Percentages refer to the size of bounding box
So, what's the bounding box of the flipped div? When I inspect <div class="flip-card-inner"> I see it has a dimensions 60x0:
where 60 corresponds to width: 60px of parent <div class="sleeve">.
So for <div class="flip-card-inner"> the default transform-origin is 30px 0 0. This is what I expect: the card rotates over its y-axis at a point that lies halfway over the x-axis, such that the card is in the same location when flipped.
Now let's see what happens when we apply animation 3), i.e. move the second card on the first row to the left by giving the div next to it zero width:
Now the bounding box is 0x0, because the parent <div class="sleeve closed"> has zero width. Since the bounding box has changed, so has the transform-origin: 50% of 0 is 0, so we get 0 0 0. The card now rotates over its y-axis at a point that lies on the left side of the card. This has the undesired effect that the flipped card does not end up at the same location as where it started.
To solve this, I explicitly set transform-origin: 30px 0 0. Now the point around which a transformation is applied no longer depends on the size of the bounding box.
Working example:
function flipCard() {
const flipCard = document.querySelector('.top .flip-card')
const rect = flipCard.getBoundingClientRect()
flipCard.classList.add('moving')
flipCard.classList.add('flipped')
return [flipCard, rect]
}
function moveFlipCard() {
const srcSleeve = document.querySelector('.top .sleeve')
srcSleeve.classList.add('closed')
const [srcFlipCard, srcRect] = flipCard()
const targetFlipCard = document.querySelectorAll('.bottom .sleeve')[1]
const targetRect = targetFlipCard.getBoundingClientRect()
const offset = {
top: targetRect.top - srcRect.top,
left: targetRect.left - srcRect.left,
}
srcFlipCard.style.top = offset.top + 'px'
srcFlipCard.style.left = offset.left + 'px'
}
const flipButton = document.getElementById('flipCard')
flipButton.addEventListener('click', flipCard)
const moveFlipButton = document.getElementById('moveFlipCard')
moveFlipButton.addEventListener('click', moveFlipCard)
* {
font-family: sans-serif;
font-size: 24px;
}
.cards {
display: flex;
position: relative;
}
.sleeve {
position: relative;
width: 60px;
height: 76px;
transition: width 1s;
}
.sleeve.closed {
width: 0;
}
.card {
position: relative;
width: 50px;
height: 70px;
border: 3px solid black;
border-radius: 5px;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
font-size: 24px;
margin: 0 2px;
transition: top 1s, left 1s;
}
.card.closed {
background-color: rgb(125, 171, 250);
color: black;
}
.card.open {
background-color: rgb(218, 218, 218);
}
.card.black {
color: black;
}
.card.red {
color: red;
}
/* Based on https://www.w3schools.com/howto/howto_css_flip_card.asp */
.flip-card {
position: relative;
perspective: 1000px;
transition: top 1s, left 1s;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
}
.flip-card.flipped .flip-card-inner {
transform-origin: 30px 0 0;
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-back {
transform-origin: 30px 0 0;
transform: rotateY(180deg);
}
.flip-card.moving {
z-index: 1;
}
<div id="app">
<div class="top cards">
<div class="sleeve">
<div class="flip-card" style="top: 0; left: 0;">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card open black">A♣</div>
</div>
<div class="flip-card-back">
<div class="card closed">?</div>
</div>
</div>
</div>
</div>
<div class="sleeve">
<div class="flip-card" style="top: 0; left: 0;">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card open black">2♣</div>
</div>
<div class="flip-card-back">
<div class="card closed">?</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom cards">
<div class="sleeve">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card open red">5♥</div>
</div>
<div class="flip-card-back">
<div class="card closed">?</div>
</div>
</div>
</div>
</div>
<div class="sleeve">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card open red">6♥</div>
</div>
<div class="flip-card-back">
<div class="card closed">?</div>
</div>
</div>
</div>
</div>
</div>
<button id="flipCard">flip</button>
<button id="moveFlipCard">move and flip</button>
</div>

Show floated div with percentage width and different pattern

I am not very good with CSS, so I am posting my problem here hoping for a solution:
What I need is following:
I need an HTML row/div/line that shows a date and after the date it shows a bar which will be a percentage of the remaining screen width.
Like so:
2015-11-17 ---------------------(50%)
2015-11-18 ------------------------------------------- (80%)
2015-11-19 ==================================================== (100%)
If you will please consider in the dashes as a proper bar (like 10px height for e.g.). You might notice that 50% and 80% have ---- while 100% has ====.
This is because for any percentage less than 100 I want the bar to be a mixed color like blue and white combo. For the 100% it will be a solid blue color bar.
I am trying to achieve this using HTML/CSS only, but I find my expertise to be lacking.
So far, I have following HTML/CSS:
<div style="padding-top: 10px;padding-bottom:10px; width:100%">
<div style='float:left'><strong>Date </strong>{{Today.date}}</div>
<div style='float:left;background-color:red;width:100%'></div>
</div>
The above code does not even show the second div with red background :(
Any pointers in helping me solve this is very much appreciated!

Flexbox could help here depending on your browser support requirements.
.wrap {
width: 80%;
margin: 1rem auto;
font-size: 24px;
display: flex;
align-items: center;
border: 1px solid grey;
}
.date {
padding: 0 1em;
}
.bar {
height: 10px;
background: #f00;
}
.bar-50 {
flex: .5;
}
.bar-80 {
flex: .8;
}
.bar-100 {
flex: 1;
}
<div class="wrap">
<div class="date">2015-11-17</div>
<div class="bar bar-50"></div>
</div>
<div class="wrap">
<div class="date">2015-11-18</div>
<div class="bar bar-80"></div>
</div>
<div class="wrap">
<div class="date">2015-11-19</div>
<div class="bar bar-100"></div>
</div>
Sneaky version with pseudo-element instead of extra HTML
.bar {
width: 80%;
margin: 1rem auto;
font-size: 24px;
display: flex;
align-items: center;
border: 1px solid grey;
}
.date {
padding: 0 1em;
}
.bar::after {
content: '';
height: 10px;
background: #f00;
}
.bar-50:after {
flex: .5;
}
.bar-80:after {
flex: .8;
}
.bar-100:after {
flex: 1;
}
<div class="bar bar-50">
<div class="date">2015-11-17</div>
</div>
<div class="bar bar-80">
<div class="date">2015-11-18</div>
</div>
<div class="bar bar-100">
<div class="date">2015-11-19</div>
</div>
Perhaps more semantically, use a progress element and a label.
Progess Element # MDN
div {
margin: 10px;
}
<div>
<label for="alpha">2015-11-17</label>
<progress id="alpha" value="50" max="100">50 %</progress>
</div>
<div>
<label for="beta">2015-11-18</label>
<progress id="beta" value="70" max="100">70 %</progress>
</div>
<div>
<label for="gamma">2015-11-19</label>
<progress id="gamma" value="100" max="100">70 %</progress>
</div>

You can try this
<div style="padding-top: 10px;padding-bottom:10px; width:100%;position: relative;">
<div style="float: left;width: 50%;display: inline-block;"><strong>Date </strong>{{Today.date}}</div>
<div style="float:left;width: 50%;height: 10px;display: inline-block;">
<div class="progress" style="background-color:red;width: 100%;height: 100%;">
</div></div>
</div>

Row aliment in collapse event

I'm working on example of collapse event with mouse click:
JSFFIDDLE Example
How I can align the arrow and the question? Also when I expand the question the arrow is not fully rotated. Is there any solution for these problems?
HTML:
<div class="container faq_wrapper">
<div class="row">
<div class="span10 offset1">
<p>
</p>
<div class="faq-all-actions">
<a class="faq-expand">Expand All</a> | <a class="faq-collapse">Collapse All</a></div>
</div>
</div>
<div class="row">
<div class="span10 offset1">
<div class="question-wrapper">
<div class="arrows">
</div>
<div class="big-q">
Q</div>
<div class="question">
<div class="arrow" ></div><h6><font size="6">Can I try the software before I buy it?</font></h6></div>
<div class="answer-wrapper">
<div class="big-a">
A</div>
<div class="answer">
Yes! Simply download a free trial and you'll have instant access to all features for 30 days, absolutely free. We don't require your credit card details or any commitment.</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.answer-wrapper {
display: none;
}
.arrow::before {
position: absolute;
content: "";
display: inline-block;
/* By using an em scale, the arrows will size with the font */
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
margin-right: 0.9em;
}
.arrow.down::before {
transform: rotate(90deg);
transition: transform .25s;
}
.question h6 {
margin-left: 15px;
}

adding:
.arrow::before {
margin-top: 15px;
}
and changing transform: rotate(90deg); to:
.arrow.down::before {
transform: rotate(135deg);
}
A quick fix if you're going to keep the current font-size

Here's the fiddle: https://jsfiddle.net/zeamgd9s/3/
.question{
display:table;
}
.question > *{
display:table-cell;
vertical-align:middle;
}

Set div's left value based on grandparent element

I have an absolute div nested inside a relative div. I want the absolute div's left value to be relative to the grandparent's position, but still allow it's height to be relative to it's parent element. Here is where the page is: http://pixeloft.com/clients/supportcenter/facilitators/
I want the left value of the bio element to always have the left value of the first "Frank Abdale" on click.
Is this possible by setting the div's left value through js?
Here is my code: http://jsfiddle.net/6RQ3u/
HTML:
<div class="person">
<div class="person-info"> <a class="showBio" target="1">
<h4>Name 1</h4></a>
<div class="arrow" id="arrow-1">^</div>
</div>
<div class="bio-wrapper">
<div class="bio" id="bio-box-1"><a class="hideBio" target="1">X</a>Bio</div>
</div>
</div>
<div class="person">
<div class="person-info"> <a class="showBio" target="2">
<h4>Name 2</h4></a>
<div class="arrow" id="arrow-2">^</div>
</div>
<div class="bio-wrapper">
<div class="bio" id="bio-box-2"><a class="hideBio" target="2">X</a>Bio</div>
</div>
</div>
<div class="person">
<div class="person-info"> <a class="showBio" target="3">
<h4>Name 3</h4></a>
<div class="arrow" id="arrow-3">^</div>
</div>
<div class="bio-wrapper">
<div class="bio" id="bio-box-3"><a class="hideBio" target="3">X</a>Bio</div>
</div>
</div>
CSS:
.person a h4 {
color: #000;
font-weight: normal;
font-size: 18px;
line-height: 21px;
width: 100px;
}
.bio {
border-top: 18px solid #387496;
position:absolute;
width:618px!important;
float:left;
background-color:#d8edf4;
padding:15px 170px;
top:284px;
left:-19px;
display:none;
z-index:200;
clear: both;
}
.person {
width:164px;
margin-right:20px;
float:left;
display:inline;
margin-bottom:30px;
position: relative;
}
.person-info {
float:left;
}
.showBio {
float:left;
}
.hideBio {
float:right;
color:#fff!important;
font-size:11px;
position: absolute;
right: 10px;
top: -14px;
}
.arrow {
display:none;
background: url('images/bio-arrow.jpg') no-repeat -2px -6px #fff;
float: left;
display: block;
clear: both;
width: 30px;
height: 15px;
text-indent: -3000px;
}
a{cursor:pointer;}
JQuery:
jQuery(function () {
jQuery('.bio').hide();
jQuery('.arrow').hide();
jQuery('.showBio').click(function () {
jQuery('.bio').hide();
jQuery('.arrow').hide();
jQuery('#bio-box-' + $(this).attr('target')).slideToggle('fast');
jQuery('#arrow-' + $(this).attr('target')).slideToggle('fast');
});
jQuery('.hideBio').click(function () {
jQuery('#bio-box-' + $(this).attr('target')).slideToggle('slow');
jQuery('#arrow-' + $(this).attr('target')).slideUp();
});
});
Thanks for all your help!

How do I make all of the position attributes the same?

I made a drag-and-drop engine in JavaScript, and I'm currently adding a "bounding" feature. My issue is that the bounding element's position changes depending on its parent's position: attribute.
In other words this html:
<div id="center" class="bound">
<h1>Hello World! <hr /></h1>
<div id="box" class="bound">
<p class="drag square" id="one"> One </p>
<p class="drag square" id="two"> Two </p>
</div>
</div>
and this html:
<div id="center"> <!-- Difference is here -->
<h1>Hello World! <hr /></h1>
<div id="box" class="bound">
<p class="drag square" id="one"> One </p>
<p class="drag square" id="two"> Two </p>
</div>
</div>
affect the engine in different ways, and they shouldn't. Only the <div id="box" class="bound"> should affect the drag object.
Here is the CSS:
#charset "utf-8";
/* CSS Document */
* {
padding: 0px;
margin: 0px;
}
.drag {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.bound {
position: relative;
}
.square {
width: 100px;
height: 100px;
background: red;
cursor:move;
}
#center {
width: 500px;
height: 300px;
margin: auto;
margin-top: 50px;
background-color:#ccc;
text-align: center;
border-radius: 25px;
-moz-border-radius: 25px;
}
#box {
background-color: #FF3;
height: 278px;
border-radius: 0 0 25px 25px;
-moz-border-radius: 0 0 25px 25px;
opacity: 0.5;
}
If anyone asks for the JavaScript function which sets the bounding, I will be happy to post it in an edit!
To make the position attribute not affect my JavaScript would I need to translate everything into absolute coordinates? How would I do this? Will translating everything into absolute coordinates allow the JavaScript to treat the two html samples the same way?

AFAIK, to drag and drop, the element must have the position property as absolute or fixed.
And of course its position will change when you change the position property.

Categories

Resources