Develop Reference

How do I toggle the background colors within a list of divs?

From a list of items, each in separate divs, the user can select and click only one. The background color should change on the selected one. If the user changes their mind, they can select another one, and the background color should change to the selected color and all the other divs on the list should change back to the default background color.
It's basically the same logic as a radio button on a form. Only one can be selected at a time.
How do I achieve this?
I have attempted to use the element.classList.toggle property. But it only handles each individually. Are there a javascript command(s) to handle this?
<style>
.teamSelected{
background-color: red;
border-radius: 4px;
}
</style>
<div onclick="toggleBackground(team1)">
<div id="team1">
</div>
</div>
<div onclick="toggleBackground(team2)">
<div id="team2">
</div>
</div>
<div onclick="toggleBackground(team3)">
<div id="team3">
</div>
</div>
<script>
function toggleBackground(teamnumber) {
var element = document.getElementById(teamnumber);
if (element) {
element.classList.toggle("teamSelected");
}
}
</script>
Thanks!

You are passing variables to the function, which don't exist. You need to put them in quotes, because the function is expecting strings.
const allDivs = document.querySelectorAll('.div');
function toggleBackground(teamnumber) {
var element = document.getElementById(teamnumber);
if (element) {
allDivs.forEach(function(el){
el.classList.remove('teamSelected');
});
element.classList.add("teamSelected");
}
}
.toggle > div {
width: 100px;
height: 100px;
border: 1px solid #000;
}
.teamSelected {
background-color: red;
border-radius: 4px;
}
<div onclick="toggleBackground('team1')" class="toggle">
<div id="team1" class="div">
</div>
</div>
<div onclick="toggleBackground('team2')" class="toggle">
<div id="team2" class="div">
</div>
</div>
<div onclick="toggleBackground('team3')" class="toggle">
<div id="team3" class="div">
</div>
</div>

seems like this is something you want?
let x = ('.something');
$(x).on('click', function(){
$(x).css('background','blue');
$(this).css('background', 'green');
});
.something{
width: 100px;
height: 100px;
background: yellow
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="something">
<div id="team1">
</div>
</div>
<div class="something">
<div id="team2">
</div>
</div>
<div class="something">
<div id="team3">
</div>
</div>

Same javascript event for different images?

I have an image that when hover, a div with an overlay will fade in and out.
<div id="img-one">
<div id="overlay-one">
<div class="card-overlay-text">
<p>Enlarge Image<p></div>
</div>
<img src="assets/img/card_one.jpg" alt="" />
</div>
However, I have multiple images and I need to repeat this code for each of these images (assigned with different div's id). How can I get, when hover on specific image.
The code only run on individual image only?
$(function() {
$('#img-one').hover(function() {
$('#overlay-one').stop(true,true).fadeIn();
}, function() {
$('#overlay-one').stop(true,true).fadeOut();
});
});

Use general class in all the image containers div's and overlay div's, like :
<div id="img-one" class='img-container'>
<div id="overlay-one" class='overlay'>
...
</div>
</div>
Then adjust you JS code to invoke just related overlay :
$(function() {
$('.img-container').hover(function() {
$('.overlay', this).stop(true,true).fadeIn();
}, function() {
$('.overlay', this).stop(true,true).fadeOut();
});
});
Hope this helps.
$(function() {
$('.img-container').hover(function() {
$('.overlay', this).stop(true,true).fadeIn();
}, function() {
$('.overlay', this).stop(true,true).fadeOut();
});
});
.img-container{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='img-container'>
<div class='overlay'>
<div class="card-overlay-text">
<p>Enlarge Image 1<p></div>
</div>
</div>
<div class='img-container'>
<div class='overlay'>
<div class="card-overlay-text">
<p>Enlarge Image 2<p></div>
</div>
</div>
<div class='img-container'>
<div class='overlay'>
<div class="card-overlay-text">
<p>Enlarge Image 3<p></div>
</div>
</div>

You'll better use classes. Then do something like this:
$('.main-container').find('.div-class-name').forEach(function(el) {
<bind a handler for each consequent element here>
});
You'll end up with a bunch of handlers that are bound to each individual ".div-class-name" element.

It is recommended to use classes because that is what classes are for and id's are not.
If your case demands some situation where you have no control over the HTML part, you can use wildcards in attribute selectors in some cases. Like div[id^=overlay] to selects all div with id starting with overlay
$(function() {
$('div[id^=img]').hover(function() {
$('div[id^=overlay]',this).stop(true,true).fadeIn();
}, function() {
$('div[id^=overlay]',this).stop(true,true).fadeOut();
});
});
div[id^=img]{
position: relative;
height:100px;
width:100px;
border:1px solid black;
margin:2px;
}
div[id^=img] > div[id^=overlay]{
position:absolute;
background:rgba(0,0,0,.2);
top:0;
left:0;
right:0;
bottom:0;
display:none;
width:100px;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img-one">
<div id="overlay-one">
<div class="card-overlay-text">
<p>Enlarge Image 1<p></div>
</div>
<img width="100" src="https://upload.wikimedia.org/wikipedia/commons/e/ed/Raff_House.jpg" alt="" />
</div>
<div id="img-two">
<div id="overlay-two">
<div class="card-overlay-text">
<p>Enlarge Image 2<p></div>
</div>
<img width="100" src="https://upload.wikimedia.org/wikipedia/commons/e/ed/Raff_House.jpg" alt="" />
</div>

You can try with the jQuery Easy Overlay Plugin
http://eivissapp.github.io/jquery-easy-overlay/
In the code, you should assign a class to the images, and call this statement (that will work for each image):
jQuery("img.yourclass").hover(function(){
jQuery(this).easyOverlay("start");
}, function(){
jQuery(this).easyOverlay("stop");
});
If you have fontawesome in the page, then execute this before the code above (otherwhise the plugin will use the fontawesome spinner inside the overlay div):
jQuery.fn.easyOverlay.options = { spin: false }

How to disable bottom div when absolute div on top?

I am new to stackoverflow and can't seem to find an answer to my issue - please put link to similar question if I missed it, but I have gave it a strong gander already.
I am making a portfolio site and when a user clicks a project, the clicked div slides out and the bottom div is revealed with the project case study.
The problem: When user scrolls down to project thumbs on sliding div, the lower div scrolls with it - therefore when the user clicks the project, the case study is already scrolled down. I need it to reveal with the case study at scrolltop(0)
Here is a simplified version of what I have so you can get an idea:
// View Project Details (user clicks thumbnail from LP) CTA function
$(".projThumb").click(function()
{
$("#nav-icon3").toggleClass('open');
$(".projDetails").fadeIn( 500 );
// $('.lowerContainer').css('position','absolute');
$('.mainContentWrap').openSlide();
var id = $(this).attr('id');
if(id == 'Proj1')
{
$("#Proj1_Details").fadeIn( 500 );
//get persona image height so background shape is proportional
var personaImgHeight = parseInt($("#personaImg1").height());
$(".containImg").css("height", personaImgHeight + "px");
$(".personaImgWrap").css("height", personaImgHeight + "px");
} else if (id == 'Proj2') {
$("#Proj2_Details").fadeIn( 500 );
//get persona image height so background shape is proportional
var personaImgHeight = parseInt($("#personaImg2").height());
$(".containImg").css("height", personaImgHeight + "px");
$(".personaImgWrap").css("height", personaImgHeight + "px");
} else if (id == 'Proj3') {
$("#Proj3_Details").fadeIn( 500 );
//get persona image height so background shape is proportional
var personaImgHeight = parseInt($("#personaImg3").height());
$(".containImg").css("height", personaImgHeight + "px");
$(".personaImgWrap").css("height", personaImgHeight + "px");
} else if (id == 'Proj4') {
$("#Proj4_Details").fadeIn( 500 );
};
});
.lowerContainer
{
width:80%;
max-width: 2050px;
height: auto;
min-height:100vh;
margin:0 auto;
background:#f9f9f9;
position: relative;
/*left:10%;*/
}
.revealPanel
{
width: 100%;
min-height:100vh;
float: left;
margin-top:0;
overflow-y:scroll;
padding:0;
/*position: fixed;*/
}
.mainContent
{
width:80%;
max-width: 2050px;
height:auto;
top:0px;
left: 0px;
right: 0;
margin-top: 0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
position: absolute;
z-index: 1000;
overflow-x: hidden;
overflow-y: scroll;
opacity: 1;
}
.mainContentWrap
{
width:100%;
overflow:auto;
}
<div class="lowerContainer group">
<section class="revealPanel group">
<!-- ******************************
PROJECT CASE STUDY GOES HERE
******************************** -->
</section> <!-- /revealPanel -->
</div> <!-- /lowerContainer -->
<div class="mainContent">
<div class="mainContentWrap">
<!-- ******************************
MY WORK SECTION
******************************** -->
<div class="myWork group">
<!-- Project container (Contains project thumbnails ) -->
<div class="projContainer">
<h3 class="secTitle">Recent Work</h3>
<div class="projectsWrap">
<div class="row">
<!-- Project 1 -->
<div class="projects col-lg-6 col-md-12">
<div class="projThumb" id="Proj1">
<img src="assets/proj1.png" width="100%" alt="">
</div>
</div>
<!-- Project 2 -->
<div class="projects col-lg-6 col-md-12">
<div class="projThumb" id="Proj2">
<img src="assets/proj2.png" width="100%" alt="">
</div>
</div>
<!-- Project 3 -->
<div class="projects col-lg-6 col-md-12">
<div class="projThumb" id="Proj3">
<img src="assets/proj3.png" width="100%" alt="">
</div>
</div>
<!-- Project 4 -->
<div class="projects col-lg-6 col-md-12">
<div class="projThumb" id="Proj4">
<img src="assets/proj4.png" width="100%" alt="">
</div>
</div>
</div> <!-- /row -->
</div> <!-- /projectWrap -->
</div> <!-- projectsWrap -->
<!-- <div class="triBg" id="triBg-myWork"></div> -->
</div> <!-- /myWork -->
</div>
</div> <!-- /mainContent -->

Based on what you said you want to happen, without really looking at your massive amount of code, I think you are over complicating this.
You can make use of jQuery's .slideToggle() http://api.jquery.com/slidetoggle/
You can also utilize the fact that you can have multiple elements with the same class to help minimize the amount of repeated code.
$(document).on('click', '.projectButton', function(){
$(this).siblings('.projectInfo').slideToggle();
});
.projectInfo {
display: none;
}
.projectButton {
height: 25px;
background: gray;
cursor: pointer;
border: 1px solid white;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="projectsContainer">
<div class="project" id="project1">
<div class="projectButton">Project 1</div>
<div class="projectInfo">Project 1 information goes here</div>
</div>
<div class="project" id="project2">
<div class="projectButton">Project 2</div>
<div class="projectInfo">Project 2 information goes here</div>
</div>
<div class="project" id="project3">
<div class="projectButton">Project 3</div>
<div class="projectInfo">Project 3 information goes here</div>
</div>
<div class="project" id="project4">
<div class="projectButton">Project 4</div>
<div class="projectInfo">Project 4 information goes here</div>
</div>
</div>

How to make multiple divs slidetoggle with changing arrow

I'm very new to javascript and jQuery and has now got completely stuck despite trying various options. I'm trying to create a expand/collapse section with multiple divs. I would like each div to open and close seperately, with an arrow at the side pointing up or down, depending whether the content is expanded or collapsed.
From the code I have written below, only the first div works correctly. The only thing which happen When you click on the two other divs, is that the arrow in the first div change.
Any help will be greatly appreciated.
Following is the CSS:
#header_background {
background-image: url(header-background.png);
width:748px;
height:43px;
margin-left: -17px;}
#expand_arrow {
display: inline-block;
width: 17px;
height: 18px;
float:left;
margin-left:20px;
padding-left:0px;
padding-top:11px;
background-repeat:no-repeat; }
.sub_header {
color:#204187;
font-weight:bold;
font-size:16px;
vertical-align:middle;
padding-left:4px;
padding-top:12px;
float:left;
text-decoration:none;
}
Here's the attempted javascript and jQuery:
function chngimg() {
var img = document.getElementById('expand_arrow').src;
if (img.indexOf('expand-arrow.png')!=-1) {
document.getElementById('expand_arrow').src = 'images/collapse-arrow.png';
}
else {
document.getElementById('expand_arrow').src = 'images/expand-arrow.png';
}
}
$(document).ready(function(){
$("#header_background").click(function(){
$("#section").slideToggle("slow");
});
});
And here's the HTML
<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 1</div>
</div>
<div id="section" style="display:none">
text 1
</div>
<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 2</div>
</div>
<div id="section" style="display:none">
text 2
</div>
<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 3</div>
</div>
<div id="section" style="display:none">
text 3
</div>

It's only working for the first set of elements because you're using IDs, and IDs have to be unique within the document (page). You could change to using classes and perform some simple DOM traversal to get the corresponding section based on the header that was clicked. Something like this:
$(document).ready(function() {
$('.header_background').click(function(e) {
$(this).next('.section').slideToggle('slow');
var img = $(this).find('img.expand_arrow')[0]; // the actual DOM element for the image
if (img.src.indexOf('expand-arrow.png') != -1) {
img.src = 'images/collapse-arrow.png';
}
else {
img.src = 'images/expand-arrow.png';
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_background" >
<img class="expand_arrow" alt="" src="images/collapse-arrow.png">
<div class="sub_header">header 1</div>
</div>
<div class="section" style="display:none">
text 1
</div>
<div class="header_background" >
<img class="expand_arrow" alt="" src="images/collapse-arrow.png">
<div class="sub_header">header 2</div>
</div>
<div class="section" style="display:none">
text 2
</div>
<div class="header_background" >
<img class="expand_arrow" alt="" src="images/collapse-arrow.png">
<div class="sub_header">header 3</div>
</div>
<div class="section" style="display:none">
text 3
</div>

Look for your next section of the header clicked like so. And change your id for class because ID need to be unique
$(".header_background").click(function(){
$(this).nextAll(".section:first").slideToggle("slow");
});

Adding Next and Prev button to my slide

I would like to add a next and previous button to my image slider, but I don't know how to do.
Plz help. I have a basic structure..?
Here is my code..
HTML
<div class="large-photo">
<img src="images/large-photo/photo1.jpg" class="active">
<img src="images/large-photo/photo2.jpg">
</div>
<div class="small-photo">
<img src="images/small-photo/photo1.jpg" class="thumb selected">
<img src="images/small-photo/photo2.jpg" class="thumb">
</div>
<div class="arrow">
<div class="left-arrow"></div>
<div class="right-arrow"></div>
</div>
CSS
.large-photo img {
display: none;
}
.large-photo img.active {
display:block;
}
.small-photo img.selected {
border: 3px solid red;
}
JAVASCRIPT
function loadPhoto() {
$('.small-photo img').click(function() {
$('.selected').removeClass('selected');
var index = $(this).index();
$('.large-photo img.active').removeClass('active');
$('.large-photo img').eq(index).addClass('active');
$(this).addClass('selected');
});

it was some difficult for me to understand what you want as preer according to your code but however you will under stand how this sytem works and also how to use it differently. CODE:
<style type="text/css">
#container{
width: 266px ;
height:128px ;
overflow: hidden;
}
</style>
<script type="text/javascript" src="jquery-2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#left-arrow").click(function(){
$(".small-photo").fadeIn();
$(".large-photo").fadeOut();
});
$("#right-arrow").click(function(){
$(".small-photo").fadeOut();
$(".large-photo").fadeIn(1000);
});
});
</script>
<div id="container">
<div class="large-photo">
<img src="images/1395924816_personal-information.png">
<img src="images/1395938204_lock.png">
</div>
<div class="small-photo">
<img src="images/1395939936_application-pgp-signature.png" >
<img src="images/1396010974_button-cross_basic_red.png" >
</div>
</div>
<div class="arrow">
<-
->
</div>
and yes i had to do some of the major chages such as removing CSS but you can add but for my convinence i removed it just to show you how to do what you want i also change some of the class to id.. etc and also change pictures and you replace all thos pictures to your pictures..
working demo