Develop Reference

Only show elements if container is scrollable

This is the code:
// if there is something to scroll horizontally then (but only for this container):
$(document).ready(function() {
$(".scroll-area").scroll(function() {
if ($(this).scrollLeft() > 0) {
$(".left").css("display", "block");
}
if ($(this).scrollLeft() == 0) {
$(".left").css("display", "none");
}
var fullWidth = $(this)[0].scrollWidth - $(this)[0].offsetWidth - 1;
if ($(this).scrollLeft() >= fullWidth) {
$(".right").css("display", "none");
}
if ($(this).scrollLeft() < fullWidth) {
$(".right").css("display", "block");
}
});
});
// if there is nothing to scroll, don't show the gradients
* {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
}
.container {
width: 550px;
height: 80px;
background-color: grey;
position: relative;
margin-bottom: 20px;
}
.scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
.left,
.right {
width: 50px;
height: 100%;
position: absolute;
pointer-events: none;
top: 0;
}
.left {
background: linear-gradient(90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
left: 0;
display: none;
}
.right {
background: linear-gradient(-90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
right: 0;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="scroll-area">
<div class="text">Scroll to right. Gradients are needed. This container works like expected. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</div>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="scroll-area">
<div class="text">This container shouldn't show any gradient because nothing to scroll.</div>
</div>
</div>
There should be an if function added. The logic should be:
Show the gradient(s) only if there is something to scroll horizontally. If not, then hide the gradient(s). It should work with different containers independently on the same web page, and should update if the browser size changes.
Has someone an idea how to code that?

One way would be to loop thru all the .scroll-area elements and hide .left and .right elements if the scrollbar is visible. I added couple more containers to demonstrate:
// if there is something to scroll horizontally then (but only for this container):
$(document).ready(function() {
$(".scroll-area").each(function(index) {
if ($(this)[0].scrollWidth <= $(this)[0].clientWidth) {
$(this).closest(".container").find(".left").css("display", "none");
$(this).closest(".container").find(".right").css("display", "none");
} else {
$(this).scroll(function() {
if ($(this)[0].scrollWidth > $(this)[0].clientWidth) {
if ($(this).scrollLeft() > 0) {
$(this).closest(".container").find(".left").css("display", "block");
}
if ($(this).scrollLeft() == 0) {
$(this).closest(".container").find(".left").css("display", "none");
}
var fullWidth = $(this)[0].scrollWidth - $(this)[0].offsetWidth - 1;
if ($(this).scrollLeft() >= fullWidth) {
$(this).closest(".container").find(".right").css("display", "none");
}
if ($(this).scrollLeft() < fullWidth) {
$(this).closest(".container").find(".right").css("display", "block");
}
}
});
}
});
});
// if there is nothing to scroll, don't show the gradients
* {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
}
.container {
width: 550px;
height: 80px;
background-color: grey;
position: relative;
margin-bottom: 20px;
}
.scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
.left,
.right {
width: 50px;
height: 100%;
position: absolute;
pointer-events: none;
top: 0;
}
.left {
background: linear-gradient(90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
left: 0;
display: none;
}
.right {
background: linear-gradient(-90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
right: 0;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="container">
<div id="x" class="left"></div>
<div class="right"></div>
<div id="a" class="scroll-area">
<div class="text">Scroll to right. Gradients are needed. This container works like expected. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</div>
<div class="container">
<div id="y" class="left"></div>
<div class="right"></div>
<div id="b" class="scroll-area">
<div class="text">This container shouldn't show any gradient because nothing to scroll.</div>
</div>
</div>
<div class="container">
<div id="y" class="left"></div>
<div class="right"></div>
<div id="b" class="scroll-area">
<div class="text">This container shouldn't show any gradient because nothing to scroll.</div>
</div>
</div>
<div class="container">
<div id="x" class="left"></div>
<div class="right"></div>
<div id="a" class="scroll-area">
<div class="text">Scroll to right. Gradients are needed. This container works like expected. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</div>

Place (fixed) dropdown menus with javascript to avoid z-index inheritance issues

I am working on a project that includes pages to view and select actions on multiple different entities of the same category set. Those entities are presented in the form of cards (e.g. employees, projects etc). On each card there is a classic gear button that expands a hidden drop menu so that the user can select actions (which might be the same or different for each entity/card). In order to avoid z-index inheritance issues (e.g. drop menu appearing on top of the parent but behind the sibling card) I implemented the solution presented in the link below (minimal representation).
The solution seems to be working fine, but i am wondering if it is elegant / acceptable in the context of implementing it on a production environment. If someone could comment on it or propose other solutions if this is not "acceptable" that would be great.
function getFixedElementPosition(el, menuid) {
var dropmenu = document.getElementById(`dropmenu${menuid}`);
if (dropmenu.style.display === "" || dropmenu.style.display === "none") {
var pos = el.getBoundingClientRect();
dropmenu.style.top = `${pos.bottom}px`;
dropmenu.style.left = `${pos.right}px`;
dropmenu.style.display = "block";
} else {
dropmenu.style.display = "none";
}
};
.card {
width: 225px;
height: 295px;
background: #fff;
float: left;
padding: 20px;
margin: 15px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 0px 20px 0px;
transition: all 0.25s linear 0s;
position: relative;
border: 2px solid transparent;
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
}
.card:hover {
box-shadow: rgb(38, 57, 77) 0px 2px 30px -10px;
}
.gear {
cursor: pointer;
float: right;
}
.dropmenu {
display: none;
position: absolute;
background: #fff;
box-shadow: rgba(100, 100, 111, 0.2) 0px 0px 20px 0px;
width: 80px;
padding: 10px;
z-index: 10;
}
a {
text-decoration: none;
display: block;
transition: all 0.2s linear;
}
a:hover {
color: #003a95;
}
p {
margin: 35px 10px;
}
<div class="wrapper">
<div class="card">
<img class="gear" onclick="getFixedElementPosition(this, 1)" src="https://www.indivstock.com/static35/preview2/stock-vector-gear-icon-illustrated-in-vector-on-white-background-520258.jpg" width="34">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
<!-- /Card #1 -->
<div id="dropmenu1" class="dropmenu" onmouseleave="this.style.display='none';">
View
Edit
Delete
</div>
<div class="card">
<img class="gear" onclick="getFixedElementPosition(this, 2)" src="https://www.indivstock.com/static35/preview2/stock-vector-gear-icon-illustrated-in-vector-on-white-background-520258.jpg" width="34">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
<!-- /Card #2 -->
<div id="dropmenu2" class="dropmenu" onmouseleave="this.style.display='none';">
View
Edit
Delete
</div>
<div class="card">
<img class="gear" onclick="getFixedElementPosition(this, 3)" src="https://www.indivstock.com/static35/preview2/stock-vector-gear-icon-illustrated-in-vector-on-white-background-520258.jpg" width="34">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
<!-- /Card #3 -->
<div id="dropmenu3" class="dropmenu" onmouseleave="this.style.display='none';">
View
Edit
Delete
</div>
</div>
https://codepen.io/t3l3machus/pen/GRvbjzM
P.S. The numbered ids (dropmenu1, dropmenu2..) are created by a template engine on document load.

There are a couple of things you could change and also some bugs.
The dropdown only works once because you're setting display = "none" but comparing it with empty string.
You can wrap this on a <div> that has position:absolute and then use position:relative to position the dropdown relative to the wrapper. This way you only have to set the display value.
Check out my updated version:
https://codepen.io/samura_lesi/pen/MWvMpKX

How to make ellipses vertically aligned?

I have several lines of text, each of them is truncated with ellipses.
.container {
display: block;
border: 1px solid;
width: 200px;
}
.text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 20px;
text-align: justify;
}
<div class="container">
<p class="text">
This is text1 that has very very very long string.
</p>
<p class="text">
The ellipses of the line is not vertically aligened with the above one.
</p>
<p class="text">
This is text3 that has very very very long string.
</p>
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
As you can see from the demo, all the ellipses are not aligned vertically even though the element width is all the same.
How can I make all of them to be aligned vertically?
P.S. Screenshot attached

The text-align property is only used in cases where the length of the child element is less than the width of the parent (or containing element). If the length of the child element is wider than its parent / containing element then the text-align property isn't used. I get what you are trying to do with text-align: justify, but it doesn't work in this case as the paragraph elements lengths are actually extending past the 200px that you set for the container element.
So, in order to vertically align them, you just need to set a width and add it to the .text class.
Adding
width: 180px to your .text class should do the trick to set a width for the paragraph elements which will get it much closer.
However you'll still have the odd instance where they cut off at different characters and they won't align exactly as you expect, so you can do the below, which is a bit more tricky as you'll have to add a wrapper to each of the paragraph elements. It can potentially look a bit naff, but this would be how you do it:
.container {
display: block;
border: 1px solid;
width: 200px;
}
.text{
text-overflow: clip;
font-size: 20px;
height: 20px;
width: 170px;
overflow: hidden;
word-break: break-all;
}
.ellipsis{
position: relative;
}
.ellipsis::after {
content: "...";
position: absolute;
left: 170px;
top:0;
font-size: 20px;
}
.ellipsis:first-of-type::after {
top: 20px;
}
<div class="container">
<span class="ellipsis"><p class="text">
This is text1 that has very very very long string.
</p></span>
<span class="ellipsis"><p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p></span>
<span class="ellipsis"><p class="text">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p></span>
<span class="ellipsis"><p class="text">
This is text1 that has very very very long string.
</p></span>
</div>
Up to you which of those you use though :)

I think it's possible with css tricks.
.container {
border: 1px solid;
width: 200px;
}
.text {
position: relative;
overflow: hidden;
font-size: 20px;
height: 1.5em;
padding-right: 1em;
text-align: justify;
word-break: break-all;
}
.text::after {
content: '...';
position: absolute;
right: 0;
top: 0;
z-index: 1;
width: 1em;
text-align: center;
background: white;
}
<div class="container">
<p class="text">
<span>This is text1 that has very very very long string.</span>
</p>
<p class="text">
<span>The ellipses of the line is not vertically aligened with the above one.</span>
</p>
<p class="text">
<span>This is text3 that has very very very long string.</span>
</p>
<p class="text">
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
</p>
</div>
But with this method, if 'text' is smaller than 'container' it looks weird, so apply'::after' to a specific class.
For example,'.overflow::after' and apply the 'overflow' class when 'text' is larger than 'container' via JavaScript.
window.onload = function() {
var tmpContainer = document.getElementsByClassName('container');
var tmpContainerWidth = tmpContainer[0].clientWidth;
var tmpText = document.getElementsByClassName('text');
var tmpTextLen = tmpText.length;
for (var i = 0; i < tmpTextLen; i++) {
var tmpTextWidth = tmpText[i].children[0].offsetWidth;
var tmpTextFontSize = parseFloat(getComputedStyle(tmpText[i]).fontSize);
if (tmpTextWidth + tmpTextFontSize >= tmpContainerWidth) tmpText[i].classList.add('overflow');
}
}
.container {
border: 1px solid;
width: 500px;
}
.text {
position: relative;
overflow: hidden;
font-size: 20px;
height: 1.5em;
padding-right: 1em;
text-align: justify;
word-break: break-all;
}
.overflow::after {
content: '...';
position: absolute;
right: 0;
top: 0;
z-index: 1;
width: 1em;
text-align: center;
background: white;
}
<div class="container">
<p class="text">
<span>This is text1 that has very very very long string.</span>
</p>
<p class="text">
<span>The ellipses of the line is not vertically aligened with the above one.</span>
</p>
<p class="text">
<span>This is text3 that has very very very long string.</span>
</p>
<p class="text">
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
</p>
</div>

Grid items disappearing on smaller screen sizes [duplicate]

This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 3 years ago.
I am a very new developer attempting to make a presentable photo-gallery-esque type thing to practice a bit. I have been leaning on CSS grid heavily for my layout...and I am pretty proud of what I have thus far.
I have four cards each containing an image thumbnail, a header, and some text. When the user hovers over any card they have the option to "view" the image which brings up a full screen modal. Everything works as I have intended...however...when I decrease the screen size some cards end up disappearing off screen!
I am very new to CSS grid and I have tried just about everything I know at this point. Please help me cross the finish line!
The code below works perfectly if just copy-pasted into the html portion on codepen.io.
Thank you in advance for any help you may offer!
const buttons = document.querySelectorAll('button');
const modal = document.querySelector('.modal');
const image = modal.querySelector('img');
buttons.forEach(button => {
button.addEventListener('click', handleButtonClick);
});
function handleButtonClick(event) {
const card = event.currentTarget.closest('.card');
const chosenImage = card.querySelector('img').src;
image.src = chosenImage;
modal.classList.add('open');
}
document.addEventListener('click', function(event) {
const target = event.target;
const isModal = target.classList[0] === 'modal';
if (isModal) {
modal.classList.remove('open');
}
});
body {
margin: 0;
height: 100vh;
display: grid;
align-content: center;
background: linear-gradient(0deg, rgba(130, 109, 118, 1) 0%, rgba(172, 52, 52, 1) 100%);
}
.wrapper {
display: grid;
grid-gap: 40px;
justify-content: center;
grid-template-columns: repeat(auto-fit, 300px);
grid-template-rows: 450px;
grid-auto-rows: 450px;
}
.card {
border: solid 5px #ac3434;
border-radius: 0.8rem;
overflow: hidden;
background: #3a363670;
display: grid;
grid-gap: 4px;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(8, 1fr);
}
.img-wrapper {
grid-column: 2 / span 3;
grid-row: 2 / span 3;
display: grid;
}
.img-wrapper img {
height: 100%;
width: 100%;
object-fit: cover;
border: solid 3px #ac3434;
border-radius: 50%;
}
.card-body {
grid-column: 1 / -1;
grid-row: 5 / -1;
padding: 0 10px 0;
font-family: 'Ubuntu', sans-serif;
}
.card-body h2 {
font-family: 'Anton', sans-serif;
}
.card-overlay {
grid-column: 1 / -1;
grid-row: 1 / -1;
background: #ac34347a;
display: grid;
place-items: center center;
transform: translateY(100%);
transition: 0.4s;
}
.card:hover .card-overlay {
transform: translateY(0%);
}
.card-overlay button {
background: none;
color: white;
text-transform: uppercase;
position: relative;
bottom: 78px;
border: solid 3px white;
border-radius: 0.4rem;
font-family: 'Ubuntu', sans-serif;
}
.modal {
height: 100vh;
width: 100vw;
position: fixed;
background: #0000008f;
display: grid;
place-items: center center;
/* Make modal invisible until triggered */
opacity: 0;
/* Makes it so the modal does not log click
events */
pointer-events: none;
}
.open {
/* Displays the modal */
opacity: 1;
pointer-events: all;
}
.modal-inner {
width: 500px;
}
.modal-inner img {
width: 100%;
height: 100%;
object-fit: contain;
}
<div class="wrapper">
<div class="card">
<div class="img-wrapper">
<img src="https://picsum.photos/500">
</div>
<div class="card-body">
<h2>Sunny Walls</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim cupiditate molestias sed ea sit, dolore quos itaque consectetur doloribus at. Dolor accusamus consequuntur perspiciatis! Deserunt?
</p>
</div>
<div class="card-overlay">
<button>View ➜</button>
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://picsum.photos/500">
</div>
<div class="card-body">
<h2>Kit-the-Kat</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos quaerat veritatis nobis voluptas minus exercitationem.
</p>
</div>
<div class="card-overlay">
<button>View ➜</button>
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://picsum.photos/500">
</div>
<div class="card-body">
<h2>Sass in the City</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo accusantium consectetur vel ullam assumenda corrupti id ratione odio, nisi adipisci?
</p>
</div>
<div class="card-overlay">
<button>View ➜</button>
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://picsum.photos/500">
</div>
<div class="card-body">
<h2>City Things</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint culpa suscipit libero consequatur quod non dolore neque aperiam nihil beatae? Dolores, deserunt.
</p>
</div>
<div class="card-overlay">
<button>View ➜</button>
</div>
</div>
</div>
<div class="modal">
<div class="modal-inner">
<img>
</div>
</div>

You need to use media tags in the css.
Your site is not responsive and when you change screen size it does not resize the components.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

JavaScript / jQuery mouseover event with delay

I have a code that allows me to show hidden divs after a little delay on mouseover, my problem now is that im not very good with CS, i have elements in that div with that code:
$(document).ready(function() {
var timer;
var delay = 250;
$("#content1").mouseover(function() {
timer = setTimeout(function() {
$("#content.left1").css("display", "block");
}, delay);
});
$("#content1").mouseout(function() {
$("#content.left1").css("display", "none");
clearTimeout(timer);
});
});
.txtmiddle {
border: 1px solid rgba(215, 215, 215, 0.1);
background-color: rgba(245, 245, 245, 0.7);
margin-top: 5px;
opacity: 0.6;
filter: alpha(opacity=60);
padding: 2%;
border-radius: 15px;
position: relative;
overflow: auto;
-webkit-animation: fadeIn 0.1s;
animation: fadeIn 0.1s;
}
.txtmiddle:hover {
border: 1px solid rgba(55, 55, 55, 0.2);
background-color: rgba(255, 255, 255, 0.9);
opacity: 1;
filter: alpha(opacity=100);
}
#content {
display: none;
background: rgba(255, 255, 255, 0.9);
padding: 15px;
border-radius: 15px;
overflow: hidden;
position: relative;
}
#txtleft {
width: 30%;
float: left;
margin-left: 4%;
border-top: 1px solid rgba(0, 0, 0, 0.0);
}
<div id="txtleft"><div id="content" class="left1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit a</div> </div>
<div id="middlewrapper"><div class="txtmiddle" id="content1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Nuvola_mimetypes_info.png/100px-Nuvola_mimetypes_info.png" id="midcontentleft">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Nuvola_mimetypes_info.png/100px-Nuvola_mimetypes_info.png" id="midcontentimgright" class="1">
</div> </div>
cant get it to run here.... but its working fine my only problem is now that everytime i hover over elements (those images) in the div the hidden content is (re-)shown again (with that delay) (before i didnt had the delay so the hidden element wouldnt disapear and apear again and one couldnt notice the change...

As correctly said by atinder fadeIn and fadeOut functions of jQuery will serve your need:
Try the below code:
jQuery(document).ready(function() {
var delay = 1000;//the delay interval
jQuery("#content1").mouseover(function() {
jQuery( "#content.left1" ).fadeIn(delay);
});
jQuery("#content1").mouseout(function() {
jQuery( "#content.left1" ).fadeOut(delay);
});
});
Hope it helps..

why not simply use fadeIn('slow') and fadeOut('slow') instead

I would usually use jQuery hover() to achieve what you are looking for:
$(document).ready(function () {
var timeout;
$("#content1").hover(function () {
timeout = setTimeout(function () {
$("#content.left1").css("display", "block");
}, 250);
},
function () {
clearTimeout(timeout);
$("#content.left1").css("display", "none");
});
});
Demo here.