Anyone have easy way to create this using css and html?

Anyone have easy way to create this using css and html? - javascript

I have done this with below code, But I this it is a difficult way to do this anyone have easy way for create this with css and html.
.fline {
width: 2px;
background-color: black;
height: 10px;
margin-left: 30%;
margin-top: -9px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 60%;
margin-top: -10px;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 88.2%;
margin-top: -11px;
}
<hr style="width: 300px;margin-left: 30%;color:black">
<div class="fline"></div>
<div class="fline1"></div>
<div class="fline2"></div>

.scale-container {
width: 300px;
}
.scale {
width: 296px;
height: 20px;
border: 2px solid black;
border-bottom: none;
}
.scale>div {
width: 50%;
height: 20px;
border-right: 2px solid black;
}
.label-container {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="scale-container">
<div class="scale">
<div></div>
</div>
<div class="label-container">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>
</div>

In this way you can add as many items as you want.
.p {
display: flex;
position: relative;
padding-top: 15px;
border-top: 2px solid red;
margin-bottom: 30px;
}
.p div {
position: relative;
flex: 1;
text-align: center;
}
.p div:after {
content: '';
position: absolute;
height: 15px;
width: 2px;
background: red;
top: -15px;
}
.p div:not(:first-child):not(:last-child):after {
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.p div:first-child {
text-align: left;
}
.p div:first-child:after {
left: 0;
}
.p div:last-child {
text-align: right;
}
.p div:last-child:after {
right: 0;
}
<div class="p">
<div>
Low
</div>
<div>
Average
</div>
<div>
High
</div>
</div>
<div class="p">
<div>
Low
</div>
<div>
Average -1
</div>
<div>
Average
</div>
<div>
Average 1
</div>
<div>
High
</div>
</div>
<div class="p">
<div>
Low
</div>
<div>
Average -2
</div>
<div>
Average -1
</div>
<div>
Average
</div>
<div>
Average 1
</div>
<div>
Average 2
</div>
<div>
High
</div>
</div>

This is just a sample you can modify it to meet your requirments
.box {
display: flex;
border-top:1px solid #000;
}
.box>div:not(:last-child)
{
border-left:1px solid #000;
}
.box>div:last-child
{
border-right:1px solid #000;
}
.box>div
{
flex: 1 1 auto;
padding:10px;
}
<div class="box">
<div></div>
<div></div>
<div></div>
</div>

.box {
display: flex;
border-top:1px solid #000;
}
.box>div:not(:last-child)
{
border-left:1px solid #000;
}
.box>div:last-child
{
border-right:1px solid #000;
}
.box>div
{
flex: 1 1 auto;
padding:10px;
padding-top:40px;
}
<div class="box">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>

.grid{width:calc(100% - 20px);max-width:1000px;margin:0 auto;;border-top:3px solid red;display:flex;flex-direction:row;align-items:baseline;justify-content: space-between;}
.fline{position:relative;overflow:hidden;min-height:40px;float: left;padding-top: 20px;}
.fline::before{position:absolute;content:"";top:0;width:2px;height:20px;background:red}
.fline:first-child::before{left:0}
.fline:nth-of-type(2)::before{left:calc(50% - 2px)}
.fline:last-child::before{left:unset;right:0}
<div class="grid">
<div class="fline">Low</div>
<div class="fline">High</div>
<div class="fline">Average</div>
</div>

.fline {
width: 2px;
background-color: black;
height: 10px;
margin-left: 30%;
margin-top: -9px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 60%;
margin-top: -10px;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 88.2%;
margin-top: -11px;
}
<hr style="width: 300px;margin-left: 30%;color:black">
<div class="fline">Low</div>
<div class="fline1">Average</div>
<div class="fline2">High</div>

First you need to define one outer wrap and define width as you want to this.
And position:relative for this.
For first inner div with float:left; and last with float:right;.
And center div with position:absolute; with margin:auto; from left and right;
And margin-top depend on your parent div outer-wrap width for inner div like: fline,fline1,fline2
.outer-wrap{
width: 80%;
height: 1px;
background-color: #000;
margin: auto;
text-align: center;
position: relative;
}
.fline {
width: 2px;
background-color: black;
height: 10px;
float: left;
margin-top: 1px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
float: right;
margin-top: 1px;
}
<div class="outer-wrap">
<div class="fline"></div>
<div class="fline1"></div>
<div class="fline2"></div>
</div>

This one is the right answer to this question
.scale-container {
width: 300px;
}
.scale {
width: 296px;
height: 20px;
border: 2px solid black;
border-bottom: none;
}
.scale>div {
width: 50%;
height: 20px;
border-right: 2px solid black;
}
.label-container {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="scale-container">
<div class="scale">
<div></div>
</div>
<div class="label-container">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>
</div>

Related

How to place the top left of a div element to the top right of a button?

I am trying to place the top right of the div element friend_info to the top left of the button friend_button.
I have tried to use the code from https://javascript.info/coordinates#element-coordinates-getboundingclientrect but to no avail and I also tried to use this code:
var friend_button = document.getElementById("friend-button");
var friend_info = document.getElementById("friend_info");
friend_button.addEventListener("mouseover", function(){
var coords = friend_button.getBoundingClientRect();
var coordsOfInfo = $('.friend_info').width();
var subtractWidth = coords.left-coordsOfInfo;
friend_info.style.left = subtractWidth+"px";
friend_info.style.top = coords.top + "px";
friend_info.style.display = "block";
> });
friend_button.addEventListener("mouseout", function(){
friend_info.style.display = "none";
> });
but the div element disdplays in the middle of the button instead of the left hand side. Here is the html and css for the code I am working on.
HTML:
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="test.css">
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>
<body>
<div class="header">
<h1 class="Search_Media">Search Media</h1>
<div class="navigationbar">
<form>
<input type="text" placeholder="Search...">
<input type="submit" value="Search">
</form>
</div>
</div>
<br />
<div class="middle">
<div class="headings">
<a class="active" href="Main_Page.html">Home</a>
Messages
Friends
User page
</div>
<div class="friends">
<h2>Friends</h2>
<button type="button" class="friend-button" id="friend-button">
<div class="media">
<img src="default-pic.png" class="mr-3" alt="Default Picture" width="50" height="50">
</div>
<div class="media-body">
<h5 class="mt-0">Friend1</h5>
<p>status: active</p>
</div>
</button>
<div class="friend_info" id="friend_info">
<video autoplay muted loop class="backgroundInfo">
<source src="Background.mp4" type="video/mp4">
</video>
<div class="d-flex">
<img src="default-pic.png" class="profile-picture" alt="Default Picture" width="200" height="200">
<div class="d-flex flex-column">
<div class="p-2">
<h1 class="Friend_Name">Friend1</h1>
</div>
<div class="p-1">
<h5>status: active</h5>
</div>
<div class="p-5">
<p class="info">Phone Number: 07914836605</p>
<p class="info">Name: Joe</p>
<p class="info">Surname: Smith</p>
<p class="info">Gender: Male</p>
<p class="info">Date of birth: 14/02/2003</p>
</div>
</div>
</div>
</div>
</div>
<div class="middle-grid">
<div class="user-post">
Create post:<br>
<form>
<textarea id="create_post" rows="10" cols = "50"></textarea><br>
<input type="submit" class="post-button" value="Post">
</form>
</div>
<div class="posts">
<div class="post">
<h3 id="existing_posts"><img src="default-pic.png" class="profile-pic" alt="Default Picture" width="50" height="50">Posts</h3>
<p>This is an example of a post. It will need to be boxed and made so that the name of the user goes above
the name of the likes and dislikes of the posts are to the left of the post and that the reply and report
functionalities are at the bottom right of the posts. It will also need a box around it to show where the post starts and ends.</p>
<div class="options">
Like
Comment
Report
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<button onclick="topFunction()" id="myBtn" title="Go To Top">Top</button>
</div>
<script src="Main_Page.js"></script>
</body>
</html>
CSS:
body{
background-color: black;
color: white;
}
.Search_Media{
position: fixed;
top: 0px;
left: 0%;
padding: 10px;
width: 100%;
background-color: aqua;
z-index: 0;
color: black;
margin-top: 0px;
}
.Search-media{
text-decoration: none;
color: black;
}
.Search-media:hover{
text-decoration: none;
color: black;
}
.navigationbar{
background-color: aqua;
width: auto;
position: fixed;
padding-top:15px;
left: 50%;
margin-left: -88.5px;
color: black;
}
.headings{
left:20.17%;
height: 100;
width: 200;
position: fixed;
margin-top: 40px;
background-color: black;
}
.headings a{
padding: 6px 0px 6px 0px;
text-decoration: none;
font-size: 20px;
color: white;
display: block;
}
.headings a:hover{
color: black;
background-color: aqua;
}
.headings a.active{
background-color: aqua;
color: black;
}
.friend-button{
width: 90%;
margin-bottom: 1px;
background-color: black;
color: white;
cursor: pointer;
border-radius: 5px;
}
.friend-button:hover{
background-color: aqua;
color: black;
}
.middle{
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: 10px;
margin: 0% auto;
width: 75%;
height: auto;
text-align: center;
}
.middle-grid{
border-right: 1px solid white;
border-left: 1px solid white;
padding-top: 37px;
width: 50%;
}
.user-post{
width: auto;
margin: 0% auto;
}
.post-button{
margin: 0% auto;
color: black;
padding-right: 50;
padding-left: 50;
padding-top: 5;
padding-bottom: 5;
}
textarea{
resize: none;
color: black;
}
h3{
margin-top: 5px;
margin-bottom: 1px;
}
.posts{
width:75%;
text-align: left;
padding:10px;
margin-left: auto;
margin-right:auto;
}
.post{
padding-bottom: 20px;
}
.post:nth-child(odd){
color: black;
background-color: lightblue;
z-index: 2;
}
.post p{
margin-top: 5px;
}
.options{
float: right;
}
.options .report{
color: red;
}
h2{
margin-top: auto;
margin-bottom: auto;
}
.friends{
position: fixed;
right: 10%;
margin-top: 70px;
padding: 0px;
margin-bottom: auto;
border: 1px solid white;
width: 15%;
overflow-y: scroll;
top: 0;
bottom: 0;
}
.media-body{
text-align: left;
}
h5{
font-size: 20;
margin-bottom: 2px;
}
#myBtn {
display: none;
position: fixed;
top: 95%;
left: 50%;
margin: 0% auto;
transform: translate(-50%, -50%);
z-index: 99;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
font-size: 18px;
}
#myBtn:hover {
background-color: darkred;
}
.friend_info{
display: none;
position: fixed;
width: 20vw;
height: 20vh;
text-align: center;
left: 0px;
right:0px;
top: 0px;
}
.backgroundInfo{
position: inherit;
z-index: -99;
max-width: 800px;
max-height: 600px;
left: inherit;
top: inherit;
}
.d-flex{
color: white;
}
.Friend_Name{
padding: 0px;
margin: 0px;
font-size: 60px;
}
h5{
font-size: 30px;
}
.info{
font-size: 20px;
}
.p-5{
border: 0%;
width: auto;
height: 0px;
bottom: 0px;
left: 0px;
top: 0px;
border-width: 0px;
padding: 2rem !important;
}

I had the correct idea, but wrong execution. The correct javascript is the following:
var friend_button = document.getElementById("friend-button");
var friend_info = document.getElementById("friend_info");
friend_button.addEventListener("mouseover", function(){
var coords = friend_button.getBoundingClientRect();
var coordsOfInfo = $('.backgroundInfo').width();
var subtractWidth = coords.left-coordsOfInfo;
friend_info.style.left = subtractWidth+"px";
friend_info.style.top = coords.top + "px";
friend_info.style.display = "block";
});
friend_button.addEventListener("mouseout", function(){
friend_info.style.display = "none";
});
Notice how I changed which element I got the width off. I changed it to the backgroud width and now displays just how I want.

How to toggle single class in jquery without affecting same class elements?

I'm setting up a reddit-like commenting system on my website. Every comments has a little button in the right corner that collapses the comment.
I have the comment collapse by JQuery toggleClass.
$(".button").click(function() {
$('.bottomtext').toggleClass('bottomtext-small');
$('.upvote').toggleClass('upvote-small');
$('.downvote').toggleClass('downvote-small');
$('.main-content').toggleClass('main-content-small');
$('.button').toggleClass('button-small');
});
The comment collapsing works fine on one comment, but since I toggle the class, every comment collapses. How can I only affect the comment which button I am clicking?
JSFiddle: https://jsfiddle.net/j765rkpc/7/

It seems that you need to get the elements that have those class names and are part of the same post as the clicked button, here is how you can do that:
$(".button").click(function() {
const $post = $(this).closest('.post-container');
$post.find('.bottomtext').toggleClass('bottomtext-small');
$post.find('.upvote').toggleClass('upvote-small');
$post.find('.downvote').toggleClass('downvote-small');
$post.find('.main-content').toggleClass('main-content-small');
$post.find('.button').toggleClass('button-small');
});
.post-container {
background-color: yellow;
margin: auto;
position: relative;
display: flex;
width: 75%;
max-width: 1440px;
}
/*left side*/
.left-side {
position: relative;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50px;
max-width: 50px;
min-width: 50px;
background: lightblue;
padding-left: 5px;
padding-right: 5px;
}
/*main post*/
.post {
margin: 0;
padding: 0;
flex-grow: 1;
}
.main-content p {
margin: 0;
padding: 0;
padding: 10px;
}
.main-content {
margin: 0;
padding: 0;
flex-grow: 1;
}
.contain img {
width: 50%;
}
.toptext {
margin: 0;
padding: 0;
padding-top: 10px;
padding-left: 10px;
height: 20px;
color: #808486;
font-size: 12px;
background-color: lightgrey;
}
.bottomtext {
margin: 0;
padding: 0;
padding-left: 5px;
height: 15px;
background: red;
font-size: 14px;
font-weight: bold;
color: #878a8c;
}
.bottomtext img {
margin-bottom: -2px;
padding-right: 5px;
}
.toptext b {
color: black;
}
.left-side .upvote {
padding-bottom: 5px;
}
.left-side .downvote {
padding-top: 7px;
}
.username {
color: blue;
}
.main-content-small {
margin: 0;
padding: 0;
flex-grow: 1;
display: none;
}
.contain-small img {
width: 50%;
display: none;
}
.bottomtext-small {
margin: 0;
padding: 0;
padding-left: 5px;
height: 15px;
background: red;
font-size: 14px;
font-weight: bold;
color: #878a8c;
display: none;
}
.left-side .upvote-small {
padding-bottom: 5px;
display: none;
}
.left-side .downvote-small {
padding-top: 7px;
display: none;
}
.button {
position: absolute;
top: 8px;
right: 10px;
background-color: white;
border: 1px solid black;
height: 14px;
width: 20px;
}
.button:hover {
background-color: grey;
}
.button-small {
position: absolute;
top: 5px;
right: 10px;
background-color: white;
border: 1px solid black;
height: 20px;
width: 7px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-container">
<div class="left-side">
<div> <img class="upvote" src="https://i.imgur.com/AdwzPRs.png" height="15"> </div>
<div> <img class="downvote" src="https://i.imgur.com/XoJ1Jjy.png" height="15"> </div>
</div>
<div class="post">
<p class="toptext">
<input type="button" class="button"></input>
<span class="username">webdev18</span> 33 points 18 minutes ago
</p>
<div class="main-content">
<p class="contain-com">
When I want to collapse this comment by clicking the button in the corner...
</p>
<p class="bottomtext">
<img src="https://i.imgur.com/1IIJe1r.png" height="15">Respond
</p>
</div>
</div>
</div>
<div class="post-container">
<div class="left-side">
<div> <img class="upvote" src="https://i.imgur.com/AdwzPRs.png" height="15"> </div>
<div> <img class="downvote" src="https://i.imgur.com/XoJ1Jjy.png" height="15"> </div>
</div>
<div class="post">
<p class="toptext">
<input type="button" class="button"></input>
<span class="username">webdev18</span> 33 points 18 minutes ago
</p>
<div class="main-content">
<p class="contain-com">
...both comments collapse.
</p>
<p class="bottomtext">
<img src="https://i.imgur.com/1IIJe1r.png" height="15">Respond
</p>
</div>
</div>
</div>

Create a new div on selecting the menu in javascript

I was working the project where there is two view and three view (or if possible multiple view). Here in my code selected option normal creates two div placed vertically and Three view creates three view vertically (i.e adding one more div in Normal option). Here default one is Normal
.header{
width:100%;
height:40px;
background:#f4f3f1;
border: 1px solid #dbdfe5;
text-align: center;
font-size: 20px;
padding-top:0px;
color: green;
font-weight:bold;
}
.container{
width: 100%;
min-height: 150px;
padding-top:2px;
display: flex;
}
.container .box1{
background: #ffffff;
border-radius: 3px;
border: 2px solid #dbdfe5;
flex: 1;
overflow: auto;
}
.container .box1 #inside{
width:100%;
height:35px;
border: 1px solid #dbdfe5;
padding-bottom:10px;
border-radius: 1px;
background:#f4f3f1;
}
.container .box1.box2{
background: #ffffff;
border-radius: 3px;
overflow: auto;
}
.container .box1.box2 #second{
width:100%;
height:35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom:10px;
background:#f4f3f1;
}
.tabb{
float:left;
margin-left:10px;
margin:5px;
display: inline-block;
padding: 6px 12px;
border-radius: 5px;
}
<body>
<div class="header">
<select class="tabb" name="opt" id="opt" >
<option value="two">Normal </option>
<option value="three">Three view</option>
</select>
Demo </div>
<div class="container">
<div class="box1">
<div id="inside" >
<center>Inside Box1</center>
</div>
<center>Main Box1</center>
</div>
<div class="box1 box2">
<div id="second" >
<center>Inside Box2</center>
</div>
<center>Main Box2</center>
</div>
</div>
</body>
Currently by default two div is created, how can I create 3 div on selecting the Three view of selection menu, placed vetically. In code how to dynamically create <div class="box1 box2 box3"> .

You mean this?
Also IDs need to be unique
$(function() {
$("#opt").on("change", function() {
$(".box3").toggle(this.value == "three"); // toggle will show if true, hide if false
}).change()
})
.header {
width: 100%;
height: 40px;
background: #f4f3f1;
border: 1px solid #dbdfe5;
text-align: center;
font-size: 20px;
padding-top: 0px;
color: green;
font-weight: bold;
}
.container {
width: 100%;
min-height: 150px;
padding-top: 2px;
display: flex;
}
.container .box1 {
background: #ffffff;
border-radius: 3px;
border: 2px solid #dbdfe5;
flex: 1;
overflow: auto;
}
.container .box1 #first {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
padding-bottom: 10px;
border-radius: 1px;
background: #f4f3f1;
}
.container .box1.box2 {
background: #ffffff;
border-radius: 3px;
overflow: auto;
}
.container .box1.box2 #second {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.container .box1.box2.box3 #third {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.tabb {
float: left;
margin-left: 10px;
margin: 5px;
display: inline-block;
padding: 6px 12px;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="header">
<select class="tabb" name="opt" id="opt">
<option value="two">Normal </option>
<option value="three">Three view</option>
</select>
Demo </div>
<div class="container">
<div class="box1">
<div id="first">
<center>Inside Box1</center>
</div>
<center>Main Box1</center>
</div>
<div class="box1 box2">
<div id="second">
<center>Inside Box2</center>
</div>
<center>Main Box2</center>
</div>
<div class="box1 box2 box3">
<div id="third">
<center>Inside Box3</center>
</div>
<center>Main Box3</center>
</div>
</div>
</body>
To add views, try this:
var views = {
"three": ".box3",
"four": ".box3,.box4"
}
$(function() {
$("#opt").on("change", function() {
var view = views[this.value]; // if three or four
$(".box3,.box4").hide(); // hide anyway
if (view) $(view).show(); // show box2 or box3 and box4
}).change()
})
.header {
width: 100%;
height: 40px;
background: #f4f3f1;
border: 1px solid #dbdfe5;
text-align: center;
font-size: 20px;
padding-top: 0px;
color: green;
font-weight: bold;
}
.container {
width: 100%;
min-height: 150px;
padding-top: 2px;
display: flex;
}
.container .box1 {
background: #ffffff;
border-radius: 3px;
border: 2px solid #dbdfe5;
flex: 1;
overflow: auto;
}
.container .box1 #first {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
padding-bottom: 10px;
border-radius: 1px;
background: #f4f3f1;
}
.container .box1.box2 {
background: #ffffff;
border-radius: 3px;
overflow: auto;
}
.container .box1.box2 #second {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.container .box1.box2.box3 #third {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.container .box1.box2.box4 #fourth {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.tabb {
float: left;
margin-left: 10px;
margin: 5px;
display: inline-block;
padding: 6px 12px;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="header">
<select class="tabb" name="opt" id="opt">
<option value="two">Normal </option>
<option value="three">Three view</option>
<option value="four">Four view</option>
</select>
Demo </div>
<div class="container">
<div class="box1">
<div id="first">
<center>Inside Box1</center>
</div>
<center>Main Box1</center>
</div>
<div class="box1 box2">
<div id="second">
<center>Inside Box2</center>
</div>
<center>Main Box2</center>
</div>
<div class="box1 box2 box3">
<div id="third">
<center>Inside Box3</center>
</div>
<center>Main Box3</center>
</div>
<div class="box1 box2 box4">
<div id="fourth">
<center>Inside Box4</center>
</div>
<center>Main Box4</center>
</div>
</div>
</body>

first you must addEventListener for your select input and when you chose Three View:
//create div element
const div = documnet.createElement('div');
// add class name
div.className = 'box1 box2 box3';
// get container
const container = document.getElementsByClassName('container')[0];
// add div to container
container.appendChild(div);

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');
}
});

put a div at the bottom of a parent div

I am struggling with this :
I would like to put a div ( red in my code ) at the bottom of another div.
The div should be stick to the bottom of the parent div.
.homepage-wrapper{
max-width: 1028px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
padding: 15px 0 15px 0;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{
display: flex;
flex-wrap:wrap;
width: auto;
height: auto;
background-color: yellow;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
#homepage-top-category-container-item-a{
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-b{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-c{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-d{
margin-left: 20px;
width: 240px;
height: 360px;
}
.test{
position:relative;
bottom:0;
background-color: red;
}
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">Most popular aisles</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-a">
block A
<div class="test">
button
</div>
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-b">
block B
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-c">
block C
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-d">
block D
</div>
</div>
</div>
</div>
I will appreciate any help from our community.
Thanks.

If you used flex, then use it again and add margins to the button to make it simple:
.homepage-wrapper{
max-width: 1028px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
padding: 15px 0 15px 0;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{
display: flex;
flex-wrap:wrap;
width: auto;
height: auto;
background-color: yellow;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
#homepage-top-category-container-item-a{
width: 240px;
height: 360px;
display:flex;/* added */
flex-flow:column;/* added */
}
#homepage-top-category-container-item-b{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-c{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-d{
margin-left: 20px;
width: 240px;
height: 360px;
}
.test{
margin-top:auto;/* added */
margin-bottom:0;/* added */
background-color: red;
}
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">Most popular aisles</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-a">
block A
<p>paragraph</p>
<div class="test">
button
</div>
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-b">
block B
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-c">
block C
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-d">
block D
</div>
</div>
</div>
</div>
So the idea is to set margin-top:auto to button to push it all the way down, other sides can be having any value.
If you set auto for all 4 sides, then it will stand in the middle of the empty area (demo in snippet below).
.homepage-wrapper{
max-width: 1028px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
padding: 15px 0 15px 0;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{
display: flex;
flex-wrap:wrap;
width: auto;
height: auto;
background-color: yellow;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
#homepage-top-category-container-item-a{
width: 240px;
height: 360px;
display:flex;/* added */
flex-flow:column;/* added */
}
#homepage-top-category-container-item-b{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-c{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-d{
margin-left: 20px;
width: 240px;
height: 360px;
}
.test{
margin:auto;/* added */
background-color: red;
}
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">Most popular aisles</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-a">
block A
<p>paragraph</p>
<div class="test">
button
</div>
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-b">
block B
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-c">
block C
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-d">
block D
</div>
</div>
</div>
</div>

Just set the parent's position to relative, and the child's position to absolute. https://jsfiddle.net/yak613/d43eytfb/
.homepage-wrapper{
max-width: 1028px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
padding: 15px 0 15px 0;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{
display: flex;
flex-wrap:wrap;
width: auto;
height: auto;
background-color: yellow;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
position: relative;
}
#homepage-top-category-container-item-a{
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-b{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-c{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-d{
margin-left: 20px;
width: 240px;
height: 360px;
}
.test{
position:absolute;
left: 0;
right: 0;
bottom:0;
background-color: red;
}

To stick an element to bottom of its parent
#elem{
position: absolute:
bottom: 0;
}
But if it is a footer you must set parent height so go to the end screen.

We Keep Coding

JavaScript is the programming language of the Web.

Anyone have easy way to create this using css and html? - javascript

.box { display: flex; border-top:1px solid #000; } .box>div:not(:last-child) { border-left:1px solid #000; } .box>div:last-child { border-right:1px solid #000; } .box>div { flex: 1 1 auto; padding:10px; padding-top:40px; } <div class="box"> <div>Low</div> <div>Average</div> <div>High</div> </div>

Related

How to place the top left of a div element to the top right of a button?

How to toggle single class in jquery without affecting same class elements?

Create a new div on selecting the menu in javascript

Max-height: 0 not collapsing Div

put a div at the bottom of a parent div

Categories

Resources