We Keep Coding

How to make jquery scrolling effect work on multiple element/classes?

I'm trying to make a very light script for multiple classes class"demo" that can work on my onScrollDown responsive animation.
I don't really understand about writing arrays. but, I believe that if I use document.getElementsByClassName("demo")[i] , i < 0 and some function(i) I can implement it for individual classes. Because I use getBoundingClientRect() instead of fixed value.
So, how can I write it correctly using i as arrays?
Thank you..
Here is my working script :
<script>
var e = document.getElementById("demo");
var rect = e.getBoundingClientRect();
var x = rect.top;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > x-300) {
$('#demo').addClass('animate');
} else {
$('#demo').removeClass('animate');
}
});
</script>
*work only for a single element.
Here is what I'm trying to do, that not working yet
<script>
var e = document.getElementsClassName("test")[i];
var rect = e.getBoundingClientRect();
var x = rect.top;
var i;
for (i = 0; i < e.length; i++) {
$(window).bind('scroll', function (i) {
if ($(window).scrollTop() > x-300) {
$e.addClass('animate');
} else {
$e.removeClass('animate');
}
});
}
</script>
CSS :
<style>
.test {
background:#345;
color:#FFF;
height:2em;
padding:.5em;
top:50px;
margin-top: 100px;
width:100%;
}
.animate {
width: 60px;
}
</style>
HTML
<div style="color: red; margin-bottom: 400px;">(Top!)</div>
<div class="test" id="demo">Menu</div>
<div class="test" id="demo">Menu</div>
<div class="test" id="demo">Menu</div>
<div style="color: red; margin-top: 400px;">(Bottom!)</div>

Okay so I've achieved what you're trying to do. Here are the changes I made:
Used the JQuery each function. This will loop all of the demo elements every time a scroll is detected. There are other ways of looping the elements but because you've already imported JQuery we may as well use it's functions.
Changed #demo to .demo. In other words, I've changed id to class. id should only be used when working with elements that are completely unique. In this case, there are multiple demos so we use class instead.
Final code (as you scroll each element will turn red showing that the animate class has been added:
$(window).on('scroll', function() {
$('.demo').each(function(i, obj) {
var rect = obj.getBoundingClientRect();
var x = rect.top;
if ($(window).scrollTop() > x - 300) {
$(obj).addClass('animate');
} else {
$(obj).removeClass('animate');
}
});
});
.body {
height: 200vh;
background-color: #f1f1f1;
}
.demo {
height: 200px;
width: 100%;
background-color: #f9f9f9;
}
.demo.animate {
background-color: #ff0000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body">
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
</div>

There are few notes in regards to your code:
In jQuery you can get elements offset by using .offset() function.
you should not use the same id more than once per page.
.bind() has been deprecated since jQuery 3.0. Use .on() instead.
To toggle class you can use .toggleClass(className, state). State is used to determine if you want to remove or add the class.
See this example:
$(window).on('scroll', function() {
jQuery(".test").each(function() {
let isTop = $(window).scrollTop() > jQuery(this).offset().top - 300;
jQuery(this).toggleClass('animate', isTop);
});
});
.test {
background: #345;
color: #FFF;
height: 2em;
padding: .5em;
top: 50px;
margin-top: 100px;
width: 100%;
}
.animate {
width: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="color: red; margin-bottom: 400px;">(Top!)</div>
<div class="test">Menu</div>
<div class="test">Menu</div>
<div class="test">Menu</div>
<div style="color: red; margin-top: 400px;">(Bottom!)</div>

How to change content of div on hover using JQuery/Javascript

I'm trying to change the contents of a div when it's hovered over using JQuery. I've seen answers on stack overflow, but I can't seem to get it working.
I've tried
$( "imgDiv" ).mouseover(
function() {
$("tdiv").textContent = "hovering";
},
function() {
$("tdiv").textContent = 'title';
}
);
I've also replaced "mouseover" with "hover". I've used a variable and the actual div in place of "imgDiv".
This is what my code looks like:
imgDiv = document.getElementById('imgDiv');
tDiv = document.getElementById('titleDiv');
$( "imgDiv" ).mouseover(
function() {
$("tdiv").textContent = "hovering";
}, function() {
$("tdiv").textContent = 'title';
}
);
body {
background: white;
padding: 20px;
font-family: Helvetica;
}
#imgDiv {
width: 100px;
height: 100px;
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">
<div id=titleDiv>title</div>
</div>

You can use jQuery's .hover() function along with the .text() function to do what you want. Also, no need for document.getElementById:
$("#imgDiv").hover(
function() {
$("#titleDiv").text("hovering");
},
function() {
$("#titleDiv").text('title');
}
);
body {
background: white;
padding: 20px;
font-family: Helvetica;
}
#imgDiv {
width: 100px;
height: 100px;
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">
<div id="titleDiv">title</div>
</div>

You can target the div with jQuery, and store it's original value. On mouseout, you can restore it. Also using mouseenter reduces the number of times the logic processes as mouseover will fire for every mouse move over the element.
var $titleDiv = $('#titleDiv');
$("#imgDiv")
.on('mouseenter', function() {
$titleDiv.data('originalText', $titleDiv.text());
$titleDiv.text('hovering');
})
.on('mouseout', function() {
$titleDiv.text($titleDiv.data('originalText'));
});
body {
background: white;
padding: 20px;
font-family: Helvetica;
}
#imgDiv {
width: 100px;
height: 100px;
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">
<div id="titleDiv">title</div>
</div>

First of all, replace $("imgDiv") with $("#imgDiv") to get the element with id (#) imgDiv.
Then $("tdiv") doesn't exist, you probably mean $("div") to select a <div>tag in your DOM.
And finally, $("tdiv").textContent doesn't exist. You can try $("div").html() or $("div").text() to get the <div> tag content
--
Quick reminder : jQuery documentation on selectors
$("div") will select the <div> tags
$(".element") will select tags with class="element"
$("#element") will select tags with id="element"

You need to try like this
$( "#imgDiv" ).mouseover(function() {
$("#titleDiv").text("hovering");
}).mouseleave( function() {
$("#titleDiv").text('title');
});
body {
background: white;
padding: 20px;
font-family: Helvetica;
}
#imgDiv {
width: 100px;
height: 100px;
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">
<div id=titleDiv>title</div>
</div>

Easy solution,
var s = document.getElementsByTagName('div');
function out() {
s[0].innerHTML = 'hello';
}
function ibn() {
s[0].innerHTML = 'Myname';
}
<div onmouseout = 'out()' onmouseenter = 'ibn()'> Myname </div>

You cannot call reference a dom with pure Javascript and them manipulate it with jQuery - it will not work.
Try this:
$( "#imgDiv" ).mouseover(function() {
$("#titleDiv").text("hovering");
});
The titleDiv id has to be referenced in your code using "#", then the id name.
Also, use $("#name_of_id").text("your content") instead of .textContent()

detect click on element with a child inside

$('.parent').on('click', function(e) {
if (e.target.matches('.inside')) {
console.log('inside');
} else {
console.log('title');
}
});
.parent {
background: lightgreen;
}
.inside {
background: silver;
}
.title {
background: gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='parent'>
<div class='inside'>
<div class='title'>lorem</div>
</div>
<br>
</div>
Click on inside and you'll get title in console.
How to get inside regardles a title is inside or not?

You need to check if the target has a parent .inside :-
$('.parent').on('click', function(e) {
if ($(e.target).parents('.inside').length) {
console.log('inside');
} else {
console.log('title');
}
});
.parent {
background: lightgreen;
}
.inside {
background: silver;
}
.title {
background: gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='parent'>
<div class='inside'>
<div class='title'>lorem</div>
</div>
<br>
</div>

Okay take a look at this and see if it works for you?
https://codepen.io/jamie-endeavour/pen/GPjzRq?editors=1011
$('.parent').on('click', function(e) {
var $target = $(e.target);
if ($target.hasClass('inside') || $target.parent().hasClass('inside')) {
console.log('inside');
} else {
console.log('not inside');
}
});
I am checking if the user has clicked on the element with the 'inside' class or if the child element belongs to the 'inside' element.
Hope this helps?

Please note that HTML works in layer so if title is going to be inside "inside", you can just target title for click as inside is always "inside" it.
$('.title').on('click', function(e){
console.log('inside');
});
.parent{
background:lightgreen;
}
.inside{
background:silver;
}
.title{
background:gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='parent'>
<div class='inside'>
<div class='title'>lorem</div>
</div>
<br>
</div>

How to chain javascript hide/show function for each div ID?

I have many <p>s with the same function.
document.getElementById("minus").onclick = function() {
functionHide()
};
function functionHide() {
document.getElementById("plus").style.display = "block";
document.getElementById("minus").style.display = "none";
}
document.getElementById("plus").onclick = function() {
functionShow()
};
function functionShow() {
document.getElementById("plus").style.display = "none";
document.getElementById("minus").style.display = "block";
}
#plus {
display: none;
cursor: pointer;
}
#minus {
cursor: pointer;
}
.floatright {
float: right
}
.w50 {
width: 50%;
text-align: center;
}
<div class="w50">
<p>What paperwork do I need to complete to file for divorce ?
<span class="floatright inlineb" id="minus">- </span>
<span class="floatright inlineb" id="plus">+</span>
</p>
<p>How do I change my custody and suport orders ?
<span class="floatright inlineb" id="minus">- </span>
<span class="floatright inlineb" id="plus">+</span>
</p>
</div>
When I click on the first minus ( "-" ) it works correctly.
but for the second, it doesn't work.
I want to know how can I automatically chain for all others divs. they have the same typing code.
Also, I would know how can I change the last element (" - ") when an another + is clicked?
Here is a preview of what I want to do
And a fiddle: https://jsfiddle.net/khrismuc/prsebqg3/15/

You are using duplicate IDs, which is a no-no. Here is an example using classes and .querySelectorAll.
var minuses = document.querySelectorAll(".minus");
var pluses = document.querySelectorAll(".plus");
minuses.forEach(function(minus) {
minus.addEventListener('click', functionHide);
});
pluses.forEach(function(plus) {
plus.addEventListener('click', functionShow);
});
function functionHide() {
pluses.forEach(function(plus) {
plus.style.display = "block";
});
minuses.forEach(function(minus) {
minus.style.display = "none";
});
}
function functionShow() {
pluses.forEach(function(plus) {
plus.style.display = "none";
});
minuses.forEach(function(minus) {
minus.style.display = "block";
});
}
You can modify for your particular uses.

Your logic needs to be slightly more complex:
var current = -1;
function handleClick(clicked) {
$(".w50 p").removeClass("active").find("span").text("+");
$("#box p").hide();
if (current === clicked) {
current = -1;
return;
}
current = clicked;
$(".w50 p").eq(current).addClass("active").find("span").text("-");
$("#box p").eq(current).show();
}
$(document).ready(function() {
$(".w50 p").each(function(i, el) {
$(this).append($("<span>").text("+"));
$(this).click(function() {
handleClick(i);
});
});
$(".w50 p").eq(0).click();
});
.w50 {
width: 80%;
text-align: center;
}
.w50 p {
cursor: pointer
}
.w50 p.active {
color: orange
}
.w50 p span {
float: right;
width: 1em;
display: inline-block;
}
#box {
background-color: orange;
margin: 20px;
min-height: 6em;
}
#box p {
display: none;
padding: 1em
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w50">
<p>What paperwork do I need to complete to file for divorce?</p>
<p>How do I change my custody and support orders?</p>
</div>
<div id="box">
<p>Paperwork description</p>
<p>Custody description</p>
</div>

Toggle Class with Jquery very fast

Hey Guys I want to change the Color of some headlines for a short time and delayed, you can imagine it like a single running LED light every ten seconds.
function emphheadline() {
$( ".menu h1" ).each(function( index ) {
$(this).toggleClass('hover').delay(1000).next().toggleClass('hover').delay(1000 );
});
}
#Raj I want to color the headlines red one after the other for a short time.
$( document ).ready(function() {
window.setInterval(emphheadline,3000);
});
function showandhide() {
showmenu().delay(200).showmenu();
}
function emphheadline() {
$( ".content h1" ).each(function( index ) {
$(this).toggleClass('hover').delay(500).next().toggleClass('hover');
});
}
$( document ).ready(function() {
window.setInterval(emphheadline,3000);
});
body {
background-color: darkgrey;
color: black;
}
.left .content h1 {
-webkit-transition: color 2s; /* Safari */
transition: color 2s;
}
.left .content h1:hover {
color: red;
}
.hover {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="left">
<div class="content">
<h1>headline 1</h1>
<h1>headline 2</h1>
<h1>headline 3</h1>
<h1>headline 4</h1>
</div>
</div>
Thanks for your help!

I always hate this jquery approach with dom elements. Do this:
(function(){
var bulbs = [];
$( ".menu h1" ).each(function() {
bulbs.push({
element: $(this),
flag: false
});
};
setInterval(function(){
bulbs.forEach(function(bulb){
bulb.flag = !bulb.flag;
bulb.element.className = bulb.flag ? 'red' : 'green';
//or bulb.toggleClass('your_cLass');
});
}, 100)
})()

I updated your jfiddle at https://jsfiddle.net/kht4xp1v/4
Here is working Javascript to accomplish this. It requires using an index that at set time intervals will loop through and create the animation:
function showandhide() {
showmenu().delay(200).showmenu();
}
$( document ).ready(function() {
var index = 0;
var headings = $(".content h1");
window.setInterval(function(){
if (index !== 0){
headings.eq(index - 1).toggleClass("hover");
}
headings.eq(index).toggleClass("hover");
++index;
}, 3000);
});

Perhaps this is what you are looking for
$(document).ready(function() {
var leds = $(".leds li").length;
var index = 0;
window.setInterval(function() {if(index == leds) { index = 0;} index = switchLed(index); }, 500);
});
function switchLed(index) {
var filter = ':nth-child(' + index + 'n)';
$(".leds li").filter(filter).removeClass("active");
$(".leds li").eq(index).addClass("active");
return ++in
}
https://jsfiddle.net/kht4xp1v/6/

Following example blinks ten times between red and green.
<script>
$(window).load(function(){
var i = 0;
$('.menu h1').each(function(){
$(this).css({'animation-delay': i++ + 's', 'animation-name': 'colour'})
})
});
</script>
.menu h1 {
animation-duration: 10s;
animation-iteration-count: 10;
color: red;
}
#keyframes colour {
0% {
color: red;
}
0.01% {
color: green;
}
10% {
color: green;
}
10.01% {
color: red;
}
100% {
color: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<h1>Heading 1</h1>
<h1>Heading 2</h1>
<h1>Heading 3</h1>
<h1>Heading 4</h1>
</div
(If you need transition instead of blinking, edit *.01% keyframe states)

Here is a js fiddle that might work for you
https://jsfiddle.net/kht4xp1v/7/
function emphheadline() {
$( ".content h1" ).each(function( index ) {
var self = $(this);
setTimeout(function () {
$(self).toggleClass('hover');
}, index*500);
});
}
you can use setTimeout function for the delay like shown