We Keep Coding

Making equal div height even if the browser is resized

I am trying to make all my divs the same height even if the browser is resized. I have 4 icon boxes. each box has an icon, a title, and a description. I want to make all of them same size. that means if the highest height of the icon container div is 100px all icon holder div will be 100px. the following code is working but if I resize the browser some time the height of the container divs is much bigger than the actual height. what I am doing wrong? (Note the resize will only happen screen size above 767px) thanks
function allSameHeight(sameSec, sameImg, sameTitle, sameDesc) {
jQuery(sameSec).each(function () {
let highestImg = 0;
let highestTitle = 0;
let highestTxt = 0;
jQuery(sameSec).find(sameImg).each(function () {
if (jQuery(this).height() > highestImg) {
highestImg = jQuery(this).height();
}
});
jQuery(sameSec).find(sameTitle).each(function () {
if (jQuery(this).height() > highestTitle) {
highestTitle = jQuery(this).height();
}
});
jQuery(sameSec).find(sameDesc).each(function () {
if (jQuery(this).height() > highestTxt) {
highestTxt = jQuery(this).height();
}
});
if (jQuery(window).width() > 768) {
jQuery(sameSec).find(sameImg).css("min-height", highestImg);
jQuery(sameSec).find(sameTitle).css("min-height", highestTitle);
jQuery(sameSec).find(sameDesc).css("min-height", highestTxt);
} else {
jQuery(sameSec).find(sameImg).css("min-height", "auto");
jQuery(sameSec).find(sameTitle).css("min-height", "auto");
jQuery(sameSec).find(sameDesc).css("min-height", "auto");
}
});
}

Give a class to all four items. I've used myItem for instance.
const setHeights = () => {
let highestHeight = 0;
//Loop through all elements and get the highest height
$('.myItem').each((index, element) => {
if($(element).outerHeight() > highestHeight) {
highestHeight = $(element).outerHeight();
}
});
//Set the height of all elements to highest
$('.myItem').height(highestHeight);
};
$(window).resize(() => {
//Run each time window is resized
setHeights();
});
.myItem {
width: 25%;
color: white;
float: right;
}
.one {
background: red;
}
.two {
background: blue;
}
.three {
background: purple;
}
.four {
background: orange;
}
h3 {
word-wrap: break-word;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button onclick="setHeights()">Make them equal</button>
</div>
<div class="myItem one">
<h3>
aaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaa
aaaaaaaaaa
</h3>
</div>
<div class="myItem two">
<h3>
bbbbbbbb
</h3>
</div>
<div class="myItem three">
<h3>
ccccccccccccccc
ccccccccc
</h3>
</div>
<div class="myItem four">
<h3>
ddddddddddddddd
ddddddddddd
ddddddddddddd
ddddddddddddddd
ddddddddddddddddd
</h3>
</div>

For this case there are multiple approaches, I'll mention the two most common (in my opinion):
https://www.w3schools.com/howto/howto_css_equal_height.asp
Using flexbox: https://moderncss.dev/equal-height-elements-flexbox-vs-grid/

how to change color of elements one by one using javascript(jquery) and then reset the result again one by one

how to change color of elements one by one using javascript(jquery) and then reset the result again one by one
.cub {
background: aqua;
width: 200px;
height: 200px;
display: inline-block;
}

You can add class and remove class using jQuery. First assign another class to these divs so no other divs will be affected.
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
var counter = 0;
var divs = $('.box'), div = null;
setInterval(function(){
div = $(divs[counter]);
if(div.hasClass('cub')){
div.removeClass('cub');
} else {
div.addClass('cub');
}
counter = (counter + 1) % 4;
}, 500);

Please try this code if it works. I was not able to check it but it should work.
<div class="cub"></div>
<div class="cub"></div>
<div class="cub"></div>
<div class="cub"></div>
.cub{ background-color: white; }
.cub.highlighted{ background-color: aqua; }
<script>
var highlighting = true;
$(document).ready(function(){
var highlightingInterval = setInterval(function(){
if( $(".cub.highlighted").length == 0 )
highlighting = true;
else if( $(".cub.highlighted").length == 4 )
highlighting = false;
if( highlighting )
{
$(".cub").not(".highlighted").eq(0).addClass("highlighted");
}
else
{
var targetIndex = $(".cub.highlighted").length - 1; $(".cub.highlighted").eq(targetIndex).removeClass("highlighted");
}
}, 2000 );//setInterval
});//document ready
</script>

How to make images change automatically

I am new to javascript and I am trying to do a featured content slider something like the top banner in this website http://www.homeplus.co.kr
As you can see, the top big banner changes automatically & also will change when user hovers over one of the list at the right.
Right now I am able to do the hovering part, but I am still stuck at the automatic changing content part.
Here's a sample jsfiddle: http://jsfiddle.net/StormSdq/5tWPy/2/
<div class="pi">a</div>
<div class="pi">b</div>
<div class="pi">c</div>
<div class="pi">d</div>
<div class="c1">I DREAM</div>
<div class="c1">OF LLAMAS</div>
<div class="c1">JUMPING AROUND</div>
<div class="c1">EATING BUSHES</div>
css:
.pi {
font-size:12px;
color:#000;
font-weight:700;
width:30px;
height:25px;
margin-right:10px;
background:transparent;
border-bottom:solid 1px black;
}
.c1 {
border:1px solid blue;
background:lightskyblue;
width:200px;
height:200px;
float:right;
margin-right:430px;
margin-top:-100px;
color:red;
font-size:25px;
text-align:center;
display:none;
}
javascript:
div = document.getElementsByClassName('c1');
div[0].style.display = 'block'
B = document.getElementsByClassName('pi');
B[0].onmouseover = function () {
blip(0);
};
B[1].onmouseover = function () {
blip(1);
};
B[2].onmouseover = function () {
blip(2);
};
B[3].onmouseover = function () {
blip(3);
};
function blip(y) {
div = document.getElementsByClassName('c1');
for (x = 0; x < (div.length); x++) {
div[x].style.display = 'none';
}
div[y].style.display = 'block';
}
Any help will be greatly appreciated

Try this:
var cur = 0; // current index
setInterval(autoAnim, 2000); // auto change every 2s
function autoAnim(){
if(cur > 3) cur = 0;
blip(cur);
cur++;
}
Here is jsfiddle

You can use the function setTimeout to call something after XX miliseconds.
var number=0;
setTimeout(automatic,5000); // every 5 seconds
function automatic(){
blip(number);
number++;
if (number > 4)
number=0;
alert("Hello");
setTimeout(automatic,5000);
}
You will probably want to make the function sleep when mouse is hover and some others condtions

Synchronizing span and textarea scrollbars - scrollbar slightly off and pasting issue

I have a table set up in the following way, with each cell containing a span and a textarea:
<table>
<tr><td class="title">Original File</td></tr>
<tr><td><span id='ogline' onscroll="og.scrollTop=scrollTop"></span><span><textarea onscroll="ogline.scrollTop=scrollTop" onkeyup="linenumber()" id='og' onfocusout="linenumber()"></textarea></span></td></tr>
</table>
Along with that I have the following CSS:
<style>
span {
width:93%;
height: 100%;
}
textarea {
width:92%;
height: 100%;
border-style:solid;
border-color:black;
border-width:2px;
font-size:13px;
}
table {
width:100%;
height:100%;
}
.title {
height:5%;
text-align:center;
background-color:#009;
color:white;
}
#ogline {
padding-top:4px;
overflow:auto;
font-size:12px;
line-height:14.99px;
width:6%;
}
</style>
What I am trying to do is have the scroll bar of the span and the scroll bar of the textarea synch up. I've somewhat accomplished this using the onscroll event listener with the following code:
onscroll="og.scrollTop=scrollTop"
onscroll="ogline.scrollTop = scrollTop
This has somewhat accomplished what I want it to, with the span being about a line off of where it should be. The greatest problem I am having though is when I paste a large amount of text into the textarea. This almost completely doesn't work, with both scrollbars being completely off until I hold one of the scrollbars down for a significant amount of time before the other scrollbar will try to play catch up with the other.
Any suggestions? Is there maybe a better approach to this issue that I should try? Any help would be appreciated.

This could work:
var scrolling=false;
function og_scroll(el)
{
if (scrolling && el!=scrolling) {
return;
}
scrolling = el;
var textareas = document.getElementsByTagName('textarea');
for (var i=0; i<textareas.length; i++) {
if (textareas[i].id.indexOf('og')==0) { // searching for id==og*
textareas[i].scrollTop=el.scrollTop;
}
}
scrolling = false;
}
function up(num)
{
var area = document.getElementById('og'+num);
if (area.scrollTop > 0) {
area.scrollTop -= 15;
}
}
function down(num)
{
var area = document.getElementById('og'+num);
if (area.scrollTop < area.scrollHeight) {
area.scrollTop += 15;
}
}
function fix_mouse_scroll() {
var textareas = document.getElementsByTagName('textarea');
for (var i=0; i<textareas.length; i++) {
if (textareas[i].id.indexOf('og')==0) {
if ("onmousewheel" in document) {
textareas[i].onmousewheel = fixscroll;
} else {
textareas[i].addEventListener('DOMMouseScroll', fixscroll, false);
}
}
}
}
function fixscroll(event){
var delta=event.detail? event.detail : event.wheelDelta; // positive or negative number
delta = delta>0 ? 15 : -15;
event.target.scrollTop += delta;
//console.log(delta, ' with ',event.target.scrollTop);
}
Html part:
<tr><td> <span onmousedown='up(1)'>[UP]</span> <span onmousedown='down(1)'>[DOWN]</span> <textarea id='og1' onscroll="og_scroll(this);"></textarea></td></tr>
<tr><td> <span onmousedown='up(2)'>[UP]</span> <span onmousedown='down(2)'>[DOWN]</span> <textarea id='og2' onscroll="og_scroll(this);"></textarea></td></tr>
<tr><td> <span onmousedown='up(3)'>[UP]</span> <span onmousedown='down(3)'>[DOWN]</span> <textarea id='og3' onscroll="og_scroll(this);"></textarea></td></tr>
The full html code is here.

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.