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 to apply a CSS style to div AND the div nested in the div [duplicate]

This question already has answers here:
Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery
(23 answers)
Closed 6 years ago.
So, basically I have box on top of some text, and when you hover over it, it will go down, and hide the text:
<div id="box" onmouseover="tran1()" onmouseout="tran2()">
<p id="par"><b>Hover Me.</b></p>
</div>
<p id="movealong">I will hide!</p>
Here's the script:
function tran1() {
document.getElementById("par").innerHTML = "<b>Where'd he go?</b>";
}
function tran2() {
document.getElementById("par").innerHTML = "<b>Hover Me.</b>";
}
And finally the CSS to make it go down:
#box {
width:100px;
height:95px;
border:3px solid #000;
border-radius: 8px;
background-color:#06F;
text-align:center;
}
#box:hover {
width:100px;
height:150px;
border:3px solid #000;
border-radius: 8px;
background-color:#066;
}
However, when I hover over the text, the text changes back to "Hover me". How do I call both box and par? Is it the CSS that's the problem or is it the JS?

Not sure if you're interested in a JQuery solution, but this is how simple your problem is solved with it:
var $par = $('#par');
$('#box').hover(function() {
// On mousein
$par.html("Where'd he go?");
}, function() {
// On mouseout
$par.html('Hover Me.');
});
#box {
width: 100px;
height: 95px;
border: 3px solid #000;
border-radius: 8px;
background-color: #06F;
text-align: center;
}
#box:hover {
width: 100px;
height: 150px;
border: 3px solid #000;
border-radius: 8px;
background-color: #066;
}
<div id="box">
<p id="par"><b>Hover Me.</b></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Why using JS for the text change instead of anextra class?
function showHidden(el) {
el.className += " showHidden";
}
function hideHidden(el) {
el.className = "";
}
.hidden {
display: none;
}
div.showHidden p {
display: none;
}
div.showHidden p.hidden {
display: block;
}
<div onmouseover="showHidden(this)" onmouseout="hideHidden(this)"><p>Hover me</p><p class="hidden">Hide me</p></div>

Use #box:hover + P#movealong{ to hide the element
function tran1() {
document.getElementById("par").innerHTML = "<b>Where'd he go?</b>";
}
function tran2() {
document.getElementById("par").innerHTML = "<b>Hover Me.</b>";
}
#box {
width:100px;
height:95px;
border:3px solid #000;
border-radius: 8px;
background-color:#06F;
text-align:center;
}
#box:hover {
width:100px;
height:150px;
border:3px solid #000;
border-radius: 8px;
background-color:#066;
}
#box:hover + P#movealong{
display:none;
}
<div id="box" onmouseover="tran1()" onmouseout="tran2()">
<p id="par"><b>Hover Me.</b></p>
</div>
<p id="movealong">I will hide!</p>

Clone div and alter style by onclick

In my HTML I have got 4 boxes that I want to increase in size and appear in the middle of the website by onclick. But it doesn't work with this clone version.
function changeSize(id, weight, height){
//$( "." + id ).clone().appendTo( "new" + id );
var elem = document.getElementById(id);
clone = elem.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = "newid" +id;
document.body.appendChild(clone);
if(elem.getAttribute('style')){
elem.removeAttribute('style');
} else {
elem.style.width = weight + 'px';
elem.style.height = height + 'px';
elem.style.fontSize = '30px';
elem.style.position = 'absolute';
elem.style.left= '40%';
}
}
var elems = document.getElementsByClassName('kaesten');
for(var i = 0; i < elems.length; i++){
elems[i].onclick = function(){
changeSize(this.id, 600, 600);
}
}
.kaesten{
width:240px;
height:300px;
background-color:darkgrey;
background-position:center;
background-repeat:no-repeat;
text-shadow:0px 0px 3px #000;
border: 5px solid #F0F8ff;
vertical-align:top;
text-shadow: 3px 3px 4px #777;
float:left;
margin-left:30px;
}
<div id="box1" class="kaesten">test1</div>
<div id="box2" class="kaesten">test2</div>
<div id="box3" class="kaesten">test3</div>
<div id="box4" class="kaesten">test4</div>
Question: How can I clone the box by onclick and show it in the middle of the site? How can I remove it by onclick?

You can modify CSS with jQuery css() Method :
source : http://api.jquery.com/css/
To set a specified CSS property, use the following syntax:
css("propertyname","value");
$(document).ready(function() {
$('.kaesten').click(function() {
$('.kaesten').removeAttr('style');
var id = $(this).attr('id');
$('#' + id).css({
"width": "30em",
"height": "18em",
"top": "50%",
"left": "50%",
"position": "fixed",
"margin-top": "-9em",
"margin-left": "-15em",
"background-color": "blue"
});
});
});
.kaesten {
cursor: pointer;
width: 240px;
height: 300px;
background-color: darkgrey;
background-position: center;
background-repeat: no-repeat;
text-shadow: 0px 0px 3px #000;
border: 5px solid #F0F8ff;
vertical-align: top;
text-shadow: 3px 3px 4px #777;
float: left;
margin-left: 30px;
color: #fff;
font-family: 'helvetica';
}
.container {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div id="box1" class="kaesten">test1</div>
<div id="box2" class="kaesten">test2</div>
<div id="box3" class="kaesten">test3</div>
<div id="box4" class="kaesten">test4</div>
</div>

If you just need to bring the div in middle and on clicking it should go back to the original position .Try this code , no jquery required.
function changeSize(id, weight, height){
var elem = document.getElementById(id);
if(elem.className == 'absoluteclass'){
elem.setAttribute('class','kaesten');
}else{
var currentAbsoluteElem = document.getElementsByClassName('absoluteclass');
if(currentAbsoluteElem.length > 0){
console.log(currentAbsoluteElem[0])
currentAbsoluteElem[0].setAttribute('class','kaesten');
}
var elem = document.getElementById(id);
elem.setAttribute('class','absoluteclass');
/* for making the height , width dynamic you can change it from here
elem.style.width = weight + 'px';
elem.style.height = height + 'px';
elem.style.left= '40%';
*/
}
}
var elems = document.getElementsByClassName('kaesten');
for(var i = 0; i < elems.length; i++){
elems[i].onclick = function(){
changeSize(this.id, 600, 600);
}
}
.kaesten{
width:240px;
height:300px;
background-color:darkgrey;
background-position:center;
background-repeat:no-repeat;
text-shadow:0px 0px 3px #000;
border: 5px solid #F0F8ff;
vertical-align:top;
text-shadow: 3px 3px 4px #777;
float:left;
margin-left:30px;
}
.absoluteclass{
position:absolute;
background-color:darkgrey;
width:600px;
height:600px;
left:calc(50% - 300px);
}
<div id="box1" class="kaesten">test1</div>
<div id="box2" class="kaesten">test2</div>
<div id="box3" class="kaesten">test3</div>
<div id="box4" class="kaesten">test4</div>
No Need to clone the div , If still you need to clone the div we might need to change the code accordingly.You can check the JSFIDDLE here

Updated Code : Hope this is what you were looking for :)
function changeSize(id, weight, height){
var elem = document.getElementById(id);
var currentAbsoluteElem = document.getElementById('dummy');
var text = elem.innerHTML;
currentAbsoluteElem.innerHTML = text;
currentAbsoluteElem.style="display:block";
/*Extra styling neeed to be done here*/
}
var elems = document.getElementsByClassName('kaesten');
for(var i = 0; i < elems.length; i++){
elems[i].onclick = function(){
changeSize(this.id, 600, 600);
}
}
var absoluteCl = document.getElementsByClassName('absoluteclass');
absoluteCl[0].onclick = function(){
console.log(document.getElementsByClassName('absoluteclass'))
document.getElementsByClassName('absoluteclass')[0].setAttribute('style','display:none');
}
.kaesten{
width:240px;
height:300px;
background-color:darkgrey;
background-position:center;
background-repeat:no-repeat;
text-shadow:0px 0px 3px #000;
border: 5px solid #F0F8ff;
vertical-align:top;
text-shadow: 3px 3px 4px #777;
float:left;
margin-left:30px;
}
.absoluteclass{
position:absolute;
background-color:darkgrey;
width:600px;
height:600px;
left:calc(50% - 300px);
display:none;
}
<div id="box1" class="kaesten">test1</div>
<div id="box2" class="kaesten">test2</div>
<div id="box3" class="kaesten">test3</div>
<div id="box4" class="kaesten">test4</div>
<div id="dummy" class="absoluteclass"></div>

Can't hover no more a div after I've clicked on it

I'm actually trying to do a menu using CSS and jQuery.
It uses images 2 images per button, one for when it's not active and the other for the hover.
This part is made with the stylesheet.
When you click on a li, it take the same style as if the mouse was over. But only one li can be clicked at a time so if you click on another(or the same) li it undo the previous one for the other(or none). This part is done with jquery.
My problem is that when I click on a LI and then unselect it, I can no longer hover it. I think there is a collision between the CSS applied by jQuery and the style sheet.
There is the HTML Part :
<body>
<div id="wrap"><!--Header Menu TagBar -->
<div id="header"></div>
<div id="menu">
<ul>
<li id="genre"></li>
<li id="author"></li>
<li id="home">
<div id="hmIcon"></div>
</li>
<li id="artist"></li>
<li id="year"></li>
</ul>
</div>
This is the CSS Part :
#menu {
background-color:#fff;
width:1000px;
height:60px;
position:relative;
}
#menu ul {
margin:0;
padding:0;
list-style:none;
overflow: hidden;
}
#menu ul li {
width:200px;
float:left;
list-style:none;
text-align:center;
height:60px;
line-height:60px;
opacity:.9;
}
#menu li:hover {
opacity:1;
box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.6);
}
#genre {
background-image:url(../images/genreHover.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:200px 60px;
}
#genre:hover {
background-image:url(../images/genre.jpg);
}
#author {
background-image:url(../images/authorHover.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:200px 60px;
}
#author:hover {
background-image:url(../images/author.jpg);
}
#hmIcon {
width:100%;
height:100%;
background-image:url(../images/HomeIcon.png);
background-position:center center;
background-size:50px 50px;
background-repeat:no-repeat;
}
#home {
background-image:url(../images/homeHover.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:200px 60px;
}
#home:hover {
background-image:url(../images/home.jpg);
}
#artist {
background-image:url(../images/artistHover.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:200px 60px;
}
#artist:hover {
background-image:url(../images/artist.jpg);
}
#year {
background-image:url(../images/yearContour.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:200px 60px;
}
#year:hover {
background-image:url(../images/year.jpg);
}
And the best for the last (the headache), the Jquery Part :
function clouds(cssDiv, otherOpened) {
var Div = "#Cloud_" + cssDiv;
var idButton = "#" + cssDiv;
var h = "200px";
if (otherOpened === null) {
var clickedImg = "url(./images/" + cssDiv + ".jpg)";
$(Div).fadeIn(1);
$(Div).animate({
height: h,
}, 600);
$(idButton).css({
'box-shadow': ' inset 0px 4px 8px rgba(0,0,0,0.45)',
'background-image': clickedImg
});
return Div;
} else {
var buttonToUnclick = otherOpened.slice(7);
var buttonToClick = cssDiv;
var unClickedImg = "url(./images/" + buttonToUnclick + "Hover.jpg)";
$(otherOpened).animate({
height: "0",
}, 600);
$(otherOpened).fadeOut(1);
$("#" + buttonToUnclick).css({
'box-shadow': ' inset 0px 0px 0px rgba(0,0,0,0.45)',
'background-image': unClickedImg
});
if (Div == otherOpened) {
return null;
} else {
var clickedImg = "url(./images/" + buttonToClick + ".jpg)";
setTimeout(function() {
$(Div).fadeIn(1);
$(Div).animate({
height: h,
}, 600);
$("#" + buttonToClick).css({
'box-shadow': ' inset 0px 4px 8px rgba(0,0,0,0.45)',
'background-image': clickedImg
});
console.log(buttonToClick);
console.log(clickedImg);
}, 800);
return Div;
}
}
}
And its call :
$("#genre").click(function() {
whichCloudsOn = clouds("genre", whichCloudsOn);
});
$("#artist").click(function() {
whichCloudsOn = clouds("artist", whichCloudsOn);
});
$("#author").click(function() {
whichCloudsOn = clouds("author", whichCloudsOn);
});
$("#year").click(function() {
whichCloudsOn = clouds("year", whichCloudsOn);
});
Thanks for the help, I'm open to any advices or solutions.

jQuery.css() adds inline styling, which will override your external css. Try adding !important on your hover, like this:
#year:hover {
background-image:url(../images/year.jpg) !important;
}
I made an example fiddle. (click both and then hover)

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);