my page seems like to be tiny like i zoomed out

my page seems like to be tiny like i zoomed out - javascript

I am looking for a slider for my website and i found one but i don't understand why it is zooming out my page so the navbar seems tiny like if was on a 70% scale and if I don't use this code anymore it get back to normal
Here is the code from the example I used
$(document).ready(function() {
var itemsMainDiv = ('.MultiCarousel');
var itemsDiv = ('.MultiCarousel-inner');
var itemWidth = "";
$('.leftLst, .rightLst').click(function() {
var condition = $(this).hasClass("leftLst");
if (condition)
click(0, this);
else
click(1, this)
});
ResCarouselSize();
$(window).resize(function() {
ResCarouselSize();
});
//this function define the size of the items
function ResCarouselSize() {
var incno = 0;
var dataItems = ("data-items");
var itemClass = ('.item');
var id = 0;
var btnParentSb = '';
var itemsSplit = '';
var sampwidth = $(itemsMainDiv).width();
var bodyWidth = $('body').width();
$(itemsDiv).each(function() {
id = id + 1;
var itemNumbers = $(this).find(itemClass).length;
btnParentSb = $(this).parent().attr(dataItems);
itemsSplit = btnParentSb.split(',');
$(this).parent().attr("id", "MultiCarousel" + id);
if (bodyWidth >= 1200) {
incno = itemsSplit[3];
itemWidth = sampwidth / incno;
} else if (bodyWidth >= 992) {
incno = itemsSplit[2];
itemWidth = sampwidth / incno;
} else if (bodyWidth >= 768) {
incno = itemsSplit[1];
itemWidth = sampwidth / incno;
} else {
incno = itemsSplit[0];
itemWidth = sampwidth / incno;
}
$(this).css({
'transform': 'translateX(0px)',
'width': itemWidth * itemNumbers
});
$(this).find(itemClass).each(function() {
$(this).outerWidth(itemWidth);
});
$(".leftLst").addClass("over");
$(".rightLst").removeClass("over");
});
}
//this function used to move the items
function ResCarousel(e, el, s) {
var leftBtn = ('.leftLst');
var rightBtn = ('.rightLst');
var translateXval = '';
var divStyle = $(el + ' ' + itemsDiv).css('transform');
var values = divStyle.match(/-?[\d\.]+/g);
var xds = Math.abs(values[4]);
if (e == 0) {
translateXval = parseInt(xds) - parseInt(itemWidth * s);
$(el + ' ' + rightBtn).removeClass("over");
if (translateXval <= itemWidth / 2) {
translateXval = 0;
$(el + ' ' + leftBtn).addClass("over");
}
} else if (e == 1) {
var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
translateXval = parseInt(xds) + parseInt(itemWidth * s);
$(el + ' ' + leftBtn).removeClass("over");
if (translateXval >= itemsCondition - itemWidth / 2) {
translateXval = itemsCondition;
$(el + ' ' + rightBtn).addClass("over");
}
}
$(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
}
//It is used to get some elements from btn
function click(ell, ee) {
var Parent = "#" + $(ee).parent().attr("id");
var slide = $(Parent).attr("data-slide");
ResCarousel(ell, Parent, slide);
}
});
.MultiCarousel {
float: left;
overflow: hidden;
padding: 15px;
width: 100%;
position: relative;
}
.MultiCarousel .MultiCarousel-inner {
transition: 1s ease all;
float: left;
}
.MultiCarousel .MultiCarousel-inner .item {
float: left;
}
.MultiCarousel .MultiCarousel-inner .item>div {
text-align: center;
padding: 10px;
margin: 10px;
background: #f1f1f1;
color: #666;
}
.MultiCarousel .leftLst,
.MultiCarousel .rightLst {
position: absolute;
border-radius: 50%;
top: calc(50% - 20px);
}
.MultiCarousel .leftLst {
left: 0;
}
.MultiCarousel .rightLst {
right: 0;
}
.MultiCarousel .leftLst.over,
.MultiCarousel .rightLst.over {
pointer-events: none;
background: #ccc;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="MultiCarousel" data-items="1,3,5,6" data-slide="1" id="MultiCarousel" data-interval="1000">
<div class="MultiCarousel-inner">
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
</div>
<button class="btn btn-primary leftLst"><</button>
<button class="btn btn-primary rightLst">></button>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<br/><br/><br/>
<hr/>
<p>Settings</p>
<p>Change data items for xs,sm,md and lg display items respectively. Ex:data-items="1,3,5,6"</p>
<p>Change data slide for slides per click Ex:data-slide="1"</p>
</div>
</div>
</div>
edit :
Tiny navbar
So as you can see the navbar in this page is realy tiny but not in my other pages
edit 2 :
So i found the problem it is this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
But i need this or i can't slide on my carousel
I have no idea what I need to so thanks for your help and sorry for my English

Related

How do you target only a child of a .each function, and not all elements of that class?

I have left/right arrows that when clicked uses jQuery to move an element to the left/right, and the arrow-left element is revealed when the position of .sliding-element has moved past 0.
I am using this code to hide and show the arrow-left element in the runnable snippet below.
$carouselList.animate({
left: moveto
}, 400, function() {
if (moveto == 0) {
$('.arrow-left').hide();
} else {
$('.arrow-left').show();
}
});
The problem is that this hides all the .arrow-left elements, not just the children of this .js-carousel slider element. How can I get it to just hide this single arrow-left, and not all of them on the page?
Thank you
jQuery(document).ready(function( $ ){
$(".js-carousel").each(function(){
$('.arrow-left').hide();
var $carousel = $(this),
$carouselContainer = $carousel.find(".books-container"),
$carouselList = $carousel.find(".sliding-element"),
$carouselItem = $carousel.find(".book"),
$carouselButton = $carousel.find(".js-carousel-button"),
setItemWidth = function(){
$carouselList.removeAttr("style");
var curWidth = $($carouselItem[0]).outerWidth() * $carouselItem.length;
$carouselList.css("width", curWidth);
},
slide = function(){
var $button = $(this),
dir = $button.data("dir"),
curPos = parseInt($carouselList.css("left")) || 0,
moveto = 0,
containerWidth = $carouselContainer.outerWidth(),
listWidth = $carouselList.outerWidth(),
before = (curPos + containerWidth),
after = listWidth + (curPos - containerWidth);
if(dir=="next"){
moveto = (after < containerWidth) ? curPos - after : curPos - containerWidth;
} else {
moveto = (before >= 0) ? 0 : curPos + containerWidth;
}
/*THIS BIT HERE IS WHAT NEEDS FIXING*/
$carouselList.animate({
left: moveto
}, 400, function() {
if (moveto == 0) {
$('.arrow-left').hide();
} else {
$('.arrow-left').show();
}
});
/*END OF BIT THAT NEEDS FIXING*/
};
$(window).resize(function(){
setItemWidth();
});
setItemWidth();
$carouselButton.on("click", slide);
});
});
.books-container {
overflow: hidden;
}
.sliding-element {
position: relative;
display: flex;
}
.book {
padding: 1em;
}
.arrows {
position:relative;
width: 100%;
}
.arrow-right {
right: -5px;
}
.arrow-left {
left: -5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider1" class="js-carousel">
<div class="books-container">
<div class="flex flex-wrap sliding-element">
<div class="book flex flex-column">
<a href="#apage">
<p>Element 1</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 2</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 3</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 4</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 5</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 6</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 7</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 8</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 9</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 10</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 11</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 12</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 13</p>
</a>
</div>
</div>
<div class="arrows">
<div class="js-carousel-button arrow arrow-left animate" data-dir="prev">Left</div>
<div class="js-carousel-button arrow arrow-right animate" data-dir="next">Right</div>
</div>
</div>
</div>
<div id="slider2" class="js-carousel">
<div class="books-container">
<div class="flex flex-wrap sliding-element">
<div class="book flex flex-column">
<a href="#apage">
<p>Element 1</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 2</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 3</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 4</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 5</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 6</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 7</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 8</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 9</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 10</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 11</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 12</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 13</p>
</a>
</div>
</div>
<div class="arrows">
<div class="js-carousel-button arrow arrow-left animate" data-dir="prev">Left</div>
<div class="js-carousel-button arrow arrow-right animate" data-dir="next">Right</div>
</div>
</div>
</div>

To target the .arrow-left element within the current .js-carousel in the loop, use the find() method from the jQuery object which holds a reference to the carousel.
Here's an example of how to do that, along with some minor code improvements:
jQuery($ => {
$(".js-carousel").each((i, carousel) => {
let $carousel = $(carousel);
let $arrowLeft = $carousel.find('.arrow-left').hide();
let $carouselContainer = $carousel.find(".books-container");
let $carouselList = $carousel.find(".sliding-element");
let $carouselItem = $carousel.find(".book");
let $carouselButton = $carousel.find(".js-carousel-button");
let setItemWidth = function() {
$carouselList.removeAttr("style");
var curWidth = $($carouselItem[0]).outerWidth() * $carouselItem.length;
$carouselList.width(curWidth);
};
let slide = function() {
let $button = $(this);
let dir = $button.data("dir");
let curPos = parseInt($carouselList.css("left"), 10) || 0;
let moveto = 0;
let containerWidth = $carouselContainer.outerWidth();
let listWidth = $carouselList.outerWidth();
let before = (curPos + containerWidth);
let after = listWidth + (curPos - containerWidth);
if (dir == "next") {
moveto = (after < containerWidth) ? curPos - after : curPos - containerWidth;
} else {
moveto = (before >= 0) ? 0 : curPos + containerWidth;
}
$carouselList.animate({
left: moveto
}, 400, function() {
$arrowLeft.toggle(moveto !== 0);
});
};
$(window).on('resize', setItemWidth);
setItemWidth();
$carouselButton.on("click", slide);
});
});
.books-container {
overflow: hidden;
}
.sliding-element {
position: relative;
display: flex;
}
.book {
padding: 1em;
}
.arrows {
position: relative;
width: 100%;
}
.arrow-right {
right: -5px;
}
.arrow-left {
left: -5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider1" class="js-carousel">
<div class="books-container">
<div class="flex flex-wrap sliding-element">
<div class="book flex flex-column">
<a href="#apage">
<p>Element 1</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 2</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 3</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 4</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 5</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 6</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 7</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 8</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 9</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 10</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 11</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 12</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 13</p>
</a>
</div>
</div>
<div class="arrows">
<div class="js-carousel-button arrow arrow-left animate" data-dir="prev">Left</div>
<div class="js-carousel-button arrow arrow-right animate" data-dir="next">Right</div>
</div>
</div>
</div>
<div id="slider2" class="js-carousel">
<div class="books-container">
<div class="flex flex-wrap sliding-element">
<div class="book flex flex-column">
<a href="#apage">
<p>Element 1</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 2</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 3</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 4</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 5</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 6</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 7</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 8</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 9</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 10</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 11</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 12</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 13</p>
</a>
</div>
</div>
<div class="arrows">
<div class="js-carousel-button arrow arrow-left animate" data-dir="prev">Left</div>
<div class="js-carousel-button arrow arrow-right animate" data-dir="next">Right</div>
</div>
</div>
</div>

You can add this var $this = $(this) right after your .each function.
Then use $('.arrow-left', $this).show(); to find the element relevant to your carousel.
Demo
jQuery(document).ready(function($) {
$(".js-carousel").each(function() {
var $this = $(this)
$('.arrow-left').hide();
var $carousel = $(this),
$carouselContainer = $carousel.find(".books-container"),
$carouselList = $carousel.find(".sliding-element"),
$carouselItem = $carousel.find(".book"),
$carouselButton = $carousel.find(".js-carousel-button"),
setItemWidth = function() {
$carouselList.removeAttr("style");
var curWidth = $($carouselItem[0]).outerWidth() * $carouselItem.length;
$carouselList.css("width", curWidth);
},
slide = function() {
var $button = $(this),
dir = $button.data("dir"),
curPos = parseInt($carouselList.css("left")) || 0,
moveto = 0,
containerWidth = $carouselContainer.outerWidth(),
listWidth = $carouselList.outerWidth(),
before = (curPos + containerWidth),
after = listWidth + (curPos - containerWidth);
if (dir == "next") {
moveto = (after < containerWidth) ? curPos - after : curPos - containerWidth;
} else {
moveto = (before >= 0) ? 0 : curPos + containerWidth;
}
/*THIS BIT HERE IS WHAT NEEDS FIXING*/
$carouselList.animate({
left: moveto
}, 400, function() {
if (moveto == 0) {
$('.arrow-left', $this).hide();
} else {
$('.arrow-left', $this).show();
}
});
/*END OF BIT THAT NEEDS FIXING*/
};
$(window).resize(function() {
setItemWidth();
});
setItemWidth();
$carouselButton.on("click", slide);
});
});
.books-container {
overflow: hidden;
}
.sliding-element {
position: relative;
display: flex;
}
.book {
padding: 1em;
}
.arrows {
position: relative;
width: 100%;
}
.arrow-right {
right: -5px;
}
.arrow-left {
left: -5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider1" class="js-carousel">
<div class="books-container">
<div class="flex flex-wrap sliding-element">
<div class="book flex flex-column">
<a href="#apage">
<p>Element 1</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 2</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 3</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 4</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 5</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 6</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 7</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 8</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 9</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 10</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 11</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 12</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 13</p>
</a>
</div>
</div>
<div class="arrows">
<div class="js-carousel-button arrow arrow-left animate" data-dir="prev">Left</div>
<div class="js-carousel-button arrow arrow-right animate" data-dir="next">Right</div>
</div>
</div>
</div>
<div id="slider2" class="js-carousel">
<div class="books-container">
<div class="flex flex-wrap sliding-element">
<div class="book flex flex-column">
<a href="#apage">
<p>Element 1</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 2</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 3</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 4</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 5</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 6</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 7</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 8</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 9</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 10</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 11</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 12</p>
</a>
</div>
<div class="book flex flex-column">
<a href="#apage">
<p>Element 13</p>
</a>
</div>
</div>
<div class="arrows">
<div class="js-carousel-button arrow arrow-left animate" data-dir="prev">Left</div>
<div class="js-carousel-button arrow arrow-right animate" data-dir="next">Right</div>
</div>
</div>
</div>

Buttons don't work when I place them outside the carousel

I have this code and when I put the anchor (arrow img) outside, .MultiCarousel div it doesn't work. I didn't write the code but I think I should change something in JavaScript. I want the anchor outside the container div but with the same functionality. I am not very familiar with JavaScript so I don't know what to change. Can someone help?
$(document).ready(function () {
var itemsMainDiv = ('.MultiCarousel');
var itemsDiv = ('.MultiCarousel-inner');
var itemWidth = "";
$('.leftLst, .rightLst').click(function () {
var condition = $(this).hasClass("leftLst");
if (condition)
click(0, this);
else
click(1, this)
});
ResCarouselSize();
$(window).resize(function () {
ResCarouselSize();
});
//this function define the size of the items
function ResCarouselSize() {
var incno = 0;
var dataItems = ("data-items");
var itemClass = ('.item');
var id = 0;
var btnParentSb = '';
var itemsSplit = '';
var sampwidth = $(itemsMainDiv).width();
var bodyWidth = $('body').width();
$(itemsDiv).each(function () {
id = id + 1;
var itemNumbers = $(this).find(itemClass).length;
btnParentSb = $(this).parent().attr(dataItems);
itemsSplit = btnParentSb.split(',');
$(this).parent().attr("id", "MultiCarousel" + id);
if (bodyWidth >= 1200) {
incno = itemsSplit[3];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 992) {
incno = itemsSplit[2];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 768) {
incno = itemsSplit[1];
itemWidth = sampwidth / incno;
}
else {
incno = itemsSplit[0];
itemWidth = sampwidth / incno;
}
$(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
$(this).find(itemClass).each(function () {
$(this).outerWidth(itemWidth);
});
$(".leftLst").addClass("over");
$(".rightLst").removeClass("over");
});
}
//this function used to move the items
function ResCarousel(e, el, s) {
var leftBtn = ('.leftLst');
var rightBtn = ('.rightLst');
var translateXval = '';
var divStyle = $(el + ' ' + itemsDiv).css('transform');
var values = divStyle.match(/-?[\d\.]+/g);
var xds = Math.abs(values[4]);
if (e == 0) {
translateXval = parseInt(xds) - parseInt(itemWidth * s);
$(el).siblings(rightBtn).removeClass("over");
if (translateXval <= itemWidth / 2) {
translateXval = 0;
$(el).siblings(leftBtn).addClass("over");
}
}
else if (e == 1) {
var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
translateXval = parseInt(xds) + parseInt(itemWidth * s);
$(el).siblings(leftBtn).removeClass("over");
if (translateXval >= itemsCondition - itemWidth / 2) {
translateXval = itemsCondition;
$(el).siblings(rightBtn).addClass("over");
}
}
$(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
}
//It is used to get some elements from btn
function click(ell, ee) {
var Parent = "#" + $(ee).siblings( '.MultiCarousel' ).attr("id");
var slide = $(Parent).attr("data-slide");
ResCarousel(ell, Parent, slide);
}
});
.MultiCarousel {
float: left;
overflow: hidden;
padding: 15px;
width: 100%;
position:relative;
box-sizing: border-box;
}
.MultiCarousel .MultiCarousel-inner {
transition: 1s ease all;
float: left;
}
.MultiCarousel .MultiCarousel-inner .item {
float: left;
}
.MultiCarousel .MultiCarousel-inner .item > div {
text-align: center;
padding:10px;
margin:10px;
color:#666;
}
.leftLst, .rightLst {
position:absolute;
border-radius:50%;
top:calc(50% - 20px);
background: red;
width: 50px;
height: 50px;
}
.leftLst {
left:0;
}
.rightLst {
right:0;
}
.leftLst.over, .rightLst.over {
pointer-events: none;
background:#ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="MultiCarousel" data-items="1,2,3,4" data-slide="1" id="MultiCarousel" data-interval="1000">
<div class="MultiCarousel-inner">
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert4.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert2.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert3.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert7.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert4.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert2.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert3.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert7.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
</div>
<a class=" leftLst"><img src="images/left_arrow.svg" alt=""></a>
<a class=" rightLst"><img src="images/right_arrow.svg" alt=""></a>
</div>
</div>
</div>

The problem is that the click() function is searching for the parent element of the arrow key button, which it expects to be the .MultiCarousel div in order for the rest of the code to work. So when you place the arrow keys outside of the .MultiCarousel div a different parent will be found and your slider will not work.
In this case you could use the jQuery siblings() function to find the .MultiCarousel div, as the arrow key buttons are now siblings.
The same goes for the ResCarousel() function. It expects the arrow key buttons to be children of the .MultiCarousel div. So you can also use siblings() here.
$(document).ready(function () {
var itemsMainDiv = ('.MultiCarousel');
var itemsDiv = ('.MultiCarousel-inner');
var itemWidth = "";
$('.leftLst, .rightLst').click(function () {
var condition = $(this).hasClass("leftLst");
if (condition)
click(0, this);
else
click(1, this)
});
ResCarouselSize();
$(window).resize(function () {
ResCarouselSize();
});
//this function define the size of the items
function ResCarouselSize() {
var incno = 0;
var dataItems = ("data-items");
var itemClass = ('.item');
var id = 0;
var btnParentSb = '';
var itemsSplit = '';
var sampwidth = $(itemsMainDiv).width();
var bodyWidth = $('body').width();
$(itemsDiv).each(function () {
id = id + 1;
var itemNumbers = $(this).find(itemClass).length;
btnParentSb = $(this).parent().attr(dataItems);
itemsSplit = btnParentSb.split(',');
$(this).parent().attr("id", "MultiCarousel" + id);
if (bodyWidth >= 1200) {
incno = itemsSplit[3];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 992) {
incno = itemsSplit[2];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 768) {
incno = itemsSplit[1];
itemWidth = sampwidth / incno;
}
else {
incno = itemsSplit[0];
itemWidth = sampwidth / incno;
}
$(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
$(this).find(itemClass).each(function () {
$(this).outerWidth(itemWidth);
});
$(".leftLst").addClass("over");
$(".rightLst").removeClass("over");
});
}
//this function used to move the items
function ResCarousel(e, el, s) {
var leftBtn = ('.leftLst');
var rightBtn = ('.rightLst');
var translateXval = '';
var divStyle = $(el + ' ' + itemsDiv).css('transform');
var values = divStyle.match(/-?[\d\.]+/g);
var xds = Math.abs(values[4]);
if (e == 0) {
translateXval = parseInt(xds) - parseInt(itemWidth * s);
$(el).siblings(rightBtn).removeClass("over");
if (translateXval <= itemWidth / 2) {
translateXval = 0;
$(el).siblings(leftBtn).addClass("over");
}
}
else if (e == 1) {
var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
translateXval = parseInt(xds) + parseInt(itemWidth * s);
$(el).siblings(leftBtn).removeClass("over");
if (translateXval >= itemsCondition - itemWidth / 2) {
translateXval = itemsCondition;
$(el).siblings(rightBtn).addClass("over");
}
}
$(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
}
//It is used to get some elements from btn
function click(ell, ee) {
var Parent = "#" + $(ee).siblings( '.MultiCarousel' ).attr("id");
var slide = $(Parent).attr("data-slide");
ResCarousel(ell, Parent, slide);
}
});
.MultiCarousel {
float: left;
overflow: hidden;
padding: 15px;
width: 100%;
position:relative;
box-sizing: border-box;
}
.MultiCarousel .MultiCarousel-inner {
transition: 1s ease all;
float: left;
}
.MultiCarousel .MultiCarousel-inner .item {
float: left;
}
.MultiCarousel .MultiCarousel-inner .item > div {
text-align: center;
padding:10px;
margin:10px;
color:#666;
}
.leftLst, .rightLst {
position:absolute;
border-radius:50%;
top:calc(50% - 20px);
background: red;
width: 50px;
height: 50px;
}
.leftLst {
left:0;
}
.rightLst {
right:0;
}
.leftLst.over, .rightLst.over {
pointer-events: none;
background:#ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="MultiCarousel" data-items="1,2,3,4" data-slide="1" id="MultiCarousel" data-interval="1000">
<div class="MultiCarousel-inner">
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
</div>
</div>
<a class=" leftLst"><img src="images/left_arrow.svg" alt=""></a>
<a class=" rightLst"><img src="images/right_arrow.svg" alt=""></a>
</div>
</div>
Alternative solution
Your question stated specifically that you wanted to place the arrow key buttons outside the .MultiCarousel div but I think it might be better to keep them inside the div as it functions as a wrapper for the whole carousel.
You can then use the closest() function to find the .MultiCarousel div in the click() function, and the find() function to find the buttons in the ResCarousel() function.
This way the buttons are always connected to the correct slider, for instance when you want to use multiple sliders next to each other, as in the example below.
$(document).ready(function () {
var itemsMainDiv = ('.MultiCarousel');
var itemsDiv = ('.MultiCarousel-inner');
var itemWidth = "";
$('.leftLst, .rightLst').click(function () {
var condition = $(this).hasClass("leftLst");
if (condition)
click(0, this);
else
click(1, this)
});
ResCarouselSize();
$(window).resize(function () {
ResCarouselSize();
});
//this function define the size of the items
function ResCarouselSize() {
var incno = 0;
var dataItems = ("data-items");
var itemClass = ('.item');
var id = 0;
var btnParentSb = '';
var itemsSplit = '';
var sampwidth = $(itemsMainDiv).width();
var bodyWidth = $('body').width();
$(itemsDiv).each(function () {
id = id + 1;
var itemNumbers = $(this).find(itemClass).length;
btnParentSb = $(this).parent().attr(dataItems);
itemsSplit = btnParentSb.split(',');
$(this).parent().attr("id", "MultiCarousel" + id);
if (bodyWidth >= 1200) {
incno = itemsSplit[3];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 992) {
incno = itemsSplit[2];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 768) {
incno = itemsSplit[1];
itemWidth = sampwidth / incno;
}
else {
incno = itemsSplit[0];
itemWidth = sampwidth / incno;
}
$(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
$(this).find(itemClass).each(function () {
$(this).outerWidth(itemWidth);
});
$(".leftLst").addClass("over");
$(".rightLst").removeClass("over");
});
}
//this function used to move the items
function ResCarousel(e, el, s) {
var leftBtn = ('.leftLst');
var rightBtn = ('.rightLst');
var translateXval = '';
var divStyle = $(el + ' ' + itemsDiv).css('transform');
var values = divStyle.match(/-?[\d\.]+/g);
var xds = Math.abs(values[4]);
if (e == 0) {
translateXval = parseInt(xds) - parseInt(itemWidth * s);
$(el).find(rightBtn).removeClass("over");
if (translateXval <= itemWidth / 2) {
translateXval = 0;
$(el).find(leftBtn).addClass("over");
}
}
else if (e == 1) {
var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
translateXval = parseInt(xds) + parseInt(itemWidth * s);
$(el).find(leftBtn).removeClass("over");
if (translateXval >= itemsCondition - itemWidth / 2) {
translateXval = itemsCondition;
$(el).find(rightBtn).addClass("over");
}
}
$(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
}
//It is used to get some elements from btn
function click(ell, ee) {
var Parent = "#" + $(ee).closest( '.MultiCarousel' ).attr("id");
var slide = $(Parent).attr("data-slide");
ResCarousel(ell, Parent, slide);
}
});
.MultiCarousel {
float: left;
overflow: hidden;
margin: 5%;
width: 40%;
position:relative;
box-sizing: border-box;
}
.MultiCarousel .MultiCarousel-inner {
transition: 1s ease all;
float: left;
}
.MultiCarousel .MultiCarousel-inner .item {
float: left;
}
.MultiCarousel .MultiCarousel-inner .item > div {
text-align: center;
padding:10px;
margin:10px;
color:#666;
}
.leftLst, .rightLst {
/*position:absolute;*/
border-radius:50%;
/*top:calc(50% - 20px);*/
background: red;
width: 50px;
height: 50px;
display: block;
}
.leftLst {
float: left;
}
.rightLst {
float: right;
}
.leftLst.over, .rightLst.over {
pointer-events: none;
background:#ccc;
}
.buttons {
width: 100%;
clear:both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="MultiCarousel" data-items="1,2,3,4" data-slide="1" id="MultiCarousel" data-interval="1000">
<div class="MultiCarousel-inner">
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
</div>
<div class="buttons">
<a class=" leftLst"><img src="images/left_arrow.svg" alt=""></a>
<a class=" rightLst"><img src="images/right_arrow.svg" alt=""></a>
</div>
</div>
<div class="MultiCarousel" data-items="1,2,3,4" data-slide="1" id="MultiCarousel" data-interval="1000">
<div class="MultiCarousel-inner">
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
</div>
<div class="buttons">
<a class=" leftLst"><img src="images/left_arrow.svg" alt=""></a>
<a class=" rightLst"><img src="images/right_arrow.svg" alt=""></a>
</div>
</div>
</div>
</div>

Toggle between multiple divs and move text into single block

I have this fiddle that I'm working on, and I can't figure out how to show (toggle) the content inside the black block I made + in the same time toggle "+" and "-" signs for the CLICKED div..
Structure example:
$('.column_column > div > div').hide();
$('.column_column h4').click(function(e){
e.preventDefault();
// hide all span
var $this = $(this).parent().find('div');
$(".column_column > div > div").not($this).hide();
// here is what I want to do
$this.toggle();
});
.sp_appear {
background: black;
color: #FFF;
display: block;
float: left;
width: 100%;
min-height: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column_column">
<div class="column_attr">
<h4 href="">element1
<span class="sp_toggle_icon">+</span>
</h4>
<div>content 1</div>
</div>
</div>
<div class="column_column">
<div class="column_attr">
<h4 href="">element2
<span class="sp_toggle_icon">+</span>
</h4>
<div>content 2</div>
</div>
</div>
<div class="column_column">
<div class="column_attr">
<h4 href="">element3
<span class="sp_toggle_icon">+</span>
</h4>
<div>content 3</div>
</div>
</div>
<div class="column_column">
<div class="column_attr">
<h4 href="">element4
<span class="sp_toggle_icon">+</span>
</h4>
<div>content 4</div>
</div>
</div>
<div class="sp_appear"></div>
Can someone please help? Attaching the code - https://jsfiddle.net/kp9d0vfb/

Is this what you want?
$('.column_column > div > div').hide();
$('.column_column h4').click(function(e){
e.preventDefault();
// hide all span
var $this = $(this).parent().find('div');
$(".column_column > div > div").not($this).hide();
// here is what I want to do
$this.toggle();
$(this).find("span").text(($(this).find("span").text() == "-") ? "+" : "-");
});
.sp_appear {
background: black;
color: #FFF;
display: block;
float: left;
width: 100%;
min-height: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column_column">
<div class="column_attr">
<h4 href="">element1
<span class="sp_toggle_icon">+</span>
</h4>
<div>content 1</div>
</div>
</div>
<div class="column_column">
<div class="column_attr">
<h4 href="">element2
<span class="sp_toggle_icon">+</span>
</h4>
<div>content 2</div>
</div>
</div>
<div class="column_column">
<div class="column_attr">
<h4 href="">element3
<span class="sp_toggle_icon">+</span>
</h4>
<div>content 3</div>
</div>
</div>
<div class="column_column">
<div class="column_attr">
<h4 href="">element4
<span class="sp_toggle_icon">+</span>
</h4>
<div>content 4</div>
</div>
</div>
<div class="sp_appear"></div>

How to use an element from an ID array to show the next element sibling outside the array? [duplicate]

This question already has answers here:
Get next / previous element using JavaScript?
(10 answers)
Closed 3 years ago.
I'm using a function to display elements [items] from an array. I want to show the next element sibling Outside the array [subitem] when an item is clicked. I want to use Javascript only. I'm really new and with a lot to learn. How can I show the subitem when I click on the item?
I tried some coding but I'm not good with the syntax, so I can't tell what I'm doing wrong.
var ITEMS = [];
for (var i = 0; i < 3; i++) {
ITEMS.push("IT" + i);
}
function showitems() {
for (var i = 0; i < ITEMS.length; i++) {
document.getElementById(ITEMS[i]).style.display = "flex";
}
}
showitems();
function showsubitem() {
ITEMS[i].addEventListener('click', function(e) {
e.target.nextElementSibling.style.display = "flex";
});
}
showsubitem();
<!DOCTYPE html>
<html>
<head>
<style>
.item,
.sub {
display: none;
}
</style>
</head>
<body>
<div id="IT0" class="item">
<p>item 0</p>
</div>
<div class="sub">
<p>subitem 0</p>
</div>
<div id="IT1" class="item">
<p>item 1</p>
</div>
<div class="sub">
<p>subitem 1</p>
</div>
<div id="IT2" class="item">
<p>item 2</p>
</div>
<div class="sub">
<p>subitem 2</p>
</div>
<div id="IT3" class="item">
<p>item 3</p>
</div>
<div class="sub">
<p>subitem 3</p>
</div>
<div id="IT4" class="item">
<p>item 4</p>
</div>
<div class="sub">
<p>subitem 4</p>
</div>
<div id="IT5" class="item">
<p>item 5</p>
</div>
<div class="sub">
<p>subitem 5</p>
</div>
</body>
</html>
I expect to click an item from the array and show (change to "display:flex;") its respective subitem from outside the array.

First of all, I used inline instead of flex. Read here about the display property.
Second, while setting the display, I set click event listener for each item, that changes the display of the nextElementSibling.
var ITEMS = [];
for (var i = 0; i <= 5; i++) {
ITEMS.push("IT" + i);
}
function showitems() {
let all_subs = document.getElementsByClassName('sub');
for (let i = 0; i < ITEMS.length; i++) {
let currentElement = document.getElementById(ITEMS[i]);
currentElement.style.display = "inline";
currentElement.addEventListener('click', function() {
currentElement.nextElementSibling.style.display = "inline";
});
}
}
showitems();
<!DOCTYPE html>
<html>
<head>
<style>
.item,
.sub {
display: none;
}
</style>
</head>
<body>
<div id="IT0" class="item">
<p>item 0</p>
</div>
<div class="sub">
<p>subitem 0</p>
</div>
<div id="IT1" class="item">
<p>item 1</p>
</div>
<div class="sub">
<p>subitem 1</p>
</div>
<div id="IT2" class="item">
<p>item 2</p>
</div>
<div class="sub">
<p>subitem 2</p>
</div>
<div id="IT3" class="item">
<p>item 3</p>
</div>
<div class="sub">
<p>subitem 3</p>
</div>
<div id="IT4" class="item">
<p>item 4</p>
</div>
<div class="sub">
<p>subitem 4</p>
</div>
<div id="IT5" class="item">
<p>item 5</p>
</div>
<div class="sub">
<p>subitem 5</p>
</div>
</body>
</html>

huge amount of whitespace on right side of webpage

Hey guys I've ran into this problem before and posted it on this site. I was recommended overflow-x: hidden to solve the problem. This works for the most part but then i noticed even with that property there's like a 10px scroll still. Now for the most part of this project that wasn't the case it just recently started happening so I took the property off so I could view all of the whitespace whith my dev tools but could't find anything sticking out on the right. Why is this happening? Appreciate the help:)
p.s I have to post some code to post this link for some reason, but its just the html click the link for all my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>El Metate | Mexican Food</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive|Josefin+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif|Kumar+One+Outline|Teko" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Diplomata+SC|Ewert|Sarina|Smokum" rel="stylesheet">
<script src="https://unpkg.com/scrollreveal"></script>
</head>
<body>
<section id="header">
<div class="container">
<div class="nav-btn">
<div class="btn-1"></div>
<div class="btn-2"></div>
<div class="btn-3"></div>
</div>
<div class="side-menu">
<ul>
<i class="fas fa-times"></i>
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Hours</li>
<li>Contact</li>
<li>News</li>
</ul>
</div>
<p><span class="auth">Authentic</span><span class="mexi">Mexican</span><span class="food">Food</span></p>
<img src="img/LogoMakr_Oso9xi.png" alt="">
</div>
</section>
<section id="about">
<div class="container">
<div class="line"></div>
<h1>About us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, quis, adipisci! Unde natus quas officiis, earum commodi! Voluptate in modi alias quisquam maiores sunt fugit reprehenderit odio rem obcaecati libero repellat saepe quidem quibusdam impedit labore error velit, possimus necessitatibus. Optio ullam, officiis, sit ipsa fugiat animi voluptas labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, et.</p>
<div class="image-slider">
<i class="fas fa-caret-down left"></i>
<i class="fas fa-caret-down right"></i>
</div>
</div>
</section>
<section id="menu">
<div class="container">
<div class="left-border">
<div class="shape-wrap">
<span class="shape-1"></span>
<span class="shape-2"></span>
<span class="shape-3"></span>
<span class="shape-4"></span>
<span class="shape-5"></span>
<span class="shape-6"></span>
<span class="shape-7"></span>
<span class="shape-8"></span>
<span class="shape-9"></span>
<span class="shape-10"></span>
</div>
<div class="shape-wrap" style="top: 385px;">
<span class="shape-1"></span>
<span class="shape-2"></span>
<span class="shape-3"></span>
<span class="shape-4"></span>
<span class="shape-5"></span>
<span class="shape-6"></span>
<span class="shape-7"></span>
<span class="shape-8"></span>
<span class="shape-9"></span>
<span class="shape-10"></span>
</div>
<div class="shape-wrap" style="top: 770px;">
<span class="shape-1"></span>
<span class="shape-2"></span>
<span class="shape-3"></span>
<span class="shape-4"></span>
<span class="shape-5"></span>
<span class="shape-6"></span>
<span class="shape-7"></span>
<span class="shape-8"></span>
<span class="shape-9"></span>
<span class="shape-10"></span>
</div>
<div class="shape-wrap" style="top: 1155px;">
<span class="shape-1"></span>
<span class="shape-2"></span>
<span class="shape-3"></span>
<span class="shape-4"></span>
<span class="shape-5"></span>
<span class="shape-6"></span>
<span class="shape-7"></span>
<span class="shape-8"></span>
<span class="shape-9"></span>
<span class="shape-10"></span>
</div>
<div class="shape-wrap" style="top: 1540px;">
<span class="shape-1"></span>
<span class="shape-2"></span>
<span class="shape-3"></span>
<span class="shape-4"></span>
<span class="shape-5"></span>
<span class="shape-6"></span>
<span class="shape-7"></span>
<span class="shape-8"></span>
<span class="shape-9"></span>
<span class="shape-10"></span>
</div>
<div class="shape-wrap" style="top: 1925px;">
<span class="shape-1"></span>
<span class="shape-2"></span>
<span class="shape-3"></span>
<span class="shape-4"></span>
<span class="shape-5"></span>
<span class="shape-6"></span>
<span class="shape-7"></span>
<span class="shape-8"></span>
<span class="shape-9"></span>
<span class="shape-10"></span>
</div>
<div class="shape-wrap" style="top: 2310px;">
<span class="shape-1"></span>
<span class="shape-2"></span>
<span class="shape-3"></span>
<span class="shape-4"></span>
<span class="shape-5"></span>
<span class="shape-6"></span>
<span class="shape-7"></span>
<span class="shape-8"></span>
<span class="shape-9"></span>
<span class="shape-10"></span>
</div>
</div>
<div class="right-border">
<div class="shape-wrap">
<span class="shape-1"></span>
<span class="shape-2"></span>
<span class="shape-3"></span>
<span class="shape-4"></span>
<span class="shape-5"></span>
<span class="shape-6"></span>
<span class="shape-7"></span>
<span class="shape-8"></span>
<span class="shape-9"></span>
<span class="shape-10"></span>
</div>
<div class="shape-wrap" style="top: 385px;">
<span class="shape-1"></span>
<span class="shape-2"></span>
<span class="shape-3"></span>
<span class="shape-4"></span>
<span class="shape-5"></span>
<span class="shape-6"></span>
<span class="shape-7"></span>
<span class="shape-8"></span>
<span class="shape-9"></span>
<span class="shape-10"></span>
</div>
<div class="shape-wrap" style="top: 770px;">
<span class="shape-1"></span>
<span class="shape-2"></span>
<span class="shape-3"></span>
<span class="shape-4"></span>
<span class="shape-5"></span>
<span class="shape-6"></span>
<span class="shape-7"></span>
<span class="shape-8"></span>
<span class="shape-9"></span>
<span class="shape-10"></span>
</div>
<div class="shape-wrap" style="top: 1155px;">
<span class="shape-1"></span>
<span class="shape-2"></span>
<span class="shape-3"></span>
<span class="shape-4"></span>
<span class="shape-5"></span>
<span class="shape-6"></span>
<span class="shape-7"></span>
<span class="shape-8"></span>
<span class="shape-9"></span>
<span class="shape-10"></span>
</div>
<div class="shape-wrap" style="top: 1540px;">
<span class="shape-1"></span>
<span class="shape-2"></span>
<span class="shape-3"></span>
<span class="shape-4"></span>
<span class="shape-5"></span>
<span class="shape-6"></span>
<span class="shape-7"></span>
<span class="shape-8"></span>
<span class="shape-9"></span>
<span class="shape-10"></span>
</div>
<div class="shape-wrap" style="top: 1925px;">
<span class="shape-1"></span>
<span class="shape-2"></span>
<span class="shape-3"></span>
<span class="shape-4"></span>
<span class="shape-5"></span>
<span class="shape-6"></span>
<span class="shape-7"></span>
<span class="shape-8"></span>
<span class="shape-9"></span>
<span class="shape-10"></span>
</div>
<div class="shape-wrap" style="top: 2310px;">
<span class="shape-1"></span>
<span class="shape-2"></span>
<span class="shape-3"></span>
<span class="shape-4"></span>
<span class="shape-5"></span>
<span class="shape-6"></span>
<span class="shape-7"></span>
<span class="shape-8"></span>
<span class="shape-9"></span>
<span class="shape-10"></span>
</div>
</div>
<h1>Menu</h1>
<div class="line-2"></div>
<div class="vexel-images"></div>
<div class="col-1">
<h3 class="platter">Combination Platters</h3>
<p class="platter-info">Rice & Beans Included</p>
<p class="item item-1">Tostada & Taco</p><span class="price p1"><span class="s1">$</span>6.39</span>
<p class="item item-2">2 Beef Tacos</p><span class="price p2"><span class="s1">$</span>6.39</span>
<p class="item item-3">2 Enchiladas</p><span class="price p3"><span class="s1">$</span>6.39</span>
<p class="item item-4">Tostada & Enchilada</p><span class="price p4"><span class="s1">$</span>6.39</span>
<p class="item item-5">Taco & Enchilada</p><span class="price p5"><span class="s1">$</span>6.39</span>
<p class="item item-6">Burrito & Enchilada</p><span class="price p6"><span class="s1">$</span>6.39</span>
<p class="item item-7">2 Beef Burritos</p><span class="price p7"><span class="s1">$</span>7.45</span>
<p class="item item-8">2 Carne Asada Tacos</p><span class="price p8"><span class="s1">$</span>8.09</span>
<p class="item item-9">Chorizo</p><span class="price p9"><span class="s1">$</span>6.39</span>
<p class="item item-10">Carne Asada</p><span class="price p10"><span class="s1">$</span>8.19</span>
<p class="item item-11">Machaca</p><span class="price p11"><span class="s1">$</span>6.75</span>
<p class="item item-12">Carnitas</p><span class="price p12"><span class="s1">$</span>7.19</span>
<p class="item item-13">2 Fish Tacos</p><span class="price p13"><span class="s1">$</span>6.75</span>
<p class="item item-14">Chiles Rellenos</p><span class="price p14"><span class="s1">$</span>6.95</span>
<p class="item item-15">Red Combo</p><span class="price p15"><span class="s1">$</span>7.95</span>
<p class="item item-16">Green Combo</p><span class="price p16"><span class="s1">$</span>7.05</span>
<p class="item item-17">3 Rolled Tacos w/Guacamole</p><span class="price p17"><span class="s1">$</span>6.75</span>
<p class="item item-18">Chimichanga, Rice & Beans</p><span class="price p18"><span class="s1">$</span>7.05</span>
<p class="item item-19">Carne Asada Burrito</p><span class="price p19"><span class="s1">$</span>7.19</span>
<p class="item item-20">2 Tamales, Rice & Beans</p><span class="price p20"><span class="s1">$</span>7.05</span>
<h3 class="platter plat-4">Tacos</h3>
<p class="platter-info info4tacos">Folded</p>
<p class="item item-21">1 Chicken Taco</p><span class="price p21"><span class="s1">$</span>2.09</span>
<p class="item item-22">1 Beef</p><span class="price p22"><span class="s1">$</span>2.09</span>
<p class="item item-23">1 Carne Asada</p><span class="price p23"><span class="s1">$</span>2.61</span>
<p class="item item-21">1 Fish</p><span class="price p21"><span class="s1">$</span>2.64</span>
<p class="item item-22">1 Carnitas</p><span class="price p22"><span class="s1">$</span>2.64</span>
<p class="item item-23">1 Adobada</p><span class="price p23"><span class="s1">$</span>2.64</span>
<p class="item item-23">1 Cabeza</p><span class="price p23"><span class="s1">$</span>2.64</span>
<p class="platter-info info4tacos">Rolled</p>
<p class="item item-21">3 Plain with Cheese</p><span class="price p21"><span class="s1">$</span>2.39</span>
<p class="item item-22">3 Cheese and Guacamole</p><span class="price p22"><span class="s1">$</span>2.89</span>
<p class="item item-23">3 Chicken w/Cheese and Guacamole</p><span class="price p23"><span class="s1">$</span>2.89</span>
<p class="item item-21">3 Tacos w/Cheese and Guacamole</p><span class="price p21"><span class="s1">$</span>3.99</span>
<p class="item item-22">12 Tacos w/Cheese and Guacamole</p><span class="price p22"><span class="s1">$</span>8.99</span>
<h3 class="platter plat-7">Tortas</h3>
<p class="item item-21">Carne Asada</p><span class="price p21"><span class="s1">$</span>2.09</span>
<p class="item item-22">Machaca</p><span class="price p22"><span class="s1">$</span>2.09</span>
<p class="item item-23">Ham</p><span class="price p23"><span class="s1">$</span>2.61</span>
<p class="item item-21">Chorizo</p><span class="price p21"><span class="s1">$</span>2.64</span>
<p class="item item-22">Chicken</p><span class="price p22"><span class="s1">$</span>2.64</span>
<p class="item item-23">Carnitas</p><span class="price p23"><span class="s1">$</span>2.64</span>
<p class="item item-23">Fish</p><span class="price p23"><span class="s1">$</span>2.64</span>
<h3 class="platter plat-8">Breakfast Served Everyday</h3>
<p class="platter-info info4breakfast">6am to 11am</p>
<h3 class="platter plat-9">Breakfast Plates</h3>
<p class="item item-21">Huevos Racheros</p><span class="price p21"><span class="s1">$</span>6.29</span>
<p class="item item-22">Steaks Racheros</p><span class="price p22"><span class="s1">$</span>6.95</span>
<p class="item item-22">Scrambled Eggs w/Ham</p><span class="price p22"><span class="s1">$</span>5.95</span>
<p class="item item-22">Scrambled Eggs w/Suasage</p><span class="price p22"><span class="s1">$</span>5.95</span>
<p class="item item-22">Chorizo Omelette</p><span class="price p22"><span class="s1">$</span>6.95</span>
<p class="item item-22">Carne Asada Omelette</p><span class="price p22"><span class="s1">$</span>7.95</span><p class="item item-22">Scrambled Eggs w/Ham</p><span class="price p22"><span class="s1">$</span>5.95</span>
<p class="item item-22">Eggs and Bacon</p><span class="price p22"><span class="s1">$</span>5.95</span>
</div>
<div class="col-2">
<h3 class="platter plat-2">Enchiladas</h3>
<p class="item item-21">2 Cheese</p><span class="price p21"><span class="s1">$</span>4.55</span>
<p class="item item-22">2 Beef</p><span class="price p22"><span class="s1">$</span>4.65</span>
<p class="item item-23">2 Chicken</p><span class="price p23"><span class="s1">$</span>3.55</span>
<h3 class="platter plat-3">Side Orders</h3>
<p class="item item-24">Carne Asada Fries</p><span class="price p24"><span class="s1">$</span>4.55</span>
<p class="item item-25">Jalepenos</p><span class="price p25"><span class="s1">$</span>4.65</span>
<p class="item item-26">Quesadilla</p><span class="price p26"><span class="s1">$</span>3.55</span>
<p class="item item-27">Ham Quesadilla</p><span class="price p27"><span class="s1">$</span>4.55</span>
<p class="item item-28">1/2 Pint of Beans</p><span class="price p28"><span class="s1">$</span>4.65</span>
<p class="item item-29">1/2 Pint of rice</p><span class="price p29"><span class="s1">$</span>3.55</span>
<p class="item item-30">Ham Quesadilla</p><span class="price p30"><span class="s1">$</span>4.55</span>
<p class="item item-31">Super Nachos</p><span class="price p31"><span class="s1">$</span>4.65</span>
<p class="item item-32">1 Tamale</p><span class="price p32"><span class="s1">$</span>3.55</span>
<p class="item item-33">Extra Cheese Quacamole</p><span class="price p33"><span class="s1">$</span>4.55</span>
<p class="item item-34">Supreme Quesadilla</p><span class="price p34"><span class="s1">$</span>4.65</span>
<p class="item item-35">Chips and Quacamole</p><span class="price p35"><span class="s1">$</span>3.55</span>
<p class="item item-36">1 Chiles Rellano</p><span class="price p36"><span class="s1">$</span>4.55</span>
<p class="item item-37">Chips & Salsa</p><span class="price p37"><span class="s1">$</span>4.65</span>
<p class="item item-38">Churros</p><span class="price p38"><span class="s1">$</span>3.55</span>
<p class="item item-39">Burrito Asada R&B</p><span class="price p39"><span class="s1">$</span>4.55</span>
<p class="item item-40">1/2 Pint of Beans</p><span class="price p40"><span class="s1">$</span>4.65</span>
<p class="item item-41">1/2 Pint of rice</p><span class="price p41"><span class="s1">$</span>3.55</span>
<h3 class="platter plat-5">Tostadas</h3>
<p class="item item-38">Beef</p><span class="price p38"><span class="s1">$</span>2.85</span>
<p class="item item-39">Chicken</p><span class="price p39"><span class="s1">$</span>2.85</span>
<p class="item item-40">Bean</p><span class="price p40"><span class="s1">$</span>2.49</span>
<h3 class="platter plat-6">Burritos</h3>
<p class="item item-38">Red Chili</p><span class="price p38"><span class="s1">$</span>4.49</span>
<p class="item item-39">Carne Asada</p><span class="price p39"><span class="s1">$</span>4.90</span>
<p class="item item-40">California</p><span class="price p40"><span class="s1">$</span>4.90</span>
<p class="item item-38">Machaca</p><span class="price p38"><span class="s1">$</span>4.19</span>
<p class="item item-39">Mixed</p><span class="price p39"><span class="s1">$</span>4.19</span>
<p class="item item-40">Beef</p><span class="price p40"><span class="s1">$</span>4.19</span>
<p class="item item-38">Chicken</p><span class="price p38"><span class="s1">$</span>4.19</span>
<p class="item item-39">Beans</p><span class="price p39"><span class="s1">$</span>1.90</span>
<p class="item item-40">Fish</p><span class="price p40"><span class="s1">$</span>4.19</span>
<p class="item item-38">Carnitas</p><span class="price p38"><span class="s1">$</span>4.19</span>
<p class="item item-39">Chimichanga</p><span class="price p39"><span class="s1">$</span>5.85</span>
<p class="item item-40">Chile Relleno</p><span class="price p40"><span class="s1">$</span>4.49</span>
<p class="item item-38">Adobada</p><span class="price p38"><span class="s1">$</span>4.19</span>
<p class="item item-39">Green Chile</p><span class="price p39"><span class="s1">$</span>4.49</span>
<p class="item item-40">Shrimp</p><span class="price p40"><span class="s1">$</span>5.65</span>
<p class="item item-38">Cabeza</p><span class="price p38"><span class="s1">$</span>4.75</span>
<p class="item item-39">Pollo Asado</p><span class="price p39"><span class="s1">$</span>4.75</span>
<h3 class="platter plat-10">Breakfast Burritos</h3>
<p class="item item-21">Suasage & Egg</p><span class="price p21"><span class="s1">$</span>4.09</span>
<p class="item item-22">Ham & Eggs</p><span class="price p22"><span class="s1">$</span>4.09</span>
<p class="item item-22">Bacon & Eggs</p><span class="price p22"><span class="s1">$</span>4.09</span>
<p class="item item-22">Steak & Chorizon</p><span class="price p22"><span class="s1">$</span>4.75</span>
<p class="item item-22">Picodegallo eggs & cheese</p><span class="price p22"><span class="s1">$</span>3.95</span>
<p class="item item-22">Chorizo & Eggs</p><span class="price p22"><span class="s1">$</span>4.85</span>
<p class="item item-22">Chorizo & Eggs</p><span class="price p22"><span class="s1">$</span>4.09</span>
</div>
</div>
</section>
<section id="hours">
<div class="container">
<div class="shape-wrap" style="top: 250px; left: 70px;">
<span class="shape-1"></span>
<span class="shape-2"></span>
<span class="shape-3 move3"></span>
<span class="shape-4"></span>
<span class="shape-5"></span>
<span class="shape-6"></span>
<span class="shape-7"></span>
<span class="shape-8"></span>
<span class="shape-9"></span>
<span class="shape-10 move10"></span>
</div>
<div class="shape-wrap rotate" style="top: 543px; left: -240px;">
<span class="shape-1"></span>
<span class="shape-2"></span>
<span class="shape-3 move3"></span>
<span class="shape-4"></span>
<span class="shape-5"></span>
<span class="shape-6"></span>
<span class="shape-7"></span>
<span class="shape-8"></span>
<span class="shape-9"></span>
<span class="shape-10 move10"></span>
</div>
<h1>Hours</h1>
<div class="hours-line"></div>
<div class="hours-line2"></div>
<div class="grid">
<div class="day">Sunday</div>
<div class="hour">8am - 8pm</div>
<div class="day">Monday</div>
<div class="hour">6am - 10am</div>
<div class="day">Tuesday</div>
<div class="hour">6am - 10am</div>
<div class="day">Wednesday</div>
<div class="hour">6am - 10am</div>
<div class="day">Thursday</div>
<div class="hour">6am - 10am</div>
<div class="day">Friday</div>
<div class="hour">6am - 10am</div>
<div class="day">Saturday</div>
<div class="hour">6am - 10am</div>
</div>
<div class="shape-wrap" style="top: -470px; left: 980px;">
<span class="shape-1"></span>
<span class="shape-2"></span>
<span class="shape-3 move3"></span>
<span class="shape-4"></span>
<span class="shape-5"></span>
<span class="shape-6"></span>
<span class="shape-7"></span>
<span class="shape-8"></span>
<span class="shape-9"></span>
<span class="shape-10 move10"></span>
</div>
<div class="shape-wrap lom" style="top: -175px; left: -90px;">
<span class="shape-1"></span>
<span class="shape-2"></span>
<span class="shape-3 move3"></span>
<span class="shape-4"></span>
<span class="shape-5"></span>
<span class="shape-6"></span>
<span class="shape-7"></span>
<span class="shape-8"></span>
<span class="shape-9"></span>
<span class="shape-10 move10"></span>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
https://jsfiddle.net/s4h52f3w/

You can add overflow: hidden; to #hours, #menu to fix it.
The problem is that the clip-path is making the children of them bigger and positioned weirdly.

We Keep Coding

JavaScript is the programming language of the Web.

my page seems like to be tiny like i zoomed out - javascript

Related

How do you target only a child of a .each function, and not all elements of that class?

Buttons don't work when I place them outside the carousel

Toggle between multiple divs and move text into single block

How to use an element from an ID array to show the next element sibling outside the array? [duplicate]

huge amount of whitespace on right side of webpage

Categories

Resources