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!

Navigation bar - not closing when clicking the current section

Hello,
I have a working navigation bar sliding out of the page when the user clicks on the menu icon. It shows up only on mobile version of the website.
When u want to close the bar, you click on "x" or outside the div, somewhere in the background.
When I click on a section name, the page refreshes and the navigation closes. The problem appears when I click on the current section. The page does not refresh, so you have to close the navigation manually.
I want my navigation bar to close everytime an user clicks a link. Do you have any idea how can I achieve that?
This is my website: https://www.poznanprzeprowadzki.pl
This is my html for this part:
<div id="menu-mobile" class="menu-mobile">
<div class="menu-mobile-close" onclick=closeNav()>
<p>x</p>
</div>
<div class="menu-mobile-header">
<img src="img/poznanprzeprowadzki_logo3.png" name="Poznań przeprowadzki logo" alt="Poznań przeprowadzki logo"></a>
<p class="lang" key="you-are-free-to-contact">Zapraszamy do kontaktu!</p>
</div>
<a href="index.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="20px" src="img/Home_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="home">Strona główna</p>
</div>
</div></a>
<a href="about.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="20px" src="img/About_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="about">O nas</p>
</div>
</div></a>
<a href="gallery.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="15px" src="img/Gallery_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="gallery">Galeria</p>
</div>
</div></a>
<a href="contact.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="15px" src="img/Contact_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="contact">Kontakt</p>
</div>
</div></a>
<a href="advices.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="15px" height="20px" src="img/Advices2_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="advices">Pomoc / Porady</p>
</div>
</div></a>
</div>
<div id="menu-mobile-background" class="menu-mobile-background" onclick=closeNav()>
</div>
This is my css for this part:
.menu-mobile {
display: block;
height: 100%;
width: 250px;
position: fixed;
z-index: 9999;
top: 0;
right: -255px;
background-color: rgba(100,100,100,1);
overflow-x: hidden;
transition: 0.4s;
}
.menu-mobile-close {
position: absolute;
top: 5px;
right: 10px;
transition: 0.05s;
}
.menu-mobile-background {
right: 0;
top: 0;
position: fixed;
overflow: hidden;
z-index: 9998;
width: 0px;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
.menu-mobile-header {
min-width: 250px;
padding: 16px;
text-align: center;
background-color: white;
}
.menu-mobile-header p {
font-family: Open Sans;
font-size: 14px;
color: rgba(100,100,100,1);
padding: 2px;
font-weight: 500;
display: block;
white-space: nowrap;
}
.menu-mobile-header img {
margin: 0 auto;
height: 65px;
padding-bottom: 6px;
}
.menu-mobile-close p:hover {
color: rgba(240,240,240,1);
cursor: pointer;
}
.menu-mobile-close p {
font-family: Open Sans;
font-size: 18px;
color: rgba(100,100,100,1);
font-weight: 600;
display: block;
}
This is my JS for this part:
function openNav() {
document.getElementById("menu-mobile").style.right = "0px";
document.getElementById("menu-mobile-background").style.width = "100%";
}
function closeNav() {
document.getElementById("menu-mobile").style.right = "-255px";
document.getElementById("menu-mobile-background").style.width = "0px";
}
Here is a picture of my navigation bar:

Add this script in your js file:
$(document).ready(function() {
$('.menu-mobile a').click(function(e) {
e.preventDefault(); // if the link don't reload all the page
closeNav();
})
});
Another solution, if you want to wait something before redirect:
$(document).ready(function() {
$('.menu-mobile a').click(function(e) {
e.preventDefault(); // is required
closeNav();
setTimeout(() => {
const nextPage = e.currentTarget.href;
window.location.href = nextPage;
},1000) // set the time here in milliseconds
})
});

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>

Jquery animation only shows when mouse is moving.

I have no idea why this happens and I've already googled it. I've made a slideshow that scrolls the leftmost element outside of screen then appends it to the end of the container. That function itself seems to work as expected. However the animation only shows when I'm moving my mouse so something is wrong here.
Any idea of what?
Without moving mouse: https://gyazo.com/78048123b10e1d2683b102419761c0ef
When moving mouse: https://gyazo.com/f10bf8a10bc119840bd6b5b1168e79db
Html:
<section class="photo-grid-slideshow">
<div class="photo-crop">
<h3>I wanna
<div class="xs-spacer"></div>
<a class="med-btn btn-white">Read more</a>
</h3>
<div class="photo-grid-container" style="background-image: url('Images and videos/odesza1.jpg');"></div>
</div>
<div class="photo-crop">
<h3>Dance
<div class="xs-spacer"></div>
<a class="med-btn btn-white">Read more</a>
</h3>
<div class="photo-grid-container" style="background-image: url('Images and videos/odesza3.jpg');"></div>
</div>
<div class="photo-crop">
<h3>With you
<div class="xs-spacer"></div>
<a class="med-btn btn-white">Read more</a>
</h3>
<div class="photo-grid-container" style="background-image: url('Images and videos/odesza2.png');"></div>
</div>
</section>
Css:
.photo-crop {
display: inline-block;
overflow: hidden;
float: left;
width: calc(100% / 3);
height: 100%;
line-height: 100%;
margin: 0;
margin-right: 0;
padding: 0;
position: relative;
left: 0;
right: 0;
background-position: center center;
background-size: cover;
transition: all 0.2s;
text-align: left;
}
.photo-grid-slideshow {
height: 300px;
display: inline-block;
min-width: 100%;
position: relative;
background: black;
padding: none;
overflow: hidden;
background: #444;
}
Javascript:
$(function () {
var timer = setInterval(function() {
$(".photo-grid-slideshow .photo-crop:first-child").animate({marginLeft: '-=33vw'}, 1000, "linear", function() {
$(this).css("margin-left", 0).appendTo('.photo-grid-slideshow');
});
}, 1000);
});
I'm very thankful if ýou can help me get this to work. :)

I got it to work at least. The problem was that the .photo-crop class had transition: ALL on it. Because of that it couldn't animate it in jquery. Silly mistake, but for me it wasn't apparent.
Hope this can help someone else in the future!

Logging an attribute from CSS Modal

My problem is that when attempting to log an attribute from an image, when there are multiple images on the page, I am only able to log the first attribute.
Here's a fiddle.
http://jsfiddle.net/fauverism/b9kwT/4/
CSS
#page1, #page2, #page3, #page4 {
display: inline-block;
}
.active-page {
border: 4px groove seagreen;
}
.inactive-page-unlocked {
border: 4px ridge papayawhip;
}
.modalbg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
background: rgba(0, 0, 0, 0);
z-index: 1000;
transition: all 0.2s ease-out;
pointer-events: none;
}
.modalbg .dialog {
display: inline-flex;
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
margin: auto;
background-clip: contain;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.modalbg:target {
opacity: 1;
pointer-events: auto;
background: rgba(0, 0, 0, 0.6);
transition: all 0.2s ease-out;
}
HTML
<div class="main-content">
<div id="page1" class="active-page">
<a class="magnify" href="#zoomWindow100100.GIF">
<img id="100100.GIF-img" name="100100.GIF" src="http://placekitten.com/100/100">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow100100.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/100/100)"></div>
</div>
</a>
</div>
<div id="page2" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow120120.GIF">
<img id="120120.GIF-img" name="120120.GIF" src="http://placekitten.com/120/120">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow120120.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/120/120)"></div>
</div>
</a>
</div>
<div id="page3" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow140140.GIF">
<img id="140140.GIF-img" name="140140.GIF" src="http://placekitten.com/140/140">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow140140.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/140/140)"></div>
</div>
</a>
</div>
<div id="page4" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow160160.GIF">
<img id="160160.GIF-img" name="160160.GIF" src="http://placekitten.com/160/160">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow160160.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/160/160)"></div>
</div>
</a>
</div>
JavaScript
function openZoomWindow() {
$('.magnify').on('click', function() {
var nameVal = $('img').attr('id');
console.log("show_inline_exhibit","name="+nameVal);
});
}
function closeZoomWindow() {
$('.modal-container').on('click', function() {
var nameVal = $('.modalbg').attr('id');
console.log("show_inline_exhibit","id="+nameVal);
});
}
openZoomWindow();
closeZoomWindow();
Some details...
I've tried using this in various ways to no avail. I've tried using .each() .children(). No dice. I tried using onclick to instantiate the functions.
I don't have to log the id attribute. Logging the name will work just fine.
Thanks so much for reading this and thanks in advance for helping out if you're submitting code. This has had me stumped.

You need to select the element you're clicking on, so find the img inside the anchor:
var nameVal = $(this).find('img').attr('id');