How to go to next and previous and loop them - javascript

i have a situation where i need to go to next and previous div content
for example:
if user clicks CTRL + n or next then it should go to (1st time run)
first div content (if cliked CTRL + n)
second div content (if cliked CTRL + n)
third div content
so on .....
for previous this pattern will continue
below is my whole code:
$(function(){
// CTRL + n ===> Next
//CTRL + p ===> Previous
var index = 0;
$('#next').on('click',function(){
});
$('#previous').on('click',function(){
});
// window.location = '#third' should change dynamically
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#first">
first
</a>
<a href="#second">
second
</a>
<a href="#third">
third
</a>
<a href="#fourth">
fourth
</a>
<div id="first">
<hr>
First
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae provident quibusdam maiores laudantium rem quas doloremque expedita tempora omnis, accusantium vel, consectetur eos ratione modi alias obcaecati numquam sapiente temporibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quam ipsam voluptates sit minus minima quas quasi itaque error natus, exercitationem, praesentium, laudantium voluptas ut quidem dolore? Rem, id quasi.
</div>
<div id="second">
<hr>
Second
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus illo harum, numquam optio iure quae ducimus ipsam velit corporis quidem omnis fugiat expedita autem vitae magni molestiae doloribus, ullam mollitia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, asperiores eum rem, nostrum provident qui sunt ut neque, consequatur quaerat repellendus error? Aliquam deleniti cum et error in, at voluptate.
</div>
<div id="third">
<hr>
Third
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, officia? Id voluptatem voluptas similique, reprehenderit odit ab! Laboriosam deserunt illo est obcaecati quaerat, consequuntur, maxime quia quisquam corrupti recusandae, voluptas.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit repellendus laborum molestiae asperiores necessitatibus repellat eveniet, obcaecati blanditiis numquam aut soluta veritatis unde, quis, dicta illo dolorem, consectetur temporibus molestias!
</div>
<div id="fourth">
<hr>
Fourth
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut ea tempore corrupti, hic vitae repudiandae quod cumque fugiat iste qui accusantium ipsam amet inventore, dignissimos magnam? Ipsam error eaque inventore!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum ipsa itaque eius accusantium. Necessitatibus fugiat dolorum rerum, quam praesentium, aliquam sapiente molestias maiores molestiae. Facilis officia cupiditate quae nisi animi.
</div>
Next |
Previous
Here is jsfiddle: https://jsfiddle.net/jLqt2d1g/9/

See the JS fiddle link JSFiddle(next and previous function)
$(function(){
// CTRL + n ===> Next
//CTRL + p ===> Previous
var id_arr=["first","second","third","fourth"];
var index = 0;
$('#next').on('click',function(){
index++;
var div_id = id_arr[index];
if(index>5){
alert('No More div in this Page');
}else{
alert(div_id);
//based on div_id show the div in page
}
});
$('#previous').on('click',function(){
index--;
var div_id = id_arr[index];
if(index<0){
alert('No More div in this Page');
}else{
alert(div_id);
//based on div_id show the div in page
}
});
// window.location = '#third' should change dynamically
});
i am updated code in the JSfiddle refer that code
In that code in next and previous function you will get the div_id's based on the div'id show div in page

Related

Javascript Auto-scroll Appears Jittery on Safari IOS

The Objective
I am trying to make an auto-scrolling feature for an online ebook reader website. The user must be able to press a button and have the page scroll automatically.
The problem
Every solution I have found so far uses either setTimeout or setInterval to scroll the page with window.scrollBy(0, 1), and this works great on chrome, however when I test this on Safari IOS, the page does not scroll smoothly at all. It appears very jittery, to the point that the text is no longer legible.
Here is a video demonstrating the problem. (Please watch in 1080p60, since the jitter is more apparent at 60fps)
The code
Here is a simple HTML document to demonstrate my current method of auto scrolling.
let scrollTimeout;
function pageScroll() {
scrollTimeout = setTimeout(() => {
window.scrollBy(0, 1);
pageScroll();
}, 10);
}
function startScroll() {
pageScroll();
}
function stopScroll() {
clearTimeout(scrollTimeout);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test Auto-scroll</title>
</head>
<body>
<main style="max-width: 500px; margin: 0 auto; font-size: 32px">
<div style="position: sticky; top: 0">
<button onclick="startScroll()">Start</button>
<button onclick="stopScroll()">Stop</button>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum
ducimus, totam debitis sint modi inventore explicabo iusto
assumenda vitae vero porro aperiam aut reiciendis nam culpa quia
in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Impedit sunt vitae saepe recusandae voluptatibus nihil enim,
sequi rerum quibusdam nisi provident! Autem aliquid
reprehenderit doloremque inventore quasi dolore fugit tempora.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure
molestias consectetur molestiae labore totam ex et eum nulla
officia, minima excepturi voluptates, consequatur amet modi!
Molestiae autem illum ullam accusantium.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
tenetur cupiditate, maxime fuga sequi earum excepturi
repudiandae, aliquam, laborum blanditiis iusto.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
laborum mollitia suscipit dolores omnis, cum perferendis rerum
accusantium doloremque quasi pariatur, deserunt delectus et
porro nesciunt cumque vel quisquam velit!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
tenetur cupiditate, maxime fuga sequi earum excepturi
repudiandae, aliquam, laborum blanditiis iusto.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
laborum mollitia suscipit dolores omnis, cum perferendis rerum
accusantium doloremque quasi pariatur, deserunt delectus et
porro nesciunt cumque vel quisquam velit!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
tenetur cupiditate, maxime fuga sequi earum excepturi
repudiandae, aliquam, laborum blanditiis iusto.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
laborum mollitia suscipit dolores omnis, cum perferendis rerum
accusantium doloremque quasi pariatur, deserunt delectus et
porro nesciunt cumque vel quisquam velit!
</p>
</main>
</body>
</html>
Apple throttles their devices to give supposedly battery performance. But there are other reasons like Background App Refresh, Low Battery More, and many more. The easily visible reason is Low Power Mode on you will not get the same performance as Low Power More off.
With your snippet, you can clearly judge the performance difference between Low Power Mode on and Low Power Mode off.
Also, performance can be affected by the display refresh rate. You can manage it with requestAnimationFrame, where you can somewhat control fps.
The below example could help you with requestAnimationFrame.
let scrollAnimationFrame;
let prevtimeStamp = 0;
let deltaTime = 0;
let functionTiming = 10;
let counter = 0;
let reachedBottom = false;
function animateScroll(timestamp) {
const deltaTime = timestamp - prevtimeStamp;
prevtimeStamp = timestamp;
const scrollY = window.scrollY;
if(counter > functionTiming){
window.scrollBy(0, 1);
counter = 0;
if(scrollY === window.scrollY)
reachedBottom = true;
}else{
counter += deltaTime;
}
if(reachedBottom)
cancelAnimationFrame(scrollAnimationFrame);
else
scrollAnimationFrame = requestAnimationFrame(animateScroll);
}
function startScroll() {
if(!scrollAnimationFrame)
animateScroll(0);
}
function stopScroll() {
if(scrollAnimationFrame)
cancelAnimationFrame(scrollAnimationFrame);
scrollAnimationFrame = 0;
}
document.getElementById('functionTimingControl').addEventListener('change', function(e){
functionTiming = e.target.value;
});
<main style="max-width: 500px; margin: 0 auto; font-size: 32px">
<div style="position: sticky; top: 0">
<button onclick="startScroll()">Start</button>
<button onclick="stopScroll()">Stop</button>
<input type='number' min='1' max='1000' value='10' id='functionTimingControl' />
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
</main>

i want to scroll webpage from to top navigation buttons to multiple tab of same web page

i want to scroll webpage from top navigation bar which is having buttons, to a section of same webpage which is having multiple tab and i want each button assigned to each tab.
how can i do this.
currently trying using e.g.
<a href="#tabA">
<div id="tabA">
but above code is not taking to desired path.
i want it like e.g.
<a href="#tabA">
<section="one">
<div id="tabA">
</section>
</div>
Try:
<div name="tabA">
I don't believe the anchor will look for id unless you are using a JS/JQ library you didn't mention.
What you have above should work natively by the browser unless something else is preventing it (like a library or something).
Here's an example:
.text {
width: 200px;
}
go to section A
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem facere animi similique officiis, totam aliquam velit ea quos at minus laudantium deserunt facilis, fugit vero consectetur, sint impedit cum! Quia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem facere animi similique officiis, totam aliquam velit ea quos at minus laudantium deserunt facilis, fugit vero consectetur, sint impedit cum! Quia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem facere animi similique officiis, totam aliquam velit ea quos at minus laudantium deserunt facilis, fugit vero consectetur, sint impedit cum! Quia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem facere animi similique officiis, totam aliquam velit ea quos at minus laudantium deserunt facilis, fugit vero consectetur, sint impedit cum! Quia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem facere animi similique officiis, totam aliquam velit ea quos at minus laudantium deserunt facilis, fugit vero consectetur, sint impedit cum! Quia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem facere animi similique officiis, totam aliquam velit ea quos at minus laudantium deserunt facilis, fugit vero consectetur, sint impedit cum! Quia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem facere animi similique officiis, totam aliquam velit ea quos at minus laudantium deserunt facilis, fugit vero consectetur, sint impedit cum! Quia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem facere animi similique officiis, totam aliquam velit ea quos at minus laudantium deserunt facilis, fugit vero consectetur, sint impedit cum! Quia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem facere animi similique officiis, totam aliquam velit ea quos at minus laudantium deserunt facilis, fugit vero consectetur, sint impedit cum! Quia!</p>
<section>
<h1 id="tabA">Section A!</h1>
</section>
You can achieve the same results programmatically by locating the top position of the element and telling the window to scroll to that position:
const rect = document.querySelector('#tabA').getBoundingClientRect().top;
window.scroll(0, rect.top);
where window.scroll takes two arguments (x, y).
A more recent approach but not widely supported by all browsers is the Element#scrollIntoView API.
document.querySelector('#tabA').scrollIntoView();
https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

How to display an image in an element from another element using jQuery

I want to select and display an image using jQuery.
I'm trying click on tile_details div and display tile__media image in col-md-6 with jQuery.
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-18.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="container-fluid" style="display:none">
<div class="row">
<div class="col-md-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet reprehenderit, consequatur perferendis repellendus omnis libero laboriosam nostrum tenetur nulla dolores quos id delectus quo obcaecati eaque provident? Maxime, atque. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Itaque eveniet reprehenderit, consequatur perferendis repellendus omnis libero laboriosam nostrum tenetur nulla dolores quos id delectus quo obcaecati eaque provident? Maxime, atque. Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Itaque eveniet reprehenderit, consequatur perferendis repellendus omnis libero laboriosam nostrum tenetur nulla dolores quos id delectus quo obcaecati eaque provident? Maxime, atque. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Itaque eveniet reprehenderit, consequatur perferendis repellendus omnis libero laboriosam nostrum tenetur nulla dolores quos id delectus quo obcaecati eaque provident? Maxime, atque. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Itaque eveniet reprehenderit, consequatur perferendis repellendus omnis libero laboriosam nostrum tenetur nulla dolores quos id delectus quo obcaecati eaque provident? Maxime, atque.
</div>
<div class="col-md-6">
//Display Image
</div>
</div>
</div>
If I understand the question correctly, you want to get the image from the '.tile__media' div and set it to the contents of that div. If you give the div an identifier, this could be achieved through the following jQuery:
$(".tile__details").click(function(e) {
$('#imageDiv').html($('.tile__media').html());
});
jsFiddle
Update: If you want it to be dynamic, based upon the image you clicked upon, you could clone the image clicked into the div. The code is as follows:
$(".tile__img").click(function(e) {
$('#imageDiv').html($(this).clone());
});
jsFiddle

div opacity on scroll top

I am trying to fade out the each blocks while scrolling top. When the particular div reached browser top it should slowly fade away.
I have tried but the problem here is that it is fading out all the divs since all divs have the same class name. I do not want to change the html structure for some reasons.
Is there any way to apply this effect on each divs?
var header = $('.content');
var range = 200;
$(window).on('scroll', function () {
var scrollTop = $(this).scrollTop();
var offset = header.offset().top;
var height = header.outerHeight();
offset = offset + height / 2;
var calc = 1 - (scrollTop - offset + range) / range;
header.css({ 'opacity': calc });
if ( calc > '1' ) {
header.css({ 'opacity': 1 });
} else if ( calc < '0' ) {
header.css({ 'opacity': 0 });
}
});
DEMO
I updated your fiddle. Basically, I did the calculation for each div separately by wrapping your code with .each
Check out this different version of answer fiddle.
header.each(function(){
if($(this).position().top - scrollTop <= 0){
$(this).css({ 'opacity': 0 });
}else{
$(this).css({ 'opacity': 1 });
}
You have to calculate the opacity for each element of the class.
Also you have to add a parent element with overflow-y:auto;
var parent = $("#parent");
var childs = $(".content");
var offset_top = 0;
var range = 200;
parent.on('scroll', function () {
var scrollTop = $(this).scrollTop();
if(scrollTop<20){
childs.css("opacity",1);
}
else{
childs.each(function(){
var top = $(this).offset().top - offset_top;
var height = $(this).height();
var offset = height/4;
var opacity = (top+ height - offset) / range;
if(opacity>1) opacity = 1;
else if(opacity<0) opacity = 0;
$(this).css("opacity",opacity);
});
}
});
div {color:#fff; padding:5%}
.content:nth-child(1){background:blue}
.content:nth-child(2){background:grey}
.content:nth-child(3){background:black}
.content:nth-child(4){background:red}
body,html{
height:100%;
}
#parent{
height:50%;
overflow-y:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
</div>

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">

Categories

Resources