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>

Dynamically created table supposed to break if too long

I have a simple Jquery code to call a bunch of AJAX ping methods to find out if the system modules are up. This is generating a table row-by-row on every AJAX call result. The table looks pretty simple.
Now my problem is that the number of callable methods is growing and it might end up in a lot of scrolling, so I thought i set:
body {
max-height: 500px;
}
but the table won't break, and I still end up in scrolling a lot. Any Idea to solve this?
I replaced the method calls with a random OK/ERROR so you can run it in JSFiddle here.
// instead of AJAX call result just append random result
for (i = 0; i < 50; i++) {
$( "#resultTable" ).append( '<tr><td> TestWS </td>' +
(Math.random()<.5 ?
'<td class="ok"> OK </td></tr>' :
'<td class="error"> ERROR </td></tr>'
)
);
}
This dummy JQuery code is not important, only an example to show the problem, what I am looking for is to make this table break if it's too long.
Any suggestions are welcome. Thanks!

For the easiest way would be is to use a scrollable vertical table. So, you'll have a scroll bar and you can scroll through the table data.
To create a scrollable vertical table. You'll need set the display and overflow property.
table {
display: block;
height: 200px;
overflow-y: scroll;
}
For your convenience, I modified your Fiddle so that you can have a look.

So far one of the best options to use seems to be this:
Putting the table in a container and setting:
#container {
column-count:3;
-moz-column-count:3;
-webkit-column-count:3;
}
So it shows the table in multiple columns without much (or no) scrolling needed.
Fiddle
Any backdraws or major browser compatibility issues?

Here is another approach. Possibly flexbox is a better solution, but fwiw:
// instead of AJAX call result just append random result
var pageHeight = 200, cnt=1, oldcnt=0;
var endStr = '';
for (i = 0; i < 50; i++) {
$( "#div"+cnt ).find('table.resultTable').append( '\
<tr><td> TestWS </td>' +
(Math.random()<.5 ?
'<td class="ok"> OK </td></tr>' :
'<td class="error"> ERROR </td></tr>'
)
);
if ( $( "#div"+cnt ).find('table.resultTable').height() > pageHeight){
oldcnt = cnt;
cnt++;
$( "#container").append('<div id="div'+cnt+'"><table class="resultTable"><tr><th>Service</th><th>Result</th></tr></table>');
}
}
body {width:100%;max-height: 200px;}
th, td{padding:2px;border:1px solid;xwidth:50px;}
.resultTable th{background-color:#CCCCCC;font-weight:bold;}
.resultTable td.ok{background-color:#E1FFD8;font-weight:bold;}
.resultTable td.error{background-color:#FFB5B5;font-weight:bold;}
#container{width:100%;overflow:auto;border:1px solid orange;}
[id^=div]{max-width:120px;width:120px;float:left;margin-right:7px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="container">
<div id="div1">
<table class='resultTable'>
<tr><th>Service</th><th>Result</th></tr>
</table>
</div>
</div>
jsFiddle Demo to play with

Here's an alternative. You can use the tools from jQuery mobile to create a nice feature: collapsible headers. That way your users can isolate specific test results in logically arranged groupings.
Click / press the header to toggle visibility of the content beneath.
You can organize things just the way you need them.
<script src="http://demos.jquerymobile.com/1.4.5/js/jquery.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.0/css/themes/default/jquery.mobile-1.4.0.min.css" />
<style type="text/css">
li div { padding: 2px; border: 1px solid; float: left; width: 150px }
.ui-collapsible-content .ui-filterable{ display: none; }
li { background-color: #CCCCCC; font-weight: bold; }
li div.ok { background-color: #E1FFD8; font-weight: bold; }
li div.error { background-color: #FFB5B5; font-weight: bold; }
.ui-li-static.ui-collapsible > .ui-collapsible-heading { margin: 0; }
.ui-li-static.ui-collapsible { padding: 0; }
.ui-li-static.ui-collapsible > .ui-collapsible-heading > .ui-btn { border-top-width: 0; }
.ui-li-static.ui-collapsible > .ui-collapsible-heading.ui-collapsible-heading-collapsed > .ui-btn, .ui-li-static.ui-collapsible > .ui-collapsible-content { border-bottom-width: 0; }
</style>
<div data-role="collapsible" data-theme="b" data-content-theme- "b">
<h2>First Category</h2>
<ul data-role="listview" data-filter="true">
<li><div class="title">TestWS1</div>
<div class="ok"> OK </div>
</li>
<li><div class="title">TestWS2</div>
<div class="error"> ERROR </div>
</li>
<li><div class="title">TestWS3</div>
<div class="ok"> OK </div>
</li>
<li><div class="title">TestWS4</div>
<div class="error"> ERROR </div>
</li>
</ul>
</div>
<div data-role="collapsible" data-theme="b" data-content-theme- "b">
<h2>Second Category</h2>
<ul data-role="listview" data-filter="true">
<li><div class="title">TestWS10</div>
<div class="ok"> OK </div>
</li>
<li><div class="title">TestWS11</div>
<div class="error"> ERROR </div>
</li>
<li><div class="title">TestWS12</div>
<div class="ok"> OK </div>
</li>
<li><div class="title">TestWS13</div>
<div class="error"> ERROR </div>
</li>
</ul>
</div>

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>

how to show <p> by id when hovering over an <img> with an id

HTML
<div>
<div>
<ul>
<li><img src="ico/plaster.png" id="img-plaster" ><br>Plaster</li>
<li>as above 2...</li>
<li>as above 3...</li>
</ul>
</div>
</div>
<div>
<div>
<p id="plaster-nfo" style="display:none">plaster etc</p>
<p>as above 2</p>
<p>as above test 3 not hidden</p>
</div>
</div>
CSS
#img-plaster:hover #plaster-nfo {
display: block;
}
I'm trying to display a <p> line of text with an id when an image with a different id is hovered over, this <p> will show further information when displayed about the topic the image hints towards.
If I should not be using css and using jquery/javascript or other please advise, but it must be mobile friendly.
I have a few <p>'s where all are hidden (display:none), apart from the last to make sure the <p>'s are in the right place. However the CSS code as detailed is not working, therefore I must have something wrong or that it's not suitable for the task.

You could do it like this:
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding: 0;
margin: 0;
display: inline-block;
position: relative;
}
li p {
display: none;
position: absolute;
top: 0;
background-color: #FFF;
}
li:hover p {
display: block;
}
<ul>
<li>
<img src="http://lorempixel.com/200/201/" alt="" />
<p>Text to show</p>
</li>
<li>
<img src="http://lorempixel.com/200/199/" alt="" />
<p>Text to show</p>
</li>
<li>
<img src="http://lorempixel.com/200/200/" alt="" />
<p>Text to show</p>
</li>
</ul>
http://codepen.io/anon/pen/NqEXWE
Mobile-friendly, and no need for javascript to achieve this :-)

Try this
$("#img-plaster").mouseover(function(){
$("#plaster-nfo").show();
});

for opening:
$("#img-plaster").mouseover(function(){
$("#plaster-nfo").show();
});
and to close by mouseout:
$("#img-plaster").mouseout(function(){
$("#plaster-nfo").hide();
});
have a nice day :)

If you are looking for hover effect then use this
hover jQuery
$( "#img-plaster" ).hover(
function() {
$('#plaster-nfo').show();
}, function() {
$('#plaster-nfo').hide();
}
);
Demo is here:
$(document).ready(function(){
$( "#img-plaster" ).hover(
function() {
$('#plaster-nfo').show();
}, function() {
$('#plaster-nfo').hide();
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div>
<div>
<ul>
<li><img src="http://i.stack.imgur.com/ClUhe.jpg?s=32&g=1" id="img-plaster" ><br>Plaster</li>
<li>as above 2...</li>
<li>as above 3...</li>
</ul>
</div>
</div>
<div>
<div>
<p id="plaster-nfo" style="display:none">plaster etc</p>
<p>as above 2</p>
<p>as above test 3 not hidden</p>
</div>
</div>

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