We Keep Coding

Div going up, on scroll down

I am creating a single article page to show articles.What i wanted is to have a nice background (article image)and my article body,around midway of my page.When i scroll down though,i want the article body to go up.
This is what i have done so far.I tried to play around with scrollY and what i'm essentially trying to do is subtract from my "top" attibute ,every time there is a scroll. F.e. my article body has top=100px,when i scroll down 20px,i want my "top" to be 100-20=80.
const container = document.getElementById('article-container');
window.addEventListener('scroll',()=>{
console.log(scrollY)
container.style.top= `${378-scrollY} px`
})
main{
display: flex;
flex-direction: column;
align-items: center;
}
.article-image{
position: absolute;
z-index: 0.9;
min-height: 85vh;
opacity: 0.9;
}
.article-container{
width: 50%;
position: relative;
top: 35vh;
z-index:1;
background-color: white;
min-height: 50vh;
padding: 30px;
color: #1A2434;
-webkit-box-shadow: 0px 0px 15px 5px #1A2434 ;
box-shadow: 0px 0px 15px 5px #1A2434 ;
}
.article-container h1{
font-size: 3rem;
}
.article-container .date{
font-size: 0.8rem;
padding-top: 4vh;
font-family: 'Zona Pro Thin';
color: rgba(0, 0, 0, 0.5);
}
.article-container .article-description{
font-size: 1.2 rem;
padding-top: 4vh;
font-family: 'Zona Pro Thin';
color:#1a2434d0;
font-weight: bolder;
}
<main>
<img class='article-image' src="<%= article.image %>">
<div class="article-container" id="article-container">
<h1>Article Title</h1>
<div class="date">
21/6/2022
</div>
<div class="article-description">
Article Description
</div>
</div>
</main>

No need to JS, You can make a div as background and set it's height:100vh; overflow-y: overlay|scroll; and background: url('your photo') no-repeat center fixed;.
Then create another div for holding your articles and add margin-top:50vh; to it, and ... there you go :)
body {
margin: 0;
overflow: hidden;
}
main {
display: flex;
flex-direction: column;
/* set your picture's link here */
background: url("https://source.unsplash.com/iuyR_HEwk24/1600x900") no-repeat center fixed;
background-size: cover;
height: 100vh;
overflow-y: overlay;
}
.articles {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 50vh;
}
.article-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 15px;
width: 45vw;
padding: 30px;
color: #1a2434;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
border-radius: 15px;
}
.article-container:last-child {
margin-bottom: 30px;
}
<main>
<div class="articles">
<div class="article-container" id="article-container">
<h1>Article Title</h1>
<div class="date">21/6/2022</div>
<div class="article-description">Article Description</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a typespecimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently withdesktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy textever since the 1500s, when anunknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Itwas popularised in the 1960s with therelease of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy textof the printing and typesetting industry. LoremIpsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not onlyfive centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishingsoftware like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="article-container" id="article-container">
<h1>Article Title</h1>
<div class="date">21/6/2022</div>
<div class="article-description">Article Description</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a typespecimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,</p>
</div>
</div>
</main>

How to set unique style to tool tip attribute?

I have tool tip attribute in my table, I want to set width to this attribute related to my column width, so I have different size tool tips. I have different column widths and I want to set width to the tool tip based on my column width, I mean how can I access data-md-tooptip attribute (tool tip element) through JavaScript and ad style like document.querySelector([data-md-tooltip]).style.width = "000px"
[data-md-tooltip] {
position: relative;
}
[data-md-tooltip]:before {
content: attr(data-md-tooltip);
position: absolute;
/*width: 360px;*/
top: 95%;
left: 50%;
padding: 8px;
transform: translateX(-50%) scale(0);
transition: transform 0.2s ease-in-out;
transform-origin: top;
background: #232F34;
color: white;
border-radius: 2px;
font-size: 12px;
font-family: Roboto, sans-serif;
font-weight: 400;
z-index: 2;
}
[data-md-tooltip]:hover:before {
transform: translateX(-50%) scale(1);
}
<td class="mdc-data-table__cell" data-md-tooltip="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since">
<div class="long-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
</div>
</td>
<hr>
<!-- Here I want different tool tip width -->
<td class="mdc-data-table__cell" data-md-tooltip="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since">
<div class="long-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since,L
</div>
</td>

document.querySelector requires a String as a parameter so you need to write
document.querySelector('[data-md-tooltip]').style.width = ...
But this method will return only the first element matched by that selector: if you need to apply the style to more than one [data-md-tooltip] element you need to use document.querySelectorAll and walk over the node collection you retrieve (e.g. using the spread ... operator)
[...document.querySelectorAll('[data-md-tooltip]')].forEach((tt) => {
tt.width = ...
})

How to align three text expressions evenly and centered in one line vertically

I have a single page HTML which I want its header contents in mobile/tablet to be like in the photo attached . I have tried several ways but no luck :
Here is the desired result :
And Here is the Code I've Used :
body {
margin: 0;
background-color: black;
}
.title {
text-align: center;
background-color : white;
color : black;
height: 100px;
padding: 35px 0;
margin: 0;
width: 100%;
z-index: 1;
position: fixed;
font-family: Clearface, sans-serif;
font-size: 40px;
}
.header #accordion-0 {
font-size: 25px;
}
#about {
background-color: black;
color : white;
float : left;
width : 50%;
height : 100vh;
font-family: Clearface, sans-serif;
margin-top: 170px;
position: fixed;
}
#about h2 {
font-size: 80px;
padding: 30px 70px 0 70px;
}
#about p {
font-size: 30px;
padding : 70px;
padding-top: 0;
}
#projects .accordion {
background-color: #333648;
color: white;
cursor: pointer;
padding: 20px;
width: 100%;
border: none;
text-align: center;
outline: none;
font-size: 17px;
transition: 0.5s;
height: 20%;
font-family: 'Univers LT Std', sans-serif;
font-size: 20px;
opacity: 0.7;
}
#projects .active, #projects .accordion:hover {
background-color: #ccc;
color: black;
opacity: 1;
}
.panel {
padding:0 18px;
background-color: white;
max-height: 0;
overflow-y: hidden;
transition: max-height 0.3s ease-out;
}
.post {
padding: 0 20%;
font-family: 'Univers LT Std', sans-serif;
font-size: 20px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
margin: 50px auto;
}
#projects {
float : right;
width: 50%;
height: 100vh;
font-family: 'Univers LT Std', sans-serif;
font-size : 20px;
margin-top: 170px;
}
#about-accordion h2, #about-accordion p{
font-family: Clearface, sans-serif;
}
#about-accordion .panel{
background-color: black;
color : white;
}
#about-accordion {
font-size: 30px;
}
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#about {
display : none;
}
#projects {
width: 100%;
}
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
#about {
display : none;
}
#projects {
width: 100%;
}
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
#about-accordion {
display : none;
}
.header #accordion-0 {
display : none;
}
#dash {
display : none;
}
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
#about-accordion {
display : none;
}
.header #accordion-0 {
display : none;
}
#dash {
display : none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 class="header title">
<span id="hello-back"> Hello <br> Back </span>
<span id="dash"> - </span>
<span id="accordion-0" class="accordion">About Me</span>
</h1>
<div id="about">
<h2>
Hello!
</h2>
<p>
Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum har inte bara överlevt fem århundraden, utan även övergången till elektronisk typografi utan större förändringar. Det blev allmänt känt på 1960-talet i samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare med mjukvaror som Aldus PageMaker.
</p>
</div>
<div id="projects">
<div id="about-accordion">
<div id="panel-0" class="panel">
<div class="post">
<h2>
Hello!
</h2>
<p>
Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum har inte bara överlevt fem århundraden, utan även övergången till elektronisk typografi utan större förändringar. Det blev allmänt känt på 1960-talet i samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare med mjukvaror som Aldus PageMaker.
</p>
</div>
</div>
</div>
<button id="accordion-1" class="accordion">Project 1</button>
<div id="panel-1" class="panel">
<div class="post">
<h2>TITLE HEADING</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div>
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
</div>
</div>
</div>
<button id="accordion-2" class="accordion">Project 2</button>
<div id="panel-2" class="panel">
<div class="post">
<h2>TITLE HEADING</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div>
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
</div>
</div>
</div>
<button id="accordion-3" class="accordion">Project 3</button>
<div id="panel-3" class="panel">
<div class="post">
<h2>TITLE HEADING</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div>
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
</div>
</div>
</div>
<button id="accordion-4" class="accordion">Project 4</button>
<div id="panel-4" class="panel">
<div class="post">
<h2>TITLE HEADING</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div>
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
</div>
</div>
</div>
<button id="accordion-5" class="accordion">Project 5</button>
<div id="panel-5" class="panel">
<div class="post">
<h2>TITLE HEADING</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div>
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
<script>
var accordion = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < accordion.length; i++) {
accordion[i].addEventListener("click", function() {
var patt = /(accordion-)(\d)/gm;
var match = patt.exec(this.id);
panel = document.getElementById("panel-" + match[2]);
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panels = document.getElementsByClassName('panel');
for(j = 0; j < panels.length; j++) {
if(panels[j].id != panel.id) {
panels[j].style.maxHeight = null;
panels[j].classList.remove('active');
}
}
panel.style.maxHeight = panel.scrollHeight + "px";
}
this.classList.toggle("active");
});
}
function hscrollbar() {
/* First, we need the horizontal scroll position of the viewer's display,
but there are different ways to call it in JS depending on browser.
I'm using the if/else shorthand notation to detect if a call is legit:
somevar = (statement) ? statement_true_value : statement_false_value */
var left =
/* window.pageXOffset should work for most recent browsers: */
window.pageXOffset ? window.pageXOffset :
/* If it DOESN'T, let's try this: */
document.documentElement.scrollLeft ? document.documentElement.scrollLeft :
/* And if THAT didn't work: */
document.body.scrollLeft;
/* Now that we have the horizontal scroll position, set #footpanel's left
position to NEGATIVE the value, so it APPEARS to follow the scroll: */
document.getElementById('about').style.left = -left;
}
window.onscroll = hscrollbar; /* Call the function when the user scrolls */
window.onresize = hscrollbar; /* Call the function when the window resizes */
</script>
</body>
</html>

You can use flex-box, add to your .title class the following:
.title {
display: flex;
justify-content: space-between;
align-items: center;
}

how to scroll over fixed div

So I want to be able to scroll through my page while hovering over a div (the header) with position: fixed;. Is there any (easy) way to do this?
I've found a similar question here, but in my case there are links (<a></a>) inside that div and those should work, so pointer-events: none; does not help in my case..
Thanks already!
This is my CSS for the header:
#header {
height: 90vh;
min-height: 80px;
max-height: 90vh;
background-color: rgb(30,30,30);
position: fixed;
top: 0;
left: 0;
box-shadow: 0 0 15px rgb(0,0,0);
z-index: 1;
}

Hi I think you need this:
#navcontainer
{
position:fixed;
background:red;
left:0;
right:0;
top:0;
height:100px;
z-index:3;
}
#navcontainer a{
float:left;
margin-right:10px;
}
.content
{
position:relative;
background:green;
left:0;
right:0;
padding:10px;
top:90px;
z-index:2;
}
.content .text
{
padding:10px;
background:yellow;
}
<div id="navcontainer">
Menu item 1
Menu item 2
Menu item 3
</div>
<div class="content">
<div class="text">
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
</div>
</div>

Text floating around a div

Im trying to make text flowing around the image, in a different scenario. the image wont be inside the content. Image would be a seperate component and the div with text will be a seperate component. So markup will look like this
<img class="imgtofloat" src="images/1.png" alt="" />
<div class="divwithcontent">
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
</div>
The scenario is that we cant change the markup but we need to position the image between the content and make the content float around it.
EDIT 1:
I need the image to be in the center of the content as it is in this image https://www.flickr.com/photos/41695354#N08/14477076543/

We can stretch our CSS imagination. Hide the image and replace it with background.
Example, possibly adaptable.
Have a fiddle!
CSS
img {
display: none;
}
p:first-child:after {
content: "";
display: block;
float: left;
width: 100px;
height: 100px;
background: url(http://www.placehold.it/100) no-repeat;
margin: 20px;
}

If you can Change the image placement.
step 1) put image in between the paragraph text.
step 2) and one attribute in img tag align="left"

You can also use inline style, if you just have a few CSS rules.
<img src="images/1.png" alt="" style="float: left" />