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>

CSS - Absolute and Relative Position with image fader

I'm working with an image fader program, but I'm not understanding absolute positioning. I have the images fading nicely and resizing the way I want if the screen resizes. but I have 2 problems. Div#2 gets covered up by the images. I want div2 to always appear below the image div. Also, I have control buttons on the images. I want them in the middle. I thought using top:50% would do that, but it's not. Here's an example...
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,5000);
function nextSlide(){goToSlide(currentSlide+1);}
function previousSlide(){goToSlide(currentSlide-1);}
function goToSlide(n){
slides[currentSlide].className = 'slide';
currentSlide = (n+slides.length)%slides.length;
slides[currentSlide].className = 'slide showing';}
var next = document.getElementById('next');
var previous = document.getElementById('previous');
next.onclick = function(){nextSlide();};
previous.onclick = function(){previousSlide();};
#slides {position: relative}
.slide{
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:auto;
min-height:300px;
object-fit:cover;
opacity: 0;
box-sizing:border-box;
transition: opacity 2s;}
.showing{opacity: 1;}
.controls{
background: transparent;
color: #fff;
font-size: 30px;
cursor: pointer;
border: 1px solid #555;
width: 30px;
position: absolute;
}
.controls:hover{ opacity:.5}
.fadenext{right: 10px; top: 50%;}
.fadeprev{left: 10px; top: 50%;}
<br><br>
<div id="slides">
<img src='https://www.panotools.org/dersch/Monp.JPG' class="slide showing">
<img src='https://www.panotools.org/dersch/StBp.JPG' class="slide">
<button class="controls fadeprev" id="previous"><</button>
<button class="controls fadenext" id="next">></button>
</div>
<div style='margin-top:40px;border:1px solid red;width:200px;height:100px'>
This is Div # 2</div>

I've amended your snippet to fix your issues.
Adding margin-top instead of top will fix your issue with the
controls.
Div 2 will now always remain below your slider.
P.S. I moved your div2 inline styles to keep it neat.
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 5000);
function nextSlide() {
goToSlide(currentSlide + 1);
}
function previousSlide() {
goToSlide(currentSlide - 1);
}
function goToSlide(n) {
slides[currentSlide].className = 'slide';
currentSlide = (n + slides.length) % slides.length;
slides[currentSlide].className = 'slide showing';
}
var next = document.getElementById('next');
var previous = document.getElementById('previous');
next.onclick = function() {
nextSlide();
};
previous.onclick = function() {
previousSlide();
};
* {
margin: 0;
padding: 0;
}
#slides {
position: relative
}
.slide {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: auto;
min-height: 300px;
object-fit: cover;
opacity: 0;
box-sizing: border-box;
transition: opacity 2s;
}
.showing {
opacity: 1;
}
.controls {
background: transparent;
color: #fff;
font-size: 30px;
cursor: pointer;
border: 1px solid #555;
width: 30px;
position: absolute;
}
.controls:hover {
opacity: .5
}
.fadenext {
right: 10px;
margin-top: 25%;
}
.fadeprev {
left: 10px;
margin-top: 25%;
}
.div2 {
margin-top: 50%;
border: 1px solid red;
width: 200px;
height: 100px;
}
<br><br>
<div id="slides">
<img src='https://www.panotools.org/dersch/Monp.JPG' class="slide showing">
<img src='https://www.panotools.org/dersch/StBp.JPG' class="slide">
<button class="controls fadeprev" id="previous"><</button>
<button class="controls fadenext" id="next">></button>
</div>
<div class="div2">This is Div # 2</div>

It's not feasible to use % based positions when you use "top" style. So to achieve what you want to do, use margin-top instead. As shown below:
.fadenext{right: 10px; margin-top: 25%;}
.fadeprev{left: 10px; margin-top: 25%;}
And for your div2, just change it's style to:
margin-top: 50%

Execute a function when mouse is over any button

So I have a page where I have replaced my cursor with a div.
The cursor is simply a part of the page that I can animate using CSS.
The main thing I want to achieve is to make this cursor change size when I hover over any button.
I cannot get it to work...
Cursor positioning is handled by a JQuery script but the vanilla one doesn't seem like it wants to work with me...
I can can't fix the error...
// Jquery code that moves the cursor (div element)
$(document).on('mousemove', function(e){
$('#cursor').css({
left: e.pageX - 7,
top: e.pageY - 7
});
});
// Function to be executed when mouse is over a button
document.querySelectorAll('button').addEventListener("mouseover", cursorHovering);
function cursorHovering() {
document.getElementById('object').style = "transform: scale(2);";
}
body {
height: 300px;
width: 300px;
background-color: #ccc;
}
*, body { cursor: none !important; }
#cursor {
position: fixed;
z-index: 20000;
height: 15px;
width: 15px;
background-color: #ffffff;
mix-blend-mode: difference;
border-radius: 50%;
opacity: 0;
transition: 0.3s;
transition-property: transform, opacity;
pointer-events: none;
}
body:hover #cursor {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="cursor"></div>
<button class="button1">Hover over me (1)</button>
<button class="button2">Hover over me (2)</button>
<button class="button3">Hover over me (3)</button>
</body>

You mean something like this?
// Jquery code that moves the cursor (div element)
var c = document.getElementById('cursor');
document.addEventListener('mousemove', (e) => {
c.style.left = e.pageX - 7 + 'px';
c.style.top = e.pageY - 7 + 'px';
});
// Function to be executed when mouse is over a button
document
.querySelectorAll('button')
.forEach(b => {
b.addEventListener("mouseover", () => c.style.transform='scale(2)');
b.addEventListener("mouseout", () => c.style.transform='scale(1)');
});
body {
height: 300px;
width: 300px;
background-color: #ccc;
}
*, body { cursor: none !important; }
#cursor {
position: fixed;
z-index: 20000;
height: 15px;
width: 15px;
background-color: #ffffff;
mix-blend-mode: difference;
border-radius: 50%;
opacity: 0;
transition: 0.3s;
transition-property: transform, opacity;
pointer-events: none;
}
body:hover #cursor {
opacity: 1;
}
<body>
<div id="cursor"></div>
<button class="button1">Hover over me (1)</button>
<button class="button2">Hover over me (2)</button>
<button class="button3">Hover over me (3)</button>
</body>

Here's a vanilla JS solution.
document.addEventListener('mousemove', handleMouseMove, false);
// Cache the elements
const cursor = document.getElementById('cursor');
const buttons = document.querySelectorAll('button');
// For each button add the two event listeners
[...buttons].forEach(button => {
button.addEventListener('mouseover', handleMouseOver, false);
button.addEventListener('mouseout', handleMouseOut, false)
});
function handleMouseMove(e) {
// You need to ensure that you add "px" to the
// end of the value. jQuery does this automatically.
cursor.style.left = `${e.pageX - 7}px`;
cursor.style.top = `${e.pageY - 7}px`;
}
function handleMouseOver() {
cursor.style.transform = 'scale(2)';
}
function handleMouseOut() {
cursor.style.transform = 'scale(1)';
}
body {
height: 300px;
width: 300px;
background-color: #ccc;
}
*,
body {
cursor: none !important;
}
#cursor {
position: fixed;
z-index: 20000;
height: 15px;
width: 15px;
background-color: #ffffff;
mix-blend-mode: difference;
border-radius: 50%;
opacity: 0;
transition: 0.3s;
transition-property: transform, opacity;
pointer-events: none;
}
body:hover #cursor {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="cursor"></div>
<button class="button1">Hover over me (1)</button>
<button class="button2">Hover over me (2)</button>
<button class="button3">Hover over me (3)</button>
</body>

Fixing the right button of a vanilla Javascript carousel

Against all reason, I'm trying to create a vanilla JavaScript carousel.
I am having two problems:
1. The images move left at widths of -680px as they should but when I tried to create the same function for the right button, the left value goes to 1370px making the picture off the screen.
2. I would like for it to slide left rather jump left (same for right), I managed to get it to do this but it doesn't work on the first slide, only from the second slide.
Here is the HTML code just for the carousel:
<div id = "container">
<div id = "carousel">
<div class = "slide"><img class = "slideImage" class = "active" src = "sithCover.png"></div>
<div class = "slide"><img class = "slideImage" src = "darthVader.png"></div>
<div class = "slide"><img class = "slideImage" src = "darthSidious.png"></div>
<div class = "slide"><img class = "slideImage" src = "kyloRen.png"></div>
</div>
</div>
<div id = "left" class = "button"></div>
<div id = "right" class = "button"></div>
Here is the CSS code:
#container {
position: absolute;
top: 200px;
left: 100px;
width: 680px;
height: 360px;
white-space: nowrap;
overflow:hidden;
}
#carousel {
position: absolute;
width: 2740px;
height: 360px;
white-space: nowrap;
overflow: hidden;
transition: left 300ms linear;
}
.slide {
display: inline-block;
height: 360px;
width: 680px;
padding: 0;
margin: 0;
transition: left 300ms linear;
}
.slideImage {
position:relative;
height: 360px;
width: 680px;
float: left;
}
.button {
position: absolute;
top: 340px;
height: 60px;
width: 60px;
border-bottom: 12px solid red;
}
#left {
left: 115px;
border-left: 12px solid red;
transform: rotate(45deg);
}
#right {
left: 693px;
border-right: 12px solid red;
transform: rotate(-45deg);
}
Here is the JavaScript:
var carousel = document.querySelector('#carousel');
var firstVal = 0;
document.querySelector('#left').addEventListener("click", moveLeft);
function moveLeft (){
firstVal +=685;
carousel.style.left = "-"+firstVal+"px";
};
document.querySelector('#right').addEventListener("click", moveRight);
function moveRight() {
firstVal +=685;
carousel.style.left = "+"+firstVal+"px";
};
Here is a JSFiddle so that you can see what I mean:
"https://jsfiddle.net/way81/8to1kkyj/"
I appreciate your time in reading my question and any help would be much appreciated.

Ofcourse it goes from -685px on left click and then to +1370pxthe next right click; You are always adding 685 to your firstVal variable.
firstVal = 0
//firstVal is worth 0
moveLeft()
//firstVal is now worth 685
moveRight()
//firstVal is now worth 1370.
The problem is that when you apply the firstVal to your CSS thing in the javascript, you create a string to get your negative value (where you apply the "-" sign infront of firstVal)
Instead, write them like this
function moveLeft (){
firstVal -=685; //note we now subtract, the "-" should appear when the number becomes negative
carousel.style.left = firstVal + "px";
};
function moveRight() {
firstVal +=685;
carousel.style.left = firstVal + "px";
};

var left = document.getElementById("left");
left.addEventListener("click", moveLeft, false);
var right = document.getElementById("right");
right.addEventListener("click", moveRight, false);
var carousel = document.getElementById("carousel");
var images = document.getElementsByTagName("img");
var position = 0;
var interval = 685;
var minPos = ("-" + interval) * images.length;
var maxPos = interval * images.length;
//slide image to the left side <--
function moveRight() {
if (position > (minPos + interval)) {
position -= interval;
carousel.style.left = position + "px";
}
if (position === (minPos + interval)) {
right.style.display = "none";
}
left.style.display = "block";
}
//slide image to the right side -->
function moveLeft() {
if (position < (maxPos - interval) && position < 0) {
position += interval;
carousel.style.left = position + "px";
}
if (position === 0) {
left.style.display = "none";
}
right.style.display = "block";
}
#container {
position: absolute;
top: 200px;
left: 100px;
width: 680px;
height: 360px;
white-space: nowrap;
overflow: hidden;
}
#carousel {
position: absolute;
width: 2740px;
height: 360px;
white-space: nowrap;
overflow: hidden;
transition: left 300ms linear;
}
.slide {
display: inline-block;
height: 360px;
width: 680px;
padding: 0;
margin: 0;
transition: left 300ms linear;
}
.slideImage {
position: relative;
height: 360px;
width: 680px;
float: left;
}
.button {
position: absolute;
top: 340px;
height: 60px;
width: 60px;
border-bottom: 12px solid red;
}
#left {
left: 115px;
border-left: 12px solid red;
transform: rotate(45deg);
display: none;
}
#right {
left: 693px;
border-right: 12px solid red;
transform: rotate(-45deg);
}
<div id="container">
<div id="carousel">
<div class="slide">
<img class="slideImage" class="active" src="sithCover.png" alt="slide1">
</div>
<div class="slide">
<img class="slideImage" src="darthVader.png" alt="slide2">
</div>
<div class="slide">
<img class="slideImage" src="darthSidious.png" alt="slide3">
</div>
<div class="slide">
<img class="slideImage" src="kyloRen.png" alt="slide4">
</div>
</div>
</div>
<div id="left" class="button"></div>
<div id="right" class="button"></div>

Mouseenter event not working

What I have done in this function is create a drop down menu when you click a button:
function toggleNavPanel(x){
var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
if(panel.style.height == maxH){
panel.style.height = "0px";
navarrow.innerHTML = "▾";
} else {
panel.style.height = maxH;
navarrow.innerHTML = "▴";
}
}
This works successfully. But this is not what I want. What I want is for someone to be able to mouseover something and have the form pop up.
What I have done is put it into a mouseenter function like so:
$('#story').mouseenter(function() {
var panel = document.getElementById('dropdown'), maxH="300px";
panel.style.height = "0px";
}).mouseleave(function() {
var panel = document.getElementById('dropdown'), maxH="300px";
panel.style.height = maxH;
});
This does not work. The actual mouseenter event is never executing because I have tried alerting and it didn't work either.
Could someone please tell me what I'm doing wrong? Some more related code is below:
#story {
position:relative;
top: -20%;
left: 0%;
width: inherit;
height: 25%;
margin: 0 auto;
margin-top: 5px;
background-color: transparent;
color: black;
border-style: solid;
border-width: 1px;
border-color: #D8D8D8;
}
#dropdownbutton {
float:center;
width:144px;
height:46px;
padding-top:16px;
background:#F90;
}
#dropdown{
position:absolute;
height:0px;
width:550px;
background:#000;
top:60px;
left:160px;
border-radius:0px 0px 8px 8px;
overflow:hidden;
z-index:10000;
transition: height 0.3s linear 0s;
}
view:
<div class="main">
<div id="dropdownbutton">
<button type="button" onclick="toggleNavPanel('dropdown')">Drop Down</button>
</div>
<div id="dropdown">
<p>Working</p>
</div>
Location of story element:
<div class="info_bar">
<div id="story">Story</div>
<div id="info">Info</div>
<div id="content">Content</div>
</div>

Based on the discussions...
jQuery library was not included and the code was not added in a dom ready handler