We Keep Coding

Wrong element position on mouse hover

Currently, I'm creating a simple video player to practice. But, I'm facing something that I never saw before, something that I tried for hours find a way to fix but I didn't make it.
Here is my code =>
var left = document.getElementById('core').getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;
window.onmousemove = function (e) {
let x = ((e.clientX + window.pageXOffset) - left);
document.getElementById("thumbnail").style.left = (x + "px");
}
body {
overflow: hidden;
}
.container {
width: 100%;
max-width: 800px;
position: relative;
background-color: blue;
height: 200px;
overflow: hidden;
}
.core {
margin: 0;
display: flex;
position: absolute;
bottom: 4px;
width: 100%;
flex-wrap: nowrap;
height: auto;
}
#time {
font-size: 14px;
text-shadow: 0 1px 1px rgb(0 0 0 / 15%);
color: #fff;
align-self: center;
align-items: flex-start;
margin: 0 12px;
min-width: 45px;
text-align: center;
}
#progressZone {
width: 100%;
background-color: green;
position: relative;
}
#progress{
z-index: 1;
border-radius: 8px;
height: 2px;
width: 100%;
outline: none;
position: absolute;
top: 0;
bottom: 0;
appearance: none;
-webkit-appearance: none;
margin: auto;
background: transparent;
margin-right: 10px;
}
.thumbnail {
display: none;
z-index: 1;
position: absolute;
bottom: 30px;
right: auto;
margin: 0;
width: 12em;
height: 7em;
background: rgb(200, 200, 200);
pointer-events: none;
padding: 2px 2px;
transform: translateX(-50%);
left: 50%;
}
.thumbnail::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid transparent;
border-top: 8px solid rgb(200, 200, 200);
transform: translateY(-19%);
}
#progress:hover + .thumbnail {
display: block;
}
<div class="container">
<div id="core" class="core">
<div id="time">01:14:28</div>
<div id="progressZone">
<input id="progress" class="range" type='range' min="0" max="100" step="0.01" value="0">
<div id="thumbnail" class="thumbnail"></div>
</div>
</div>
</div>
The problem is: when I hover the input bar, I'm getting wrong hovered position. After of many hours trying discover why this is happenning, I figured out that #time is, indirectly, causing this. The presence of #time is making the input bar probably show the wrong hover time. But I can't remove #time and I need the code in this structure, with divs wrapped. If you remove #time and test the code, you will see that the hover position will be correct.
Here is a screenshot of what I expect to happen =>
image (I cant yet add embed images)
I suspect that this is something related to flex property, and about position as well. But I tried everything to fix this and got no sucess. Could you please, help me understand or fix this?
Also, here is the jsfiddle link if you want => https://jsfiddle.net/9qvLd35a/
Thank you very much.

In your javascript you take the left-value from the entire core-div. But you only need the value from the progressZone. So you can just adjust it like this: var left = document.getElementById('progressZone').getBoundingClientRect() ...
var left = document.getElementById('progressZone').getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;
window.onmousemove = function (e) {
let x = ((e.clientX + window.pageXOffset) - left);
document.getElementById("thumbnail").style.left = (x + "px");
}
body {
overflow: hidden;
}
.container {
width: 100%;
max-width: 800px;
position: relative;
background-color: blue;
height: 200px;
overflow: hidden;
}
.core {
margin: 0;
display: flex;
position: absolute;
bottom: 4px;
width: 100%;
flex-wrap: nowrap;
height: auto;
}
#time {
font-size: 14px;
text-shadow: 0 1px 1px rgb(0 0 0 / 15%);
color: #fff;
align-self: center;
align-items: flex-start;
margin: 0 12px;
min-width: 45px;
text-align: center;
}
#progressZone {
width: 100%;
background-color: green;
position: relative;
}
#progress{
z-index: 1;
border-radius: 8px;
height: 2px;
width: 100%;
outline: none;
position: absolute;
top: 0;
bottom: 0;
appearance: none;
-webkit-appearance: none;
margin: auto;
background: transparent;
margin-right: 10px;
}
.thumbnail {
display: none;
z-index: 1;
position: absolute;
bottom: 30px;
right: auto;
margin: 0;
width: 12em;
height: 7em;
background: rgb(200, 200, 200);
pointer-events: none;
padding: 2px 2px;
transform: translateX(-50%);
left: 50%;
}
.thumbnail::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid transparent;
border-top: 8px solid rgb(200, 200, 200);
transform: translateY(-19%);
}
#progress:hover + .thumbnail {
display: block;
}
<div class="container">
<div id="core" class="core">
<div id="time">01:14:28</div>
<div id="progressZone">
<input id="progress" class="range" type='range' min="0" max="100" step="0.01" value="0">
<div id="thumbnail" class="thumbnail"></div>
</div>
</div>
</div>
And as far as I can see it, this should have solved the issue. I hope I got your problem right :)

How to make a simple HTML CSS Time diagram

I am trying to create a time diagram which displays lab usage time using HTML CSS divs. I put something together, but it is not turning out as well as I thought.
div {
height: 30px;
margin-top: 20px;
}
.alloted {
background-color: blue;
border: 2px solid black;
text-align: left;
height: 80px;
width: 70%;
position: absolute;
opacity: 0.5;
}
.actual {
opacity: 0.6;
background-color: gray;
border: 2px solid black;
text-align: left;
height: 60px;
width: 65%;
margin-left: 2%;
margin-top: 40px;
position: absolute;
}
.bringUp {
background-color: orange;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.idle {
background-color: brown;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.lost {
background-color: red;
border: 2px solid black;
text-align: left;
width: 5%;
display: inline-block;
float: left;
}
.used {
background-color: green;
border: 2px solid black;
text-align: left;
width: 55%;
display: inline-block;
float: left;
}
<div class="actual">
Actual Time Used
<div class="bringUp">
Bring Up
</div>
<div class="idle">
Idle
</div>
<div class="lost">
Lost
</div>
<div class="used">
Used
</div>
</div>
<div class="alloted">
Alloted Lab Shot
</div>
What I am trying to achieve is creating a block of "actual" time which is made up of several blocks in line (Bringup, idle, lost, used). I also need to create another block which can move inside or outside of the actual time block to represent allotted time. The behavior is very similar to a stack bar chart, but not quite the same. The widths are hard coded in the CSS above, but the idea is the values would be based upon user input.
Any advice to achieve this would be great!

You could do it like that:
Set margins that are inherited from the parent to 0
Set heights manually is the easiest way in this case
Place "Actual Time Used" in a absolute positioned span
div {
box-sizing: border-box;
height: 30px;
margin-top: 20px;
}
.alloted {
background-color: blue;
border: 2px solid black;
text-align: left;
height: 80px;
width: 100%;
position: absolute;
opacity: 0.5;
}
.actual {
opacity: 0.6;
background-color: gray;
border: 2px solid black;
text-align: left;
height: 60px;
width: 65%;
margin-left: 2%;
margin-top: 40px;
position: absolute;
}
.actual span {
position: absolute;
bottom: 20px;
right: 50%;
}
.bringUp {
margin: 0;
height: 58px;
background-color: orange;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.idle {
margin: 0;
height: 58px;
background-color: brown;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.lost {
margin: 0;
height: 58px;
background-color: red;
border: 2px solid black;
text-align: left;
width: 5%;
display: inline-block;
float: left;
}
.used {
margin: 0;
height: 58px;
background-color: green;
border: 2px solid black;
text-align: left;
width: 55%;
display: inline-block;
float: left;
}
<div class="actual">
<span>Actual Time Used</span>
<div class="bringUp">
Bring Up
</div>
<div class="idle">
Idle
</div>
<div class="lost">
Lost
</div>
<div class="used">
Used
</div>
</div>
<div class="alloted">
Alloted Lab Shot
</div>

CSS styling, how to make this button stay on the right side and be responsive

The comments button appears once someone adds a comment (ala medium.com). The p tag which holds the text is inside a bootstrap container which goes down the middle of the page. I want to keep my comments button to the right of that p paragraph.
Here's the screenshot of what I have currently.
As I make the page smaller, the button slides to the left eventually going all the way to the left side of the screen. When it comes to absolute and relative positioning I get a bit confused as I haven't worked with it much. I'm hoping you guys can guide me here.
My ultimate goal here is to keep the comments button to the right of the p tag (the paragraph) even while user is making the page smaller horizontally. If the button has to get responsively smaller, that's ok.
Here's the html and css:
html, body {
background-color: whitesmoke;
height: 100%;
}
.headLine {
text-align: center;
}
.highLight {
background-color: yellow
}
.editable {
position: relative;
}
.toolTip {
position: absolute;
background-color: black;
min-width: 180px;
max-width: 180px;
border-radius: 10px;
color: white
}
.buttons {
margin-top: 0.3%;
color: black;
background-color: #7D98ED;
border-radius: 5px;
}
.commentBox {
position: absolute;
border-radius: 10px;
background-color: beige;
height: 200px;
width: 300px;
}
.textAreaBox {
width: 270px;
height: 100px;
}
.buttonCommentSubmit {
text-align: center;
position: absolute;
bottom: 10px;
right: 135px;
}
.sideComment {
position: absolute;
right: 300px;
top: 125px;
}
.sideCommentView {
position: absolute;
left: 69.5%;
top: 15.7%;
background-color: beige;
min-width: 300px;
max-width: 300px;
border-radius: 10px;
}
.mainTextBody {
min-height: 100vh;
background-color: mintcream;
}
.reinsertedText {
display:inline;
}
<div className = "container mainTextBody" onMouseDown={this.removetoolBox.bind(this)} onMouseUpCapture={this.captureSelection.bind(this)}>
<h1 className = "headLine" >Medium Markup</h1>
<hr />
<p className='editable'>All the text here....</p>
{(this.state.showSideComments) ? <SideComments /> : ''}
</div>
<div className="sideComment">
<button id="sideButton" onClick={this.showComments}>Comments</button>
</div>
EDIT: for more information and the html, here's a link to the github components:
https://github.com/milosbunijevac/medRails/tree/master/app/javascript/packs
and to the stylesheet:
https://github.com/milosbunijevac/medRails/blob/master/app/assets/stylesheets/main_control.scss
The only components I really used in this example are Main.jsx and SideComments.jsx

I have 3 suggestions to keep the button to the right of the p tag. But I needed add a div to wrap your 2 divs.
display: inline-block + white-space: nowrap
html, body {
background-color: whitesmoke;
height: 100%;
}
.headLine {
text-align: center;
}
.highLight {
background-color: yellow
}
.editable {
position: relative;
}
.toolTip {
position: absolute;
background-color: black;
min-width: 180px;
max-width: 180px;
border-radius: 10px;
color: white
}
.buttons {
margin-top: 0.3%;
color: black;
background-color: #7D98ED;
border-radius: 5px;
}
.commentBox {
position: absolute;
border-radius: 10px;
background-color: beige;
height: 200px;
width: 300px;
}
.textAreaBox {
width: 270px;
height: 100px;
}
.buttonCommentSubmit {
text-align: center;
position: absolute;
bottom: 10px;
right: 135px;
}
.sideComment {
position: absolute;
right: 300px;
top: 125px;
}
.sideCommentView {
position: absolute;
left: 69.5%;
top: 15.7%;
background-color: beige;
min-width: 300px;
max-width: 300px;
border-radius: 10px;
}
.mainTextBody {
min-height: 100vh;
background-color: mintcream;
}
.reinsertedText {
display:inline;
}
.wrapContainer {
white-space: nowrap;
}
.wrapContainer>div {
display: inline-block;
}
<div class="wrapContainer">
<div className = "container mainTextBody" onMouseDown={this.removetoolBox.bind(this)} onMouseUpCapture={this.captureSelection.bind(this)}>
<h1 className = "headLine" >Medium Markup</h1>
<hr />
<p className='editable'>All the text here....</p>
{(this.state.showSideComments) ? <SideComments /> : ''}
</div>
<div className="sideComment">
<button id="sideButton" onClick={this.showComments}>Comments</button>
</div>
</div>
display: flex
html, body {
background-color: whitesmoke;
height: 100%;
}
.headLine {
text-align: center;
}
.highLight {
background-color: yellow
}
.editable {
position: relative;
}
.toolTip {
position: absolute;
background-color: black;
min-width: 180px;
max-width: 180px;
border-radius: 10px;
color: white
}
.buttons {
margin-top: 0.3%;
color: black;
background-color: #7D98ED;
border-radius: 5px;
}
.commentBox {
position: absolute;
border-radius: 10px;
background-color: beige;
height: 200px;
width: 300px;
}
.textAreaBox {
width: 270px;
height: 100px;
}
.buttonCommentSubmit {
text-align: center;
position: absolute;
bottom: 10px;
right: 135px;
}
.sideComment {
position: absolute;
right: 300px;
top: 125px;
}
.sideCommentView {
position: absolute;
left: 69.5%;
top: 15.7%;
background-color: beige;
min-width: 300px;
max-width: 300px;
border-radius: 10px;
}
.mainTextBody {
min-height: 100vh;
background-color: mintcream;
}
.reinsertedText {
display:inline;
}
.wrapContainer {
display: flex;
flex-flow: row nowrap;
}
.wrapContainer>div {
flex: 1;
}
.wrapContainer>div + div {
flex: 0;
}
<div class="wrapContainer">
<div className = "container mainTextBody" onMouseDown={this.removetoolBox.bind(this)} onMouseUpCapture={this.captureSelection.bind(this)}>
<h1 className = "headLine" >Medium Markup</h1>
<hr />
<p className='editable'>All the text here....</p>
{(this.state.showSideComments) ? <SideComments /> : ''}
</div>
<div className="sideComment">
<button id="sideButton" onClick={this.showComments}>Comments</button>
</div>
</div>
You can change the margins and positions, but it maybe is beyond your main problem.

Max-height: 0 not collapsing Div

I would like my chat box to collapse when they touch the header of the chat, similar to facebook. I know that hide_wrapBox is correctly being added, but it doesn't set the height of its contained elements to a (collapsed) fixed height. In other words, the messages inside the chat box
disappear but the box still stands, where I'd prefer it to minimize.
<div id="messages-card-container" class="mdl-cell mdl-cell--12-col mdl-grid">
<!-- Messages container -->
<div id="messages-card" style="display:none;" class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--6-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<div id="convoHeader">HEADER</div>
<div class="wrapBox">
<div id="messages">
<span id="message-filler"></span>
</div>
<form id="message-form" action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="message" placeholder="Type a message...">
</div>
</form>
<form id="image-form" action="#">
<input id="mediaCapture" type="file" accept="image/*,capture=camera">
<button id="submitImage" title="Add an image" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400 mdl-color-text--white">
</button>
</form>
</div>
</div>
</div>
<div id="must-signin-snackbar" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
</div>
</div>
Jquery:
<script>
$('#convoHeader').click(function(){
if($('.wrapBox').is(":visible")){
$('.wrapBox').hide();
$('#messages').addClass('hide_wrapBox');
console.log('you get here');
}else{
$('.wrapBox').show();
$('#messages').removeClass('hide_wrapBox');
}
});
</script>
CSS:
.hide_wrapBox {
max-height: 0;
width: 5px;
bottom:0;
outline: 4px solid red;
}
#messages-card {
float: right;
z-index: 1;
height: 400px;
width: 300px;
bottom: 0%;
margin-top: 15px;
}
#messages-card-container {
position: absolute;
right:0;
z-index: 1;
height: 400px;
bottom: 0%;
}
.mdl-layout__header-row span {
margin-left: 15px;
margin-top: 17px;
}
.mdl-grid {
max-width: 1024px;
margin: auto;
}
.material-icons {
font-size: 36px;
top: 8px;
position: relative;
}
.mdl-layout__header-row {
padding: 0;
margin: 0 auto;
}
.mdl-card__supporting-text {
position:relative;
width: auto;
height: 100%;
padding-top: 0;
padding-bottom: 0;
box-shadow: 0px 0px 2px 2px #888888;
}
#convoHeader, innerHTML{
position: relative;
color: white;
}
#convoHeader{
position:relative;
background-color: #c4d8e2;
padding-bottom: 6px;
}
#convoHeader: hover{
cursor:pointer;
}
#messages {
overflow-y: auto;
margin-bottom: 10px;
height: 270px;
//outline: 2px solid red;
}
#message-filler {
flex-grow: 1;
}
.message-container:first-of-type {
border-top-width: 0;
}
.message-container {
display: block;
margin-top: 10px;
border-top: 1px solid #f3f3f3;
padding-top: 10px;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.message-container.visible {
opacity: 1;
}
.message-container .pic {
background-image: url('/images/profile_placeholder.png');
background-repeat: no-repeat;
width: 30px;
height: 30px;
background-size: 30px;
border-radius: 20px;
}
.message-container .spacing {
display: table-cell;
vertical-align: top;
}
.message-container .message {
display: table-cell;
width: calc(100% - 40px);
padding: 5px 0 5px 10px;
color: #666666;
}
.message-container .name {
display: inline-block;
width: 100%;
padding-left: 40px;
color: #bbb;
font-style: italic;
font-size: 12px;
box-sizing: border-box;
}
#message-form {
display: flex;
flex-direction: row;
float: left;
}
#image-form {
display: flex;
flex-direction: row;
width: 48px;
float: right;
}
#message-form .mdl-textfield {
//width: 300px;
position:absolute;
bottom:0;
}
#message-form, input{
width:295px;
height:32px;
font-size: 12px;
position:absolute;
bottom:0;
}
#message-form button, #image-form button {
width: 100px;
margin: 15px 0 0 10px;
}
.mdl-card {
min-height: 0;
}
.mdl-card {
background: linear-gradient(white, #f9f9f9);
justify-content: space-between;
}
#user-container {
position: absolute;
display: flex;
flex-direction: row;
top: 22px;
width: 100%;
right: 0;
padding-left: 10px;
justify-content: flex-end;
padding-right: 10px;
}
#user-container #user-pic {
top: -3px;
position: relative;
display: inline-block;
background-image: url('/images/profile_placeholder.png');
background-repeat: no-repeat;
width: 40px;
height: 40px;
background-size: 40px;
border-radius: 20px;
}
#user-container #user-name {
font-size: 16px;
line-height: 36px;
padding-right: 10px;
padding-left: 20px;
}
#image-form #submitImage {
width: auto;
padding: 0 6px 0 1px;
min-width: 0;
}
#image-form #submitImage .material-icons {
top: -1px;
}
.message img {
max-width: 300px;
max-height: 200px;
}
#mediaCapture {
display: none;
}
#media screen and (max-width: 610px) {
header {
height: 113px;
padding-bottom: 80px !important;
}
#user-container {
top: 72px;
background-color: rgb(3,155,229);
height: 38px;
padding-top: 3px;
padding-right: 2px;
}
#user-container #user-pic {
top: 2px;
width: 33px;
height: 33px;
background-size: 33px;
}
}
.mdl-textfield__label:after {
background-color: #0288D1;
}
.mdl-textfield--floating-label.is-focused .mdl-textfield__label {
color: #0288D1;
}
.mdl-button .material-icons {
top: -1px;
margin-right: 5px;
}

It's actually collapsing, but you have the wrapper around those divs such as #messages-card which is setting a height. So while #messages is collapsing, parent of #messages-card is maintaining the height you have set, making it appear nothing is collapsing:
#messages-card {
float: right;
z-index: 1;
height: 400px;
width: 300px;
bottom: 0%;
margin-top: 15px;
}
You'll need to play around with adjusting that wrapper's height, and it's positioning to resolve the issue you're having.

Instead of adding hide_wrapBox to messages try toggling it on wrapBox
$('#convoHeader').click(function(){
if($('.wrapBox').is(":visible")){
$('.wrapBox').addClass('hide_wrapBox');
}else{
$('.wrapBox').removeClass('hide_wrapBox');
}
});

Is it possible to draw diagrams using html, css and js

How can we draw a benchmark like this using html,css and js
Benchmark of user score with Jee Mains and Advance:

A small demo to get started, but don't expect to get everything from this site. Explore for yourself:
You have to modify the left and width properties to manipulate the diagram.
This is just the layout; CSS, images and other stuff you have to discover.
* {
box-sizing: border-box;
}
.outer {
background-color: #ccc;
width: 100%;
height: 50px;
}
.inner {
background-color: yellow;
width: 65%;
height: 50px;
float: left;
position: absolute;
}
.flag-1 {
border-left: 2px solid #777;
height: 70px;
position: absolute;
left: 30%;
float: left;
padding-top: 60px;
padding-bottom: 20px;
padding-left: 5px;
}
.flag-2 {
border-left: 2px solid #777;
height: 70px;
position: absolute;
left: 80%;
float: left;
padding-top: 60px;
padding-bottom: 20px;
padding-left: 5px;
}
<div class="outer">
<div class="inner">
</div>
<div class="flag-1">
This is one
</div>
<div class="flag-2">
This is two
</div>
</div>