Multiple nested tabs - javascript

I'm working on tabs. Multiple tabs on the same page are working fine now I'm trying to add tab inside the tab. Nested Sub tabs default, current active class, is not coming i have tried using $(this).parent() and $(this).closest() in jquery but not achieve the result.Here I was not used any id's because I want multiple tabs on the same page which is coming dynamically. Can anyone point me in the right direction nested tab default active tab and I have added the current class in HTML but because of for each loop current class is removing. How to target only the current parent tab, not sub nested tabs.
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var $mainContainer = $(this);
var $menuContainer = $(this).find('.at-tabs-nav__item');
var $label = $(this).find('.at-tab-__title_text');
var $content = $(this).find('.at-tabs-content__item');
$content.hide();
//adding data attribute
$label.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$($menuContainer[0], $label[0]).addClass('current');
$($content[0]).show();
//Display current tab content
$(this).find('.at-tabs-nav__item').click(function(ele) {
//debugger;
$(this).closest('.at-tabs').find('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-tab-__title_text').addClass('current');
$(this).closest('.at-tabs').find('.at-tabs-content:first > .at-tabs-content__item').hide();
$(this).closest('.at-tabs').find('.at-tabs-content:first > .at-tabs-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show()
});
});
}
atscTabs();
.tab-warp {
width: 500px;
margin: 0 auto;
}
.at-tabs-nav__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tabs-nav {
display: flex;
padding: 28px 0px;
}
a.at-tabs-title {
text-decoration: none;
font-size: 18px;
color: black;
}
.current a.at-tabs-title {
color: #fff;
}
.at-tabs-nav__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-tabs-content {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
/* Vertial tabs */
.at-tabs.at-vertical {
display: flex;
}
.at-vertical .at-tabs-nav {
display: flex;
flex-direction: column;
padding: 28px 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tab-warp">
<div id="at-tabs-c2a3d74" class="at-tabs">
<div class="at-tabs-nav">
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text current">Tab #1</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Tab #2</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Tab #3</span>
</div>
</a>
</div>
</div>
<div class="at-tabs-content">
<div class="at-tabs-content__item">
<div id="at-tabs-c2a3d74" class="at-tabs">
<div class="at-tabs-nav">
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text current">Sub Tab #1</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Sub Tab #2</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Sub Tab #3</span>
</div>
</a>
</div>
</div>
<div class="at-tabs-content">
<div class="at-tabs-content__item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
I am item content. Click edit button to change this text. Lorem ipsum dolor sius, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
</div>
</div>
</div>
<div class="at-tabs-content__item">
ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adnec ullamcorper mattis, pulvinar dapibus leo.
</div>
</div>
</div>
click on tabs and again come back to the first tab then nested tab current class is not showing.


The problem is that the find method will find matches in the whole DOM subtree, so when you apply it to a top level tab, it will also match items in the subtabs.
You can solve this by using the children method instead -- sometimes chained to get grandchildren. That way you control at which depth in the DOM tree you want to inspect and modify things.
So change this:
$(this).find('.at-tabs-nav__item').click(function(ele) {
$(this).closest('.at-tabs').find('.current').removeClass('current');
// ...
to:
$(this).children('.at-tabs-nav').children('.at-tabs-nav__item').click(function(ele) {
$(this).closest('.at-tabs').children('.at-tabs-nav')
.children('.current').removeClass('current')
.children('.current').removeClass('current');
// ...
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var $mainContainer = $(this);
var $menuContainer = $(this).find('.at-tabs-nav__item');
var $label = $(this).find('.at-tab-__title_text');
var $content = $(this).find('.at-tabs-content__item');
$content.hide();
//adding data attribute
$label.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$($menuContainer[0], $label[0]).addClass('current');
$($content[0]).show();
//Display current tab content
$(this).children('.at-tabs-nav').children('.at-tabs-nav__item').click(function(ele) {
//debugger;
$(this).closest('.at-tabs').children('.at-tabs-nav').children('.current').removeClass('current').children('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-tab-__title_text').addClass('current');
$(this).closest('.at-tabs').find('.at-tabs-content:first > .at-tabs-content__item').hide();
$(this).closest('.at-tabs').find('.at-tabs-content:first > .at-tabs-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.tab-warp {
width: 500px;
margin: 0 auto;
}
.at-tabs-nav__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tabs-nav {
display: flex;
padding: 28px 0px;
}
a.at-tabs-title {
text-decoration: none;
font-size: 18px;
color: black;
}
.current a.at-tabs-title {
color: #fff;
}
.at-tabs-nav__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-tabs-content {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
/* Vertial tabs */
.at-tabs.at-vertical {
display: flex;
}
.at-vertical .at-tabs-nav {
display: flex;
flex-direction: column;
padding: 28px 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-warp">
<div id="at-tabs-c2a3d74" class="at-tabs">
<div class="at-tabs-nav">
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text current">Tab #1</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Tab #2</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Tab #3</span>
</div>
</a>
</div>
</div>
<div class="at-tabs-content">
<div class="at-tabs-content__item">
<div id="at-tabs-c2a3d74" class="at-tabs">
<div class="at-tabs-nav">
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text current">Sub Tab #1</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Sub Tab #2</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Sub Tab #3</span>
</div>
</a>
</div>
</div>
<div class="at-tabs-content">
<div class="at-tabs-content__item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
I am item content. Click edit button to change this text. Lorem ipsum dolor sius, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
</div>
</div>
</div>
<div class="at-tabs-content__item">
ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adnec ullamcorper mattis, pulvinar dapibus leo.
</div>
</div>
</div>

Related

hovering on one element while scrolling

how to hover on one element when scrolling. If you don't know how it's done, please tell me at least what it's called. There is a similar effect here. link
searched on many forums. Because I don't know what it's called, that's why I couldn't find it

If you want to know how it works I leave you my implementation of this feature (not perfect) with some comments
//add event on scroll on the window element and trigger scrollLeftAnimation function
window.addEventListener("scroll", scrollLeftAnimation);
function scrollLeftAnimation() {
//get each element who have scrollLeftAnimation class
let scrollLeftAnimationElements = document.querySelectorAll(".scrollLeftAnimation");
//for each scrollLeftAnimation element, call updateAnimation
scrollLeftAnimationElements.forEach(SectionElement => updateAnimation(SectionElement));
function updateAnimation(SectionElement) {
let ContentElement = SectionElement.querySelector(".animationContent");
//get the top value of element
//for reference see https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
let y = ContentElement.getBoundingClientRect().y;
//get a pourcent of scrolling
let pourcent = Math.abs(SectionElement.getBoundingClientRect().y / (SectionElement.clientHeight - ContentElement.clientHeight));
let ContentOverflowElement = SectionElement.querySelector(".animationContentOverflow");
//get the scroll left available distance
let ContentOverflowElementLeftScrollDistance = ContentOverflowElement.scrollWidth - ContentOverflowElement.clientWidth;
if (y == 0) {
//if element is sticky then scroll left = (max scroll left available distance) * (pourcent of scrolling)
ContentOverflowElement.scrollLeft = ContentOverflowElementLeftScrollDistance * pourcent;
} else if (y > 0) {
//if element is bellow, then scroll left = 0
ContentOverflowElement.scrollLeft = 0;
} else {
//if element is above, then scroll left = max scroll left available distance
ContentOverflowElement.scrollLeft = ContentOverflowElementLeftScrollDistance;
}
}
}
section {
height: 100vh;
}
/*Main CSS*/
section.scrollLeftAnimation {
/*The more the ratio between the height of
.scrollLeftAnimation compared to .animationContent
the more it will be necessary to scroll*/
height: 300vh;
}
section.scrollLeftAnimation .animationContent {
/* using sticky to keep the element inside the window*/
position: sticky;
top: 0;
height: 100vh;
}
.animationContent .animationContentOverflow {
height: 25vh;
overflow: hidden;
}
/*CSS for card element*/
.animationContent ul {
margin: 0;
padding: 0;
height: 100%;
white-space: nowrap;
}
.card {
border: 1px solid black;
height: 100%;
width: 35vw;
background-color: gray;
display: inline-block;
}
.card + .card {
margin-left: 50px;
}
.card:first-child {
margin-left: 25px;
}
.card:last-child {
margin-right: 25px;
}
<section style="background-color: darkorchid;">Regular section 1</section>
<section class="scrollLeftAnimation" style="background-color: deeppink;">
<div class="animationContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. In fermentum posuere urna nec.</p>
<div class="animationContentOverflow">
<ul>
<li class="card">card 1</li>
<li class="card">card 2</li>
<li class="card">card 3</li>
<li class="card">card 4</li>
</ul>
</div>
</div>
</section>
<section style="background-color: violet;">Regular section 4</section>
<section style="background-color: silver;">Regular section 5</section>
<section class="scrollLeftAnimation" style="background-color: peru;">
<div class="animationContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. In fermentum posuere urna nec. Posuere ac ut consequat semper viverra nam libero justo laoreet. Tristique risus nec feugiat in fermentum posuere urna nec tincidunt. Rhoncus dolor purus non enim praesent elementum facilisis leo. Turpis tincidunt id aliquet risus feugiat in ante metus.</p>
<div class="animationContentOverflow">
<ul>
<li class="card">card 1</li>
<li class="card">card 2</li>
<li class="card">card 3</li>
<li class="card">card 4</li>
</ul>
</div>
</div>
</section>
<section style="background-color: orange;">Regular section 7</section>

Bootstrap 4 Carousel with multiple items is not working correctly

I have a Bootstrap 4 card carousel with multiple items and when clicked on next or prev button there is some strange transition effect also in the mobile version buttons are not working.
when the card slides to the next or prev cards seem to be on top of one another or of a sec you can see that there are two cards in transiton.
here is my code
<div id="carouselExampleIndicators" class="carousel slide" data-ride=" false">
<div class="carousel-inner py-5">
<div class="carousel-item active ">
<div class="col-md-4 newscard">
<div class="card card-body">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
</div>
</div>
</div>
<div class="col-md-4 newscard">
<div class="card card-body">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
</div>
</div>
</div>
<div class="col-md-4 newscard">
<div class="card card-body">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item ">
<div class="col-md-4 newscard">
<div class="card card-body">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
</div>
</div>
</div>
<div class="col-md-4 newscard">
<div class="card card-body">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
</div>
</div>
</div>
<div class="col-md-4 newscard">
<div class="card card-body">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <i class="bi bi-chevron-left"></i>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <i class="bi bi-chevron-right"></i>
</a>
</div>
CSS
border: 5px solid red !important;
border-radius: 43px;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
padding: .8rem;
height: 480px;
}
.card-img-top .img-fluid {
border-radius: 30px !important;
margin-bottom: 1.5rem;
}
.newscard .card-body h2{
color: var(--secondaryColor);
text-align: left;
font-size: 1.2rem;
}
.newscard .card-body p{
text-align: left;
font-size: 0.7rem;
}
.bi-chevron-left::before, .bi-chevron-right::before {
content: "\f284";
color: white;
opacity: 1;
background: var(--maincolor);
padding: 5px 15px;
border-radius: 50px;
position: absolute;
}
.bi-chevron-left::before {
left: -10px;
}
.bi-chevron-right::before{
right: -10px !important;
}
.carousel-control-prev, .carousel-control-next{
font-size: 1.5rem;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
background: transparent no-repeat center center !important;
}
.carousel-control-next, .carousel-control-prev{
opacity: 1 !important;
}
.carousel-item.active {
display: flex !important;
}
#media (max-width: 768px) {
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex !important;
}
}
/* display 3 */
#media (min-width: 768px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.333%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.333%);
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{
transform: translateX(0);
}
}
Jquery and JS
$('#recipeCarousel').carousel({
interval :5000
});
$('.carousel .carousel-item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
<script>
(function($) {
"use strict";
$('.next').click(function() {
$('.carousel').carousel('next');
return false;
});
$('.prev').click(function() {
$('.carousel').carousel('prev');
return false;
});
})
</script>

it may be possibility that you have linked the cdn of other than Bootstrap 4 or you can also try Owl Carousel for responsive layout
Bootstrap 4 Carousel code
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<!-- items or elements that will be used in carousel -->
</div>
<div class="carousel-item">
<!-- items or elements that will be used in carousel -->
</div>
<div class="carousel-item">
<!-- items or elements that will be used in carousel -->
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
please check your cdn or compare your code with this one.
I'm suggesting you to use the Boostrap 5 which is upgrated version

Have different <p> tag value show up in a separate div when you click each separate section

long time listener, first time caller. I am trying my hand at making an NHL draft chart, as I do some player evaluation and want a fancy looking place to put it all/I'm having a bit of fun while I learn SASS for the first time (it rocks, btw).
Codepen: https://codepen.io/trjwaugh/pen/abONgLm
$desktop: 1000px;
$padding: 15px;
$borders: 15px;
$margin: 20px;
$logo-clip: polygon(70% 0, 100% 0%, 75% 100%, 40% 100%);
$colors: ( ggold: #FFB81C, gold-light: lighten(#FFB81C, 40%), //buf, cbj, edm, fla, nsh
bblue: #002654, blue-light: lighten(#002654, 40%), ragsblue: #0038A8, ragsblue-light: lighten(#0038A8, 40%), leafblue: #00205B, leafblue-light: lighten(#00205B, 40%), rred: #C8102E, red-light: lighten(#C8102E, 40%), oorange: #F74902, orange-light: lighten(#F74902, 40%), starsgreen: #006847, starsgreen-light: lighten(#006847, 40%), yotesred: #8C2633, yotesred-light: lighten(#8C2633, 40%), burg: #6F263D, burg-light: ligthen(#6F263D, 40%), black: black);
#function color($color-name) {
#return map-get($map: $colors, $key: $color-name);
}
#mixin desktop {
#media (max-width: #{$desktop}) {
#content;
}
}
body,
html {
height: 100%;
font-family: 'Montserrat', sans-serif;
}
img {
margin: 0;
display: block;
width: 78px;
height: 80px;
float: right;
}
body {
margin: 0;
#bg {
clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
#include desktop {
//suff to change re: responsiveness
}
}
}
main {
#container {
white-space: nowrap;
text-align: center;
}
section#sticky-main {
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
width: 100%;
margin: 1em auto;
padding: $padding;
border-radius: $borders;
background-size: 100% 100%, 0% 100%;
box-shadow: 0 10px 30px rgba(0, 0, 0, $alpha: 0.2);
}
section#card {
margin: 1em auto;
float: right;
padding: $padding;
border-radius: $borders;
width: 100%;
background-size: 100% 100%, 0% 100%;
box-shadow: 0 10px 30px rgba(0, 0, 0, $alpha: 0.2);
-webkit-transition: .5s ease-in;
-moz-transition: .5s ease-in;
-o-transition: .5s ease-in;
transition: .5s ease-in;
ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
li {
strong {
display: inline-block;
margin-left: max(40px);
margin-top: 10px;
}
img {
display: block;
width: 138px;
height: 130px;
float: right;
#include desktop {
//suff to change re: responsiveness
width: 100px;
height: 92px;
}
}
}
}
#report.one {
margin: 1em auto;
float: right;
padding: $padding;
margin-right: 20px;
border-radius: $borders;
background-size: 100% 100%, 0% 100%;
box-shadow: 0 10px 30px rgba(0, 0, 0, $alpha: 0.2);
width: 90%;
background-color: white !important;
color: black !important;
}
#report.one:hover {
display: block;
}
}
section#card.gold:hover {
background-color: color(ggold);
color: white;
background-size: 80.1% 10%, 20% 10%;
box-shadow: 0 10px 30px rgba(100, 0, 0, $alpha: 0.2);
}
section#card.blue:hover {
background-color: color(bblue);
color: white;
background-size: 80.1% 10%, 20% 10%;
box-shadow: 0 10px 30px rgba(100, 0, 0, $alpha: 0.2);
}
section#card.red:hover {
background-color: color(rred);
color: white;
background-size: 80.1% 10%, 20% 10%;
box-shadow: 0 10px 30px rgba(100, 0, 0, $alpha: 0.2);
}
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/main.css">
<script src="https://kit.fontawesome.com/9969435508.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<main>
<div class="container">
<div class="row">
<div class="col-sm-4">
<section id="sticky-main">
<div id="content"></div>
</section>
</div>
<div class="col-sm-8">
<section onmouseover="hover()" id="card" class="gold">
<ul>
<li>
<img src="logos/anaheim-ducks.png">
</li>
<br>
<li>
<strong>Bigname McLongnamington III <i style ="color: green;" class="far fa-arrow-alt-circle-up"></i></strong>
</li>
<li>
<strong>Kitchener Rangers (OHL)</strong>
</li>
<li>
<strong>height weight</strong>
</li>
</ul>
</section>
<section onclick="showReport()" id="card" class="red">
<ul>
<li>
<img src="logos/chicago-blackhawks-logo.png">
</li>
<br>
<li>
<strong>Bigname McLongnamington III <i style ="color: green;" class="far fa-arrow-alt-circle-up"></i></strong>
</li>
<li>
<strong>Kitchener Rangers (OHL)</strong>
</li>
<li>
<strong>height weight</strong>
</li>
</ul>
<div id="report-two" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan est massa, quis hendrerit augue volutpat sed. Nam sit amet bibendum enim, eget suscipit odio. Donec risus odio, bibendum eget ipsum eget, bibendum congue est. Sed
maximus lorem sit amet nibh condimentum viverra. Vestibulum sed quam fringilla, rhoncus eros et, imperdiet tellus. In nec nibh sollicitudin, pharetra purus vitae, consectetur mi. Curabitur laoreet finibus placerat.</p>
</div>
</section>
<section onclick="showReport()" id="card" class="blue">
<ul>
<li>
<img src="logos/columbus -bluejackets-logo.png">
</li>
<br>
<li>
<strong>Bigname McLongnamington III <i style ="color: green;" class="far fa-arrow-alt-circle-up"></i></strong>
</li>
<li>
<strong>Kitchener Rangers (OHL)</strong>
</li>
<li>
<strong>height weight</strong>
</li>
</ul>
<div id="report" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan est massa, quis hendrerit augue volutpat sed. Nam sit amet bibendum enim, eget suscipit odio. Donec risus odio, bibendum eget ipsum eget, bibendum congue est. Sed
maximus lorem sit amet nibh condimentum viverra. Vestibulum sed quam fringilla, rhoncus eros et, imperdiet tellus. In nec nibh sollicitudin, pharetra purus vitae, consectetur mi. Curabitur laoreet finibus placerat.</p>
</div>
</section>
<section onclick="showReport()" id="card" class="blue">
<ul>
<li>
<img src="logos/columbus -bluejackets-logo.png">
</li>
<br>
<li>
<strong>Bigname McLongnamington III <i style ="color: green;" class="far fa-arrow-alt-circle-up"></i></strong>
</li>
<li>
<strong>Kitchener Rangers (OHL)</strong>
</li>
<li>
<strong>height weight</strong>
</li>
</ul>
<div id="report" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan est massa, quis hendrerit augue volutpat sed. Nam sit amet bibendum enim, eget suscipit odio. Donec risus odio, bibendum eget ipsum eget, bibendum congue est. Sed
maximus lorem sit amet nibh condimentum viverra. Vestibulum sed quam fringilla, rhoncus eros et, imperdiet tellus. In nec nibh sollicitudin, pharetra purus vitae, consectetur mi. Curabitur laoreet finibus placerat.</p>
</div>
</section>
</div>
</div>
</div>
</main>
<!-- Optional JavaScript -->
<script src="script.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
If you look at the Codepen, you can see i have a bunch of sections, all will act as a card that a players draft info will appear, minus a paragraph blurb about them. There are a few things ive tried in terms of accomplishing my goal but essentially I want to be able to click on a players <section onclick="showReport()" id="card"... and have that players paragraph blurb appear in the sticky div on the left, changing based on which section card you click on. right now I have the players paragraph in a p tag within the section just for now, but im open to anything. I have a JS function on click in there for now but what I have tried so far required me to write a seperate hide() for each section (will be 31 total). Im looking for a method that will also allow me to only change the bio info and never have to adjust any code when I want to make edits to my draft chart. I hope I explained myself well enough, please tell me if I need to clarify.
Any help would be highly appreciated!

First, add this to each onclick on sections to get the element itself anytime you click on them.
...
<section onclick="showReport(this)" id="card" class="blue">
...
Then, you can use this (now turned into el variable) to find the text and put into the #content element.
function showReport(el) {
$('#content').text($(el).find('p').text());
}

Search can't display results by 'data-name' in Jquery

I'm building this search below. I want it to be able to filter the search results by data-name. For example if the user hits XL all div's with data-name = "XL" will be shown. I can see all results but the other buttons are not displaying any results.
The inputfield is working fine. The problem is in the buttons.
here is a link to a fiddle
here is my code
$(document).ready(function(){
$("#searchInput").on("keyup", function(){
var value = $(this).val().toLowerCase();
$("#searchFilterDiv div.SearchItem").filter(function(){
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
var btns = $('.filter-button').click(function(){
if($(this).data('name') == 'all'){
$('#searchFilterDiv div.SearchItem').fadeIn(450);
}else{
var otherData = $(this).data('name');
$('#searchFilterDiv div.SearchItem.search-results-box-item').not(otherData).hide();
}
btns.removeClass('active');
$(this).addClass('active');
})
});
.service-boxes-centered li {
min-width: 100px;
padding-top: .8em;
padding-bottom: .8em;
padding-left: 1em;
padding-right: 1em;
font-size: .9em;
margin: .3em;
color: #4b4b4b;
text-decoration: none;
flex-grow: 1;
text-align: center;
}
.service-box-item {
border: 1px solid #979797;
font-size: .8em;
font-weight: 500;
cursor: pointer;
display: inline-block;
text-align: center;
}
.search-results-box-item {
border: 1px solid lightgrey;
margin-bottom: 2em;
padding: 20px;
font-size: .8em;
line-height: 1.3em;
text-align: left;
cursor: pointer;
}
.service-box-item.filter-button.active{
border: red 1px solid !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container form-container">
<div class="row search-form-item">
<div class="col-md-12 searchtext-input">
<h3>search by size: </h3>
<label for="searchInput" class="sr-only">Search field</label>
<input class="form-control" id="searchInput" type="text">
<div class="row service-boxes-centered">
<ul>
<li class=" service-box-item filter-button active" data-name="all">All</li>
<li class=" service-box-item filter-button" data-name="XS">XS</li>
<li class=" service-box-item filter-button" data-name="S">S</li>
<li class=" service-box-item filter-button" data-name="M">M</li>
<li class=" service-box-item filter-button" data-name="L">L</li>
<li class=" service-box-item filter-button" data-name="XL">XL</li>
<li class=" service-box-item filter-button" data-name="2XL">2XL</li>
<li class=" service-box-item filter-button" data-name="3XL">3XL</li>
</ul>
</div>
</div>
</div>
<div class="container" id="searchFilterDiv">
<div class="row">
<div class="SearchItem search-results-box-item" style="padding-bottom: 2em; display: block;" data-name="M, XL, S, 2XL">
<h3>flipside</h3>
<p>Vivamus viverra libero sed mi vehicula euismod. Nullam mauris dolor, hendrerit non lorem nec, vehicula dapibus nisl. In posuere est lectus, consequat tempus velit laoreet ut.</p>
<p>M</p>
<p>XL</p>
<p>S</p>
<p>2XL</p>
<br>
</div>
<div class="SearchItem search-results-box-item" style="padding-bottom: 2em; display: block;" data-name="M, S">
<h3>frontside</h3>
<p>Vivamus viverra libero sed mi vehicula euismod. Nullam mauris dolor, hendrerit non lorem nec, vehicula dapibus nisl. In posuere est lectus, consequat tempus velit laoreet ut.</p>
<p>M</p>
<p>S</p>
<br>
</div>
<div class="SearchItem search-results-box-item" style="padding-bottom: 2em; display: block;" data-name="S, XS">
<h3>leftside</h3>
<p>Vivamus viverra libero sed mi vehicula euismod. Nullam mauris dolor, hendrerit non lorem nec, vehicula dapibus nisl. In posuere est lectus, consequat tempus velit laoreet ut.</p>
<p>S</p>
<p>XS</p>
<br>
</div>
</div>
</div>

This way you can iterate on all your data & look for the data-name you want.
var btns = $('.filter-button').click(function(){
if($(this).data('name') == 'all'){
$('#searchFilterDiv div.SearchItem').fadeIn(450);
}else{
var name = $(this).data('name');
$('#searchFilterDiv div.SearchItem.search-results-box-item').each(function(i, obj) {
var names = $(obj).data('name').split(/\s*,\s*/);
if($.inArray(name,names) === -1)
$(obj).hide();
else
$(obj).show();
});
}
btns.removeClass('active');
$(this).addClass('active');
})

First you are using inline style with html, that will block overriding style unless important is used.
Secondly on keyup get the data-name , from each of the div and use includes to check if it contains the searched term. Also trying to convert the case since x and X will be treated differently
Create a separate function toggleDiDisplay to hide the relevant div since search and button click will do same function. This will prevent code duplication.
You may fine tune the function by and show all div if nothing is matched
$(document).ready(function() {
$("#searchInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
toggleDiDisplay(value)
});
var btns = $('.filter-button').click(function() {
var getButtonDataName = $(this).data('name').toLowerCase();
if (getButtonDataName === 'all') {
$('#searchFilterDiv div.SearchItem').fadeIn(450);
} else {
toggleDiDisplay(getButtonDataName)
}
btns.removeClass('active');
$(this).addClass('active');
})
});
function toggleDiDisplay(value) {
console.log(value)
$("#searchFilterDiv div.SearchItem").each(function(i, v) {
if (!$(this).data('name').toLowerCase().includes(value)) {
$(this).addClass('hide')
}
})
}
.service-boxes-centered li {
min-width: 100px;
padding-top: .8em;
padding-bottom: .8em;
padding-left: 1em;
padding-right: 1em;
font-size: .9em;
margin: .3em;
color: #4b4b4b;
text-decoration: none;
flex-grow: 1;
text-align: center;
}
.service-box-item {
border: 1px solid #979797;
font-size: .8em;
font-weight: 500;
cursor: pointer;
display: inline-block;
text-align: center;
}
.search-results-box-item {
border: 1px solid lightgrey;
margin-bottom: 2em;
padding: 20px;
font-size: 0.8em;
line-height: 1.3em;
text-align: left;
cursor: pointer;
}
.service-box-item.filter-button.active {
border: red 1px solid !important;
}
.hide {
display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container form-container">
<div class="row search-form-item">
<div class="col-md-12 searchtext-input">
<h3>search by size: </h3>
<label for="searchInput" class="sr-only">Search field</label>
<input class="form-control" id="searchInput" type="text">
<div class="row service-boxes-centered">
<ul>
<li class=" service-box-item filter-button active" data-name="all">All</li>
<li class=" service-box-item filter-button" data-name="XS">XS</li>
<li class=" service-box-item filter-button" data-name="S">S</li>
<li class=" service-box-item filter-button" data-name="M">M</li>
<li class=" service-box-item filter-button" data-name="L">L</li>
<li class=" service-box-item filter-button" data-name="XL">XL</li>
<li class=" service-box-item filter-button" data-name="2XL">2XL</li>
<li class=" service-box-item filter-button" data-name="3XL">3XL</li>
</ul>
</div>
</div>
</div>
<div class="container" id="searchFilterDiv">
<div class="row">
<div class="SearchItem search-results-box-item" style="padding-bottom: 2em; display: block;" data-name="M, XL, S, 2XL">
<h3>flipside</h3>
<p>Vivamus viverra libero sed mi vehicula euismod. Nullam mauris dolor, hendrerit non lorem nec, vehicula dapibus nisl. In posuere est lectus, consequat tempus velit laoreet ut.</p>
<p>M</p>
<p>XL</p>
<p>S</p>
<p>2XL</p>
<br>
</div>
<div class="SearchItem search-results-box-item" style="padding-bottom: 2em; display: block;" data-name="M, S">
<h3>frontside</h3>
<p>Vivamus viverra libero sed mi vehicula euismod. Nullam mauris dolor, hendrerit non lorem nec, vehicula dapibus nisl. In posuere est lectus, consequat tempus velit laoreet ut.</p>
<p>M</p>
<p>S</p>
<br>
</div>
<div class="SearchItem search-results-box-item" style="padding-bottom: 2em; display: block;" data-name="3XL">
<h3>frontside</h3>
<p>Vivamus viverra libero sed mi vehicula euismod. Nullam mauris dolor, hendrerit non lorem nec, vehicula dapibus nisl. In posuere est lectus, consequat tempus velit laoreet ut.</p>
<p>3XL</p>
<br>
</div>
</div>
</div>

Use loop. Get all the elements with class SearchItem.search-results-box-item and apply loop to see whether each elements data-name property include the selected button data-name. If it is present then show else hide.
$(document).ready(function() {
$("#searchInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#searchFilterDiv div.SearchItem").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
var btns = $('.filter-button').click(function() {
if ($(this).data('name') == 'all') {
$('#searchFilterDiv div.SearchItem').fadeIn(450);
} else {
const size = $(this).data('name');
$('.SearchItem.search-results-box-item').each((i, ele) => {
const dataNameArr = $(ele).attr('data-name').split(',').map(e => e.trim());
const matchedEles = dataNameArr.filter(name => name == size);
if (matchedEles.length > 0)
$(ele).show();
else
$(ele).hide();
});
}
btns.removeClass('active');
$(this).addClass('active');
})
});
.service-boxes-centered li {
min-width: 100px;
padding-top: .8em;
padding-bottom: .8em;
padding-left: 1em;
padding-right: 1em;
font-size: .9em;
margin: .3em;
color: #4b4b4b;
text-decoration: none;
flex-grow: 1;
text-align: center;
}
.service-box-item {
border: 1px solid #979797;
font-size: .8em;
font-weight: 500;
cursor: pointer;
display: inline-block;
text-align: center;
}
.search-results-box-item {
border: 1px solid lightgrey;
margin-bottom: 2em;
padding: 20px;
font-size: .8em;
line-height: 1.3em;
text-align: left;
cursor: pointer;
}
.service-box-item.filter-button.active {
border: red 1px solid !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container form-container">
<div class="row search-form-item">
<div class="col-md-12 searchtext-input">
<h3>search by size: </h3>
<label for="searchInput" class="sr-only">Search field</label>
<input class="form-control" id="searchInput" type="text">
<div class="row service-boxes-centered">
<ul>
<li class=" service-box-item filter-button active" data-name="all">All</li>
<li class=" service-box-item filter-button" data-name="XS">XS</li>
<li class=" service-box-item filter-button" data-name="S">S</li>
<li class=" service-box-item filter-button" data-name="M">M</li>
<li class=" service-box-item filter-button" data-name="L">L</li>
<li class=" service-box-item filter-button" data-name="XL">XL</li>
<li class=" service-box-item filter-button" data-name="2XL">2XL</li>
<li class=" service-box-item filter-button" data-name="3XL">3XL</li>
</ul>
</div>
</div>
</div>
<div class="container" id="searchFilterDiv">
<div class="row">
<div class="SearchItem search-results-box-item" style="padding-bottom: 2em; display: block;" data-name="M, XL, S, 2XL">
<h3>flipside</h3>
<p>Vivamus viverra libero sed mi vehicula euismod. Nullam mauris dolor, hendrerit non lorem nec, vehicula dapibus nisl. In posuere est lectus, consequat tempus velit laoreet ut.</p>
<p>M</p>
<p>XL</p>
<p>S</p>
<p>2XL</p>
<br>
</div>
<div class="SearchItem search-results-box-item" style="padding-bottom: 2em; display: block;" data-name="M, S">
<h3>frontside</h3>
<p>Vivamus viverra libero sed mi vehicula euismod. Nullam mauris dolor, hendrerit non lorem nec, vehicula dapibus nisl. In posuere est lectus, consequat tempus velit laoreet ut.</p>
<p>M</p>
<p>S</p>
<br>
</div>
<div class="SearchItem search-results-box-item" style="padding-bottom: 2em; display: block;" data-name="3XL">
<h3>frontside</h3>
<p>Vivamus viverra libero sed mi vehicula euismod. Nullam mauris dolor, hendrerit non lorem nec, vehicula dapibus nisl. In posuere est lectus, consequat tempus velit laoreet ut.</p>
<p>3XL</p>
<br>
</div>
</div>
</div>

side by side Inline-block divs, last one aligned in the middle wrongly

I'm aligning responsive divs side by side vertically in pairs. I'm using inline-block instead of floats. I cannot use flex btw.
In the example below I have 5 divs, but the last one (div5) goes in the middle instead of aligning to the left. I cannot understand why.
Any suggestion?
What happening is:
div1 div2
div3 div4
div5
instead of:
div1 div2
div3 div4
div5
The CSS and HTML:
div-container{
margin: 0 auto;
width: 95%;
}
div{
display: inline-block;
width: 48%;
margin-right: 4%;
margin-bottom: 4%;
}
div:nth-child(2n+2) {
margin-right: 0;
}
<div class="div-container"><div>
<div class="image-box">
<a href="#" title="tile">
<img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
</a>
</div>
<div class="content-box">
<div class="text-box">
<a href="#" title="card">
<h3>Hea</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
</div>
</div>
</div>
<div>
<div class="image-box">
<a href="#" title="tile">
<img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
</a>
</div>
<div class="content-box">
<div class="text-box">
<a href="#" title="card">
<h3>Hea</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
</div>
</div>
</div>
<div>
<div class="image-box">
<a href="#" title="tile">
<img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
</a>
</div>
<div class="content-box">
<div class="text-box">
<a href="#" title="card">
<h3>Hea</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
</div>
</div>
</div>
<div>
<div class="image-box">
<a href="#" title="tile">
<img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
</a>
</div>
<div class="content-box">
<div class="text-box">
<a href="#" title="card">
<h3>Hea</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
</div>
</div>
</div>
<div>
<div class="image-box">
<a href="#" title="tile">
<img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
</a>
</div>
<div class="content-box">
<div class="text-box">
<a href="#" title="card">
<h3>Hea</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
</div>
</div>
</div>
</div>

Try adding text-align: left; to div-container

Try with this snippet, add text-align:center to the parent div , this will make the last div to be left
.all-box {
width:400px;
margin:0 auto;
text-align:left;
}
.box {
width:49%;
display:inline-block;
height:100px;
background:#666;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="all-box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>

Try removing
margin-right: 4%;
margin-bottom: 4%;
for div tag

Categories