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!

How to make transparent element while dragging in Chrome?

I have a card element that can be dragged from one column to another column. This works, except the card has a transparent dropzone element inside it that becomes opaque on Chrome browsers when dragging. This problem is not the case on Firefox or Safari.
You can see the code here.
How can I fix this problem on Chrome browsers?
I tried by playing with opacity and rgb() in css, but with no success. See the code below.
#board {
display: flex;
padding: 8px;
width: 800px;
}
#board * {
font-family: sans-serif;
}
.board__column {
flex: 1;
background: #fcb51d;
padding: 10px;
border-radius: 5px;
}
.board__column:not(:last-child) {
margin-right: 10px;
}
.board__column-title {
margin-bottom: 20px;
font-size: 30px;
color: white;
user-select: none;
}
.board__item-card {
box-sizing: border-box;
cursor: pointer;
background: white;
padding: 8px;
border-radius: 8px;
}
.board__item-input {
background: white;
padding: 10px 15px;
border-radius: 5px;
}
.board__dropzone {
height: 10px;
transition: background 0.15s, height 0.15s;
}
.board__dropzone--active {
height: 20px;
background: rgba(0, 0, 0, 0.25);
}
.board__add-item {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: white;
background: rgba(0, 0, 0, 0.1);
border: none;
border-radius: 5px;
cursor: pointer;
}
<div id="board">
<!-- Todo's tasks -->
<div class="board__column">
<div class="board__column-title">Todo</div>
<div class="board__column-items">
<div class="board__card" draggable="true">
<div class="board__item-card">
My first todo task 🤓
</div>
<div class="board__dropzone"></div>
</div>
<div class="board__card" draggable="true">
<div class="board__item-card">
My second todo task...
</div>
<div class="board__dropzone"></div>
</div>
</div>
<button class="board__add-item" type="button">+ Add card</button>
</div>
<!-- In progress tasks -->
<div class="board__column">
<div class="board__column-title">In Progress</div>
<div class="board__column-items">
<div class="board__card" draggable="true">
<div class="board__item-card">
I'm working on the task 😁
</div>
<div class="board__dropzone"></div>
</div>
</div>
<button class="board__add-item" type="button">+ Add card</button>
</div>
<!-- Done tasks -->
<div class="board__column">
<div class="board__column-title">Done</div>
<div class="board__column-items">
<div class="board__item-card" draggable="true">
<div class="board__item-card">
I finished the task 😇
</div>
<div class="board__dropzone"></div>
</div>
</div>
<button class="board__add-item" type="button">+ Add card</button>
</div>
</div>

I Believe it is not the dropzone div element that is turning opaque, I believe that the board__card element being draggable forces it somehow to inherit the color of its parent, please check the following link:
Why HTML draggable element drags with parent background?

how do I make an element not work as href in an entire href card

So I have this card that works as an entire link but inside that, I have an icon under a span tag and I don't want it to work as the card's link rather just act like an icon, Ik I can solve this if I don't make the entire card href but then I'd have to manually turn all the required elements present inside the card into href which I feel like isn't efficient and neat. So any suggestions on how do I go from here?
.card {
width: 250px;
height: 350;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
background-color: white;
margin-left: 30px;
margin-right: 30px;
margin-top: 30px;
margin-bottom: 30px;
cursor: pointer;
}
.top {
display: flex;
justify-content: space-between;
}
.year {
padding-top: 5px;
padding-left: 5px;
font-family: Circular Std Book;
}
.span-bookmark {
padding-left: 5px;
cursor: pointer;
}
{% for m in mlist %}
<div class="card">
<a href="http://www.google.com/search?q={{m.Name}}" target="_blank">
<div class="top">
<div class="year">{{m.Year}}</div>
<span class="span-bookmark"><i class="material-icons bookmark" id="bookmark-style">bookmark</i></span>
</div>
<div class="middle">
<div class="img-container"><img src="{{ m.Image.url }}"></div>
</div>
<div class="bottom">
<div class="title">{{m.Name}}</div>
<div class="target_id">{{m.targetid}}</div>
</div>
</a>
</div>
{% endfor %}

Make sure you have a position set on both the card and the icon div. Then set a z-index for the icon that is higher than the card in your css. Then if you assign the icon to be clickable, it won't click the card link when you click the icon. You can use z-index to arrange all the layers in your card.

You can stop navigation with preventDefault and stop bubbling up to the link with stopPropagation.
In the following demo, clicking on the img doesn't bubble up the DOM. Clicking on the div outside the img bubbles up to the A, as does clicking on the A text.
function showStuff(event) {
// Stop default action, e.g. following a link
event.preventDefault();
// Stop click from bubbling, e.g. to link parent
event.stopPropagation();
// Just for demonstration purposes, delete when no longer required
console.log('Click from ' + event.target.tagName +
' reached ' + event.currentTarget.tagName);
}
window.onload = function() {
// This listener is for demo only and prevents following the link
// Don't add it if you want to follow the link for clicks outside the img
let link = document.querySelector('a');
link.addEventListener('click', showStuff, false);
// This listener stops clicks from the img reaching the A and
// stops navigation from clicks on the img
let img = document.querySelector('img');
img.addEventListener('click', showStuff, false);
}
.card {
width: 250px;
height: 350;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
background-color: white;
margin: 30px;
cursor: pointer;
border: 1px solid green;
}
.middle {
margin: 20px;
border: 1px solid blue;
}
img {
height: 50px;
width: 50px;
margin: 20px;
border: 1px solid red;
cursor: default;
}
<div class="card">
<a href="http://www.google.com/search?q={{m.Name}}" target="_blank">Some link text
<div class="middle">
<div class="img-container"><img src="foo.jpg"></div>
</div>
Some more link text
</a>
</div>

Setting default content with jQuery

In the code below, the default main content is empty. Unless I click on any of the bottom navbar buttons, no content will show up.
I'd like to set content-1 and menu-1 (its respective button) to be the default, i.e. when the user opens the webpage it would be the first thing they see and the button would be black indicating that it is active.
I tried to use an else statement but it did not work:
// set menu-1 as default
else {
$('.menu-1').addClass('default')
$('.content').addClass('default')
}
Find the entire code below:
$(document).ready(function() {
// only show menu-1
$('.menu-1').click(function() {
if ($('.menu-2, .menu-3').hasClass('active')) {
$('.menu-2, .menu-3').removeClass('active');
$('.content-2, .content-3').removeClass('active');
}
// set menu-1 as default
// else {
// $('.menu-1').addClass('default')
// $('.content').addClass('default')
// }
$('.menu-1').addClass('active');
$('.content-1').addClass('active');
});
// only show menu-2
$('.menu-2').click(function() {
if ($('.menu-1, .menu-3').hasClass('active')) {
$('.menu-1, .menu-3').removeClass('active');
$('.content-1, .content-3').removeClass('active');
}
$('.menu-2').addClass('active');
$('.content-2').addClass('active');
});
// only show menu-3
$('.menu-3').click(function() {
if ($('.menu-2, .menu-1').hasClass('active')) {
$('.menu-2, .menu-1').removeClass('active');
$('.content-2, .content-1').removeClass('active');
}
$('.menu-3').addClass('active');
$('.content-3').addClass('active');
});
});
.container {
margin: 0 auto;
background-color: #eee;
border: 1px solid lightgrey;
width: 20vw;
height: 90vh;
font-family: sans-serif;
position: relative;
}
header {
background-color: lightgreen;
padding: 5px;
text-align: center;
text-transform: uppercase;
}
.bottom-navbar {
position: absolute;
bottom: 0;
width: 100%;
padding: 6px 0;
overflow: hidden;
background-color: lightgreen;
border-top: 1px solid var(--color-grey-dark-3);
z-index: 50;
display: flex;
justify-content: space-between;
> a {
display: block;
color: green;
text-align: center;
text-decoration: none;
font-size: 20px;
padding: 0 10px;
&.active {
color: black;
}
}
}
.menu-1.default,
.menu-1.active,
.menu-2.active,
.menu-3.active {
color: black;
}
.content-1,
.content-2,
.content-3 {
display: none;
}
.content-1.default,
.content-1.active,
.content-2.active,
.content-3.active {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<header>My header</header>
<div class="main-content">
<div class="content-1">House content</div>
<div class="content-2">Map content</div>
<div class="content-3">Explore content</div>
<div class="bottom-navbar">
<i class="fa fa-home"></i>
<i class="fa fa-map"></i>
<i class="fa fa-search"></i>
</div>
</div>
In case you find it easier, here's my CodePen:
https://codepen.io/fergos2/pen/vYYaRzN

All that is going on to set up each menu and content item to display on the page is adding the class active. So it looks to me like all you need to do is add that class to the HTML. That way when the page loads it's already "active" and when you click something else you already have it set up to remove the class and set something else as active. So basically, your HTML would look like this:
<header>My header</header>
<div class="main-content">
<div class="content-1 active">House content</div>
<div class="content-2">Map content</div>
<div class="content-3">Explore content</div>
<div class="bottom-navbar">
<i class="fa fa-home active"></i>
<i class="fa fa-map"></i>
<i class="fa fa-search"></i>
</div>
</div>
All I did was give .menu-1 and .content-1 the class of active.
You'll also need to get rid of the css bit which references .content-1.default and .menu-1.default and also set your JS to add the .active back when you click that menu button which you already have. Don't worry about the else statement inside that click function
Let me know if this works out for you!

Toggle/document/click and close other?

Here is the scenario.
Step 1- Click action opens a drop down that can be closed on click of anywhere except the dropdown area and action text.
Problem 1- I want this also to get close on click of action text only. So the solution will be it get close on click of area anywhere except dropdown area and also on click of action text.
Step 2 -
On click of multiple action text opens multiple dropdowns .
Problem 2- I want it the way that if one gets open other gets close.
Code:
$('.ToggleClass a').click(function(ev) {
$(this).next('.ActionDropDown').fadeIn(500);
});
$(document).click(function(e) {
e.stopPropagation();
var container = $(".ToggleClass");
//check if the clicked area is dropDown or not
if (container.has(e.target).length === 0) {
$('.ActionDropDown').fadeOut(500);
}
});
* {
margin: 0px;
padding: 0px;
float: left;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-family: arial;
}
a {
text-decoration: none;
}
body,
html {
width: 100%;
height: 100%;
background: #cbeeff
}
.row1 {
width: 100%;
background: #fff;
margin: 5px 0;
}
.row1-2 {
width: 50%;
position: relative;
text-align: center;
padding: 10px 0;
border-right: 2px solid #000
}
.row1-2+.row1-2 {
border-right: 0px;
}
.row1-2 a {
color: #ff4886;
float: none;
}
.ActionDropDown {
position: absolute;
background: #7bd4ff;
border: 2px solid #000;
top: 20px;
padding: 30px 10px;
display: none;
z-index: 9;
right: 0px;
left: 0px;
max-width: 180px;
margin: 0px auto;
}
.InfoDiv{ width:100%; padding:10px; background:#ffadc9;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-----Row 1--------->
<div class="row1">
<div class="row1-2">Simple Text</div>
<div class="row1-2 ToggleClass"> Action
<div class="ActionDropDown">
I am a Drop Down !
</div>
</div>
</div>
<!-----Row 1--------->
<!-----Row 2--------->
<div class="row1">
<div class="row1-2">Simple Text</div>
<div class="row1-2 ToggleClass"> Action
<div class="ActionDropDown">
I am a Drop Down !
</div>
</div>
</div>
<!-----Row 2--------->
<!-----Row 3--------->
<div class="row1">
<div class="row1-2">Simple Text</div>
<div class="row1-2 ToggleClass"> Action
<div class="ActionDropDown">
I am a Drop Down !
</div>
</div>
</div>
<!-----Row 3--------->
<div class="InfoDiv">
<b>Info:</b> Right now click on Action on each row open drop down multiple times. What I want is when one drop down is open on click of action , the other drop down if open should get close.
</div>

see snippet below or jsfiddle
added this line to your jQuery :
$(this).parents(".row").siblings(".row").find(".ActionDropDown").fadeOut(500)
also added a common class to all parent rows ( class row ) in your HTML
you need to search the other ActionDropDown and close it the same time you open another one
EDIT : added new JQ code for click outside the container + explanation
you can add a new condition to the IF
&& $(".ActionDropDown").has(e.target).length === 0) -> if the clicked element is not a descendant of ActionDropDown . only if you need it
see updated fiddle or snippet below
EDIT2 : added condition to check if dropdown is open when click on the same Action .
var dropDown = $(this).next('.ActionDropDown')
if ($(dropDown).is(":visible")) {
$(dropDown).fadeOut(500)
} else {
$(dropDown).fadeIn(500)
}
see snippet below or the updated fiddle
$('.ToggleClass a').click(function(ev) {
var dropDown = $(this).next('.ActionDropDown')
if ($(dropDown).is(":visible")) {
$(dropDown).fadeOut(500)
} else {
$(dropDown).fadeIn(500)
}
$(this).parents(".row").siblings(".row").find(".ActionDropDown:visible").fadeOut(500)
});
$(document).mouseup(function (e)
{
if (!$(".ActionDropDown").is(e.target) ) // if the target of the click is not the dropDown
{
$(".ActionDropDown").fadeOut(500);
}
});
* {
margin: 0px;
padding: 0px;
float: left;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-family: arial;
}
a {
text-decoration: none;
}
body,
html {
width: 100%;
height: 100%;
background: #cbeeff
}
.row1 {
width: 100%;
background: #fff;
margin: 5px 0;
}
.row1-2 {
width: 50%;
position: relative;
text-align: center;
padding: 10px 0;
border-right: 2px solid #000
}
.row1-2+.row1-2 {
border-right: 0px;
}
.row1-2 a {
color: #ff4886;
float: none;
}
.ActionDropDown {
position: absolute;
background: #7bd4ff;
border: 2px solid #000;
top: 20px;
padding: 30px 10px;
display: none;
z-index: 9;
right: 0px;
left: 0px;
max-width: 180px;
margin: 0px auto;
}
.InfoDiv{ width:100%; padding:10px; background:#ffadc9;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-----Row 1--------->
<div class="row row1">
<div class="row1-2">Simple Text</div>
<div class="row1-2 ToggleClass"> Action
<div class="ActionDropDown">
I am a Drop Down !
</div>
</div>
</div>
<!-----Row 1--------->
<!-----Row 2--------->
<div class="row row1">
<div class="row1-2">Simple Text</div>
<div class="row1-2 ToggleClass"> Action
<div class="ActionDropDown">
I am a Drop Down !
</div>
</div>
</div>
<!-----Row 2--------->
<!-----Row 3--------->
<div class="row row1">
<div class="row1-2">Simple Text</div>
<div class="row1-2 ToggleClass"> Action
<div class="ActionDropDown">
I am a Drop Down !
</div>
</div>
</div>
<!-----Row 3--------->
<div class="InfoDiv">
<b>Info:</b> Right now click on Action on each row open drop down multiple times. What I want is when one drop down is open on click of action , the other drop down if open should get close.
</div>