Develop Reference

At a road block with scroll section for my featured items on site

On my site I have a scroll section that will display watches and allow you to scroll on the section similar to what rolex does on their homepage. I created div container for the section and added a wrapper container that I was using to control the items. I also was trying to add arrows that can be used as an option to scroll just like how rolex does on theirs. Nothing is working. The items are there but the functionality isnt. Take a look at Rolex website and scroll down to their watches section on the home page. I want to do exactly that.
I tried adding JavaScript to make it functional but that did nothing for me. I even added a console.log() to see if anything would print in the browser console and got nothing. Please help.
// Select the left and right arrow buttons
const leftButton = document.querySelector('.arrow-button.left');
const rightButton = document.querySelector('.arrow-button.right');
// Select the watch items wrapper element
const watchItemsWrapper = document.querySelector('.watch-items-wrapper');
// Scroll the watch items wrapper element to the left or right when the arrow buttons are clicked
leftButton.addEventListener('click', () => {
watchItemsWrapper.scrollBy({
left: watchItemsWrapper.scrollLeft - 200, // Scroll 200 pixels to the left
behavior: 'smooth' // Use a smooth scroll transition
});
});
rightButton.addEventListener('click', () => {
watchItemsWrapper.scrollBy({
left: watchItemsWrapper.scrollLeft + 200, // Scroll 200 pixels to the right
behavior: 'smooth' // Use a smooth scroll transition
});
});
/* Watch Reel Section */
.watch-reel-container {
display: flex;
position: relative;
flex-wrap: nowrap;
overflow: scroll;
scroll-behavior: smooth;
margin-left: 230px;
}
.watch-items-wrapper {
display: flex;
flex-wrap: nowrap;
}
.watch-reel-item {
flex: 0 0 200px;
padding: 20px;
cursor: pointer;
}
.watch-reel-container img {
width: 400px;
height: 400px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.watch-name {
margin-top: 10px;
font-size: 18px;
font-weight: bold;
text-align: center;
color: #333;
text-transform: uppercase;
}
.watch-reel-h2 {
margin-top: 150px;
margin-left: 250px;
}
.watch-reel-h2 a {
text-decoration: none;
color: #375ea1;
}
.watch-reel-h2 a:hover {
opacity: 70%;
}
.scroll-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 8px;
background: #ccc;
border-radius: 4px;
}
.arrow-container {
position: absolute;
top: 50%;
transform: translateY(-100%);
display: flex;
justify-content: space-between;
width: 100%;
}
.arrow-button {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: black;
color: white;
font-size: 20px;
cursor: pointer;
}
.arrow-button::before {
left: 0;
content: '>';
}
.arrow-button.left::before {
right: 0;
content: '<';
}
.arrow-button:hover {
background: #333;
cursor: pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
<!-- Beginning of Watch Reel -->
<div class="watch-reel-h2">
<h2>Featured Watches - View all</h2>
</div>
<div class="watch-reel-container">
<div class="watch-items-wrapper">
<div class="watch-reel-item">
<img src="/images/rolex-panda.png" alt="Watch 1">
<p class="watch-name">Rolex Panda</p>
</div>
<div class="watch-reel-item">
<img src="/images/ap-1.png" alt="Watch 2">
<p class="watch-name">AP Royal Oak Offshore</p>
</div>
<div class="watch-reel-item">
<img src="/images/patek-1.png" alt="Watch 3">
<p class="watch-name">Patek Phillipe</p>
</div>
<div class="watch-reel-item">
<img src="/images/patek-1.png" alt="Watch 3">
<p class="watch-name">Patek Phillipe</p>
</div>
<div class="watch-reel-item">
<img src="/images/patek-1.png" alt="Watch 3">
<p class="watch-name">Patek Phillipe</p>
</div>
<div class="watch-reel-item">
<img src="/images/patek-1.png" alt="Watch 3">
<p class="watch-name">Patek Phillipe</p>
</div>
<div class="watch-reel-item">
<img src="/images/patek-1.png" alt="Watch 3">
<p class="watch-name">Patek Phillipe</p>
</div>
</div>
<div class="scroll-bar"></div>
<div class="arrow-container">
<button class="arrow-button left">
<i class="fa fa-arrow-left"></i>
</button>
<button class="arrow-button right">
<i class="fa fa-arrow-right"></i>
</button>
</div>
</div>
<!-- End of Watch Reel -->

Add overflow: scroll to your .watch-items-wrapper:
.watch-items-wrapper {
display: flex;
flex-wrap: nowrap;
overflow: scroll;
}
You can remove the overflow: scroll; from your .watch-reel-container, it's not needed. If you want the container to span full width then add overflow: hidden to your .watch-reel-container.
Next adjust both your scroll functions as such:
Left:
leftButton.addEventListener('click', () => {
watchItemsWrapper.scrollBy({
left: -200,
behavior: 'smooth'
});
});
Right:
rightButton.addEventListener('click', () => {
watchItemsWrapper.scrollBy({
left: 200,
behavior: 'smooth'
});
});
I think this will give you the functionality you're looking for.
If you'd like to hide the scrollbar but keep the functionality, check our this doc from w3schools.
I hope this helps!

on click div get big and back to normal

I created a mini Qcm, when I click on an answer the check moves on the div on which I clicked
const reps = document.getElementsByClassName('rep');
[].forEach.call(reps, function(rep) {
$(rep).click(function() {
if (!rep.querySelector('.check')) {
[].forEach.call(reps, function(repToDel) {
if (repToDel.querySelector('.check')) {
repToDel.querySelector('.check').remove()
}
})
$(rep).last().append('<div class="check"><object data="check.svg" width="20" > </object></div>')
}
})
})
.container {
padding: 5%;
display: grid;
gap: 20px;
grid-template-columns: 1fr;
}
.question_title {
font-size: 18px;
font-weight: 500;
text-align: center;
}
.container_reps {
display: grid;
justify-items: center;
gap: 10px;
}
.rep {
display: flex;
align-items: center;
border: 1px solid black;
padding: 0 10px;
max-width: 15%;
min-width: 170px;
border-radius: 10px;
cursor: pointer;
overflow: hidden;
}
.dot_rep {
background-color: black;
color: white;
margin-right: 7px;
padding: 5px 10px;
border-radius: 5px;
}
.text_rep {
font-weight: 700;
}
.check {
margin-left: 20%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="container">
<div class="question_title">
<p>Je suis une Question, quelle est votre reponse ?</p>
</div>
<div class="container_reps">
<div class="rep">
<span class="dot_rep">A</span>
<p class="text_rep">Reponse 1</p>
</div>
<div class="rep">
<span class="dot_rep">B</span>
<p class="text_rep">Reponse 2</p>
</div>
<div class="rep">
<span class="dot_rep">C</span>
<p class="text_rep">Reponse 3</p>
</div>
<div class="rep">
<span class="dot_rep">D</span>
<p class="text_rep">Reponse 4</p>
</div>
</div>
</div>
but when I click the div get big and back to normal at the same time,I tried the overflow:hidden, but it didn't work.
the change between the check must be done smoothly.

With this JQuery code and if the image is present it's works
$(function(){
const reps = document.getElementsByClassName('rep');
[].forEach.call(reps,function(rep){
$(rep).click(function(){
// Remove Check Div only for Old Check
[].forEach.call(reps,function(repToDel) { if(repToDel.querySelector('.check')) repToDel.querySelector('.check').remove(); });
// Put Check Div for New Check
if(! rep.querySelector('.check')) $(rep).last().append('<div class="check"><object data="check.png" width="20" > </object></div>');
});
});
});

How to set focus with javaScript?

My problem is that after I opend a modal image in the carousel, the carousel is not in focus. So I can not use the left & right keys to change images right away. Is there a solution for this? With $('.carousel').flickity().focus(); I can only set the focus to the second (last) carousel. Thanks! Kind Regards, August
//carousel and image captions
$('.carousel-container').each( function( i, container ) {
var $container = $( container );
var $carousel = $container.find('.carousel').flickity({
// cellSelector: 'img',
// fullscreen: true,
wrapAround: true,
imagesLoaded: true,
percentPosition: false
});
var $captionTitle = $container.find('.captionTitle');
var $caption = $container.find('.caption');
// Flickity instance
var flkty = $carousel.data('flickity');
$carousel.on( 'select.flickity', function() {
// set image caption using img's alt
$captionTitle.text($(flkty.selectedElement).find('img').attr('title'))
$caption.text($(flkty.selectedElement).find('img').attr('alt'))
});
});
//modal
// create references to the modal...
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByTagName('img');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
// var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
console.log(evt);
modal.style.display = "block";
modalImg.src = this.src;
//??
$('.carousel').flickity().focus();
}
}
//close
var span = document.getElementsByClassName("modal")[0];
span.onclick = function() {
modal.style.display = "none";
modal.focus();
}
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
text-decoration: none;
}
.carousel-headline {
text-align: center;
width: 100%;
margin-bottom:10px;
}
hr {
margin-top: 50px;
width: 0px;
}
main {
max-width: 1080px;
width:100%;
margin: auto;
}
.carousel-cell {
width: 100%;
padding-left: 10px;
padding-right: 10px;
/* center images in cells with flexbox */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.carousel.is-fullscreen .carousel-cell {
height: 100%;
}
.carousel-cell img {
max-width: 100%;
max-height: 500px;
}
.flickity-button {
color: #bbb !important;
}
.flickity-button:hover {
color: #333 !important;
}
.zoom-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: 1;
}
.caption, .captionTitle {
padding-left: 10px;
padding-right: 10px;
text-align: center;
max-width: 800px;
margin-left: auto;
margin-right: auto;
white-space:pre-wrap;
}
.captionTitle {
margin-top: 30px;
font-weight: bold;
}
.flickity-page-dots {
scale: 0.75;
}
/* Modal */
#modalImg {
cursor: pointer;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
/* padding-top: 100px; */
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: white;
/* Fallback color */
background-color: white;
/* Black w/ opacity */
cursor: pointer;
}
.modal-content {
max-height: 1200px;
width: auto;
margin: 0 auto;
display: block;
}
.close {
text-transform: uppercase;
color: #000;
background-color: #fff;
border: 0;
padding: 4px 6px;
line-height: 1;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
.close:hover,
.close:focus {
color: #bbb;
}
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<div class="carousel-container">
<p class='carousel-headline'>Carousel 1</p>
<div class="carousel">
<div class="carousel-cell">
<img id="modalImg" src="https://picsum.photos/720/540/?image=517" title="Titel 1" alt="Text 1" />
</div>
<div class="carousel-cell">
<img id="modalImg" src="https://picsum.photos/540/720/?image=696" title="Titel 1.1" alt="Text 1.1" />
</div>
</div>
<p class="captionTitle"></p>
<p class="caption"></p>
</div>
<hr>
<div class="carousel-container">
<p class='carousel-headline'>Carousel 2</p>
<div class="carousel">
<div class="carousel-cell">
<img id="modalImg" src="https://picsum.photos/720/540/?image=517" title="Titel 2" alt="Text 2" />
</div>
<div class="carousel-cell">
<img id="modalImg" src="https://picsum.photos/540/720/?image=696" title="Titel 2.1" alt="Text 2.1" />
</div>
</div>
<p class="captionTitle"></p>
<p class="caption"></p>
</div>
<div id="myModal" class="modal">
<span class="close">close</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>

Prior to anything, here are the "undirectly relevant" changes:
You used multiple times the id modalImg... Was used to set cursor:pointer on the carousel images.
An id must be unique. So I renamed it sliderImg as a class.
I changed the #img01 for a more meaningful name: #modalImage.
Then saddly, this plugin documentation would need an update... Many of the events I tried do not provide all the arguments stated.
And the accessible properties of this, in the scope of the events handlers, are not well documented.
I came up with those two useful ones in this case:
this.element: is the slider element
this.selectedElement: is the active or "selected" slide
So I used the on object to set the event callbacks you need.
Only the modal "close" span needs a separate handler.
So now, on staticClick, the modal opens and surprisingly, the focus on the slider is not lost. You can use the keyboard arrows. On change, you just need to get the "selected image" src to update the modal image.
Now if there is a click on the modal image... The focus on the slider is lost... But have a look at the $("#myModal").on("click", ...) to keep that focus. ;)
See comments below for more specific details of the solution.
$(".carousel-container").each(function (i, container) {
$(container)
.find(".carousel")
.flickity({
// cellSelector: 'img',
// fullscreen: true,
wrapAround: true,
imagesLoaded: true,
percentPosition: false,
// Event handlers
on: {
select: function (index) {
let $container = $(this.element).parent();
let $captionTitle = $container.find(".captionTitle");
let $caption = $container.find(".caption");
let $currentImage = $(this.selectedElement).find("img");
// Set the captions
$captionTitle.text($currentImage.attr("title"));
$caption.text($currentImage.attr("alt"));
},
change: function (index) {
if ($("#myModal").is(":visible")) {
let $selectedEl = $(this.selectedElement).find("img");
$("#modalImage").attr("src", $selectedEl.attr("src"));
}
},
staticClick: function (event, eventAgain, selectedCell) {
// On click on a slider image, open the modal with the right image
// Also save the slider element to a data attribute of the modal
// so that on modal close, the slider will be focussed
var $activeImage = $(selectedCell).find("img");
$("#modalImage").attr("src", $activeImage.attr("src"));
$("#myModal").data("sliderEl", this.element).show();
}
}
});
// Modal close
$("span.close").on("click", function () {
// Close the modal
$("#myModal").hide();
// Focus the slider from which the modal open was triggered
$($("#myModal").data("sliderEl")).focus();
});
// Keep the focus on the slider
// if a click is made on the modal image
$("#myModal").on("click", function(e){
if($(e.target).is(".close")){return}
$($(this).data("sliderEl")).focus();
})
});
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
text-decoration: none;
}
.carousel-headline {
text-align: center;
width: 100%;
margin-bottom: 10px;
}
hr {
margin-top: 50px;
width: 0px;
}
main {
max-width: 1080px;
width: 100%;
margin: auto;
}
.carousel-cell {
width: 100%;
padding-left: 10px;
padding-right: 10px;
/* center images in cells with flexbox */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.carousel.is-fullscreen .carousel-cell {
height: 100%;
}
.carousel-cell img {
max-width: 100%;
max-height: 500px;
}
.flickity-button {
color: #bbb !important;
}
.flickity-button:hover {
color: #333 !important;
}
.zoom-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: 1;
}
.caption,
.captionTitle {
padding-left: 10px;
padding-right: 10px;
text-align: center;
max-width: 800px;
margin-left: auto;
margin-right: auto;
white-space: pre-wrap;
}
.captionTitle {
margin-top: 30px;
font-weight: bold;
}
.flickity-page-dots {
scale: 0.75;
}
/* Modal */
.sliderImg { /* CHANGED */
cursor: pointer;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
/* padding-top: 100px; */
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: white;
/* Fallback color */
background-color: white;
/* Black w/ opacity */
cursor: pointer;
}
.modal-content {
max-height: 1200px;
width: auto;
margin: 0 auto;
display: block;
}
.close {
text-transform: uppercase;
color: #000;
background-color: #fff;
border: 0;
padding: 4px 6px;
line-height: 1;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
.close:hover,
.close:focus {
color: #bbb;
}
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<div class="carousel-container">
<p class='carousel-headline'>Carousel 1</p>
<div class="carousel">
<div class="carousel-cell">
<img class="sliderImg" src="https://picsum.photos/720/540/?image=517" title="Titel 1" alt="Text 1" />
</div>
<div class="carousel-cell">
<img class="sliderImg" src="https://picsum.photos/540/720/?image=696" title="Titel 1.1" alt="Text 1.1" />
</div>
</div>
<p class="captionTitle"></p>
<p class="caption"></p>
</div>
<hr>
<div class="carousel-container">
<p class='carousel-headline'>Carousel 2</p>
<div class="carousel">
<div class="carousel-cell">
<img class="sliderImg" src="https://picsum.photos/720/540/?image=517" title="Titel 2" alt="Text 2" />
</div>
<div class="carousel-cell">
<img class="sliderImg" src="https://picsum.photos/540/720/?image=696" title="Titel 2.1" alt="Text 2.1" />
</div>
</div>
<p class="captionTitle"></p>
<p class="caption"></p>
</div>
<div id="myModal" class="modal">
<span class="close">close</span>
<img class="modal-content" id="modalImage">
<div id="caption"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
CodePen

Add image below a certain class of element using css

What I want to do:
I want to add a "walkingMan" image under an element when its class is changed to activeCell. I know how to do it when the image is added to the front or back of the element using pseudo class, but as far as I know, there isn't something like :below that I can use to achieve the same effect. Is there a way in css I can use to micmic this?
What I have done:
I have added image below every upper cell and make it visible when the class is changed to activeCell. But I hope to find a more simple solution.
What it looks like:
Code: Simplified Code Example

You can use a single pseudo element on the .cell element and place a background image on it when it's active.
let activeIndex = 0;
const cells = [...document.querySelectorAll('.cell')];
setInterval(() => {
cells.forEach(cell => {
cell.classList.remove('activeCell')
});
cells[activeIndex].classList.add('activeCell');
activeIndex = activeIndex === cells.length - 1 ? 0 : (activeIndex + 1);
}, 300)
.cell {
display: inline-block;
border: 1px solid black;
margin-bottom: 1.2em;
}
.activeCell {
background-color: lightgrey;
position: relative;
}
.activeCell::after {
content: "";
position: absolute;
width: 1em;
height: 1em;
top: 1.3em;
left: calc(50% - .5em); /* Center the stickman. Position it half of its width before the parent center*/
background-image: url('https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png');
background-size:cover; /* Scale the stickman to completely cover the background area. */
}
<div>
<div class='top'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>

What about this: https://jsfiddle.net/147prwy5/3/
HTML
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
CSS
.cell {
display: inline-block;
}
.cell a {
border: 1px solid black;
}
.cell.active a {
background-color: lightgrey;
}
.cell img {
width: 20px;
height: 20px;
display: none;
}
.cell.active img {
margin-top: 5px;
width: 20px;
height: 20px;
display: block;
}

I've never been a fan of the ::before and ::after pseudo classes mainly because I've personally noticed some oddities when trying to position things in Chrome vs IE (damn it IE!). Since most people here are going to give a solution using these pseudo classes (because that's somewhat what you asked) I thought I'd give a different solution using flexbox and more divs.
Not the most optimal for download size but I do like that it's not absolute positioning elements and if the squares get bigger or smaller it's pretty easy to handle that as a scss variable at the top of the file. This all uses only two values, your padding between boxes and the size of the boxes so it should be easy to update and maintain.
Anyway, have fun! Awesome question by the way :-)
.blocks {
display: flex;
}
.block {
flex: 0 0 20px;
margin: 0px 5px;
display: flex;
flex-direction:column;
}
.block > .square {
flex: 0 0 20px;
margin: 5px 0px;
background: grey;
}
.block > .space {
flex: 0 0 20px;
margin: 5px 0px;
}
.block.activeCell > .space {
background: green;
}
<div class="blocks">
<div class="block activeCell"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
</div>
<div class="blocks">
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
</div>

Using jQuery you can toggle the class upon clicking with this:
$('.cell').click(function() { //catch clicks on .cell
$('.cell').removeClass('activeCell'); //remove class "activeCell" from all
$(this).addClass('activeCell'); //add class "activeCell" to .cell clicked
});
Apply position: relative; to .top and .bottom:
.top,
.bottom {
position: relative;
}
And use the psuedoclass :before to create a image under the .activeCell
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
And remove this:
.walkingMan {
width: 20px;
height: 20px;
display: inline-block
}
And this:
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" class='walkingMan'/>
And to add space between the divs .top and .bottom put a <br> between them.
$('.cell').click(function() {
$('.cell').removeClass('activeCell');
$(this).addClass('activeCell');
});
.cell {
display: inline-block;
border: 1px solid black;
cursor: pointer;
}
.top,
.bottom {
position: relative;
}
.activeCell {
background-color: lightgrey;
}
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<div class='top'>
<a class='cell activeCell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<br>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>

add .RunManActive Class for Active element
//clicking add active Class
$(".RunMan").click(function() {
$(".RunMan").removeClass('RunManActive');
$(this).toggleClass('RunManActive');
});
//timing add active Class
var i=0;
var $elm=$(".Animate");
setInterval(function(){
$elm.removeClass('RunManActive');
$elm.eq(i).toggleClass('RunManActive');
i=$elm.length<=i?0:i+1;
}, 1000);
.RunMan{
width:35px;
height:35px;
background-color:lightgray;
border:3px solid #fff;
float:left;
position: relative;
}
.RunManActive{
background-color:#eee;
border:3px solid lightgray;
}
.RunManActive > div{
width:35px;
height:35px;
position: absolute;
background-image:url(http://www.iconsfind.com/wp-content/uploads/2013/11/Objects-Running-man-icon.png);
background-size:cover;
top:100%;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RunMan"><div></div></div>
<div class="RunMan RunManActive"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<br><br><br><br><br><br>
<div style=" width:100%">
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan "><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>

You can do something like this, using CSS only. With :target selector you can apply a style to the element you need to hide / show.
.container {
display: inline-block;
width: 100px;
height: 200px;
}
.link {
display: block;
width: 100px;
height: 100px;
background: #ccc;
}
.walking-man {
display: none;
width: 100px;
height: 100px;
background: red;
}
#p1:target {
display: block;
}
#p2:target {
display: block;
}
#p3:target {
display: block;
}
#p4:target {
display: block;
}
height: 90px;
float: left;
}
.walking-man img {
width: 100%;
}
.walkin-man:target {
display: block;
}
<div class="container">
<div id="p1" class="walking-man"></div>
</div>
<div class="container">
<div id="p2" class="walking-man"></div>
</div>
<div class="container">
<div id="p3" class="walking-man"></div>
</div>
<div class="container">
<div id="p4" class="walking-man"></div>
</div>

Set width of child div in flex container

I have 4 divs with the class .piece-slide that horizontally scroll across the page within the the div #work, which is a flex element. Within the third .piece-slide div the 3 nested elements are absolutely positioned, this renders the width of the third .piece-slide div to 0, so now I want to programmatically set the width of the third .piece-slide div so that it covers the 3 nested elements.
For some reason I am unable to set this width through CSS. I have also tried through jQuery. It would be much appreciated if some pointed me in the right direction as how to rectify this. Here is a jsfiddle as well as the embedded code below.
$("#third-div").outerWidth("100vw");
#wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
flex: 1;
}
#work {
height: 100%;
overflow-x: scroll;
display: flex;
background-color: red;
}
.piece-slide {
display: flex;
align-items: center;
position: relative;
padding-right: 5em;
box-sizing: border-box;
border-right: 1px solid black;
}
.piece {
width: 25vw;
margin: 10px;
}
.piece img {
max-width: 100%;
}
#third-div {
/* D0ES NOT WORK */
width: 100vw;
background-color: green;
}
#third-div a {
position: absolute;
}
#third-div a:nth-child(1) {
top: 0;
left: 0;
}
#third-div a:nth-child(2) {
top: 25vw;
left: 25vw;
}
#third-div a:nth-child(3) {
left: 60vw;
}
<div id="wrapper">
<div class="content">
<div id="work">
<div class="piece-slide">
<a class="piece">
<img src="https://athlonecommunityradio.ie/wp-content/uploads/2017/04/placeholder.png">
</a>
</div>
<div class="piece-slide">
<a class="piece">
<img src="https://dummyimage.com/hd1080https://dummyimage.com/hd1080">
</a>
<a class="piece">
<img src="https://dummyimage.com/hd1080https://dummyimage.com/hd1080">
</a>
</div>
<!-- THIRD DIV WHERE WIDTH SHOULD BE SET -->
<div id="third-div" class="piece-slide">
<a class="piece" num="1">
Nested Element 1<img src="http://i.stack.imgur.com/yZlqh.png">
</a>
<a class="piece" num="2">
Nested Element 2<img src="http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif">
</a>
<a class="piece" num="3">
Nested Element 3<img src="http://suplugins.com/podium/images/placeholder-02.jpg">
</a>
</div>
<div class="piece-slide">
<a class="piece">
<img src="https://athlonecommunityradio.ie/wp-content/uploads/2017/04/placeholder.png">
</a>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Try to remove
flex-direction: column;
from #wrapper.
Or change it to
flex-direction: row;