Develop Reference

querySelectorAll selects more than one element

const ratingElements = document.querySelectorAll(".ratings");
ratingElements.forEach((ratingElement) => {
ratingElement.addEventListener("click", (event) => {
console.log(event.target.innerText || event.target.parentNode.innerText); // || means "OR"
event.target.classList.add("active")
event.target.parentNode.classList.add("active")
});
});
.ratings__container {
display: flex;
padding: 20px 0;
gap: 5px;
}
.ratings {
min-width: 100px;
cursor: pointer;
padding: 5px;
margin: 10px 5px;
}
.ratings:hover, .active{
background: darkseagreen;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
color: aliceblue;
transition: all 300ms ease;
}
<div class="container" id="container">
<h1 class="heading">Feedback UI</h1>
<div class="ratings__container" id="ratings__container">
<div class="ratings" aria-label="unhappy">
<img src="unhappy.svg" alt="Unhappy" class="emoji-icon">
<small>Unhappy</small>
</div>
<div class="ratings" aria-label="neutral">
<img src="neutral.svg" alt="Neutral" class="emoji-icon">
<small>Neutral</small>
</div>
<div class="ratings" aria-label="happy">
<img src="happy-icon.svg" alt="Happy" class="emoji-icon">
<small>Happy</small>
</div>
</div>
<button class="btn">
Send Review
</button>
</div>
it should likely to be this
but it is like

You were adding active class to the parent div which is why whole div is turning green when you click on one emoji. One more thing was , when you click on one emoji then click on other both of them were getting green background color. Here is the solution .
const ratingElements = document.querySelectorAll(".ratings");
const images= document.getElementsByClassName("emoji-icon");
ratingElements.forEach((ratingElement) => {
ratingElement.addEventListener("click", (event) => {
for(image of images){
image.classList.remove("active");
}
event.target.classList.add("active")
});
});
.ratings__container {
display: flex;
padding: 20px 0;
gap: 5px;
background-color:aqua;
}
img
{
width:100px;
}
.ratings {
min-width: 100px;
cursor: pointer;
padding: 5px;
margin: 10px 5px;
}
.ratings:hover, .active{
background: darkseagreen;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
color: aliceblue;
transition: all 300ms ease;
}
<div class="container" id="container">
<h1 class="heading">Feedback UI</h1>
<div class="ratings__container" id="ratings__container">
<div class="ratings" aria-label="unhappy">
<img src="https://cdn.shopify.com/s/files/1/1061/1924/products/Happy_Emoji_Icon_5c9b7b25-b215-4457-922d-fef519a08b06_large.png?v=1571606090 alt="Unhappy" class="emoji-icon">
<small>Unhappy</small>
</div>
<div class="ratings" aria-label="neutral">
<img src="https://cdn.shopify.com/s/files/1/1061/1924/products/Happy_Emoji_Icon_5c9b7b25-b215-4457-922d-fef519a08b06_large.png?v=1571606090" alt="Neutral" class="emoji-icon">
<small>Neutral</small>
</div>
<div class="ratings" aria-label="happy">
<img src="https://cdn.shopify.com/s/files/1/1061/1924/products/Happy_Emoji_Icon_5c9b7b25-b215-4457-922d-fef519a08b06_large.png?v=1571606090" alt="Happy" class="emoji-icon">
<small>Happy</small>
</div>
</div>
<button class="btn">
Send Review
</button>
</div>
remove event.target.parentNode.classList.add("active") . Then select images using getElementsByClassName()(or whichever method you prefer) then remove class active for all of them . Then add class active to only one emoji .

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 to Maintain Zoom on Image while Adding a Hyperlink

I would like to add a hyperlink to the images (so that it will open a larger version of the image) within the gallery while maintaining the 'zoom' effect on the thumbnail. I attempted to add a hyperlink to the first image but the zoom was no longer running. I apologise if my explanation isn't very good, I'm new to coding languages! Any help would be great!
Here is the link where I got the gallery code if it is any use to anyone! https://codepen.io/oknoblich/pen/ELfzd
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" > < /script> <
script type = "text/javascript" >
(function() {
var documentElem = $(document),
nav = $('nav'),
lastScrollTop = 0;
documentElem.on('scroll', function() {
var currentScrollTop = $(this).scrollTop();
//scroll down
if (currentScrollTop > lastScrollTop) nav.addClass('hidden');
//scroll up
else nav.removeClass('hidden');
lastScrollTop = currentScrollTop;
});
})();
<
/script>
<!-- End of Javascript for Navigation Menu -->
<style type="text/css">#import url('https://fonts.googleapis.com/css?family=Open+Sans:300');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery {
width: 640px;
margin: 0 auto;
padding: 5px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.gallery>div {
position: relative;
float: left;
padding: 5px;
}
.gallery>div>img {
display: block;
width: 200px;
transition: .1s transform;
transform: translateZ(0);
/* hack */
}
.gallery>div:hover {
z-index: 1;
}
.gallery>div:hover>img {
transform: scale(1.1, 1.1);
transition: .3s transform;
}
.cf:before,
.cf:after {
display: table;
content: "";
line-height: 0;
}
.cf:after {
clear: both;
}
h1 {
margin: 40px 0;
font-size: 30px;
font-weight: 300;
text-align: center;
}
</style>
<body>
<!-- Start of Navigation Bar -->
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li id="current">Gallery</li>
<li>Contact</li>
</ul>
</nav>
<!-- End of Navigation Bar -->
<br />
<br />
<h1> Gallery </h1>
<!-- Stat of Gallery -->
<div class="gallery cf">
<!-- This is the image I tried to link but when I ran the code the zoom was no longer maintained. -->
<div>
<img src="Images/Optimized/Thumbnail_1.jpg" width="200" height="300" alt="" />
</div>
<div>
<img src="Images/Optimized/Thumbnail_2.jpg" width="200" height="300" alt="" /> </div>
<div>
<img src="Images/Optimized/Thumbnail_3.jpg" width="200" height="300" alt="" /> </div>
<div>
<img src="Images/Optimized/Thumbnail_4.jpg" width="200" height="300" alt="" /> </div>
<div>
<img src="Images/Optimized/Thumbnail_5.jpg" width="200" height="300" alt="" /> </div>
<div>
<img src="Images/Optimized/Thumbnail_6.jpg" width="200" height="300" alt="" /> </div>
</div>

Here is the code this will work for sure and will display image in large size.
https://jsfiddle.net/fsfrkru0/
HTML & CSS
#import url('https://fonts.googleapis.com/css?family=Open+Sans:300');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 14px/1 'Open Sans', sans-serif;
color: #555;
background: #e5e5e5;
}
.gallery {
width: 640px;
margin: 0 auto;
padding: 5px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.gallery>div>a {
position: relative;
float: left;
padding: 5px;
}
.gallery>div>a>img {
display: block;
width: 200px;
transition: .1s transform;
transform: translateZ(0);
/* hack */
}
.gallery>div:hover>a {
z-index: 1;
}
.gallery>div:hover>a>img {
transform: scale(1.7, 1.7);
transition: .3s transform;
}
.cf:before,
.cf:after {
display: table;
content: "";
line-height: 0;
}
.cf:after {
clear: both;
}
h1 {
margin: 40px 0;
font-size: 30px;
font-weight: 300;
text-align: center;
}
<h1>Simple CSS Image Gallery with Zoom</h1>
<div class="gallery cf">
<div>
<img src="http://abload.de/img/a6aawu.jpg" styles="" />
</div>
<div>
<img src="http://abload.de/img/a6aawu.jpg" styles="" />
</div>
<div>
<img src="http://abload.de/img/a6aawu.jpg" styles="" />
</div>
<div>
<img src="http://abload.de/img/a6aawu.jpg" styles="" />
</div>
<div>
<img src="http://abload.de/img/a6aawu.jpg" styles="" />
</div>
<div>
<img src="http://abload.de/img/a6aawu.jpg" styles="" />
</div>
</div>
Hope this helps.

The zoom is done using css and applied to the hover event if you apply the element a class with the same rules on click event it will keep the css properties.
I didn't get the question right at first but you also need to change the CSS, .gallery>div>img means an element with class gallery immediately followed by a div immediately followed by an img, to include both img and a tags you need to remove the > ".gallery>div img"

How to scroll images without using marquee tag? Javascript,jquery or css anything

<marquee>
<div class="client">
<img src="images/c1.png"/>
</div>
<div class="client">
<img src="images/c2.png"/>
</div>
<div class="client">
<img src="images/c3.png"/>
</div>
<div class="client">
<img src="images/c4.png"/>
</div>
<div class="client">
<img src="images/c5.png"/>
</div
><div class="client">
<img src="images/c6.png"/>
</div
><div class="client">
<img src="images/c7.png"/>
</div>
</marquee>
I wanted to scroll these images without using html's marquee tag...please help me.I have used css keyframes but I didn't get what I wanted. These images are in index page bottom side. This is clients logos scrolling from left to right or right to left....thanks in advance.

/*download .js file from here and include it in ur project */
http://technicalpixel.com/post%20sample%20code/Continous%20Horizontal%20JQuery%20Image%20Marquee/assets/js/crawler.js
<head>
<script src="assets/js/crawler.js" type="text/javascript" ></script>
</head>
/* add id to ur div tag */
<div id="marquee">
<div class="client">
<img src="images/c1.png"/>
</div>
<div class="client">
<img src="images/c2.png"/>
</div>
<div class="client">
<img src="images/c3.png"/>
</div>
<div class="client">
<img src="images/c4.png"/>
</div>
<div class="client">
<img src="images/c5.png"/>
</div
><div class="client">
<img src="images/c6.png"/>
</div
><div class="client">
<img src="images/c7.png"/>
</div>
</div>
/* Add this script in ur project in head tag*/
marqueeInit({
uniqueid: 'marquee',
style: {
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true,
random: true
});

Please try this:
<style type="text/css">
/* Make it a marquee */
.marquee {
width: 450px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 50s linear infinite;
}
.marquee:hover {
animation-play-state: paused
}
/* Make it move */
#keyframes marquee {
0% { text-indent: 27.5em }
100% { text-indent: -105em }
}
/* Make it pretty */
.microsoft {
padding-left: 1.5em;
position: relative;
font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
/* ::before was :before before ::before was ::before - kthx */
.microsoft:before, .microsoft::before {
z-index: 2;
content: '';
position: absolute;
top: -1em; left: -1em;
width: .5em; height: .5em;
box-shadow: 1.0em 1.25em 0 #F65314,
1.6em 1.25em 0 #7CBB00,
1.0em 1.85em 0 #00A1F1,
1.6em 1.85em 0 #FFBB00;
}
.microsoft:after, .microsoft::after {
z-index: 1;
content: '';
position: absolute;
top: 0; left: 0;
width: 2em; height: 2em;
background-image: linear-gradient(90deg, white 70%, rgba(255,255,255,0));
}
/* Style the links */
.vanity {
color: #333;
text-align: center;
font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.vanity a, .microsoft a {
color: #1570A6;
transition: color .5s;
text-decoration: none;
}
.vanity a:hover, .microsoft a:hover {
color: #F65314;
}
/* Style toggle button */
.toggle {
display: block;
margin: 2em auto;
}
</style>
<p class="microsoft marquee"><img src="https://s-media-cache-ak0.pinimg.com/236x/a2/4b/48/a24b48e465e666fffd4cbcaa79107c7c.jpg" /></p>
<button class="toggle">Toggle Beautification</button>
<script type="application/javascript">
$(".toggle").on("click", function () {
$(".marquee").toggleClass("microsoft");
});
</script>
http://jsfiddle.net/jonathansampson/XxUXD/

Slideshow using background images with navigation and captions

I have a div which currently has a static background image, and I need to create a slideshow of background images and text for this div. I would like to fade the background images and the caption text in and out. Does anyone know of a good way to do this using jQuery? My knowledge of JavaScript and jQuery is very limited. I tried to use some ready-made plugins as the Backstretch, Responsiveslides but I could not understand them enough and edit them for my use.
Here is my current code: http://jsfiddle.net/1zdyh3wo/
HTML
<div class="content bg-slider">
<div class="wrapper">
<h1 class="sectionTitle">Image title 1</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the first image. Wanna know more? Click here.</h2>
<div class="nav-wrapper">
<div class="nav-arrows prev"></div>
<div class="nav-dots">
<div class="current"></div>
<div class=""></div>
<div class=""></div>
</div>
<div class="nav-arrows next"></div>
</div>
</div>
CSS:
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
/* -- COMMON -- */
body {
font: 400 14px 'Montserrat', Helvetica, sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
color: white;
}
.separator {
width: 24px;
height: 4px;
}
.separator.white {
background-color: white;
}
.separator.black {
background-color: black;
}
/* -- MENU -- */
/* -- CANVAS -- */
.content {
position: absolute;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.wrapper {
position: absolute;
right: 0;
bottom: 100px;
left: 0;
width: 33.333333333%;
margin: 0 auto;
}
.sectionTitle {
font: 700 32px/24px 'Montserrat', Helvetica, sans-serif;
line-height: 24px;
margin-bottom: 24px;
letter-spacing: 4px;
}
.sectionDescription {
font: 400 14px/18px 'Montserrat', Helvetica, sans-serif;
margin-top: 24px;
}
/* -- SLIDER -- */
.bg-slider {
background: url(../img/slides/image1.jpg) no-repeat center center fixed;
background-color: red; /* demo purpose only */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* -- SLIDER - NAVEGATION -- */
.nav-wrapper {
display: inline-block;
min-width: 250px;
margin-top: 24px;
padding: 4px;
}
/* -- SLIDER - NAVEGATION ARROWS -- */
.nav-arrows {
float: left;
width: 20px;
height: 20px;
cursor: pointer;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border: 4px solid white;
}
.nav-arrows.prev {
border-top: none;
border-right: none;
}
.nav-arrows.next {
border-bottom: none;
border-left: none;
}
/* -- SLIDER - NAVEGATION DOTS -- */
.nav-dots {
margin: 0px 8px;
float: left;
}
.nav-dots div{
float: left;
width: 12px;
height: 12px;
margin: 4px 18px;
cursor: pointer;
border-radius: 50%;
background: rgba(255,255,255,.5);
}
.nav-dots .current:after {
float: left;
width: 12px;
height: 12px;
content: '';
border-radius: 50%;
background: white;
}
Here a visual aid, how I would like the result to be:
Desktop version:
Mobile version:

To keep things really simple:
Make a "wrapper" div for the entire slider
Make an individual "wrapper" div for each individual slide
Put the slider navigation outside of of the individual slides (I put it outside of the slider altogether, but that's your choice based on your desired positioning).
Make a function that will do all the transitions
Here's an example HTML structure, based on yours
<div id="slider">
<div class="content bg-slider active">
<div class="wrapper">
<h1 class="sectionTitle">Image title 1</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the first image. Wanna know more? Click here.</h2>
</div>
</div>
<div class="content bg-slider">
<div class="wrapper">
<h1 class="sectionTitle">Image title 2</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the second image. Wanna know more? Click here.</h2>
</div>
</div>
<div class="content bg-slider">
<div class="wrapper">
<h1 class="sectionTitle">Image title 3</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the third image. Wanna know more? Click here.</h2>
</div>
</div>
</div>
Here's the functional JavaScript, with comments.
$(document).ready(function(){
// Hide all slides, re-show first:
$(".bg-slider").hide()
$(".bg-slider:first-child").show();
// Prev button click
$(".nav-arrows.prev").click(function(){
slidePrev();
})
// Next button click
$(".nav-arrows.next").click(function(){
slideNext();
})
// "Dots" click
$(".nav-dots div").click(function(){
slideTo($(this).index());
})
});
// "Previous" function must conclude if we are at the FIRST slide
function slidePrev() {
if ($("#slider .active").index() == 0) {
slideTo($("#slider .bg-slider").length - 1);
}
else {
slideTo($("#slider .active").index() - 1);
}
}
// "Next" function must conclude if we are at the LAST slide
function slideNext() {
if ($("#slider .active").index() == $("#slider .bg-slider").length - 1) {
slideTo(0);
}
else {
slideTo($("#slider .active").index() + 1);
}
}
// Slide To will be called for every slide change. This makes it easy to change the animation, or do what you want during the transition.
function slideTo(slide) {
$("#slider .active").fadeOut().removeClass("active");
$("#slider .bg-slider").eq(slide).fadeIn().addClass("active");
$(".nav-dots .current").removeClass("current");
$(".nav-dots div").eq(slide).addClass("current");
}
Finally, here's the updated Fiddle to demonstrate: http://jsfiddle.net/1zdyh3wo/1/