Develop Reference

Finding the index of a owl carousel depending on where the user is at on the carousel

as mentioned above, is there a way to obtain the index of the carousel?
I want to change the text (indicated in the red arrow) based on the position of where the user is (blue arrow). I

You can use carousel events as per the document. Please try the below code.
var owl;
$(document).ready(function(){
owl = $(".owl-carousel").owlCarousel({
autoplay: false,
autoplaySpeed: 300,
loop: false,
navSpeed: 300,
items: 1,
margin: 2
});
owl.on('changed.owl.carousel', function(e) {
$('#continue-btn').html('Continue ' + e.item.index);
});
});
body {
margin: 0;
padding: 0;
}
.owl-carousel .item {
height: 120px;
background: #4DC7A0;
padding: 1rem;
list-style: none;
margin: 10px;
text-align: center;
color: white;
font-size: 20px;
line-height: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script>
<div class="owl-carousel">
<div class="item"> slide1 </div>
<div class="item"> slide2 </div>
<div class="item"> slide3 </div>
<div class="item"> slide4 </div>
<div class="item"> slide5 </div>
<div class="item"> slide6 </div>
<div class="item"> slide7 </div>
<div class="item"> slide8 </div>
<div class="item"> slide9 </div>
</div>
<button id="continue-btn">
Continue
</button>

Only change class in this scope

I have a card which has onclick change functionality.
If I include two of these cards on my page, the classes will duplicate. But it's also changing the class in the second card when a change occurs in the first and vice versa.
Here is a demo:
$('div[data-item="item--1"]').addClass('active');
$('.header').click(function() {
var myEm = $(this).attr('data-item');
$('.header, .subheader').removeClass('active');
$('.header[data-item = '+myEm+'], .subheader[data-item = '+myEm+']').addClass('active');
});
.card{
display: flex;
flex-direction: column;
padding: 30px;
background: lightblue;
}
.headers{
padding: 20px;
margin-bottom: 40px;
}
.header{
cursor: pointer;
opacity: 0.4;
}
.header.active{
opacity: 1;
}
.subheader{
display: none;
padding: 0px 20px;
}
.header.active,
.subheader.active{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<div class="card">
<div class="headers">
<div class="header" data-item="item--1">Test</div>
<div class="header" data-item="item--2">Test 2</div>
</div>
<div class="subheaders">
<div class="subheader" data-item="item--1">Subheader for Test</div>
<div class="subheader" data-item="item--2">Subheader for Test 2</div>
</div>
</div>
<div class="card">
<div class="headers">
<div class="header" data-item="item--1">Another Test</div>
<div class="header" data-item="item--2">Another Test 2</div>
</div>
<div class="subheaders">
<div class="subheader" data-item="item--1">Subheader for Another Test</div>
<div class="subheader" data-item="item--2">Subheader for Another Test 2</div>
</div>
</div>
How can I prevent this?

You can pass the closest .card ancestor as the context of the selectors.
$('.header').click(function() {
var myEm = $(this).attr('data-item');
$('.header, .subheader', $(this).closest('.card')).removeClass('active');
$('.header[data-item = '+myEm+'], .subheader[data-item = '+myEm+']',
$(this).closest('.card')).addClass('active');
});
Live Example:
$('div[data-item="item--1"]').addClass('active');
$('.header').click(function() {
var myEm = $(this).attr('data-item');
$('.header, .subheader', $(this).closest('.card')).removeClass('active');
$('.header[data-item = '+myEm+'], .subheader[data-item = '+myEm+']', $(this).closest('.card')).addClass('active');
});
.card{
display: flex;
flex-direction: column;
padding: 30px;
background: lightblue;
}
.headers{
padding: 20px;
margin-bottom: 40px;
}
.header{
cursor: pointer;
opacity: 0.4;
}
.header.active{
opacity: 1;
}
.subheader{
display: none;
padding: 0px 20px;
}
.header.active,
.subheader.active{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<div class="card">
<div class="headers">
<div class="header" data-item="item--1">Test</div>
<div class="header" data-item="item--2">Test 2</div>
</div>
<div class="subheaders">
<div class="subheader" data-item="item--1">Subheader for Test</div>
<div class="subheader" data-item="item--2">Subheader for Test 2</div>
</div>
</div>
<div class="card">
<div class="headers">
<div class="header" data-item="item--1">Another Test</div>
<div class="header" data-item="item--2">Another Test 2</div>
</div>
<div class="subheaders">
<div class="subheader" data-item="item--1">Subheader for Another Test</div>
<div class="subheader" data-item="item--2">Subheader for Another Test 2</div>
</div>
</div>

Add class to div on scroll up and down

As you can see I have a number of dots lined vertically! On scrolling down it works, as one scrolls the next dot gets a class thats chnages the style of the ball, I want the exact same to happen when i scroll up but it is not working! Please any input is appreciated!
Here is a code pen for your reference!
below the html, css and javascript:
var activeMilestone = function() {
var milestoneBalls = $('.dot');
milestoneBalls[0].classList.add("active");
window.onscroll = function() {
milestoneBalls.each(function(i, v) {
var thisBall = $(this);
var nextBall = milestoneBalls[i + 1];
var prevBall = milestoneBalls[i - 1];
var thisPositionTop = thisBall.offset().top + ($(this).parent().height() / 3);
var winScroll = window.scrollY;
if (thisPositionTop <= winScroll) {
nextBall.classList.add("active");
thisBall.addClass("inactive");
}
if (thisPositionTop >= winScroll) {
//this.classList.add("inactive_ball");
}
});
}
}
$(document).ready(activeMilestone);
.wrapper {
height: 1000px;
background-color: wheat;
}
.info_wrapper {
margin-top: 70px;
}
.container {
height: 50%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.dot {
width: 30px;
height: 30px;
border-radius: 20px;
background-color: maroon;
border: solid 4px green;
}
.active {
border: solid 4px yellow;
background-color: red;
}
.inactive {
background-color: maroon;
border: solid 4px green;
}
.text {}
.header {
width: 100%;
height: 50px;
background-color: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header"></div>
<div class="container">
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
</div>
</div>

So this logic performs the same that you were doing already. With the added logic of, if the element should not advance, and we are not the first element, we check to see if the previous ball should be active. And if so, we make it active.
var activeMilestone = function() {
var milestoneBalls = $('.dot');
milestoneBalls.eq(0).addClass('active');
window.addEventListener('scroll', function() {
var activeBall = milestoneBalls.filter('.active');
var activeBallIndex = milestoneBalls.index( activeBall );
var activeBallPositionTop = activeBall.offset().top + (activeBall.parent().height() / 3);
if (activeBallPositionTop <= window.scrollY) {
activeBall.removeClass('active');
milestoneBalls.eq( activeBallIndex + 1).addClass('active');
} else if ( activeBallIndex ) {
var previousBall = milestoneBalls.eq( activeBallIndex - 1 );
var previousBallPositionTop = previousBall.offset().top + (previousBall.parent().height() / 3);
if (previousBallPositionTop > window.scrollY) {
activeBall.removeClass('active');
previousBall.addClass('active');
}
}
});
}
$(document).ready(activeMilestone);
.wrapper {
height: 1000px;
background-color: wheat;
}
.info_wrapper {
margin-top: 70px;
}
.container {
height: 50%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.dot {
width: 30px;
height: 30px;
border-radius: 20px;
background-color: maroon;
border: solid 4px green;
}
.active {
border: solid 4px yellow;
background-color: red;
}
.inactive {
background-color: maroon;
border: solid 4px green;
}
.text {}
.header {
width: 100%;
height: 50px;
background-color: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header"></div>
<div class="container">
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
</div>
</div>

You can use on wheel from jQuery.
$(window).on('wheel',function(e) {
var mov = e.originalEvent.deltaY;
if(mov > 0) {
alert("up");
}else {
alert("down");
}
});
This will sort out your problem regarding detection of scrolling direction.

masonry leaves a lot of spaces

I'm trying to use Masonry, but it doesn't seem to work well. It leaves a lot of empty spaces. as you can see here
I already tried various other ways to implement Masonry, but this one leans the most to the result. Can someone help this rookie?
Here what I think is important of my HTML/ CSS/ JAVASCRIPT
<script src="masonry-docs/js/masonry.pkgd.min.js"></script>
<script type="text/javascript">// Javascript
var container = document.querySelector('#masonry-grid');
var msnry = new Masonry( container, {
// options
columnWidth: 33%,
itemSelector: '.grid-item'
});</script>
.grid-item{width: 33%;}
.grid-item--width2{width: 33%;}
.grid-item--width3{width: 33%;}
*{box-sizing:border-box;}
.box-sizing:border-box;
.grid:after {
content: '';
display: block;
clear: both;
}
.grid-item {
width: 33%;
float: left;
border: 5px solid #FFFFFF;
}
.grid-sizer,
.grid-item {
width: 33%;
}
<section id="werk">
<div class="container">
<div class="grid">
<div class="item">
<div id="masonry-grid">
<div class="grid-item">
<h3>Manifesta 10</h3>
<span class="category">huisstijl</span>
<img src="images/manifesta.jpg" alt="" />
</div>
<div class="item">
<div class="grid-item grid-item--width2">
<h3>Deutsche Grammophon</h3>
<span class="category">platenhoezen</span>
<img src="images/GIF_1.gif" alt="" />
</div>
</div>
<div class="item">
<div class="grid-item grid-item--width3">
<h3>Ghent Art Book Fair</h3>
<span class="category">poster</span>
<img src="images/boekposter.png" alt="" />
</div>
</div>
<div class="item">
<div class="grid-item">
<h3>teaser masterproef</h3>
<span class="category">foto</span>
<img src="images/masterproef.png" alt="" />
</div>
</div>
<div class="item">
<div class="grid-item grid-item--width2">
<h3>Mundaneum</h3>
<span class="category">publicatie</span>
<img src="images/Mundaneum.gif" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>

Your h3 Element has a margin, add this a the beginning of your CSS-Code:
h3 { margin: 0px; }
Your .grid-item has a border of 5px, change it in your CSS-Code:
.grid-item {
width: 33%;
float: left;
border: 0px solid #FFFFFF;
}

jQuery toggle expand divs inside bootstrap container wrap

Guys basically there will be a bootstrap container div, and inside there will be 4 card style divs with toggle expand/retract button. When you click on one card's button, the div will expand all the way to the container's width. Please check the image. I'm a newbie to jQuery and with the script I've, i'm not able to achieve the full width. If someone can help me out it'll be great. Here's the code below -
$(document).ready(function() {
$('#toggle-button').click(function() {
var toggleWidth = $("#exp_card_1").width() == 600 ? "200px" : "600px";
$('#exp_card_1').animate({
width: toggleWidth
});
});
});
#exp_card_1 {
position: relative;
height: 310px;
background: #2d3644;
z-index: 1;
}
#toggle-button {
position: absolute;
right: 0;
top: 43.7%;
height: 38px;
width: 38px;
background: #131f34 url("../images/arrow.png") no-repeat;
background-position: 5px 9px;
border-radius: 3px 0 0 3px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container" style="padding:0; position:relative;">
<!-- /.row -->
<div class="row mar-t25">
<div class="col-xs-12 col-sm-3">
<div id="exp_card_1">
<div id="toggle-button"></div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_3" class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_4" class="stock-card curves2">
</div>
</div>
</div>
<!-- /.row -->
</div>

Is this what you're looking for?
I suggest taking a look at MDN to get deeper insights about CSS props: https://developer.mozilla.org/en-US/docs/Web/CSS/width
$(document).ready(function() {
$('#toggle-button').click(function() {
var toggleWidth = $("#exp_card_1").width() > 0 ? "0%" : "100%";
$('#exp_card_1').animate({
width: toggleWidth
});
});
});
#exp_card_1 {
position: relative;
height: 310px;
background: #2d3644;
z-index: 1;
}
#toggle-button {
position: absolute;
right: 0;
top: 43.7%;
height: 38px;
width: 38px;
background: #131f34 url("../images/arrow.png") no-repeat;
background-position: 5px 9px;
border-radius: 3px 0 0 3px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container" style="padding:0; position:relative;">
<!-- /.row -->
<div class="row mar-t25">
<div class="col-xs-12 col-sm-3">
<div id="exp_card_1">
<div id="toggle-button"></div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_3" class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_4" class="stock-card curves2">
</div>
</div>
</div>
<!-- /.row -->
</div>