We Keep Coding

Change CSS of inner div when scroll reaches that div

I am attempting to implement a scroll function where the CSS of the inner div's change when it reaches a certain height from the top.
var $container = $(".inner-div");
var containerTop = $container.offset().top;
var documentTop = $(document).scrollTop();
var wHeight = $(window).height();
var minMaskHeight = 0;
var descriptionMax = 200;
var logoMin = -200;
var maskDelta = descriptionMax - minMaskHeight;
var $jobOverview = $container.find(".right");
var $jobLogo = $container.find(".left");
var curPlacementPer = ((containerTop - documentTop) / wHeight) * 100;
var topMax = 85;
var center = 20;
var bottomMax = -15;
//console.log("Placement: " + curPlacementPer);
function applyChanges(perOpen) {
var maskHeightChange = maskDelta * (perOpen / 100);
var opacityPer = perOpen / 100;
var newDescriptionLeft = descriptionMax - maskHeightChange;
var newLogoLeft = logoMin + maskHeightChange;
if (newDescriptionLeft <= 0) newDescriptionLeft = 0;
if (newLogoLeft >= 0) newLogoLeft = 0;
if (opacityPer >= 1) opacityPer = 1;
$jobOverview.css({
transform: "translate(" + newDescriptionLeft + "%,-50%)",
opacity: opacityPer
});
$jobLogo.css({
transform: "translate(" + newLogoLeft + "%,-50%)",
opacity: opacityPer
});
}
if (window.innerWidth > 640) {
$container.removeClass("mobile");
// console.log("Placement: " + curPlacementPer);
if (curPlacementPer <= topMax /*&& curPlacementPer >= center*/ ) {
var perOpen = ((topMax - curPlacementPer) / 25) * 100;
applyChanges(perOpen);
} else if (curPlacementPer < center /*&& curPlacementPer >= bottomMax*/ ) {
var perOpen = (((bottomMax - curPlacementPer) * -1) / 25) * 100;
applyChanges(perOpen);
} else {
$jobOverview.css({
transform: "translate(200%,-50%)",
opacity: "0"
});
$jobLogo.css({
transform: "translate(-300%,-50%)",
opacity: "0"
});
}
<div class="outer-div">
<div class="inner-div first">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="inner-div second">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="inner-div third">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="inner-div fourth">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
Currently, all of the inner div's gets changed at the same time.
I noticed that when I change the $container class to equal '.first' and specify it more, it works.
Is there any way to make the inner div's change separately, relative to its height from the top? Any way I can iterate the scroll function so I can add more inner div's in the future and not have to worry about changing my scroll function?

In raw JavaScript, this is my answer:
// Define the element -- The '#fooBar' can be changed to anything else.
var element = document.querySelector("#fooBar");
// Define how much of the element is shown before something happens.
var scrollClipHeight = 0 /* Whatever number value you want... */;
// Function to change an element's CSS when it is scrolled in.
const doSomething = function doSomething() {
/** When the window vertical scroll position plus the
* window's inner height has reached the
* top position of your element.
*/
if (
(window.innerHeight + window.scrollY) - (scrollClipHeight || 0) >=
element.getBoundingClientRect().top
)
// Generally, something is meant to happen here.
element.style = "/* Yay, some CSS! */"
};
// Call the function without an event occurring.
doSomething();
// Call the function when the 'window' scrolls.
addEventListener("scroll", doSomething, false)
This is the method I use. If there are other methods, I'd love to see them as well but this is my answer for now.

consider using 3rd party jQuery plugin for easier job, like one of these:
https://github.com/xobotyi/jquery.viewport
or
https://github.com/zeusdeux/isInViewport
then you can have additional element selector e.g.: ":in-viewport"
so you can:
$(window).on('scroll',function() {
$('div').not(':in-viewport').html('');
$('div:in-viewport').html('hello');
});

Check if current scroll offset from top is bigger than the element offset from the top:
$(window).scroll(function() {
var height = $(window).scrollTop();
var element = $('#changethis'); //change this to your element you want to add the css to
if(height > element.offset().top) {
element.addClass('black'); //add css class black (change according to own css)
}
});
Html:
<div id="changethis">Test</div>
Css:
body
{
height:2000px;
}
.black
{
background-color:black;
color:white;
padding:20px;
}
Demo:
https://codepen.io/anon/pen/WZdEap
You could easily implement this in your existing code.

Below is the sample snippet code, Hope it'll work for you:
$(document).ready(function(){
topMax = 100;
topMin = 25;
$(document).scroll(function(){
$('.inner-div').each(function(){
if($(this).offset().top-$(window).scrollTop()<=topMax && $(this).offset().top-$(window).scrollTop()>=topMin){
$(this).css({'background':'#c7c7c7'});
}else{
$(this).css({'background':'inherit'});
}
});
});
});
div{
width:100%;
border:1px solid red;
padding:5px;
}
div.inner-div{
border: 1px dashed green;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer-div">
<div class="inner-div first">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="inner-div second">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="inner-div third">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="inner-div fourth">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
Happy to help you! :)

why not my all div inside the div is getting the height of firstChild

I want to make my all div height equal to the first child of the inside div
here I have three div p , p2 , p3 which is inside of another div called(class) r , I want to make my p2 , p3 same height to p.
HTML
<div>
<div class="r">
<div class="p">fgdsgs</div>
<div class="p2">sdgdfg</div>
<div class="p3">sdgdfg</div>
</div>
</div>
CSS
.p,.p2,.p3{
display:inline-block;
width:80px;
}
.p{
height:50px;
}
JS
var firstChild = document.querySelector(".r:first-child");
var descendant = firstChild.querySelectorAll(".p, .p2,.p3");
[].forEach.call(descendant, function(itm){
itm.style.backgroundColor = "green";
var ch = document.getElementsByClassName("p").clientHeight;
for(var i = 0 ;i < ch.length; i++ ){
itm.style.height = ch[i] + "px";
}
});
Demo - https://jsfiddle.net/104sn7mu/13/
Edit 1
loops added

You have selected .r and stored first child in var firstChild, so use that as below,
var firstChild = document.querySelector(".r:first-child");
var descendant = firstChild.querySelectorAll(".p, .p2,.p3");
[].forEach.call(descendant, function(itm){
itm.style.backgroundColor = "green";
var ch = firstChild.clientHeight;
itm.style.height = ch + "px";
});
.p,.p2,.p3{
display:inline-block;
width:80px;
}
.p{
height:50px;
}
<div>
<div class="r">
<div class="p">fgdsgs</div>
<div class="p2">sdgdfg</div>
<div class="p3">sdgdfg</div>
</div>
</div>

you can use the variable you made earlier like this:
var firstChild = document.querySelector(".r:first-child");
var descendant = firstChild.querySelectorAll(".p, .p2,.p3");
[].forEach.call(descendant, function(itm){
itm.style.backgroundColor = "blue";
var ch = firstChild.clientHeight;
itm.style.height = ch + "px";
});

var r = document.querySelectorAll(".r");
r.forEach(function(pel){
var rChildren = pel.querySelectorAll(".p, .p2,.p3");
rChildren.forEach(function(el){
el.style.backgroundColor = "green";
var ch = rChildren[0].clientHeight; // 1st child clientHeight of all elements under div having class r
el.style.height = ch + "px";
});
});
.p,.p2,.p3{
display:inline-block;
width:80px;
}
.p{
height:50px;
}
<div>
<div class="r">
<div class="p">fgdsgs</div>
<div class="p2">sdgdfg</div>
<div class="p3">sdgdfg</div>
</div>
</div>
var r = document.querySelectorAll(".r");
r.forEach(function(pel){
var rChildren = pel.querySelectorAll(".p, .p2,.p3");
rChildren.forEach(function(el){
el.style.backgroundColor = "green";
var ch = rChildren[0].clientHeight; // 1st child clientHeight of all elements under div having class r
el.style.height = ch + "px";
});
});
.p,.p2,.p3{
display:inline-block;
width:80px;
}
.p{
height:50px;
}
<div>
<div class="r">
<div class="p">fgdsgs</div>
<div class="p2">sdgdfg</div>
<div class="p3">sdgdfg</div>
</div>
<br><br>
<div class="r">
<div class="p">fgdsgs</div>
<div class="p2">sdgdfg</div>
<div class="p3">sdgdfg</div>
</div>
</div>

style.display = "none" fails [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
line 5 of my javascript is failing after first click. It 'will' open a subnav and then when I click on a second one, the first will disappear. But that all, after that, every one you click on will remain and will not go away without a screen refresh. .style.display = "none" is completely failing to clear my ma[m] value thus my subnav menu fails to disappear when another value is clicked. http://jsfiddle.net/w9ztQ/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bite Me</title>
<script type="text/javascript">
var ma = ["dropmenu1","dropmenu2","dropmenu3"];
function dropMenu(x){
for (var m in ma){
if(ma[m] != x){
document.getElementById(ma[m]).style.display = "none";
}
}
if(document.getElementById(x).style.display == 'block'){
fadeOut(x);
}else{
fadeIn(x);
}
}
</script>
<script type="text/javascript">
var fade_in_from = 0;
var fade_out_from = 10;
function fadeIn(element){
var target = document.getElementById(element);
target.style.display ="block";
var newSetting = fade_in_from / 10;
target.style.opacity = newSetting;
//opacity
fade_in_from++;
if(fade_in_from == 10){
target.style.opacity = 1;
clearTimeout(looTimer);
fade_in_from = 0;
return false;
}
var loopTimer = setTimeout('fadeIn(\''+element+'\')',50);
}
function fadeOut(element){
var target = document.getElementById(element);
var newSetting = fade_out_from / 10;
target.style.opacity = newSetting;
fade_out_from--;
if(fade_out_from == 0){
target.style.opacity = 0;
target.style.display = "none";
clearTimeout(loopTimer);
fade_out_from = 10;
return false;
}
var loopTimer = setTimeout('fadeOut(\''+element+'\')',50);
}
</script>
<script type="text/javascript">
var ma = ["dropmenu1","dropmenu2","dropmenu3"];
function dropMenu(x){
for (var m in ma){
if(ma[m] != x){
document.getElementById(ma[m]).style.display = "none";
}
}
if(document.getElementById(x).style.display == 'block'){
fadeOut(x);
}else{
fadeIn(x);
}
}
</script>
<style type="text/css">
body{ margin:0px; }
div#myheader{
height:100px;
background:#D2E9FF;
border-bottom:#09F 1px solid;
}
div#logo{
height:75px;
border:#09F 1px dashed;
font-size:44px;
padding:0px 12px;
}
div#headermenusystem{ margin-left:16px; }
div#headermenusystem > div{ float:left; margin:0px 20px; }
div.dropmenus {
display:none;
position:absolute;
top:100px;
width:120px;
background:#D2E9FF;
z-index:2;
padding:4px;
border:#0385CB 3px solid;
border-top:none;
-moz-border-radius:0px 0px 8px 8px;
border-radius:0px 0px 8px 8px;
}
div.dropmenus > a {
display:block;
margin:4px;
padding:7px;
font-size:14px;
text-decoration:none;
background:#E8E8E8;
border:#666 1px solid;
-moz-border-radius:3px;
border-radius:3px;
color:#000;
}
div.dropmenus > a:hover {
background:#FFF;
border:#06F 1px solid;
color: #06F;
}
div#dropmenu1{left:24px;}
div#dropmenu2{left:116px;}
div#dropmenu3{left:214px;}
div#restofpage{ padding:36px; }
</style>
</head>
<body>
<!-- START HEADER -->
<div id="myheader">
<div id="logo">Test Company</div>
<!-- START MENU SYSTEM -->
<div id="headermenusystem">
<div id="cont1">
Services
<div id="dropmenu1" class="dropmenus">
Pool Cleaning
Yard Work
Pest Removal
</div>
</div>
<div id="cont2">
Locations
<div id="dropmenu2" class="dropmenus">
Queens
Brooklyn
Bronx
</div>
</div>
<div id="cont3">
Staff
<div id="dropmenu3" class="dropmenus">
George
Allen
Frank
</div>
</div>
<div>
Contact Us
</div>
</div>
<!-- END MENU SYSTEM -->
</div>
<!-- END HEADER -->
<div id="restofpage" onmousedown="dropMenu()" style="height:500px;">
<h2>Welcome</h2>
<p>blah...</p>
</div>
</body>
</html>

I found 2 small bugs.
One is clearTimeout(looTimer); I think you mean loopTimer.
Second is that you define var ma = ["dropmenu1","dropmenu2","dropmenu3"]; 2 times in your script. Removing that I think it works.
Is this (demo) the behavior you expect?
var ma = ["dropmenu1","dropmenu2","dropmenu3"];
function dropMenu(x){
for (var m in ma){
if(ma[m] != x){
document.getElementById(ma[m]).style.display = "none";
}
}
if(document.getElementById(x).style.display == 'block'){
fadeOut(x);
}else{
fadeIn(x);
}
}
var fade_in_from = 0;
var fade_out_from = 10;
function fadeIn(element){
var target = document.getElementById(element);
target.style.display ="block";
var newSetting = fade_in_from / 10;
target.style.opacity = newSetting;
//opacity
fade_in_from++;
if(fade_in_from == 10){
target.style.opacity = 1;
clearTimeout(loopTimer);
fade_in_from = 0;
return false;
}
var loopTimer = setTimeout('fadeIn(\''+element+'\')',50);
}
function fadeOut(element){
var target = document.getElementById(element);
var newSetting = fade_out_from / 10;
target.style.opacity = newSetting;
fade_out_from--;
if(fade_out_from == 0){
target.style.opacity = 0;
target.style.display = "none";
clearTimeout(loopTimer);
fade_out_from = 10;
return false;
}
var loopTimer = setTimeout('fadeOut(\''+element+'\')',50);
}
//var ma = ["dropmenu1","dropmenu2","dropmenu3"];
function dropMenu(x){
for (var m in ma){
if(ma[m] != x){
document.getElementById(ma[m]).style.display = "none";
}
}
if(document.getElementById(x).style.display == 'block'){
fadeOut(x);
}else{
fadeIn(x);
}
}

How float divs inside a td

I have two pages with almost the same code. Both have this CSS code and the two divs:
<style type="text/css">
.visfarve { position:relative; float:left; padding:5px; border:1px solid #666; }
.farver { border:1px solid black; width:75px; height:10px; }
.valgtfarve { width:95px; height:15px; display:block; background-color:white; text-align:center; }
</style>
<div id="vis" style="display:block; font-size:11px;">
Vis farver
</div>
<div id="skjul" style="display:none; font-size:11px;">
Skjul farver
</div>
One page then has this construct:
<table style="width:730px;">
<tr>
<td width="510px">
<div id="visfarve" style="display:none; margin-top:11px;">&npsp;</div>
</td>
<td id="viser" style="border-radius:10px; width:220px; height:inherit"></td>
</tr>
</table>
The other page has this obstruction:
<div id="visfarve" style="display:none; margin-top:11px;"> </div>
<div id="viser" style="margin-top:50px; border-radius:10px; display:none;"> </div>
They share these two js functions:
var farve1 = ["3D3D34","463834","3F383D","433839","333F44","3B3B40","38413D","304344","483C33","313F48","37463B","35453F"];
var farve2 = ["S8505-Y20R","7812-Y87R","S8010-R30B","S8010-R10B","8108-R93B","8207-R38B","S8502-G","S8010-B30G","S8010-Y70R","S8010-R90B","S8010-G10Y","S8010-B90G"];
function colors(vis) {
var setheight = 0;
for(i=farve1.length-1;i>-1;i--) { skriv += "<div class='visfarve' onmouseover=\"document.getElementById('viser').style.background = '#" + farve1[i] + "';\" onmouseout=\"document.getElementById('viser').style.background = 'white';\" onclick='valgtfarve(\"" + farve2[i] + "\",\"#" + farve1[i] + "\");'><table><tr><td class='farver' title='Klik for at vælge' style='background-color:#" + farve1[i] + ";'></td></tr><tr><td><p>" + farve2[i] + "</p></td></tr></table></div>"; setheight += 10; }
document.getElementById('visfarve').innerHTML = skriv;
if(vis) {
document.getElementById('vis').style.display = "none";
document.getElementById('skjul').style.display = "block";
document.getElementById('visfarve').style.display = "block";
document.getElementById('viser').style.display = "block";
document.getElementById('viser').style.height = setheight + "px";
}
else {
document.getElementById('vis').style.display = "block";
document.getElementById('skjul').style.display = "none";
document.getElementById('visfarve').style.display = "none";
document.getElementById('viser').style.display = "none";
document.getElementById('viser').style.height = 0 + "px";
}
}
function valgtfarve(kode, farve) {
if(!valgt) {
if(confirm("Tones en maling kan den ikke returneres.\nAccepter fraskrivelse af returret for tonet maling?")) { valgt = true; }
else {
document.getElementById('vis').style.display = "block";
document.getElementById('skjul').style.display = "none";
document.getElementById('viser').style.height = "0px";
document.getElementById('visfarve').style.display = "none"; return false;
}}
document.getElementById('valgtfarve').value = kode;
document.getElementById('valgtfarve').style.backgroundColor = farve;
}
When I use the div construct the floating divs lies niceley next to each other with 5 divs in each line and breaks when the container div edge is reached. However, inside the td the divs insists on each having the full width of the td - resulting in only one div per line.
How do I get divs inside a td to keep width and float left?

Let's start from a jsFiddle link : Here
I think it's a good practice when you post question.
Please explain where is the problem, in the jsfiddle page I don't see your bug.
I did only little modification, no relevant code changes.
I only defined the variable
var skriv = "";

Elements "jerk" back to right when I change their order

I am trying to create an infinite scroll of elements, and haven't found a plugin that was sufficiently lightweight/capable enough, so I'm trying to create my own.
So far it is working swimmingly, except for a slight jerkiness in the animation when I remove the first element and append it to the end of the parent. The example I've tossed up also has an issue where the elements lose their padding, for some reason, but that is not occurring in my actual code...
Fiddle:
http://jsfiddle.net/WtFWy/
Using the sample markup:
<section id="photos" class="bg-transparent-black">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</section>​
#photos{
position:absolute;
bottom:1em;
width:100px;
height:225px;
padding:3px;
overflow:hidden;
white-space:nowrap;
}
#photos div{
height:100%;
width:50px;
padding:3px;
display:inline-block;
position:relative;
border:1px solid black;
}
.red{background:red;}
.blue{background:blue;}
.green{background:green;}
​
And JavaScript:
scrollImages = function(){
var photoArea = $('#photos');
var children = photoArea.children();
var firstChild = $(children[0])
var firstOffset=firstChild.offset();
if(document.elementLeft === false){
document.elementLeft = firstOffset.left;
}
if(document.elementWidth === false){
document.elementWidth=firstChild.outerWidth(true);
}
if(firstOffset.left < 0 && (Math.abs(firstOffset.left) > Math.abs(document.elementWidth))){
photoArea.append(firstChild);
firstChild.css('margin-left', 0 + 'px')
children = photoArea.children();
firstChild = $(children[0])
firstOffset=firstChild.offset();
document.elementLeft = firstOffset.left;
document.elementWidth=firstChild.outerWidth(true);
}else{
}
document.elementLeft -= 1;
firstChild.css('margin-left', document.elementLeft + 'px');
t = setTimeout(scrollImages, 100);
}
document.elementLeft = false;
document.elementWidth = false;
var t = setTimeout(scrollImages, 500);
$('#photos').mouseover(function(){clearTimeout(t)});
$('#photos').mouseout(function(){scrollImages()})
});
​

If you remove the padding: 3px from #photos the animation works properly.