Develop Reference

Do CSS keyframe animations require JS to run more than once?

I have a simple accordion and I'd like it to have a smooth scroll and fade in the text when expanding.
I'm almost there with this (see Codepen), however the keyframe animation only runs on first click. Could someone explain to me why this is? Do I need to use JS to check for the click to re-run the animation?
Is there a simpler way to do the text fade in with just CSS?
Thanks in advance for your time.
#keyframes fadeIn1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
details {
padding: 10px;
border-bottom: 1px solid;
}
details summary {
cursor: pointer;
transition: margin 150ms ease-out;
}
details div {
opacity: 0;
}
details[open] summary {
margin-bottom: 10px;
}
details[open] div {
animation-duration: 1s;
animation-name: fadeIn1;
animation-timing-function: ease-in;
opacity: 1;
}
<details>
<summary>Question</summary>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>
<details>
<summary>Question</summary>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>
<details>
<summary>Question</summary>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>
<details>
<summary>Question</summary>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>

Image animation resets page scroll on mobile devices

EDIT 2: I just figured it out. The overflow css property applied on the body is not being inherited by the slideshow div. Adding "overflow: hidden" to the slideshow div fixed it.
ORIGINAL POST
I have a webpage with an image slideshow. The slideshow is set to run every 5 seconds using setInterval and calling the below function:
function startSlideShow() {
console.log('starting slideshow');
const img = slideImages.shift();
img.style.zIndex = 0
slideImages.push(img);
slideImages[0].style.zIndex = 10;
slideImages[0].style.display = "block";
removePreviousImage(img);
}
The animation keyframe:
#keyframes slide {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
The structure of the page is:
Header
Slideshow
Other Content
The header "position: sticky", so it should always be visible.
The Problem: On mobile or responsive mode on browser dev tool, when I scroll down while the animation is running, the header is not visible, i.e it is ignoring the "position: sticky" css rule. Once the animation completes, the page resets the scroll position back to the top.
It works as expected on desktop, i.e the header is always visible at the top of the screen and the scroll position does not get reset.
I am still learning and I don't understand what is causing the issue and why only on mobile? Tried google but no luck, mostly because I am not sure what to search for.
EDIT:
Recreated the problem as per the code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Slideshow</title>
<style>
body {
min-height: 100%;
font-family: Helvetica,
Arial,
sans-serif;
overflow-x: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.preload * {
animation: none !important;
}
img {
max-width: 100%;
height: auto;
}
.main__overlay {
z-index: 200;
}
.image-slider__overlay {
z-index: 1000;
}
.header {
z-index: 2000;
}
.header {
text-transform: uppercase;
padding: var(--size1) var(--size0);
opacity: 0.9;
position: sticky;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
}
.image-slider {
position: relative;
}
.image-slider__img {
position: absolute;
top: 0;
left: 0;
animation-name: slide;
animation-duration: 3s;
}
.no-slide {
aspect-ratio: attr(width) / attr(height);
}
#keyframes slide {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
</style>
</head>
<body>
<body class="preload">
<header class="header">
<h1 class="header__logo">Earthen Karkhana</h1>
</header>
<div class="image-slider">
<div class="no-slide">
This div will be an image is the actual code. Image 1
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
inventore repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
</p>
</div>
<div class="image-slider__img">
This div will be an image is the actual code. Image 2
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
inventore repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
</p>
</div>
<div class="image-slider__img">
This div will be an image is the actual code. Image 3
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
inventore repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
</p>
</div>
<div class="image-slider__img">
This div will be an image is the actual code. Image 4
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
inventore repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
</p>
</div>
</div>
<section class="projects__main">
<h2 class="projects-link--heading body_text">
Projects
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit inventore
repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
Autem reiciendis fugit quis, perspiciatis nihil sit aliquam impedit dicta placeat veritatis culpa voluptate nisi
aut consectetur unde, alias et fugiat quisquam dolor distinctio eos dolore non error! Id, optio.
Omnis excepturi delectus inventore ullam harum accusamus sed consequatur autem quo obcaecati mollitia corrupti
amet, eaque veritatis, sit dolorum voluptates id atque rem, ipsam officia? Architecto magni dignissimos sint
dolorem!
Doloremque enim nobis eum esse nihil. Fugiat nesciunt obcaecati omnis. Doloribus harum deserunt sapiente omnis
quasi aut voluptatum consequatur perferendis, tempora nulla blanditiis labore vitae provident repellendus,
eveniet sit quas.
Nemo, quos perspiciatis modi repudiandae delectus doloremque. Vero dolores blanditiis itaque consequatur minus
distinctio, sapiente corporis, suscipit ratione tenetur animi sit eius quod dolorem nobis sed pariatur tempora
natus ea.
Quam sequi distinctio adipisci dolor? Asperiores exercitationem eveniet eum architecto voluptates, tempore saepe
sint eius quisquam odit veritatis debitis eligendi ab impedit, officia nam! Libero tenetur ad consequuntur eos
natus.
Corporis pariatur eius velit ad sequi facere impedit quia laboriosam quos? Eum, labore minima temporibus placeat
sunt totam neque, quod harum facilis reiciendis doloribus aliquid dolor saepe distinctio expedita sint.
Repellat, ipsam! Omnis nihil maiores amet excepturi velit, deleniti minus voluptatibus quasi vel, magni aperiam
veritatis non asperiores, nisi dolorum hic eligendi ipsa? Omnis id esse hic non sed est!
Qui accusantium dignissimos natus corporis asperiores, perferendis eveniet ab et, consequuntur vitae officiis
nulla consequatur obcaecati magni corrupti nihil neque nam iste quidem! Libero eos est, beatae error praesentium
eligendi!
</p>
</section>
<script>
"use strict";
const slideImages = Array.from(document.querySelectorAll(".image-slider__img"));
// Wait for page to load before starting slideshow
window.addEventListener('load', (e) => {
document.querySelector("body").classList.remove("preload");
// slideshow should only run on index page
if (document.querySelectorAll(".image-slider__img").length == 0) return;
// Static image not required to be visible once slide images are loaded in
setTimeout(() => document.querySelector(".no-slide").style.opacity = 0, 8000);
slideShow();
});
function slideShow() {
slideImages.forEach((img, index) => {
img.style.display = "none";
});
console.log(slideImages);
let animationInterval = setInterval(startSlideShow, 5000);
}
function startSlideShow() {
console.log('starting slideshow');
const img = slideImages.shift();
img.style.zIndex = 0
slideImages.push(img);
slideImages[0].style.zIndex = 10;
slideImages[0].style.display = "block";
removePreviousImage(img);
}
function removePreviousImage(img) {
setTimeout(function () { img.style.display = "none" }, 3000);
}
</script>
</body>
</html>
If viewed in responsive mode in dev tools the page layout changes when the animation is running, but that does not happen on desktop mode.
In desktop mode, resizing the browser to match width of a mobile device does not trigger the problem.

I guess your browser doesnt support position : sticky; try to use another browsers like chrome .
‌‌‌‌‌‌
and I highly recommend You better to use "browser-prefixes" .
You can read about "browser-prefixes" in :
https://www.thoughtco.com/css-vendor-prefixes-3466867

How to go down to different sections in the same page and go all the way up using buttons?

I am fairly new to javascript. I am stuck on this code.
I'm trying to create a button to navigate between top and bottom of a web page. Initially, the scroll to bottom works, but once I click on the back to top button, the scroll down logic breaks. I'm unable to figure out where I'm applying the incorrect logic. Thanks in advance
https://jsfiddle.net/riodahamster/9vtxh0aL/9/
var i = 1;
$(".scroll-top").click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow");
window.icount = 0;
});
var icount = 0
$('.down-btn').on('click', function(e) {
e.preventDefault();
window.icount++;
var offset = $("div.next-section").eq(icount).offset().top;
$('html, body').stop().animate({
scrollTop: offset
}, 400);
});

You can Scroll Into an element using vanilla JavaScript. Just follow the tricks.
The scrollIntoView scroll the page to view the element. For that purpose here I've created two empty elements #top-view and #bottom-view at the top and the bottom of the HTML respectively.
After that when you click on Go Bottom and Go Up buttons then it brings you to the #bottom-view and #top-view elements.
const bottomBtn = document.querySelector('#go-bottom');
const upBtn = document.querySelector('#go-up');
const topView = document.querySelector('#top-view');
const bottomView = document.querySelector('#bottom-view');
bottomBtn.addEventListener('click', (evt) => {
evt.preventDefault();
bottomView.scrollIntoView({behavior: 'smooth'});
});
upBtn.addEventListener('click', (evt) => {
evt.preventDefault();
topView.scrollIntoView({behavior: 'smooth'});
});
#page-1 {
background: yellow;
color: #222;
}
#page-2 {
background: red;
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- empty element for scrolling into it -->
<div id="top-view"></div>
<button id="go-bottom">Go Bottom</button>
<section id="page-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem esse cupiditate unde magni facilis, quod saepe ad eligendi tenetur voluptas ea maxime dolorem id explicabo incidunt tempora quae debitis soluta!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, voluptatum aspernatur aut explicabo dignissimos aperiam, ut exercitationem labore? Hic necessitatibus nostrum delectus suscipit nihil eveniet asperiores alias facere a quod.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem esse cupiditate unde magni facilis, quod saepe ad eligendi tenetur voluptas ea maxime dolorem id explicabo incidunt tempora quae debitis soluta!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, voluptatum aspernatur aut explicabo dignissimos aperiam, ut exercitationem labore? Hic necessitatibus nostrum delectus suscipit nihil eveniet asperiores alias facere a quod.
</p>
</section>
<section id="page-2">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem esse cupiditate unde magni facilis, quod saepe ad eligendi tenetur voluptas ea maxime dolorem id explicabo incidunt tempora quae debitis soluta!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, voluptatum aspernatur aut explicabo dignissimos aperiam, ut exercitationem labore? Hic necessitatibus nostrum delectus suscipit nihil eveniet asperiores alias facere a quod.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem esse cupiditate unde magni facilis, quod saepe ad eligendi tenetur voluptas ea maxime dolorem id explicabo incidunt tempora quae debitis soluta!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, voluptatum aspernatur aut explicabo dignissimos aperiam, ut exercitationem labore? Hic necessitatibus nostrum delectus suscipit nihil eveniet asperiores alias facere a quod.
</p>
</section>
<button id="go-up">Go Up</button>
<!-- empty element for scrolling into it -->
<div id="bottom-view"></div>
</body>
</html>

The code works fine. The issue is you havent added Jquery!
Also you have to target the bottom div to get the down function to move you to the bottom of the page. In this case, yello class div!
var i = 1;
$(".scroll-top").click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow");
window.icount = 0;
});
var icount = 0
$('.down-btn').on('click', function(e) {
e.preventDefault();
window.icount++;
var offset = $("div.next-section.yellow").eq(icount).offset().top;
$('html, body').stop().animate({
scrollTop: offset
}, 400);
});

Sticky headers following their backgrounds on scroll - pure JS

I am a beginner in JS. And I've got a task to create a column consisting of several blocks. Each block should have its header. Each header should be of a different color. On scroll when the next header reaches the top, it should stick to the top and change the background color of the preceding header to the color of the header that recently came to the top. How can I do this using pure JS and taking into account responsiveness and adopting to landscape direction?
sample gif
Thank you
UPD: So far, I've got the following code done. When I run it on my laptop it goes more or less fine. But as soon as I resize the window the sticky header escapes to the right. What is the secret that I missed there?
! function(name, definition) {
if (typeof module != 'undefined' && module.exports) module.exports = definition();
else if (typeof define == 'function') define(definition);
else this[name] = definition();
}('sticky', function() {
return function sticky(el, top, options) {
var requiredOriginalStyles = ['position', 'top', 'left', 'z-index'];
var requiredTop = top || 0;
var originalRect = calcRect(el);
var styles = {
position: 'fixed',
top: requiredTop + 'px',
left: originalRect.left + 'px',
// width: originalRect.width + 'px',
'z-index': 9999
}
if (options && options.enforceWidth) {
styles.width = originalRect.width + 'px';
}
var originalStyles = {}
requiredOriginalStyles.forEach(function(key) {
originalStyles[key] = el.style[key];
});
var onscroll;
if (window.onscroll) {
onscroll = window.onscroll;
}
window.onscroll = function(event) {
if (getWindowScroll().top > originalRect.top - requiredTop) {
for (key in styles) {
el.style[key] = styles[key];
}
} else {
for (key in originalStyles) {
el.style[key] = originalStyles[key];
}
}
onscroll && onscroll(event)
}
}
function calcRect(el) {
var rect = el.getBoundingClientRect();
var windowScroll = getWindowScroll()
return {
left: rect.left + windowScroll.left,
top: rect.top + windowScroll.top,
width: rect.width,
height: rect.height
}
}
function getWindowScroll() {
return {
top: window.pageYOffset || document.documentElement.scrollTop,
left: window.pageXOffset || document.documentElement.scrollLeft
}
}
});
var headers = document.querySelectorAll('.header')
Array.prototype.forEach.call(headers, function(header) {
sticky(header);
});
body {
height: 2000px;
margin: 0px;
background: #fff;
color: #333;
font: 14px/2 Roboto, Verdana, sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section:first-child {
margin-top: 50px;
}
.header--initial {
background: yellow linear-gradient(to right, grey, transparent, grey);
}
.header--main-start {
background: grey linear-gradient(to right, grey, yellow);
}
.header--main-end {
background: yellow linear-gradient(to right, yellow, grey);
}
.header--final {
background: grey linear-gradient(to right, yellow, transparent, yellow);
}
p {
padding: 10px;
}
.header {
width: 50%;
height: 50px;
margin: auto;
background-color: #333;
}
.placeholder {
height: 300px;
width: 50%;
margin: auto;
overflow: auto;
}
<section>
<div class="header header--initial"></div>
<div class="placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum veritatis dolorem ducimus atque cumque accusantium accusamus aliquam excepturi nulla illo corrupti vitae repellendus quod, molestias esse est nisi, omnis odit.</p>
<p>Soluta autem, aut voluptate quo debitis quidem exercitationem quisquam nostrum accusamus aliquam perspiciatis nobis dolores est dolorum provident! Asperiores explicabo fugit, unde eveniet ut nesciunt autem molestiae nam totam fuga.</p>
<p>Vel nisi a dolorem itaque eaque mollitia ipsum repellat modi placeat, eveniet consectetur officia veniam ab esse, adipisci quia unde excepturi consequuntur expedita quas! Sed porro sunt soluta totam delectus!</p>
</div>
</section>
<section>
<div class="header header--main-start"></div>
<div class="placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum qui quidem rem ducimus, labore, id praesentium error quasi nobis saepe illo consequuntur voluptatum dolores illum facere, itaque dicta eveniet, quod.</p>
<p>Expedita dolore vel odit est nemo quis nihil ipsam quo vitae repellendus ex optio illo magnam quidem a ullam dolores reiciendis facilis deserunt eligendi cum, sit eaque? Et, nam odio!</p>
</div>
</section>
<section>
<div class="header header--main-end"></div>
<div class="placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum distinctio nobis excepturi sunt voluptates, saepe nam error laudantium velit autem quaerat placeat quisquam est dolore cum quidem, in ad sit!</p>
<p>Ex impedit deserunt, quibusdam ipsam blanditiis sunt tempore ab aut? Cum assumenda iure minus fugiat, rem nemo alias voluptatem, ad neque temporibus blanditiis aliquam earum praesentium vero labore ducimus, a.</p>
<p>Velit, suscipit officiis. Praesentium, explicabo similique maiores repellendus. Cupiditate voluptate corporis nisi doloremque aspernatur, autem aut officia. Eaque deleniti alias, modi dolorem quod qui debitis illo. Aut, ipsam. Hic, autem.</p>
<p>Maiores consequatur, aliquid possimus quae asperiores corporis repudiandae! Quod id iure at dolorem consectetur, sed, debitis libero perspiciatis, numquam ea, fugit repudiandae sunt consequatur. Harum optio ut doloribus distinctio adipisci!</p>
</div>
</section>
<section>
<div class="header header--final"></div>
<div class="placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt quisquam doloribus, commodi mollitia saepe nesciunt esse animi totam beatae facere tenetur veniam quas expedita iusto ipsa provident hic! Minima, repellendus.</p>
<p>Accusamus voluptatibus laudantium commodi nostrum obcaecati impedit atque doloremque officiis? Iste necessitatibus, aperiam. Vitae facilis ipsam vel, sequi perspiciatis fugit, dolores expedita quaerat reiciendis beatae iste hic molestias cumque! Necessitatibus!
</p>
<p>Cum, dolore. Dolore corporis voluptas consequatur ratione fuga, laboriosam quisquam qui corrupti ut, in nam pariatur iste blanditiis nulla autem praesentium, optio maxime. Consequuntur vitae nemo eius similique, fugiat saepe.</p>
<p>Recusandae iure iusto ut vero dolorum, hic quos libero nostrum esse enim laudantium velit modi culpa, consequatur vel officiis exercitationem quod repellat, voluptas impedit nesciunt beatae similique itaque distinctio? Sapiente.</p>
</div>
</section>

Try making your <body> element have an onresize attribute that updates the styles of the dropdown:
<body onresize="updHead()">

Jquery each loop, find height of right side and add it to left side.

This might be an easy question for some people, but I can’t seem to get it right. I have some floated div’s. The ‘right side’ is taller than the ‘left side’. What I would like to do is, take the height of the ‘right side’ and add it to the ‘left side’.
I’m trying an each loop, but all i end up with is the last height of the ‘right side’. Anyone have any ideas?
<style>
.left, .right{
float: left;
width: 50%;
box-sizing: border-box;
padding: 1em;
border: 1px solid red;
}
</style>
<div class="container">
<div class="left"/><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate aspernatur, dolore, totam alias beatae, modi distinctio voluptatum omnis blanditiis veniam quidem a itaque enim eos dolorum animi nobis nihil nemo!</p></div>
<div class="right"/><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate aspernatur, dolore, totam alias beatae, modi distinctio voluptatum omnis blanditiis veniam quidem a itaque enim eos dolorum animi nobis nihil nemo!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ipsum vero illo, earum nemo molestiae ratione, sunt tempore iusto ad dolorem minima atque debitis dolor recusandae dolorum id optio dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda quaerat numquam porro placeat aliquam sint fugit reprehenderit suscipit similique commodi minus magnam quod quis, cum nesciunt autem error, eum quasi.</p>
</div>
<div class="left"/><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate aspernatur, dolore, totam alias beatae, modi distinctio voluptatum omnis blanditiis veniam quidem a itaque enim eos dolorum animi nobis nihil nemo!</p></div>
<div class="right"/><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate aspernatur, dolore, totam alias beatae, modi distinctio voluptatum omnis blanditiis veniam quidem a itaque enim eos dolorum animi nobis nihil nemo!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ipsum vero illo, earum nemo molestiae ratione, sunt tempore iusto ad dolorem minima atque debitis dolor recusandae dolorum id optio dolore.</p>
</div>
</div>
<script>
$(document).ready(function() {
var $left_side = $('.left');
var $right_side = $('.right');
var the_height = [];
$('.container').each(function(index, val) {
var elHeight = $(val).height();
the_height.push(elHeight);
});
});

Thats because you are interating over the amount of $(".container") instead of the <div class="right">
$(document).ready(function() {
var $left_side = $('.left');
var $right_side = $('.right');
var the_height = [];
$('.right').each(function(index, val) {
var elHeight = $(val).height();
the_height.push(elHeight);
});
});
If you are trying to make the left <div class="left"> the same height as the right <div class="right"> you can do:
$(document).ready(function() {
$('.right').each(function(index, val) {
$(this).prev('.left').height($(this).height());
});
});

$(document).ready(function(){
var $left_side = $('.left');
var $right_side = $('.right');
var the_height = [];
var divs=$(".container").children();
$(divs).each(function(index,val){
the_height.push($(this).height())
})
})
this shuld also work

$('.container') is just one div. I think you want to loop through the children the .container. This is one of the ways you can do:
$(document).ready(function() {
var $left_side = $('.left');
var $right_side = $('.right');
var the_height = [];
$('.container').children().each(function(index, val) {
var elHeight = $(val).height();
the_height.push(elHeight);
});
});

Judging from what you said you want to accomplish, I'd say the code is not going to work properly. Here's a code that adds the right height to the left one:
$(document).ready(function() {
$('.container').each(function() {
var right_height = $(this).children("div.right").height();
var left_height = $(this).children("div.left").height();
$(this).children("div.left").height(right_height + left_height)
});
});
Also, all your divs are wrong! You're not supposed to close them in the opening tag:
<div class="left"/>
You have to remove the slash:
<div class="left">