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>

How do I make tabs inside tabs in this code?

please tell me how to make tabs inside tabs in this code?
$('.tabs-box').each(function(){
$(this).find('.tabs-sel span:first').addClass('current');
$(this).find('.tabs-b:first').addClass('visible');
});
$('.tabs-sel').delegate('span:not(.current)', 'click', function() {
$(this).addClass('current').siblings().removeClass('current')
.parents('.tabs-box').find('.tabs-b').hide().eq($(this).index()).fadeIn(400);
});
.tabs-b {display:none;}
.tabs-b.visible {display:block;}
.tabs-sel {padding:20px 0 0 20px;}
.tabs-sel span {display:inline-block; padding:10px 20px; vertical-align:top; cursor:pointer;}
.tabs-sel span.current {background-color:#4e647a;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs-box">
<div class="tabs-sel"><span class="current">1</span><span>2</span><span>3</span></div>
<div class="tabs-b visible">12</div>
<div class="tabs-b">13</div>
<div class="tabs-b">14</div>
</div>
https://codepen.io/senopsisder/pen/zaEpBV

Try something like this in one of the sub tabs:
<div class="tabs-b visible">
<div class="tabs-sel">
<span class="current">12</span>
</div>
</div>

Reorder divs with CSS? Insert parent 1 between children of parent 2

This is what I have:
<div class="container>
<div class="parent1"></div>
<div class="parent2">
<div class="child1"></div>
<div class="child2"></div>
</div>
</div>
This is what I want:
<div class="container>
<div class="parent2">
<div class="child1"></div>
<div class="parent1"></div>
<div class="child2"></div>
</div>
</div>
Is this possible with only CSS or JavaScript (no jQuery)?
Even if the HTML doesn't move, as long as they appear in that order on the page that would be perfect.

You can do it with Javascript: document.querySelector('.child1').appendChild(document.querySelector('.parent1'));
Demo:
function reorder() {
document.querySelector('.child1').appendChild(document.querySelector('.parent1'));
}
.container * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
.parent1 {
color: red;
border-color: red;
}
.child1 {
color: blue;
border-color: blue;
}
<div class="container">
<div class="parent1">I'm parent 1!</div>
<div class="parent2">
I'm parent 2!
<div class="child1 ">I'm child 1!</div>
<div class="child2 ">I'm child 2!</div>
</div>
</div>
<button onclick='reorder();'>Reorder!</button>
Note: Css is only for better looks

With Javascript:
//Remove the parent 1 div from the container div
document.getElementsByClassName('container')[0].removeChild(document.getElementsByClassName('parent1')[0]);
//Insert into div between children
const parent2 = document.getElementsByClassName('parent2')[0];
let divEle = document.createElement('div');
divEle.className = 'parent1';
parent2.insertBefore(divEle, parent2.querySelector('.child2'));

To make this work, I would advise that you remove the div.parent2 around the child classes.
Therefore the code becomes
<div class="container parent">
<div clas="parent1"></div>
<div class="child1"></div>
<div class="child2></div>
</div>
then you can use flexbox to do this
.parent{display: flex};
.child1{order:1}
.parent1{order:2}

On Scroll change color of menu HTML

First of all I'm as newbie in this area. I tried to search about this but nothing fits on what I want.
So I have this html:
<aside>
<div align="center">
<img src="images/teste.jpg" style="width:200px;height:200px;">
</div>
...
<div id="disciplinas">
<h3>Disciplinas:</h3>
<li>x</span></li>
<li>y</span></li>
<li>z</span></li>
<li>w</span></li>
<br/>
</div>
</aside>
<div id="main">
<section id="x">
<div>
<img src="images/teste.jpg">
</div>
</section>
<section id="y">
<div>
<img src="images/teste.jpg">
</div>
</section>
...
I tried this code but didn't work:
<script type="text/javascript">
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 210) {
$("li").css('background-color', 'blue');
} else {
$("li").css('background-color', 'red');
}
});
});
</script>
I would like to know how can i change the color of the <li> on scroll, when they get to the correct section (or maybe i need to use a div instead).
Thanks
If it helps, the css of div disciplinas and li:
#disciplinas {
border: 1px solid;
margin-top: 5%;
margin-bottom: 5%;
text-align: center;
box-shadow: 10px 10px 5px #DCDCDC;
background-color: white;
}
li {
text-align: center;
list-style-type: none;
}

Try using this code,
$(window).scroll(function () {
var scroll_pos= $(window).scrollTop();
if(scroll_pos > 210) {
$("li").css('background-color', 'blue');
} else {
$("li").css('background-color', 'red');
}
});
hope it helps.

Add jquery library js file
Remove unnecessary html tag
<aside>
<div align="center">
<img src="images/teste.jpg" style="width:200px;height:200px;">
</div>
...
<div id="disciplinas">
<h3>Disciplinas:</h3>
<li>x</li>
<li>y</li>
<li>z</li>
<li>w</li>
<br/>
</div>
</aside>
<div id="main">
<section id="x">
<div>
<img src="images/teste.jpg">
</div>
</section>
<section id="y">
<div>
<img src="images/teste.jpg">
</div>
</section>
https://jsfiddle.net/rq6rgrcj/

Check this codepen:
http://codepen.io/yuki-san/pen/eJqLNO
You can see the idea and how the sections are tied to the scrolling event.
Now use that and just change the li background color instead of underline
Create a css class lets say - scrollColor and add it using jQuery
.addClass(".scrollColor")
when the window scrolled to the right place and remove it when scrolled away

How to Stick elements on page scroll

I have a one page, scrolling site with 5 main sections that have title bars that span across the top of each respective section. I want each title bar to stick at the top (well, relative top-underneath the top sticky header) as you scroll down the section. I can get one to stick, but I am having trouble making it so that one sticks and then it goes away once the next section's title bar gets to the sticky point.
I can't figure out another way to bind the HTML or CSS with the jQuery if else statement to make this work. I was thinking I could try to make it work within each sections' id but I don't think there's like a "withinId" jQuery selector.
I'm posting the latest jQuery I attempted (with just 2 out of the 5 variables I will need to make work here). I know it's wrong but I'm seriously stuck. Any ideas here? Thanks a million.
(abbreviated) HTML:
<div id="welcome">
<div class="title-bar">
<p>WELCOME</p>
</div>
</div>
<div id="global">
<div class="title-bar">
<p>GLOBAL ENGAGEMENT</p>
</div>
</div>
<div id="community">
<div class="title-bar">
<p>COMMUNITY</p>
</div>
</div>
<div id="resources">
<div class="title-bar">
<p>RESOURCES</p>
</div>
</div>
<div id="horizon">
<div class="title-bar">
<p>ON THE HORIZON</p>
</div>
</div>
CSS:
.title-bar {
padding: 5px;
position: relative;
}
.title-bar.sticky {
position: fixed;
top: 111px;
width: 100%;
z-index: 1040;
}
jQuery:
$(document).ready(function() {
var welcomeTitle = $('#welcome .title-bar');
var globalTitle = $('#global .title-bar');
var communityTitle = $('#community .title-bar');
var resourcesTitle = $('#resources .title-bar');
var horizonTitle = $('#horizon .title-bar');
var stickyOffset = $('#header').offset().top;
if ($w.scrollTop() > stickyOffset + 225) {
welcomeTitle.addClass('sticky');
globalTitle.addClass('sticky');
} else {
welcomeTitle.removeClass('sticky');
globalTitle.addClass('sticky');
}
if (welcomeTitle.hasClass('sticky') && globalTitle.hasClass('sticky')) {
welcomeTitle.removeClass('sticky');
} else {
//
}
});

jsBin demo
Give your "pages" a class="page" and listen for their positions using JS's Element.getBoundingClientRect on: DOM Ready, window Load, window Scroll
$(function() { // DOM ready
var $win = $(window),
$page = $(".page").each(function(){
// Memorize their titles elements (performance boost)
this._bar = $(this).find(".title-bar");
});
function fixpos() {
$page.each(function(){
var br = this.getBoundingClientRect();
$(this._bar).toggleClass("sticky", br.top<0 && br.bottom>0);
});
}
fixpos(); // on DOM ready
$win.on("load scroll", fixpos); // and load + scroll
});
*{box-sizing: border-box;}
html, body{height:100%;}
body{margin:0;font:16px/1 sans-serif; color:#777;}
.page{
position:relative;
min-height:100vh;
}
.title-bar {
position: absolute;
top:0;
width: 100%;
background:#fff;
box-shadow: 0 3px 4px rgba(0,0,0,0.3);
}
.title-bar.sticky {
position: fixed;
}
#welcome {background:#5fc;}
#global {background:#f5c;}
#community{background:#cf5;}
#resources{background:#fc5;}
#horizon {background:#5cf;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="welcome" class="page">
<div class="title-bar">
<h2>WELCOME</h2>
</div>
</div>
<div id="global" class="page">
<div class="title-bar">
<h2>GLOBAL ENGAGEMENT</h2>
</div>
</div>
<div id="community" class="page">
<div class="title-bar">
<h2>COMMUNITY</h2>
</div>
</div>
<div id="resources" class="page">
<div class="title-bar">
<h2>RESOURCES</h2>
</div>
</div>
<div id="horizon" class="page">
<div class="title-bar">
<h2>ON THE HORIZON</h2>
</div>
</div>
Design-wise > add a padding-top to the first container element (inside your .page) to prevent content going underneath the title element (since it toggles from absolute/fixed positions).

Have a look at the Waypoints plugin.

You can probably make it a little easier on yourself by assigning each section a class and then add and remove the class from each section with jquery each function.
Try something like the following:
$(window).on( "scroll", function() {
$( ".section" ).each(function() {
if ( $(window).scrollTop() >= $(this).offset().top - 50 ) {
$( this ).addClass("sticky");
}else{
$( this ).removeClass("sticky");
}
});
});
Then your css
.section{
height: 200px;
background: #333;
border:1px solid #222;
position:relative;
}
.section .title-bar{
position:absolute;
top:0;
left:0;
width:100%;
height:50px;
}
.section.sticky .title-bar {
position:fixed;
}
And html
<div class="section">
<div class="title-bar"></div>
</div>
<div class="section">
<div class="title-bar"></div>
</div>
<div class="section">
<div class="title-bar"></div>
</div>