Develop Reference

How to make my red circle always stays on the green line using html and css code?

I have a webpage like this:
Its code can be found here in JSFiddle
<div class="arrow">
<div class="line"></div>
<div class="triangle"></div>
</div>
<div id="warmup_container">
<p id="warmup_title">這是中文</p>
<div id="warmup_mark"></div>
<p id="warmup_text">some text </p>
</div>
:root {
--arrow-body-length: 500px;
--arrow-tip-length: 30px;
}
.arrow {
position: absolute;
top: 42%;
width: var(--arrow-body-length) + var(--arrow-tip-length);
}
.line {
margin-top: 11px;
width: var(--arrow-body-length);
background: green;
height: 9px;
float: left;
}
.triangle {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: var(--arrow-tip-length) solid green;
float: right;
}
#warmup_container {
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 8%;
}
#warmup_title {
text-align: center;
margin-top: 0px;
writing-mode: vertical-rl;
}
#warmup_mark {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
margin-top: 10px;
margin-bottom: -10px;
}
#warmup_text {
text-align: center;
width: 200px;
}
My problem is that when I add more characters into warmup_title, the red circle would not stay on the green line.
How can I change my code so that the red circle always stays on the green line no matter how many characters I type in warmup_title element?
The red circle might also not stay on the green line when I change the size of the window of my browser.

Try this:
:root {
--arrow-body-length: 500px;
--arrow-tip-length: 30px;
}
.arrow {
display: inline-flex;
position: absolute;
bottom: 40%;
width: var(--arrow-body-length) + var(--arrow-tip-length);
}
.line {
margin-top: 11px;
width: var(--arrow-body-length);
background: green;
height: 9px;
float: left;
}
.triangle {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: var(--arrow-tip-length) solid green;
float: right;
}
#warmup_container {
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 8%;
}
#warmup_title {
text-align: center;
margin-top: 0px;
writing-mode: vertical-rl;
}
#warmup_mark {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
margin-top: 10px;
margin-bottom: -10px;
z-index: 10;
}
#warmup_text {
text-align: center;
width: 200px;
}
<div id="warmup_container">
<p id="warmup_title">這是中文abc</p>
<div id="warmup_mark"></div>
<p id="warmup_text">some text </p>
<div class="arrow">
<div class="line"></div>
<div class="triangle"></div>
</div>
</div>

Your idea of fixing the green line is right, but it shouldn't use the top property, since the text can be extend, so it will break the visual. Instead make it bottom to anchor it at the end; also remove the height: 200px, add an outer div with position: relative to contain the absolute one.
About the breaking arrow when changing window size, i think make it width: 100% with a max-width to contain the width of it done better job than fixing it right away, so it can responsive with the screen size.
:root {
--arrow-body-length: calc(100% - 30px);
--arrow-tip-length: 30px;
}
.container {
position: relative;
}
.arrow {
position: absolute;
bottom: 35px;
width: var(--arrow-body-length) + var(--arrow-tip-length);
width: 100%;
max-width: 500px;
}
.line {
margin-top: 11px;
width: var(--arrow-body-length);
background: green;
height: 9px;
float: left;
}
.triangle {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: var(--arrow-tip-length) solid green;
float: right;
}
#warmup_container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
#warmup_title {
text-align: center;
margin-top: 0px;
writing-mode: vertical-rl;
}
#warmup_mark {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
margin-top: 10px;
margin-bottom: -10px;
}
#warmup_text {
text-align: center;
width: 200px;
}
<div class="container">
<div class="arrow">
<div class="line"></div>
<div class="triangle"></div>
</div>
<div id="warmup_container">
<p id="warmup_title">這是中文abc def</p>
<div id="warmup_mark"></div>
<p id="warmup_text">some text </p>
</div>
</div>

CSS3: Grow div from left to right while preserving original position

I'm attempting to create a calendar using HTML, CSS, and JavaScript. This calendar is meant to display upcoming/past events, and I'm struggling to get my event blocks to fill the rest of the calendar days from left to right. You can see an example of the current calendar below.
Here's an example of how my table cells are structured within my project:
.cell-container{
display: flex;
justify-content: center;
margin: 0px;
align-items: center;
width: 200px;
height: 100px;
border: 1px solid black;
}
.date-label{
font-weight: bold;
}
.table-cell{
display: flex;
}
.inner-container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.event{
border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
width: 150%;
background-color: cornflowerblue;
position: relative;
top: 0px;
left: 0px;
}
<div class="table-cell">
<div class="cell-container">
<div class="inner-container">
<label class="date-label">23</label>
<div class="event">Event #4:00 pm</div>
</div>
</div>
<div class="cell-container">
<div class="inner-container">
<label class="date-label">24</label>
</div>
</div>
<div class="cell-container">
<div class="inner-container">
<label class="date-label">25</label>
</div>
</div>
</div>
As you can see from the snippet, my event continues to expand both left and right, instead of expanding explicitly to the right. I've tried using position: sticky and position: absolute but both end in the same result.
Is there any way that I can restrict the direction that the div expands? or is this not a possibility? Any and all feedback would be appreciated, TIA!

You can achieve this by setting justify-content to flex-start
and removing align-items: center in the inner-container class.
Add align-self: center; to the date-label class to keep it centered :
.cell-container{
display: flex;
justify-content: center;
margin: 0px;
align-items: center;
width: 200px;
height: 100px;
border: 1px solid black;
}
.date-label{
font-weight: bold;
align-self: center;
}
.table-cell{
display: flex;
}
.inner-container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.event{
border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
width: 150%;
background-color: cornflowerblue;
position: relative;
top: 0px;
left: 0px;
}
<div class="table-cell">
<div class="cell-container">
<div class="inner-container">
<label class="date-label">23</label>
<div class="event">Event #4:00 pm</div>
</div>
</div>
<div class="cell-container">
<div class="inner-container">
<label class="date-label">24</label>
</div>
</div>
<div class="cell-container">
<div class="inner-container">
<label class="date-label">25</label>
</div>
</div>
</div>

You have to remove the the align-items property in the inner container to expand from the left. (You could also set it to start or normal). If you want the date number to remain centered, you have to set the align-self property to center. See below.
.cell-container{
display: flex;
justify-content: center;
margin: 0px;
align-items: center;
width: 200px;
height: 100px;
border: 1px solid black;
}
.date-label{
font-weight: bold;
}
.table-cell{
display: flex;
align-self: center;
}
.inner-container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.event{
border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
width: 150%;
background-color: cornflowerblue;
position: relative;
top: 0px;
left: 0px;
}
<div class="table-cell">
<div class="cell-container">
<div class="inner-container">
<label class="date-label">23</label>
<div class="event">Event #4:00 pm</div>
</div>
</div>
<div class="cell-container">
<div class="inner-container">
<label class="date-label">24</label>
</div>
</div>
<div class="cell-container">
<div class="inner-container">
<label class="date-label">25</label>
</div>
</div>
</div>

fade in text left to right or vice-versa

I need to know how to make the text appear as the div floating_mask grows.
right now the text while growing the div the text is put in two lines when the translation ends as the div is already at 100% if it stays as it has to be.
.floating {
display: flex;
align-items: center;
padding: 4px;
justify-content: flex-start;
}
.container {
z-index: 1;
margin-left: 60px;
margin-right: 20px;
}
.mask {
overflow: hidden;
position: relative;
border: 1px solid lightgrey;
height: 54px;
width: 54px;
transition: width 1s;
display: flex;
align-items: center;
transform: translateX(2px);
}
.button:hover + .mask{
width: 200px;
}
.button {
position: absolute;
border: 1px solid lightgrey;
border-radius: 50%;
background-color: white;
padding: 12px;
z-index: 2;
top:17px;
left:17px;
}
}
<div class="floating">
<button type="button" class="button ">
Icon
</button>
<div class="mask">
<div class="container">
<p style="margin: 0;font-size:14px">Message group</p>
<p style="margin: 0;font-size:14px">Message group</p>
</div>
</div>
</div>

Easy way is using in between words.
.floating {
display: flex;
align-items: center;
padding: 4px;
justify-content: flex-start;
}
.container {
z-index: 1;
margin-left: 60px;
margin-right: 20px;
}
.mask {
overflow: hidden;
position: relative;
border: 1px solid lightgrey;
height: 54px;
width: 54px;
transition: width 1s;
display: flex;
align-items: center;
transform: translateX(2px);
}
.button:hover + .mask{
width: 200px;
}
.button {
position: absolute;
border: 1px solid lightgrey;
border-radius: 50%;
background-color: white;
padding: 12px;
z-index: 2;
top:17px;
left:17px;
}
}
<div class="floating">
<button type="button" class="button ">
Icon
</button>
<div class="mask">
<div class="container">
<p style="margin: 0;font-size:14px">Message group</p>
<p style="margin: 0;font-size:14px">Message group</p>
</div>
</div>
</div>

Try this css :
.container {
z-index: 1;
margin-left: 60px;
margin-right: 20px;
position: absolute;
white-space: nowrap;
animation: floatText 5s infinite alternate ease-in-out;
}
Here is fiddle : https://jsfiddle.net/15n3quaL/

Sticky header script doesn't account for variable height of window

I have a sticky header that utilizes the process found here (https://www.w3schools.com/howto/howto_js_sticky_header.asp). This works great. However, this does not account for variable heights of the hero element above the header. When you resize the window vertically, the sticky header breaks until you refresh the browser. What do I need to add to the script so that it detects the new height upon resizing?
Here is a codepen displaying my dilemma: https://codepen.io/JKDESIGN44/pen/VwYBqBV
Here is the javascript:
// STICKY HEADER
document.addEventListener('DOMContentLoaded', function () {
// When the event DOMContentLoaded occurs, it is safe to access the DOM
// When the user scrolls the page, execute myFunction
window.addEventListener('scroll', myFunctionForSticky);
// Get the navbar
var navbar = document.getElementById("c3Header");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position.
// Remove "sticky" when you leave the scroll position
function myFunctionForSticky() {
if (window.pageYOffset >= sticky) {
console.log("window.pageYOffset >= sticky");
} else {
console.log("Not window.pageYOffset >= sticky");
}
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
})

You don't need any JS to accomplish this. All you need are two lines of css to be able to accomplish the same, with way less complexity.
Take a look at this:
html, body, header{
margin: 0px;
padding: 0px;
}
.full-height-section{
height: 100vh;
width: 100%;
position: relative;
}
a{
text-decoration: none;
font-family: 'Montserrat', sans-serif;
color: inherit;
}
li{
list-style-type: none;
text-transform: uppercase;
font-size: 15px;
letter-spacing: 2px;
transition: all 0.1s ease;
}
.bg-aqua{
background-color: #073038;
}
.text-white{
color: #FFFFFF;
transition: all 0.1s ease;
font-family:
}
.text-hover-blue:hover{
color: #7DD2EF;
transition: all 0.1s ease;
}
/* --------------HEADER---- */
/* ----HERO---- */
.hero{
height: 100vh;
width: 100vw;
min-height: 500px;
position: relative;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.hero-text{
font-size: 40px;
text-transform: uppercase;
z-index: 20;
}
.content-hero{
height: 25vh;
width: 100vw;
min-height: 500px;
position: relative;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.hero-bg{
display: block;
object-fit: cover;
z-index: -1;
position: absolute;
min-height: 500px;
}
.hero-logo-wrap{
align-self: center;
height: 30vw;
max-height: 50vh;
min-height: 200px;
z-index: 10;
}
.hero-logo{
height: 100%;
}
.down-arrow-wrapper{
height: 50px;
width: 50px;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 40px;
border-radius: 999px;
background-color: rgba(125,210,239,0.0);
transition: all 0.5s ease;
z-index: 10;
}
.down-arrow-wrapper:hover{
background-color: rgba(125,210,239,1.0);
transition: all 0.5s ease;
transform: scale(1.2)
}
.down-arrow-rel-wrapper{
height: 50px;
width: 50px;
position: relative;
}
.down-arrow{
height: 20px;
width: 20px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 8px;
transform: rotate(45deg);
border-right: solid #fff 3px;
border-bottom: solid #fff 3px;
}
.img-overlay{
height: 100%;
width: 100%;
position: absolute;
margin: auto;
top: 0;
mix-blend-mode: overlay;
background: rgb(3,31,36);
background: -moz-linear-gradient(148deg, rgba(3,31,36,1) 0%, rgba(125,210,239,1) 100%);
background: -webkit-linear-gradient(148deg, rgba(3,31,36,1) 0%, rgba(125,210,239,1) 100%);
background: linear-gradient(148deg, rgba(3,31,36,1) 0%, rgba(125,210,239,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#031f24",endColorstr="#7dd2ef",GradientType=1);
}
/* ----HERO END---- */
.header{
height: 150px;
width: 100%;
z-index: 100;
display: flex;
justify-content: center;
position: sticky;
top: 0;
}
.content-header{
width: 100%;
z-index: 100;
display: flex;
flex-direction: column;
}
.sticky{
position: fixed;
top: 0;
width: 100%;
}
.sticky + .page-wrapper{
padding-top: 150px;
}
.nav-flexbox{
height: 150px;
width: 80%;
max-width: 1500px;
min-width: 1000px;
position: relative;
/*
position: absolute;
margin: auto;
left: 0;
right: 0;
*/
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.nav-left{
display: flex;
flex-direction: row;
justify-content: space-between;
text-transform: uppercase;
letter-spacing: 2px;
width: 100%;
}
.nav-center{
width: 70%;
display: flex;
justify-content: center;
align-items: center;
}
.header-logo{
height: 80px;
z-index: 999;
}
.header-logo-link{
transition: all 0.5s ease;
}
.header-logo-link:hover{
transform: scale(1.2);
transition: all 0.5s ease;
}
.nav-right{
display: flex;
flex-direction: row;
justify-content: space-between;
text-transform: uppercase;
letter-spacing: 2px;
width: 100%;
}
.tab-nav-center{
display: none;
}
.tab-nav-right{
display: none;
}
.content-sub-nav{
height: 50px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
}
.sub-nav-arrow {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 30px solid #031F24;
position: absolute;
margin: auto;
bottom: 0;
left: 10px;
}
/* ---------------HEADER END---- */
.content-section{
height: calc(100vh - 150px);
display: flex;
justify-content: center;
align-items: center;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap" rel="stylesheet">
</head>
<header>
<!----------------
HERO
------------------>
<div class="hero full-height-section">
<div class="hero-logo-wrap">
<img src="http://c3.abettermancc.com/wp-content/uploads/2019/09/Primary-Logo_Vertical.png" class="hero-logo">
</div>
<a href="#c3Header">
<div class="down-arrow-wrapper">
<div class="down-arrow">
</div>
</div>
</a>
<img src="http://c3.abettermancc.com/wp-content/uploads/2019/09/audience-black-and-white-black-and-white-2014773.jpg" class="hero-bg full-height-section">
<!--------------Overlay -->
<div class="bg-aqua" style="width: 100%; height: 100%; position: absolute;
margin: auto; top: 0; opacity: 0.7; z-index: 9;">
</div>
<div class="img-overlay" style="z-index: 9;">
</div>
<!--------------Overlay END -->
</div>
<!----------------
HERO END
------------------>
</header>
<!----------------
NAVIGATION
------------------>
<nav class="header bg-aqua text-white" id="c3Header">
<div class="nav-flexbox">
<div class="nav-left">
<li>who we are</li>
<li>ministries</li>
<li>sermons</li>
</div>
<div class="nav-center">
<a href="#" class="header-logo-link">
<img src="http://c3.abettermancc.com/wp-content/uploads/2019/09/Primary-Icon-01.png" class="header-logo">
</a>
</div>
<div class="nav-right">
<li>get connected</li>
<li>events</li>
<li>give online</li>
</div>
</div>
</nav>
<!----------------
NAVIGATION END
------------------>
<div class="content-section" style="background-color: #888888;">
<p>SECTION 1</p>
</div>
<div class="content-section" style="background-color: #999999;">
<p>SECTION 2</p>
</div>
<div class="content-section" style="background-color: #888888;">
<p>SECTION 3</p>
</div>
The trick was adding:
position: sticky;
top: 0;
To the .header class. The top:0 states that this class content will only get sticky when it reaches 0 offset from the top (meaning, just at the top of the page).

How to center a panel with icon and wrapped(!) text with CSS or JavaScript?

Is it possible to center the content (icon + text) within the container horizontally and vertically, if the text happens to wrap? It seems that CSS engine does not calculate a visible width of the wrapped text and my current solution does not work... Please look at this https://jsfiddle.net/wabrm1st/
html:
<a href=# class="box">
<span class="icon"></span>
<span class="text">How can I center when_it_wrapped?</span>
</a>
css:
* { box-sizing: border-box; }
.box {
display: flex;
align-items: center;
justify-content: center;
width: 320px;
height: 100px;
text-decoration: none;
padding: 0 30px;
border: 1px solid red;
}
.icon {
height: 40px;
min-width: 40px;
background: #edc;
margin-right: 10px;
}
Maybe, it is possible to calculate the width of the wrapped text in JavaScript?

Here is a quick workup of the solution I mentioned earlier. I'll see if I can clean it up and make it more optimal later. If you want to avoid using flexbox you can use position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;. Again, I'll see if I can send you that solution later as well.
.container {
width: 220px;
height: 100px;
display: flex;
margin: 0 auto;
background: #ccc;
justify-content: center;
align-items: center;
}
.box{
width: 80%;
text-decoration: none;
border: 1px solid red;
display: flex;
flex-direction: row;
align-items: center;
}
.icon {
height: 40%;
width: 20%;
float: left;
background: #000;
margin-right: 5%;
}
.text {
text-decoration: none;
border: 1px solid red;
text-align: center;
}
<body>
<div class="container">
<a href="#" class="box">
<span class="icon"></span>
<span class="text">How can I center when_it_wrapped?</span>
</a>
</div>
</body>