We Keep Coding

Displaying a div inside a navbar with overflow-y: scroll

I'm trying to display a modal, the issue is the modal is inside a navbar which has the 'overflow-y' property set to 'scroll', which is making the value 'overflow-x' to 'auto', thus not allowing overflowing children on the x-asis, to be displayed. I'm looking for a way around this other than just moving the modal out of the navbar (It's not something that I can do for now). Is there a way via css to ignore the overflow-y property on the parent?
I made a fiddle with a similar case to the one I'm looking for: https://jsfiddle.net/aje31y7L/2/
<div class="background">
<nav class="navbar">
<div class="modal-wrapper">
<div class="modal-main">
</div>
</div>
</nav>
</div>
Currently the modal will appeared trimmed as part of it is hidden by the navbar. Any help is appreciated.

.background {
width: 100vw;
height: 100vh;
background-color: red;
position: relative;
}
.navbar {
display: block;
width: 400px;
left: -400px;
top: 0;
position: relative;
background: black;
max-height: 100%;
overflow-y: scroll;
transform: translateX(400px);
min-height: 100%;
}
.modal-wrapper {
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.modal-main {
display: flex;
height: auto;
background-color: grey;
}
h1{
font-size: 100px;
}
<div class="background">
<p>
lorem<br>
ipsum<br>
</p>
<nav class="navbar">
<div class="modal-wrapper">
<div class="modal-main">
<h1>
Lorem Ipsuim lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</h1>
</div>
</div>
</nav>
</div>
I have modified the code a little bit. As you run the snippet you will be able to see some text written in the div navbar in "p" tags but as soon as you erase the text inside "p" tags the div will go back in the background. Now as for the modal is concerned, I have modified the code too. The black background in the modal will not be visible but all the text inside it will be visible. It won't be chopped like before.

List / Grid / Tile view transitions using jquery or javascript

I want to achieve list / grid / tile view using Jquery/JS.
I have surfed a lot regarding grid/list view with animation, but got only grid/list view solutions. but i need grid/list view along with animation(i,e tranistion effect). I have attached sample video of the transition effect.

Code
https://codepen.io/shahriarkh/pen/NWvOyry?editors=0110
Click the "Change Style" button above the grid to toggle animation.
Here it is!
I used grid because it's animateable, since it's a 2d grid while both block and flex are 1d.
However, there's a problem with the appearing scroll bar on the right. It's damn annoying and I couldn't find a way to fix it. In line 9 of JS code, every card should move to left by 120px * N, but when the scrollbar appears, it's no longer 120 and becomes a bit larger than 120 (like 126). I don't know where it is coming from... although 120 works fine when you add overflow-y: hidden to body, it's not an applicable workaround (you need the scroll!).
Update
I found the solution! Using overflow-y: scroll + scrollbar-width: none does the trick. However, you need to somehow let users know the page is scrollable.
BTW, what's the original video? I'm wondering if it's a webpage and somebody already did this :)
Also, Framer Motion might be a good choice instead of harcoding.

Here is my basic implementation. I've tried to create output like the video. The idea is to wrap list item in a wrapper. Wrappers are statically placed and list items are absolutely placed. When view changes wrapper gets arranged automatically as per stylesheet or container rules. But move list items after with animations.
var pos = [];
var offs = null;
function init() {
offs = $(".container").first().offset();
$(".wrapper").each(function (i) {
updatePositions();
$(this).children(0).css({
top: pos[i].top,
left: pos[i].left
});
});
}
$(document).ready(function () {
init();
});
$(window).resize(function () {
init();
})
function updatePositions() {
$(".wrapper").each(function(index) {
var tp = $(this).offset().top - offs.top;
var lf = $(this).offset().left - offs.left;
pos[index] = {
top: tp,
left: lf
};
});
}
function grid() {
if ($(".wrapper").first().hasClass("gv-wrapper")) return;
updatePositions();
$(".wrapper").each(function(index) {
$(this).removeClass("dv-wrapper cv-wrapper");
$(this).addClass("gv-wrapper");
$(this).children(0).css({
opacity: 0.8,
top: pos[index].top,
left: pos[index].left
});
});
updatePositions();
$(".wrapper").each(function(index) {
$(this).children(0).children(0).removeClass("dv-video cv-video");
$(this).children(0).children(1).removeClass("dv-details cv-details");
$(this).children(0).children(0).first().addClass("gv-video");
$(this).children(0).children(1).last().addClass("gv-details");
$(this).children(0).animate({
height: "100px",
width: "200px",
opacity: 1,
top: pos[index].top,
left: pos[index].left
}, 1000, "swing");
});
}
function detailed() {
if ($(".wrapper").first().hasClass("dv-wrapper")) return;
updatePositions();
$(".wrapper").each(function(index) {
$(this).removeClass("gv-wrapper cv-wrapper");
$(this).addClass("dv-wrapper");
$(this).children(0).css({
opacity: 0.8,
top: pos[index].top,
left: pos[index].left
});
});
updatePositions();
$(".wrapper").each(function(index) {
$(this).children(0).children(0).removeClass("gv-video cv-video");
$(this).children(0).children(1).removeClass("gv-details cv-details");
$(this).children(0).children(0).first().addClass("dv-video");
$(this).children(0).children(1).last().addClass("dv-details");
$(this).children(0).animate({
height: "100px",
width: "95%",
opacity: 1,
top: pos[index].top,
left: pos[index].left
}, 1000, "swing");
});
}
function collapsed() {
if ($(".wrapper").first().hasClass("cv-wrapper")) return;
updatePositions();
$(".wrapper").each(function(index) {
$(this).removeClass("dv-wrapper gv-wrapper");
$(this).addClass("cv-wrapper");
$(this).children(0).css({
opacity: 0.8,
top: pos[index].top,
left: pos[index].left
});
});
updatePositions();
$(".wrapper").each(function(index) {
$(this).children(0).children(0).removeClass("dv-video gv-video");
$(this).children(0).children(1).removeClass("dv-details gv-details");
$(this).children(0).children(0).first().addClass("cv-video");
$(this).children(0).children(1).last().addClass("cv-details");
$(this).children(0).animate({
height: "50px",
width: "94%",
opacity: 1,
top: pos[index].top,
left: pos[index].left
}, 1000, "swing");
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
counter-reset: number;
background-color: #ffffff;
padding: 24px;
}
i.fas {
margin: 5px;
}
i.fas:hover {
background-color: white;
}
.container {
width: 500px;
min-height: 90vh;
margin: 0 auto;
background-color: #ADC2A9;
border: 1px dotted gray;
font-size: 0.7em;
position: relative;
}
.wrapper {
margin: 10px 10px;
/* to debug enable the color */
/*background-color: darkcyan;*/
}
.record {
position: absolute;
width: 95%;
top: 0px;
left: 0px;
background-color: #D3E4CD;
}
.record:first-child:before {
counter-increment: number;
content: counter(number);
position: absolute;
top: 10%;
left: 10%;
font-size: 23px;
color: blue
}
.video {
width: 200px;
height: 100px;
background: linear-gradient(white 40%, #5e819ef8);
}
/* list view */
.dv-wrapper {
height: 100px;
width: 95%;
float: left;
}
.dv-video {}
.dv-details {
position: absolute;
width: calc(100% - 200px);
top: 0px;
right: 0px;
float: right;
padding-left: 10px;
overflow: hidden;
}
/* grid view */
.gv-wrapper {
height: 100px;
width: 200px;
float: left;
}
.gv-video {
float: left;
}
.gv-details {
position: absolute;
left: 0px;
bottom: 0px;
padding-left: 10px;
overflow: hidden;
}
/* collapsed view */
.cv-wrapper {
height: 50px;
width: 80%;
}
.cv-video {
float: left;
display: none;
}
.cv-details {
padding-left: 10px;
overflow: hidden;
}
.details p {
width: 100%;
text-overflow: ellipsis;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<div style="margin: 0 50%; width: 100px; transform: translate(-50%);">
<i class="fas fa-list" onclick="detailed()"></i>
<i class="fa fa-th" onclick="grid()"></i>
<i class="fas fa-bars" onclick="collapsed()"></i>
</div>
<div class="container">
<div class="dv-wrapper wrapper">
<div class="record">
<div class="video dv-video"></div>
<div class="details dv-details">
<p>1 Lorem ipsum dolor sit amet consectetur adipiorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, dolor.</p>
</div>
</div>
</div>
<div class="dv-wrapper wrapper">
<div class="record">
<div class="video dv-video"></div>
<div class="details dv-details">
<p>2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, dolor.</p>
</div>
</div>
</div>
<div class="dv-wrapper wrapper">
<div class="record">
<div class="video dv-video"></div>
<div class="details dv-details">
<p>3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, dolor.</p>
</div>
</div>
</div>
<div class="dv-wrapper wrapper">
<div class="record">
<div class="video dv-video"></div>
<div class="details dv-details">
<p>4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, dolor.</p>
</div>
</div>
</div>
<div class="dv-wrapper wrapper">
<div class="record">
<div class="video dv-video"></div>
<div class="details dv-details">
<p>5 Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, dolor.</p>
</div>
</div>
</div>
</div>
This is just a demo code. It can be improved in many ways. We can put wrappers in existing grid or flex containers and animate content items like shown above.
Let me know if any readymade third party available that will reduce or improve above code.

I know this does not exactly look like your desired result, but maybe it´s suitable for u or you can build up on it. i just used a transition on width and an interval to have a small delay in the transform.
function toggle(){
var k= 0;
var i = setInterval(function(){
t = $('.test').length;
if(k>t){
clearInterval(t)
}
$('.test').eq(k).toggleClass("test2");
k++;
},120)
}
setTimeout(function(){
toggle()
},1000)
.wrap {
width:500px;
min-height:100vh;
position:relative;
margin: 0 auto;
}
.test {
color:white;
margin:10px;
background:black;
width:100px;
height:100px;
float:left;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
.test2 {
width:100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
If u wanted it to be exactly like in the video u would probably have to work with translate-x translate-y

Replace css background-image: url(...) with <img> tag and keep scrolling over effect

I want to add alt tags to images on my website to improve SEO. The problem is I'm embedding them using CSS background-image: url(...).
It creates the desired scrolling effects (see below), but is not good for SEO.
Current code:
.text {
margin: 200px 20px;
}
.image-background {
background-attachment: fixed;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 100%;
display: block;
height: 800px;
margin-bottom: 150px;
margin-left: -1500px;
margin-right: -1500px;
margin-top: 150px;
width: 3500px;
}
.image1 {
background-image: url(https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg);
}
.image2 {
background-image: url(http://media1.santabanta.com/full1/Animals/Cats/cats-149a.jpg);
}
<div class='text'>
Lorem ipsum dolores...
</div>
<div class='image-background image1'></div>
<div class='text'>
Lorem ipsum dolores...
</div>
<div class='image-background image2'></div>
<div class='text'>
Lorem ipsum dolores...
</div>
The question is: how do I add <img> tags with alt properties without breaking the visual appearance?
Edit:
I tried using <img> with css position:fixed but can't get it to work well with more than one image (my broken jsfiddle here).
Edit 2:
These images are part of website content, not layout. They deserve alt tags, I'm not trying to stuff more keywords in a "bad" way. I originally put them as backgrounds to achieve a visual effect. Now I want to fix the mistake, but without changing how the website looks like.
I'm talking about my photos on this blog.
Edit 3:
I'm not trying to use only CSS here. Any code modification, JS library or pretty much anything is fine!

Method 1
This method doesn't change the visibility of the images, so I think there's no issues about SEO at all. But it is more complex and have the caveat that only one image can appear per once. So the text's div must to fill the entire screen resulting in a big padding.
$(function(){
var texts = $('.text');
var oldY = 0;
$(document).scroll(function(){
var y = window.scrollY;
texts.each(function(){
var text = $(this);
if(y >= text.offset().top)
text.next().addClass('active');
else
text.next().removeClass('active');
});
});
});
body{
padding: 0;
margin: 0;
}
.text{
padding: 20px;
margin: 0 0 600px;
position: relative;
z-index: 3;
background-color: #fff;
min-height: 100vh;
display: flex;
align-items: center;
}
.background-img img{
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
}
.background-img.active img{
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class='text'>
Lorem ipsum dolores...
</div>
<div class="background-img active">
<img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="Image 1">
</div>
<div class='text'>
Lorem ipsum dolores...
</div>
<div class="background-img">
<img src="http://media1.santabanta.com/full1/Animals/Cats/cats-149a.jpg" class="background-img" alt="Image 2">
</div>
<div class='text'>
Lorem ipsum dolores...
</div>
Method 2
This is simpler, and to say the truth it's almost the same idea from your original code. The difference is that as soon as the page loads, the images are hidden and then copied as background images for their parent divs. The advantage is that you can have more then one image visible at the same time, which is a better effect.
$(function(){
$('.background-img img').each(function(){
var img = $(this).hide();
img.parent().css('background-image', 'url(' + img.prop('src') + ')');
});
});
body{
padding: 0;
margin: 0;
}
.text{
padding: 200px 20px;
position: relative;
z-index: 3;
background-color: #fff;
}
.background-img{
height: 400px;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class='text'>
Lorem ipsum dolores...
</div>
<div class="background-img">
<img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="Image 1">
</div>
<div class='text'>
Lorem ipsum dolores...
</div>
<div class="background-img">
<img src="http://media1.santabanta.com/full1/Animals/Cats/cats-149a.jpg" class="background-img" alt="Image 2">
</div>
<div class='text'>
Lorem ipsum dolores...
</div>

Make Text appears (Slide up) under an Image when you click on it

I want a text description to appear (slide up) under an image when you click on it, and hidden(slid down) again when you when you click on it when already showing.
JAVASCRIPT
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#image img").click(function () {
$("#image span").slideToggle();
});
});
</script>
CSS
#images {
width: 275px;
height: 200px;
}
#image div {
display: block;
width: 275px;
height: 200px;
}
#image img {
display: block;
width: 275px;
height: 200px;
}
#image span {
background: #000;
color: #ccc;
display: block;
width: 265px;
height: 40px;
padding: 5px;
display: none;
}
HTML
<div id="images">
<div id="image">
<div>
<img src="images/test-image.png" width="224px" height="224px" />
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</div>
</div>
Those are the HTML above for the code I am trying to create, an example of this effect can be demonstrated when you click on any of the images on the site etchapps.com., any ideas how we can do this with JavaScript or jQuery. Or is there any other plugin that we could use to complete this.

The real trick for this effect is to make the containing wrapper position: relative, then the wrapper inside that position: absolute with top/right/bottom set at 0. That will anchor it to the bottom of the container regardless of the height of the caption when it's visible.
Then all you need to do is slideToggle the display of the caption element. At my work we just toggled a class and used CSS transitions to cover the display, but I've tweaked our method to fall inline with your code.
Here's a codepen example
HTML
<div id="images">
<div id="image">
<div>
<img src="http://placekitten.com/275/200" />
<div id="caption">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
CSS
#images {
width: 275px;
height: 200px;
}
#image {
position: relative;
width: 275px;
height: 200px;
overflow: hidden;
}
#image > div {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#image img {
display: block;
width: 275px;
height: 200px;
}
#caption {
background: #000;
color: #ccc;
display: none;
overflow: hidden;
}
#caption p {
padding: 5px;
margin: 0;
}
JS
$(document).ready(function () {
$("#image img").click(function () {
$("#caption").slideToggle();
});
});
I'd also recommend switching from the divs to a figcaption and caption element for more semantic markup and probably switching out the ids for classes. You might need to update the JS to target the nearest caption rather than just any caption though.

<div id="images">
<div>
<div id="thetext" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<img id="theimage" src="images/test-image.png" width="224px" height="224px" />
</div>
</div>
</body>
<script>
$(document).ready(function () {
$("#theimage").click(function () {
$("#thetext").slideToggle();
});
});
</script>

Its solved:
Take a look at this fiddle: http://jsfiddle.net/promatik/SFU4E/
I changed a bit the HTML:
<div id="images">
<div id="image">
<div class="image">
<img src="images/test-image.png" width="275px" height="200px" />
</div>
<div class="text">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</div>
</div>
And CSS too:
#images, #image .image {
width: 275px;
height: 200px;
}
#image .text {
display: none;
background: #000;
}
#image span {
color: #ccc;
padding: 2px;
}

Parallax escrolling effect

I want to do exactly the same as this page. http://www.googleventures.com/
It is like a parallax effect when you slide down the lower part of the page comes up. How can I do that with an image as a header? Pure jquery? Is there an onSlide function?

I did an alternate option. You don't even need z-index, since the newer elements are automatically higher in z-index.
HTML
<div class="fixed">
<img src="http://placekitten.com/800/300" />
This is some text that will be static as well
</div>
<div class="scroll">
Lorem ipsum dolor sit amet
</div>​
CSS
.fixed{
position: fixed;
}
.scroll{
background: #eee;
height: 700px;
position: relative;
top: 350px;
}​
Working example: http://jsfiddle.net/3vxBA/

That just looks like the header has a fixed position and a lower z-index, so when you scroll regularly, the page continues upward but the header stays in the same position behind the main contents.
Sample HTML:
<body>
<div id="header">
some image here
</div>
<div id="pagecontent">
everything else
</div>
</body>​
Sample CSS:
body {
padding-top: 100px; /* #header height */
}
#header {
position: fixed;
top: 0px;
z-index: -1;
background-color: #ccccff;
height: 100px;
width: 100%;
}
#pagecontent {
background-color: #ccffcc;
height: 1000px;
width: 100%;
}​
Here's this as a working example: http://jsfiddle.net/Nv7Ku/