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>
Related
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.
I have a semi-working HTML template for a car showroom, but this can be modified for any items for sale list:
body {
background-color: #FFF;
font-family: Helvetica, Arial, sans-serif;
}
a {
text-decoration: none;
}
header.sct1 {
background-color: #2B60DE;
border-radius: 0px;
color: #FFF;
margin: 10px;
padding: 20px;
}
img.logo1 {
width: 200px;
}
.wrapper {
border: 2px solid;
}
.content {
background-color: #FFF;
margin: 10px;
width: 800px;
margin-left: 20px;
}
footer.sct1 {
background-color: #2B60DE;
color: #FFF;
margin: 10px;
padding: 10px;
}
footer.caautos h2, footer.caautos h3 {
margin: 10px;
}
div.caautos1 {
width: 900px;
display: inline-grid;
grid-template-columns: 400px 2fr;
grid-column: 1 / span 1;
column-gap: 90px;
}
div.content {
background-color: #FFF;
width: 800px;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
}
div.content p {
margin-left: 5px;
}
.results-vehicleresult {
margin: 20px;
}
.columns-vehicleresult {
border-radius: 0px;
background-color: #FFFFFF;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
border: 2px solid;
margin-bottom: 20px;
}
.columns-vehicleresult {
font-size: 0.8rem;
margin-left: 90px;
}
.columns-vehicleresult .column {
flex: 33.33%;
}
/*
.columns-vehicleresult .column p {
color: #333;
font-family: HelveticaCondensed, sans-serif;
font-size: 14px;
transform:scaleX(1.2);
width: 400px;
margin-left: 20px;
margin-top: 20px;
text-transform: uppercase;
}
*/
.columns-vehicleresult .column p {
color: #333;
font-family: Helvetica, sans-serif;
font-size: 14px;
font-weight: 400;
margin-left: -5px;
margin-top: 30px;
}
.columns-vehicleresult .column p b {
font-family: Helvetica, sans-serif;
font-weight: 600;
}
h1.eurola {
font-size: 240%;
}
.vehiclesold {
color: red;
}
picture {
flex-direction: row;
max-width: 46%;
margin-left: -20px;
}
/*
picture img {
max-width: 350px;
height: auto;
margin-right: 2px;
margin: 30px;
}
*/
/*
picture img {
max-width: 350px;
height: auto;
max-width: 340px;
margin-right: 2px;
margin: 30px;
}
*/
/*
picture img {
display: inline-block;
width: 262px;
height: 198px;
margin-right: 5px;
margin: 30px;
}
*/
picture img {
display: inline-block;
width: 262px;
margin-right: 5px;
margin: 30px;
}
picture::after {
content: "Image for illustration purposes only";
display: block;
top: 50%;
transform: translateY(-240%);
font-weight: 600;
font-size: 11px;
margin-left: 30px;
}
ul.mauen {
background-color:#333;
color: #FFF;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.mauen li {
float: left;
}
ul.mauen a {
display: block;
padding: 8px;
background-color: #dddddd;
}
ul.imagallery1 {
list-style-type: none;
margin-top: -5px;
margin-left: -30px;
}
.imagallery1 li {
display: inline;
margin: 0;
}
/*
.imagallery1 img {
width: 20%;
height: auto;
}
*/
.imagallery1 img {
background: rgb(247, 247, 245);
width: 100px;
height: 75px;
}
img.hald {
width: 230px;
}
div.logo-112 h2 {
color: yellow;
font-size: 36px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #FFF;
}
.logo-112 blockquote {
font-weight: 700;
}
img.imglogo1 {
height: 320px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Chelsea Motors - Jacksdale, Nottinghamshire - Used cars in Notts, Derbyshire</title>
<link rel="stylesheet" type="text/css" href="styles1/chelsea-motors-jacksdale.css">
</head>
<body>
<div class="wrapper">
<header class="sct1">
<h2>YOUR CAR SHOWROOM</h2>
</header>
<div class="content">
<p>Welcome to Your Car Showroom</p>
<div class="results-vehicleresult">
<div class="columns-vehicleresult">
<picture>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/2000_Chrysler_Cirrus_%2826663723242%29.jpg/1920px-2000_Chrysler_Cirrus_%2826663723242%29.jpg">
</picture>
<div class="column">
<p><b>2000 CHRYSLER CIRRUS 3.0 V6 LXi 4dr</b> gold <b>£3995</b></p>
</div>
<div class="column">
<ul class="imagallery1">
</ul>
</div>
</div>
<div class="columns-vehicleresult">
<picture>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/2000_Chrysler_Cirrus_%2826663723242%29.jpg/1920px-2000_Chrysler_Cirrus_%2826663723242%29.jpg">
</picture>
<div class="column">
<p><b>2000 CHRYSLER CIRRUS 3.0 V6 LXi 4dr</b> gold <b>£3995</b></p>
</div>
<div class="column">
<ul class="imagallery1">
</ul>
</div>
</div><div class="columns-vehicleresult">
<picture>
<img src="https://live.staticflickr.com/65535/51153373086_9061d66b91_z.jpg">
</picture>
<div class="column">
<p><b>1993 CHEVROLET BUICK CENTURY LIMITED 3.8 V6</b> 4dr, blue <b>£3995</b></p>
</div>
<div class="column">
<ul class="imagallery1">
</ul>
</div>
</div>
</div>
</div>
<footer class="sct1">
<div class="caautos1">
<h1>1 Anytown Road, Worksop, Nottinghamshire S80 1AN</h1>
<h1>✆ 01909 496000</h1>
</div>
</footer>
© 2022
</div>
</body>
</html>
For some reason, text overflows if you've set 130% zoom on Firefox as default (which I need to in my default profile) for the div.caautos part within the footer, is there a way to fix CSS per-zoom and make this look slightly better?
It's functional but I want to try and fix any mistakes regarding aesthetics and zoom to ensure it looks and works properly.
when you change page zoom, the browser changes resolution. use #media for a specific resolution.
you can read about that here.
As shown in above image, I need to position DIV on the corner of the button clicked. This button can be any where on the page but when clicked it is opening a div and I want to set the position so it opens the div on its corner like in the image.
The div I want to open will be outside of div containing the button.
function openPopup() {
document.getElementById('test').style.display = 'contents';
}
function closePopup() {
document.getElementById('test').style.display = 'none';
}
.popup-div {
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
display: none;
}
.popup {
position: absolute;
top: 0px;
left: 0px;
margin: 100px auto;
width: 200px;
height: 150px;
font-family: verdana;
font-size: 13px;
padding: 10px;
background-color: rgb(240, 240, 240);
border: 2px solid grey;
z-index: 100000000000000000;
display: none
}
.cancel {
display: relative;
cursor: pointer;
margin: 0;
float: right;
height: 10px;
width: 14px;
padding: 0 0 5px 0;
background-color: red;
text-align: center;
font-weight: bold;
font-size: 11px;
color: white;
border-radius: 3px;
z-index: 100000000000000000;
}
.cancel:hover {
background: rgb(255, 50, 50);
}
<div id="test" class=" popup-div">
This is a test message
<div class="cancel" onclick="closePopup();"></div>
</div>
<button onClick="openPopup();">BUTTON</button>
html:
<div class="container">
<button>Button</button>
<div id="popup"></div>
</div>
css:
.cont {
position: relative;
}
#popup {
position: absolute;
top: /* insert button height (incl. padding) here */
}
.container {
border: 2px solid red;
}
#popup {
display: none;
position: absolute;
top: 10px;
right: 15px;
height: 85%;
width: 40%;
background: red;
font-size: 55px;
color: #fff;
text-align: center;
}
h1 {}
.clsbtn {
margin-left: 80%;
}
<br> <br> <br> <br> <br> <br>
<div class="container">
<br> <br> <br>
<button onclick="document.getElementById('popup').style.display='block'">Button</button>
<div id="popup">
<span onclick="document.getElementById('popup').style.display='none'" class="clsbtn">×</span>
<h1> div </h1>
</div>
</div>
.page-section {
background-color: #035DA9;
font-family: "Mulish", sans-serif;
}
.logo-image {
width: 270px;
margin: 12px 0px 0px 12px;
}
.header-section {
display: flex;
}
.navbarLinks {
color: white;
margin-top: 40px;
position: absolute;
right: 0px;
}
.navbarLinks a {
text-decoration: none;
background-color: transparent;
margin-right: 39px;
color: white;
}
.middle-section{
width: 100vw;
margin-left: -8px;
}
.md-sec-1 {
background-color: #203546;
display: flex;
}
.middle-section-image {
width: 270px;
background-color: transparent;
padding: 50px;
}
.text-section {
color: white;
margin-top: 20px;
}
.text-section p{
word-spacing: 5px;
}
.md-sec-2{
color: white;
margin-top: auto;
margin-bottom: auto;
}
.md-sec-2 h3 {
text-align: center;
}
.footer-section {
background-color: white;
height: auto;
position: absolute;
width: 100vw;
bottom: 0px;
margin-left: 0px;
display: flex;
}
.btn {
color: white;
background: #203546;
border: 0px;
border-radius: 4px;
display: block;
margin-left: auto;
margin-right: auto;
/* margin-left: 47%; */
padding: 10px 20px;
margin-top: 12px;
}
.icons{
padding: 17px;
padding-left: 30px;
}
.icons a{
text-decoration: none;
background-color: transparent;
padding: 0px 6px;
}
.color-black {
color: black;
}
#media only screen and (max-width: 900px){
.update-contact-section{
margin-right: 10px !important;
}
}
#media only screen and (max-width: 800px){
.update-image{
display: inherit !important;
height: auto;
}
.navbarLinks a {
margin-right: 10px;
}
.navbarLinks {
margin-top: 12px;
}
.logo-update {
width: 140px;
margin-left: 0px;
margin-top: 0px;
}
.image-responsive {
display: block;
margin-left: auto;
margin-right: auto;
width: 57%;
}
.header-section-update {
height: 7vh;
}
.header-center{
text-align: center;
margin-top: -40px;
/* font-size: 40px; */
}
.para-update {
padding: 0px 10px;
/* font-size: 30px; */
}
.fa-icon-update {
font-size: 10px;
padding-left: 0px;
}
.footer-text-update {
font-size: 10px;
margin-top: 21px;
}
.contact-update {
font-size: 8px;
margin-top: 23px;
}
.icons {
padding-left: 0px;
}
.text-section {
padding-bottom: 20px;
}
}
#media only screen and (max-width: 400px){
body{
font-size: 12px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Intern guys</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./app.css">
<script src='./font-awesome.js'></script>
</head>
<body class="page-section">
<div>
<div class="header-section header-section-update">
<div class="logo-section">
<img src="./images/logo_image.png" alt="logo" class="logo-image logo-update" />
</div>
<div class="navbarLinks">
Home
About us
Register
</div>
</div>
<div class="middle-section">
<div class="md-sec-1 update-image">
<div class="image-section">
<img src="./images/final-mid-image.png" alt="image" class="middle-section-image image-responsive" />
</div>
<div class="text-section">
<h3 class="header-center">WELOME TO THE INTERN GUYS</h3>
<P class="para-update">Congratulations, you have made the first and last step required to get your internship. Start by
creating your profile and you are up and ready for the internship.
But don't worry everything is automated, we know exactly where are the pain points are and
that’s why we promise to make this as smooth as possible.
<i>After all, we are the Inten guys</i>.
</P>
</div>
</div>
<div class="md-sec-2 btn-update">
<h3 class="quote-update">We are started by the students, built by the students and for the students</h3>
<button class="btn">Start now</button>
</div>
<div class="footer-section">
<div class="icons" style="width: 33vw;">
<i class='fab fa-twitter color-black fa-icon-update'></i>
<i class='fab fa-instagram color-black fa-icon-update'></i>
<i class='fab fa-linkedin color-black fa-icon-update'></i>
<i class='fab fa-tiktok color-black fa-icon-update'></i>
</div>
<div style="width: 33vw;">
<p style="text-align: center; " class="footer-text-update">Built with love in Irvine</p>
</div>
<div style="width: 33vw;">
<p style="float: right; margin-right: 30px;" class="update-contact-section contact-update">Conatct us: xyz#gmail.com</p>
</div>
</div>
</div>
</body>
</html>
I am making this email template for one of my projects. Here I want that the quote "We are started by students, built by the students ..... " should always appear in the middle(vertically), but I am not able to achieve it. Like if I see my page on a iPad, there is a lot of space between the footer and quote section.
So basically I have to align the content of a div in the middle vertically but for a variable height div. Can anyone please help me with this
Try this :
.md-sec-2{
color: white;
width:80vw;
height: 40vh;
margin:0 auto;
}
.quote-update,.btn{
position: relative;
top:50%;}
I have the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>StackOverflow Question</title>
<style>
.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
justify-content: stretch;
align-items: flex-end;
}
.scroller2{
height: 250px;
overflow-y: scroll;
}
.circle {
position: relative;
margin-bottom: 40px;
height: 20px;
display: flex;
align-items: center;
}
.circle::before {
content:"";
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 5px;
}
.circle::after {
position: absolute;
content: '';
left: 7.5px;
top: 20px;
width: 5px;
background: #4d4d4d;
height: 40px;
}
.minor::before {
background-color: purple;
}
.major::before {
background-color: red;
}
.gray::before {
background-color: gray;
}
.tlbtn {
background-color: #343434;
border-radius: 10px;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: robotobold;
}
#tltitle,.tlbtn{
display: inline-flex;
}
</style>
</head>
<body>
<script>
function btn1Click() {
document.getElementById("btn1").style.backgroundColor="#5c5c5c";
document.getElementById("btn2").style.backgroundColor="#343434";
}
function btn2Click() {
document.getElementById("btn2").style.backgroundColor="#5c5c5c";
document.getElementById("btn1").style.backgroundColor="#343434";
}
</script>
<div class="container--wrap-scroll scroller2" id="timeline">
<p id="tltitle" style="color: #D4E1E4; font-size: 20px; text-align: left; padding-top: 0px; padding-right: 10px;color: black;"><b>Timeline</b></p>
<div id="btn1" class="tlbtn" style="margin-bottom: -10px; background-color: #5c5c5c;" onclick="btn1Click();"><text style="font-size: 15px; font-family: robotobold;text-align: center;">Newest</text></div>
<div id="btn2" class="tlbtn" style="margin-bottom: -10px;" onclick="btn2Click();"><text style="font-size: 15px; font-family: robotobold; text-align: center;">Oldest</text></div>
<div class="circle major "><text style="color:red; font-family:robotolight; font-size: 12px;">Major Event | Yesterday</text></div>
<div class="circle gray"><text style="color:black; font-family:robotolight; font-size: 12px;">Information | 2 days ago</text></div>
<div class="circle gray"><text style="color:black; font-family:robotolight; font-size: 12px;">Information | 1 week ago</text></div>
<div class="circle minor"><text style="color:purple; font-family:robotolight; font-size: 12px;">Minor Event | 1 month ago</b></text></div>
</div>
</body>
</html>
When 'Oldest' is pressed, I would like the order of the div elements to reverse sort - please notice that the last circle has a line which goes below it, and I would like this to stay the same:
e.g. Major Event will be at the bottom when OLDEST is pressed and have a grey line below it as well.
Is there a way I can do this?
Screenshot:
If you want to use only CSS, you could try using Flexbox and switching between flex-direction column and column-reverse:
const timeline = document.getElementById('timeline');
const newestButton = document.getElementById('button--newest-first');
const oldestButton = document.getElementById('button--oldest-first');
newestButton.onclick = () => {
timeline.classList.remove('timeline--oldest-first');
timeline.classList.add('timeline--newest-first');
oldestButton.classList.remove('button--selected');
newestButton.classList.add('button--selected');
};
oldestButton.onclick = () => {
timeline.classList.add('timeline--oldest-first');
timeline.classList.remove('timeline--newest-first');
oldestButton.classList.add('button--selected');
newestButton.classList.remove('button--selected');
};
body {
margin: 0;
padding: 8px;
font-family: monospace;
font-size: 14px;
}
.header {
display: flex;
padding-bottom: 8px;
margin-bottom: 16px;
align-items: center;
border-bottom: 2px solid black;
}
.title {
margin-right: auto;
}
.button {
font-family: monospace;
font-size: 14px;
border-radius: 2px;
padding: 4px 8px;
margin-left: 8px;
cursor: pointer;
border: 0;
outline: none;
border: 2px solid black;
background: transparent;
}
.button--selected {
background: yellow;
}
.timeline {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.timeline--newest-first {
flex-direction: column;
}
.timeline--oldest-first {
flex-direction: column-reverse;
}
.circle {
position: relative;
margin-bottom: 16px;
height: 20px;
display: flex;
align-items: center;
}
.timeline--newest-first > .circle:last-child,
.timeline--oldest-first > .circle:first-child {
margin-bottom: 0;
}
.circle::before {
content:"";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin-right: 16px;
border: 2px solid black;
}
.circle::after {
position: absolute;
content: '';
left: 9px;
top: 20px;
width: 2px;
background: #000;
height: 16px;
}
.timeline--newest-first > .circle:last-child::after,
.timeline--oldest-first > .circle:first-child::after {
display: none;
}
.minor::before {
background-color: purple;
}
.major::before {
background-color: red;
}
.gray::before {
background-color: gray;
}
<header class="header">
<strong class="title">TIMELINE</strong>
<button id="button--newest-first" class="button button--selected">
NEWEST
</button>
<button id="button--oldest-first" class="button">
OLDEST
</button>
</header>
<ul class="timeline timeline--newest-first" id="timeline">
<li class="circle major ">
Major Event | Yesterday
</li>
<li class="circle gray">
Information | 2 days ago
</li>
<li class="circle gray">
Information | 1 week ago
</li>
<li class="circle minor">
Minor Event | 1 month ago
</li>
</ul>