We Keep Coding

Change line color depending on where it sits on different divs

I am trying to use jQuery to make my border line change color depending on where it sits on the divs. I set it position: absolute and it is laying on both divs. I was trying to make the line on the top div to be the color grey and the line on the bottom div to be white. I want to dynamically change the color depending on which section it is over.
https://codepen.io/asreenz/pen/MWpGMQO link to Codepen.
<div>
<div class="line">
</div>
<div class="top-box"></div>
<div class="bottom-box"></div>
</div>
.line{
width:0px;
height: 100px;
border: 1px solid black;
position:absolute;
left: 50%;
bottom: -225px;
transform: translate(-50%, -50%);
margin: 0 auto;
}
.top-box{
width:100vw;
height:500px;
background-color: pink;
}
.bottom-box{
width:100vw;
height:500px;
background-color: yellow;
}
.line-grey{
color:#8a96a3;
}
.line-white{
color:white;
}
var top1height = $(".top-box" ).height();
var bottom1height = $(".bottom-box" ).height();
var linePosition = $(this).offset();
if(linePosition > top1height){
$(".line").addClass(".line-grey");
} else {
$(".line").removeClass("line-grey");
}
if(linePosition > bottom1height){
$(".line").addClass(".line-white");
} else {
$(".line").removeClass("line-white");
}

You need to use an event listener to watch for when the page scrolls.
to keep the code DRY you can re-use a lot of the code and reduce the amount of javascript you have to write and maintain.
$(document).ready(function () {
const formatLine = function () {
var topBox = $(".top-box");
var bottomBox = $(".bottom-box");
var line = $(".line");
var positionFormatter = function (line, box, className) {
const lineTop = line.offset()['top'];
if (lineTop > box.offset()['top'] &&
lineTop < (box.offset()['top'] + box.height())){
line.addClass(className);
return true;
} else {
line.removeClass(className);
}
return false;
}
positionFormatter(line, topBox, "line-grey");
positionFormatter(line, bottomBox, "line-white");
};
formatLine();
$(document).scroll(formatLine);
});
.line{
width:0px;
height: 100px;
border: 1px solid black;
position:fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0 auto;
}
.top-box{
width:100vw;
height:500px;
background-color: pink;
}
.bottom-box{
width:100vw;
height:500px;
background-color: yellow;
}
.line-grey{
border-color:#8a96a3;
}
.line-white{
border-color:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="line">
</div>
<div class="top-box"></div>
<div class="bottom-box"></div>
</div>

How can I disable a <div>

I am trying to build a simple traffic light with HTML, CSS and Javascript. Clicking on the light should change the color of the light (if I click when it is Green, it changes to Yellow and so on).
HTML:
<div id="outer_box" onclick = "change()">
<div id ="red"></div>
<div id ="yellow"></div>
<div id ="green"></div>
</div>
CSS:
#outer_box{
width: 70px;
height:150px;
background:black;
}
#red{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background: red;
}
#yellow{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background: yellow;
}
JavaScript:
var state;
state = "green"
function change(){
if (state=="green"){
state = "yellow";
}
else if (state== "yellow"){
state = "red";
//state_def();
}
else{
state = "green";
//state_def();
}
console.log(state);
state_def();
}
function state_def(){
console.log("inside state def")
console.log(state);
if (state == "green"){
document.getElementById("yellow").disabled = true;
//$("#yellow").prop('disabled',true);
//$("#red").prop('disabled',true);
}
else if (state == "yellow"){
$("#green").prop('disabled',true);
$("#red").prop('disabled',true);
}
else{
$("#yellow").prop('disabled',true);
$("#green").prop('disabled',true);
}
}
Here is the jsFiddle link: https://jsfiddle.net/taniachanda86/mx7r0hrL/
Please help me understand what is that I am doing wrong?

Following way you can do using JQuery. Add and remove active class.
First display one light. On click it will change.
var items = $('div.light');
var currentItem = items.filter('.active');
$('#outer_box').on('click', function() {
var nextItem = currentItem.next();
currentItem.removeClass('active');
if ( nextItem.length ) {
currentItem = nextItem.addClass('active');
} else {
currentItem = items.first().addClass('active');
}
});
#outer_box{
width: 70px;
height:150px;
background:black;
}
#red{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background: red;
display:none;
}
#yellow{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background: yellow;
display:none;
}
#green{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background: green;
display:none;
}
.active{
display:block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer_box">
<div id ="red" class="light active"></div>
<div id ="yellow" class="light"></div>
<div id ="green" class="light"></div>
</div>

The solution is quite simple.
$("#green").attr('disabled', true);
will show that your div is actually being disabled while you inspect element. However, it will not quite get you to point of having the css color affected by it.
Instead defining the opacity attribute will help you achieve your need.
Here is the plunker: https://plnkr.co/edit/mdlAS68gpFBm64jfiCCu?p=preview. I hope this is what you are asking for.

var colors = ["red", "yellow", "green"];
var state = 1;//because red already visible
//addEventListener method to add onclick handler
document.getElementById('outer_box').addEventListener('click', function(){
if (state==3){//if state reaches to 3, reset to 0
state = 0;
}
var allLights = document.querySelectorAll('.light');
for(var i = 0; i < allLights.length; i++) {//remove active class from all light
allLights[i].className = "light";
}
document.getElementById(colors[state]).className = "light active"; //add active class on the next light;
state++;//increment state
}, false);
I have updated your fiddle. check here

Open your javascript console and see the failure:
Uncaught ReferenceError: change is not defined
change is not in scope of the onclick of the <div>.
This is because the Javascript part of jsfiddle is executed in the onload function. See https://stackoverflow.com/a/5468370/189058

I guess you wanted a traffic light which on click will glow the clicked light.If so, can be achieved by the below code.
$( document ).ready(function() {
$('#red').css("background-color", "red");
$('#yellow').css("background-color", "white");
$('#green').css("background-color", "white");
$('.trafficlight').click(function(){
var selected_id=$(this).attr("id");
if(selected_id=='green')
{
$('#green').css("background-color", "green");
$('#red').css("background-color", "white");
$('#yellow').css("background-color", "white");
}
else if(selected_id=='yellow')
{
$('#yellow').css("background-color", "yellow");
$('#red').css("background-color", "white");
$('#green').css("background-color", "white");
}
else
{
$('#red').css("background-color", "red");
$('#yellow').css("background-color", "white");
$('#green').css("background-color", "white");
}
});
});
#outer_box{
width: 70px;
height:150px;
background:black;
}
#red{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background:red;
}
#yellow{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background: yellow;
}
#green{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="outer_box" >
<div id ="red" class="trafficlight"></div>
<div id ="yellow" class="trafficlight"></div>
<div id ="green" class="trafficlight"></div>
</div>

Scroll HTML element smoothly to a specific direction using Javascript

What I'm trying to do is make it so that if you click on a button (suppose "scroll to left"), it starts scrolling to left and would not stop until I pressed another button (a "stop" button) to stop it.
function co() {
coo=document.getElementById('tar');
var x = coo.style.left;
var y=(x+=10);
coo.style.left=y+'px';
}
div {
position:absolute;
background-color:orange;
border-radius:50%;
width:100px;
height:100px;
transition-duration:2s;
}
body {
width:100%;
height:100%;
}
.plus {
z-index:2;
position:absolute;
background-color:#CCC;
right:15px;
bottom:10px;
}
<body >
<div id="tar"></div>
<button class="plus" onClick="co()">Plus this</button>
</body>

Just use setInterval to repeat your function in a loop and user clearInterval to cancel
Also, you might want to prevent Plus This from being clicked again when the animation is running.
Code Snippet
var cog;
function co() {
// the first run need not have a delay
cot();
cog = setInterval(cot, 500)
}
function nco() {
clearInterval(cog)
}
function cot() {
var coo = document.getElementById('tar');
var x = window.getComputedStyle(coo, null).left;
var y = Number(x.replace('px', '')) + 100;
coo.style.left = y + 'px';
}
div#tar {
left: 10px;
position: absolute;
background-color: orange;
border-radius: 50%;
width: 100px;
height: 100px;
transition-duration: 0.5s;
transition-timing-function: linear;
}
body {
width: 100%;
height: 100%;
}
.plus {
z-index: 2;
position: absolute;
right: 15px;
bottom: 10px;
}
<body>
<div id="tar"></div>
<div class='plus'>
<button onClick="co()">Plus this</button>
<button onClick="nco()">Stop</button>
</div>
</body>

overflow hidden auto-scroll

Anyone know how can I set auto-scroll (with loop) in div with overflow:hidden; ?
Example
<div class="container" style="width:500px; max-width:500px; height:100px; max-height:100px; background:#F00; overflow:hidden;">
<div class="element_01" style="width:500px; height:100px; float:left;"></div>
<div class="element_02" style="width:500px; height:100px; float:left;"></div>
</div>
final effect?
Show element_01 -> wait 5 sec -> smooth scroll to element_02 -> wait 5 sec // and repeat

This example uses positioning instead of scrolling.
Scrolling with an overflow hidden element works, but can be buggy.
http://codepen.io/anon/pen/tqgyA
$(document).ready(function() {
var numSlides = $('ul.scroller').children().length,
counter = 0;
windowHeight = $('.window').height();
setInterval(function() {
counter++;
if (counter == numSlides) {
counter = 0;
$('.scroller').css('top', '0');
} else {
var toMove = (counter * windowHeight);
$('.scroller').css('top', '-'+toMove.toString()+'px');
}
}, 2000)
});
html { font-family: Helvetica, Arial }
.window {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
border: 2px solid skyblue;
}
ul.scroller {
width: 100%;
position: absolute;
top: 0;
left: 0;
list-style-type: none;
padding: 0;
margin: 0;
-webkit-transition: top .5s ease;
transition: top .5s ease;
}
ul.scroller li {
width: 100%;
height: 200px;
box-sizing: border-box;
padding: 80px 0;
text-align: center;
font-size: 28px;
}
ul.scroller li:nth-child(2n+2) { background: #F5F5F5 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="window">
<ul class="scroller">
<li>
First Item
</li>
<li>
Second Item
</li>
<li>
Third Item
</li>
<li>
Fourth Item
</li>
</ul>
</div>

You can use scrollTo jQuery plugin:
http://demos.flesler.com/jquery/scrollTo/
and repeat a function using setTimeout(function(){ $.scrollTo('#element'); }, 5000);

With core javascript:
<div class="container" style="width:500px; max-width:500px; height:100px; max-height:100px; background:#F00; overflow:hidden;">
<div class="element_01" style="width:500px; height:100px; float:left;">aaa</div>
<div class="element_02" style="width:500px; height:100px; float:left;">bbb</div>
</div>
<script>
var container=document.getElementsByClassName('container')[0];
var start = 0;
var smoothVal = 20;
var waitVal = 5000;
function smooth(){
var interval=setInterval(function(){
start++;
container.scrollTop = start;
if(start>100) {
clearInterval(interval);
wait();
}
},smoothVal)
}
function wait(){
start = 0;
container.scrollTop = start;
setTimeout(function(){
smooth();
},waitVal)
}
smooth();
</script>

Sliding from right to left

I am trying to slide a a panel from the right of the button to the left. Here is my css:
style.css:
.pToolContainer {
position : absolute;
right: 0;
}
.btn-pTool{
//display:block;
position:absolute;
right: 0;
margin:0;
padding:0;
background-image: url(slide_button.png);
background-repeat:no-repeat;
}
.btn-pToolName{
text-align: center;
width: 26px;
height: 190px;
display: block;
color: #fff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
line-height: 32px;
}
.pToolSlidePanel{
min-height: 185px;
min-width: 185px; /*WIDTH OF HIDDEN SLIDE PANEL*/
display: none; /*THE ELEMENT WILL NOT BE DISPLAYED*/
border-right-width: 2px; /*ADDS RIGHT BORDER OF 2PX*/
border-left-width: 2px; /*ADDS LEFT BORDER OF 2PK*/
border-right-style: solid; /*MAKES RIGHT BORDER SOLID*/
border-left-style: solid; /*MAKES LEFT BORDER SOLID*/
border-right-color: #626262; /*RIGHT BORDER COLOR*/
border-left-color: #626262; /*LEFT BORDER COLOR*/
background-color: #949494; /*SLIDE PANEL BACKGROUND COLOR*/
border-bottom-width: 2px; /*ADDS BOTTOM BORDER OF 2PX*/
border-bottom-style: solid; /*MAKES BOTTOM BORDER SOLID*/
border-bottom-color: #626262;
border-top-width: 2px; /*ADDS BOTTOM BORDER OF 2PX*/
border-top-style: solid; /*MAKES BOTTOM BORDER SOLID*/
border-top-color: #626262; /*BOTTOM BORDER COLOR*/
opacity: .8; /*SETS SLIDE PANEL BACKGROUND'S OPACITY TO 80%*/
margin: auto; /*CENTERS OUR SLIDE PANEL*/
position: fixed;
//bottom: 50px;
overflow:hidden;
}
test.html:
<div class="pToolContainer">
<span class="btn-pTool">
<a class="btn-pToolName" href="#"></a>
</span>
<div class="pToolSlidePanel"></div>
</div>
I have tried the following jquery statement but it doesn't seem to work:
$(pToolSlidePanel).animate({width:'toggle'},2000);
where pToolSlidePanel is the HTMLElement created in my javascript file using:
var pToolSlidePanel = document.createElement("div");
I have also tried the following tutorial http://www.learningjquery.com/2009/02/slide-elements-in-different-directions but I keep getting an error stating that HTMLElement does not have a css method

DEMO: http://so.devilmaycode.it/sliding-from-right-to-left/
$(function() {
var iXS = 3, $slider = $('.panel-inner'), liW = $slider.find('li:first').width(), liFW = parseInt(liW * $slider.find('li').length);
$slider.css('width', liFW + 'px');
$('.button a').click(function() {
var left = (this.id == 'right') ? parseInt($slider.css('left').toString().replace('-', '')) : parseInt($slider.css('left'));
var side = (this.id == 'right') ? (((left + (liW * iXS)) == liFW) ? 0 : -(left + liW)) : ((left < 0) ? -(parseInt(left.toString().replace('-', '')) - liW) : 0);
rotate(side);
return false;
});
var rotate = function(leftY) {
$slider.stop(true, true).animate({
left : leftY
}, 500);
}
});
for full code look at the source code of demo example.

Try this
$(".pToolSlidePanel").animate({width:'toggle'},2000);
For Class pToolSlidePanel use $(".pToolSlidePanel")
and For eg: id pToolSlidePanel use $("#pToolSlidePanel")

Edit: Try this configuration here http://jsfiddle.net/TQZh5/50/
I removed some of the CSS to make it easier, but it should be trivial to add it back in.
$(pToolSlidePanel).animate({width:'toggle'},2000);
Should be
$('.pToolSlidePanel').animate({width:'toggle'},2000);
Also, what are you binding the animate action to? Is the jQuery wrapped in the ready() function so it knows the DOM is completely loaded?

Want to slide a element from position A(right) to B(left)?
HTML:
<div class="pToolContainer">
<div class="pToolSlidePanel">
</div>
</div>
CSS:
.pToolContainer {
width:400px;
height:100px;
background-color:#ccc;
position:relative;
}
.pToolSlidePanel
{
position:absolute;
right:0;
top:0;
width:100px;
height:100px;
background-color:#ffcc33;
}
Javascript (jQuery):
$('.pToolSlidePanel').animate({
left: '-=200'
}, 2000);