Where is the overflow? - javascript

In the following code, I want the div named "buttons_wrapper" to scrolling when the size of the screen is smaller than all elements of the page, but doesn't work. I have an almost the same page but it works perfectly. What's the wrong with it?
Sorry for my bad english.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
<style>
body{
background-color: #bfbfbf;
overflow: hidden;
}
#buttons_wrapper{
margin: 0 auto;
padding: 25px 0 25px 0;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
#ad_banner{
position: fixed;
overflow: hidden;
bottom: 0;
}
.top_bot_space{
margin-top: 10px;
margin-bottom: 10px;
}
.my-btn{
background-color: #000;
color: #00FFF6;
border-color: #00FFF6;
font-weight: bold;
}
.my-btn:hover{
background-color: #000;
color: #F82F5F;
border-color: #F82F5F;
}
</style>
</head>
<body>
<div id="logo">
<img src="images/logo.png" class="img-responsive" />
</div>
<div id="buttons_wrapper">
<div class='container text-center top_bot_space'>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
<a id="website" href="#" class="btn my-btn btn-lg btn-block"><i class="fa fa-lg fa-globe"></i> webpage</a>
</div>
</div>
<div class='container text-center top_bot_space'>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
<a id="website" href="#" class="btn my-btn btn-lg btn-block"><i class="fa fa-lg fa-globe"></i> webpage</a>
</div>
</div>
<div class='container text-center top_bot_space'>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
<a id="website" href="#" class="btn my-btn btn-lg btn-block"><i class="fa fa-lg fa-globe"></i> webpage</a>
</div>
</div>
<div class='container text-center top_bot_space'>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
<a id="website" href="#" class="btn my-btn btn-lg btn-block"><i class="fa fa-lg fa-globe"></i> webpage</a>
</div>
</div>
<div class='container text-center top_bot_space'>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
<a id="website" href="#" class="btn my-btn btn-lg btn-block"><i class="fa fa-lg fa-globe"></i> webpage</a>
</div>
</div>
<div class='container text-center top_bot_space'>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
<a id="website" href="#" class="btn my-btn btn-lg btn-block"><i class="fa fa-lg fa-globe"></i> webpage</a>
</div>
</div>
</div>
<div id="ad_banner">
<script type="text/javascript" src="somescript.js"></script>
</div>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
var body_height = $("body").outerHeight();
var logo_height = $("#logo").outerHeight();
var ad_banner_height = $("#ad_banner").outerHeight();
var buttons_wrapper_height = body_height - logo_height - ad_banner_height;
$("#buttons_wrapper").css("height", buttons_wrapper_height + "px");
</script>
</body>


EDIT
Based on your additional explanation, a viewport-based height needs to be set on <body>, to avoid the body height being determined by its content. Like so:
body { height: 100vh; }
Updated Fiddle
Original Answer
The issue seems to be with vertical scroll, because you currently have overflow: hidden set on your <body>. So on a phone with a shorter screen, you wouldn't be able to scroll down. Change that to overflow-x: hidden if you'd like to keep preventing horizontal scroll, and you should be good.
Fiddle

Related

Hover on inside element and change whole div background color

I'm trying to achieve when hover one of it child element then change the main div background with class name search-block. The issue is that I have multiple blocks so it's changing the background of every block which I don't want. This is my code:
$('.btn').hover(function() {
$('.search-block').addClass('search-boxshadow');
}, function() {
$('.search-block').removeClass('search-boxshadow')
});
.search-boxshadow {
background-color: red;
transition: 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row-eq-height search-block pers-load">
<div class="col-lg-12 add flush col-sm-12 col-xs-12">
<div class="tablerow">
<div class="tablecell">
<div class="col-lg-12 col-sm-12 col-xs-12">
<blockquote>COnatct</blockquote>
<span>05/07/2018</span>
<a class="btn hidden-xs" href="#">PRIMARY</a>
</div>
</div>
</div>
</div>
</div>
<div class="row-eq-height search-block pers-load">
<div class="col-lg-12 add flush col-sm-12 col-xs-12">
<div class="tablerow">
<div class="tablecell">
<div class="col-lg-12 col-sm-12 col-xs-12">
<blockquote>COnatct</blockquote>
<span>05/07/2018</span>
<a class="btn hidden-xs" href="#">PRIMARY</a>
</div>
</div>
</div>
</div>
</div>

To fix this you need to use DOM traversal to find the parent .search-block of the element which was hovered. To do that in jQuery you can use closest().
Also note that you can make the code more succinct by providing a single handler function to hover() which runs under both mouseenter and mouseleave events and call toggleClass() in both cases. Try this:
$('.btn').hover(function() {
$(this).closest('.search-block').toggleClass('search-boxshadow');
});
.search-boxshadow {
background-color: red;
transition: 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row-eq-height search-block pers-load">
<div class="col-lg-12 add flush col-sm-12 col-xs-12">
<div class="tablerow">
<div class="tablecell">
<div class="col-lg-12 col-sm-12 col-xs-12">
<blockquote>COnatct</blockquote>
<span>05/07/2018</span>
<a class="btn hidden-xs" href="#">PRIMARY</a>
</div>
</div>
</div>
</div>
</div>
<div class="row-eq-height search-block pers-load">
<div class="col-lg-12 add flush col-sm-12 col-xs-12">
<div class="tablerow">
<div class="tablecell">
<div class="col-lg-12 col-sm-12 col-xs-12">
<blockquote>COnatct</blockquote>
<span>05/07/2018</span>
<a class="btn hidden-xs" href="#">PRIMARY</a>
</div>
</div>
</div>
</div>
</div>

To target a specific parent based on className you can do the following:
$('.btn-list').click(function() {
$(this).parents('.parentClass').toggleClass('test')
});

In this particular case you can do it with pure CSS:
.search-block {
position: relative;
z-index: 0;
}
.btn:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
transition: 0.5s;
}
.btn:hover::before {
background-color: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row-eq-height search-block pers-load">
<div class="col-lg-12 add flush col-sm-12 col-xs-12">
<div class="tablerow">
<div class="tablecell">
<div class="col-lg-12 col-sm-12 col-xs-12">
<blockquote>COnatct</blockquote>
<span>05/07/2018</span>
<a class="btn " href="#">PRIMARY</a>
</div>
</div>
</div>
</div>
</div>
<div class="row-eq-height search-block pers-load">
<div class="col-lg-12 add flush col-sm-12 col-xs-12">
<div class="tablerow">
<div class="tablecell">
<div class="col-lg-12 col-sm-12 col-xs-12">
<blockquote>COnatct</blockquote>
<span>05/07/2018</span>
<a class="btn" href="#">PRIMARY</a>
</div>
</div>
</div>
</div>
</div>
</div>

jQuery Find closest element not working

HTML:
$(document).on('click', '.Addtocart button', function(event){
alert($(this).closest('.shopping_cart').data('item'));
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-4 col-md-3 wow fadeInUp animated animated" style="visibility: visible; animation-name: fadeInUp; margin-bottom: 15px;">
<div class="products">
<div class="product">
<div class="product-image image_slider">
<div class="image">
<a href="http://vsss.co.in/index.php/Detail/view/84"><img src="http://vsss.co.in/assets/images/No_image.png" alt="" class="slide_active" data-number="0" style="height: 100%; width: auto; max-width: 100%; max-height: 251px; display: inline;">
<div style="position: absolute;bottom:97px; right:0px">
<button class="btn btn-primary icon transparent shopping_cart" data-item="84" data-toggle="dropdown" type="button"> <i class="fa fa-shopping-cart" style="font-size: 22px"></i> </button>
</div>
</a>
</div>
</div>
<div class="product-info text-left">
<h3 class="name">2048 TWINKLE POUCH</h3>
<h3 class="price"><i class="fa fa-inr" aria-hidden="true"></i>0/-</h3> </div>
<div class="product-cart text-left">
<div class="row">
<div class="col-md-12 Addtocart">
<div style="width:40%;float: left;">
<select>
<option value="11" data-unit_value="1">Pc</option>
</select>
</div>
<div style="width:40%;float: left;">
<input type="text" placeholder="Quantity"> </div>
<div style="width:20%;float: left;">
<button class="btn btn-primary icon transparent" type="button"> OK </button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hello everyone as you can see I am looking for data-item value when user clicking on Addtocart button that located in class shopping_cart but it showing undefined. How can I solve this issue? why it finding the element.

Based on your markup, you need to go further up to .product class and then find its shopping_cart
alert($(this).closest( '.product' ).find( ".shopping_cart" ).data( 'item' ));
Demo
$(document).on('click', '.Addtocart button', function(event){
alert($(this).closest('.product').find(".shopping_cart").data('item'));
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-4 col-md-3 wow fadeInUp animated animated" style="visibility: visible; animation-name: fadeInUp; margin-bottom: 15px;">
<div class="products">
<div class="product">
<div class="product-image image_slider">
<div class="image">
<a href="http://vsss.co.in/index.php/Detail/view/84"><img src="http://vsss.co.in/assets/images/No_image.png" alt="" class="slide_active" data-number="0" style="height: 100%; width: auto; max-width: 100%; max-height: 251px; display: inline;">
<div style="position: absolute;bottom:97px; right:0px">
<button class="btn btn-primary icon transparent shopping_cart" data-item="84" data-toggle="dropdown" type="button"> <i class="fa fa-shopping-cart" style="font-size: 22px"></i> </button>
</div>
</a>
</div>
</div>
<div class="product-info text-left">
<h3 class="name">2048 TWINKLE POUCH</h3>
<h3 class="price"><i class="fa fa-inr" aria-hidden="true"></i>0/-</h3> </div>
<div class="product-cart text-left">
<div class="row">
<div class="col-md-12 Addtocart">
<div style="width:40%;float: left;">
<select>
<option value="11" data-unit_value="1">Pc</option>
</select>
</div>
<div style="width:40%;float: left;">
<input type="text" placeholder="Quantity"> </div>
<div style="width:20%;float: left;">
<button class="btn btn-primary icon transparent" type="button"> OK </button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Solution:
$(document).on('click', '.Addtocart button', function(event){
alert($(this).parents().find('.shopping_cart').data('item'));
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-4 col-md-3 wow fadeInUp animated animated" style="visibility: visible; animation-name: fadeInUp; margin-bottom: 15px;">
<div class="products">
<div class="product">
<div class="product-image image_slider">
<div class="image">
<a href="http://vsss.co.in/index.php/Detail/view/84"><img src="http://vsss.co.in/assets/images/No_image.png" alt="" class="slide_active" data-number="0" style="height: 100%; width: auto; max-width: 100%; max-height: 251px; display: inline;">
<div style="position: absolute;bottom:97px; right:0px">
<button class="btn btn-primary icon transparent shopping_cart" data-item="84" data-toggle="dropdown" type="button"> <i class="fa fa-shopping-cart" style="font-size: 22px"></i> </button>
</div>
</a>
</div>
</div>
<div class="product-info text-left">
<h3 class="name">2048 TWINKLE POUCH</h3>
<h3 class="price"><i class="fa fa-inr" aria-hidden="true"></i>0/-</h3> </div>
<div class="product-cart text-left">
<div class="row">
<div class="col-md-12 Addtocart">
<div style="width:40%;float: left;">
<select>
<option value="11" data-unit_value="1">Pc</option>
</select>
</div>
<div style="width:40%;float: left;">
<input type="text" placeholder="Quantity"> </div>
<div style="width:20%;float: left;">
<button class="btn btn-primary icon transparent" type="button"> OK </button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Try this:
$(document).on('click', '.Addtocart button', function(event) {
alert($(this).closest('.product').find('.shopping_cart').data('item'));
});
This will work!!!

Add a disabled class to letter's filter button when no letter's class in content

My page has albums. I add classes to each album according to first letter of an artist inside the album's div to filter content.
The purpose is to disable a letter's filter button if there is no artist begins with this specific letter.
I try to do something, but of course, it doesn't work, have you any idea?
The relevant code is in the third part of javascript. I have no problem with "Alphabetical filter" and "Scroll to top page".
// Disabled button if no artist begin with specific letter in page
$(document).ready(function(){
$(".filter-button").ready(function(){
var letterAcount = $(".letterA").length;
var letterBcount = $(".letterB").length;
var letterCcount = $(".letterC").length;
var letterDcount = $(".letterD").length;
var letterEcount = $(".letterE").length;
var letterFcount = $(".letterF").length;
var letterGcount = $(".letterG").length;
var letterHcount = $(".letterH").length;
var letterIcount = $(".letterI").length;
var letterJcount = $(".letterJ").length;
var letterKcount = $(".letterK").length;
var letterLcount = $(".letterL").length;
var letterMcount = $(".letterM").length;
var letterNcount = $(".letterN").length;
var letterOcount = $(".letterO").length;
var letterPcount = $(".letterP").length;
var letterQcount = $(".letterQ").length;
var letterRcount = $(".letterR").length;
var letterRcount = $(".letterS").length;
var letterTcount = $(".letterT").length;
var letterUcount = $(".letterU").length;
var letterVcount = $(".letterV").length;
var letterWcount = $(".letterW").length;
var letterXcount = $(".letterX").length;
var letterYcount = $(".letterY").length;
var letterZcount = $(".letterZ").length;
if($letterAcount.length == 0)
$(this).addClass('disabled');
if($letterBcount.length == 0)
$(this).addClass('disabled');
if($letterCcount.length == 0)
$(this).addClass('disabled');
if($letterDcount.length == 0)
$(this).addClass('disabled');
if($letterEcount.length == 0)
$(this).addClass('disabled');
if($letterFcount.length == 0)
$(this).addClass('disabled');
if($letterGcount.length == 0)
$(this).addClass('disabled');
if($letterHcount.length == 0)
$(this).addClass('disabled');
if($letterIcount.length == 0)
$(this).addClass('disabled');
if($letterJcount.length == 0)
$(this).addClass('disabled');
if($letterKcount.length == 0)
$(this).addClass('disabled');
if($letterLcount.length == 0)
$(this).addClass('disabled');
if($letterMcount.length == 0)
$(this).addClass('disabled');
if($letterNcount.length == 0)
$(this).addClass('disabled');
if($letterOcount.length == 0)
$(this).addClass('disabled');
if($letterPcount.length == 0)
$(this).addClass('disabled');
if($letterQcount.length == 0)
$(this).addClass('disabled');
if($letterRcount.length == 0)
$(this).addClass('disabled');
if($letterScount.length == 0)
$(this).addClass('disabled');
if($letterTcount.length == 0)
$(this).addClass('disabled');
if($letterUcount.length == 0)
$(this).addClass('disabled');
if($letterVcount.length == 0)
$(this).addClass('disabled');
if($letterWcount.length == 0)
$(this).addClass('disabled');
if($letterXcount.length == 0)
$(this).addClass('disabled');
if($letterYcount.length == 0)
$(this).addClass('disabled');
if($letterZcount.length == 0)
$(this).addClass('disabled');
});
});
body {
font-family: Arial;
font-size: 14pt;
font-weight: bold;
color: #cc6110;
background-color: #e3e0ce; /* Nenesse 8/17/2017: New color */
background-image: url(images/background-woodenfloor.jpg); /* Nenesse 8/16/2017: New background image */
}
.title {
font-size : 24pt;
font-weight: bold;
color: #cc6110; /* Nenesse 8/16/2017: New color */
}
a {
font-size: 14pt;
color: #285e80; /* Nenesse 8/16/2017: New color instead of #FFFFFF */
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #cc6110;
}
a:hover img#thumbimage {
text-decoration: none;
}
.artist {
/* Nenesse 8/16/2017: New class for different color */
color: #285e80;
font-size:12pt;
font-weight:bold;
}
.album {
/* Nenesse 8/16/2017: new class for different color */
color: #cc6110;
font-size:10pt;
font-weight:bold;
}
.card {
margin-top: 30px;
position: inherit;
}
.filter-button {
font-size: 18px;
border: 1px solid #cc6110;
border-radius: 5px;
text-align: center;
color: #cc6110;
}
.filter-button:hover {
font-size: 18px;
border: 1px solid #cc6110;
border-radius: 5px;
text-align: center;
color: #ffffff;
background: #285e80;
}
.btn.filter-button:after {
background: #285e80;
}
.btn-default:active .filter-button:active {
background: #285e80;
color: white;
}
.btn{
text-transform: uppercase;
position: relative;
transform: translateZ(0px);
transition: all 0.5s ease 0s;
}
.btn:after{
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #fff;
z-index: -1;
transform: scaleX(0);
transform-origin: 100% 50% 0;
transition: all 0.5s ease-out 0s;
}
.btn:hover:after{
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.row {
margin-left: 0;
margin-right:0;
}
/* BackToTopPage button */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
background: rgb(40, 94, 128);
background: rgba(40, 94, 128, 0.8);
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
display: none;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.back-to-top i {
color: #fff;
margin: 0;
position: relative;
left: 16px;
top: 13px;
font-size: 19px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.back-to-top:hover {
background: rgba(204,97,16, 0.9);
}
.back-to-top:hover i {
color: #fff;
top: 5px;
}
/* BackToTopPage tooltip */
.tooltip-inner {
color:white;
font-weight:400;
background-color:rgba(40, 94, 128, 0.9);
}
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
border-top-color: rgba(40, 94, 128, 0.9);
}
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<title>Album List</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"></link>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css"></link>
<link rel="StyleSheet" type="text/css" href="enhanced exportindex_wood.css"></link>
<meta http-equiv="cache-control" content="no-cache"/>
</head>
<body>
<div class="container-fluid">
<a id="back-to-top" href="#" class="back-to-top btn-custom" role="button" title="Go Top" data-toggle="tooltip" data-placement="top">
<i class="icon-chevron-up"></i>
</a>
<div class="row">
<div class="col col-lg-12 col-md-12 col-sm-12 col-xs-12" style="color: #cc6110;" align="center">
<h1 class="title">Album List</h1>
</div>
</div>
<div align="center">
<button class="btn btn-default filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button" data-filter="letterA">A</button>
<button class="btn btn-default filter-button" data-filter="letterB">B</button>
<button class="btn btn-default filter-button" data-filter="letterC">C</button>
<button class="btn btn-default filter-button" data-filter="letterD">D</button>
<button class="btn btn-default filter-button" data-filter="letterE">E</button>
<button class="btn btn-default filter-button" data-filter="letterF">F</button>
<button class="btn btn-default filter-button" data-filter="letterG">G</button>
<button class="btn btn-default filter-button" data-filter="letterH">H</button>
<button class="btn btn-default filter-button" data-filter="letterI">I</button>
<button class="btn btn-default filter-button" data-filter="letterJ">J</button>
<button class="btn btn-default filter-button" data-filter="letterK">K</button>
<button class="btn btn-default filter-button" data-filter="letterL">L</button>
<button class="btn btn-default filter-button" data-filter="letterM">M</button>
<button class="btn btn-default filter-button" data-filter="letterN">N</button>
<button class="btn btn-default filter-button" data-filter="letterO">O</button>
<button class="btn btn-default filter-button" data-filter="letterP">P</button>
<button class="btn btn-default filter-button" data-filter="letterQ">Q</button>
<button class="btn btn-default filter-button" data-filter="letterR">R</button>
<button class="btn btn-default filter-button" data-filter="letterS">S</button>
<button class="btn btn-default filter-button" data-filter="letterT">T</button>
<button class="btn btn-default filter-button" data-filter="letterU">U</button>
<button class="btn btn-default filter-button" data-filter="letterV">V</button>
<button class="btn btn-default filter-button" data-filter="letterW">W</button>
<button class="btn btn-default filter-button" data-filter="letterX">X</button>
<button class="btn btn-default filter-button" data-filter="letterY">Y</button>
<button class="btn btn-default filter-button" data-filter="letterZ">Z</button>
</div>
</div>
<hr/>
<div class="row">
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterB">
<a href="details/8660.html">
<img class="card-img-top rounded img-fluid" src="images/8660t.jpg" alt="Image Afrikan Basement - Unreleased Extended Versions - Disc 1"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Bolla</h4>
<p class="card-text text-center album">Afrikan Basement - Unreleased Extended Versions - Disc 1</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterB">
<a href="details/8666.html">
<img class="card-img-top rounded img-fluid" src="images/8666t.jpg" alt="Image Afrikan Basement - Unreleased Extended Versions - Disc 2"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Bolla</h4>
<p class="card-text text-center album">Afrikan Basement - Unreleased Extended Versions - Disc 2</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterJ letterD">
<a href="details/8881.html">
<img class="card-img-top rounded img-fluid" src="images/8881t.jpg" alt="Image A Journey To Rotterdam"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Jephté Guillaume | Diephuis</h4>
<p class="card-text text-center album">A Journey To Rotterdam</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL">
<a href="details/412.html">
<img class="card-img-top rounded img-fluid" src="images/412t.jpg" alt="Image La Home Box - Disc 4"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Laurent Garnier</h4>
<p class="card-text text-center album">La Home Box - Disc 4</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterT letterB">
<a href="details/376.html">
<img class="card-img-top rounded img-fluid" src="images/376t.jpg" alt="Image La Home Box - Disc 3"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Laurent Garnier | Traumer | Bambounou</h4>
<p class="card-text text-center album">La Home Box - Disc 3</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterT letterH">
<a href="details/447.html">
<img class="card-img-top rounded img-fluid" src="images/447t.jpg" alt="Image La Home Box - Disc 5"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Laurent Garnier | Traumer | Husbands</h4>
<p class="card-text text-center album">La Home Box - Disc 5</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterU letterM">
<a href="details/305.html">
<img class="card-img-top rounded img-fluid" src="images/305t.jpg" alt="Image La Home Box - Disc 1"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Laurent Garnier | Uner | Marc Romboy</h4>
<p class="card-text text-center album">La Home Box - Disc 1</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterV letterC">
<a href="details/341.html">
<img class="card-img-top rounded img-fluid" src="images/341t.jpg" alt="Image La Home Box - Disc 2"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Laurent Garnier | Voiski | Copy Paste Soul</h4>
<p class="card-text text-center album">La Home Box - Disc 2</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterM">
<a href="details/10344.html">
<img class="card-img-top rounded img-fluid" src="images/10344t.jpg" alt="Image Dj-Kicks - Disc 1"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Moodymann</h4>
<p class="card-text text-center album">Dj-Kicks - Disc 1</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterM">
<a href="details/10307.html">
<img class="card-img-top rounded img-fluid" src="images/10307t.jpg" alt="Image Dj-Kicks - Disc 2"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Moodymann</h4>
<p class="card-text text-center album">Dj-Kicks - Disc 2</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterM">
<a href="details/10124.html">
<img class="card-img-top rounded img-fluid" src="images/10124t.jpg" alt="Image Dj-Kicks - Disc 3"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Moodymann</h4>
<p class="card-text text-center album">Dj-Kicks - Disc 3</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterS letterL letterA letterR">
<a href="details/8897.html">
<img class="card-img-top rounded img-fluid" src="images/8897t.jpg" alt="Image Hagagatan Remixed"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Svreca | Lucy | Alexey Volkov | Rødhåd</h4>
<p class="card-text text-center album">Hagagatan Remixed</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT">
<a href="details/10673.html">
<img class="card-img-top rounded img-fluid" src="images/10673t.jpg" alt="Image North Star / Silent Space"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Tale Of Us</h4>
<p class="card-text text-center album">North Star / Silent Space</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT">
<a href="details/8820.html">
<img class="card-img-top rounded img-fluid" src="images/8820t.jpg" alt="Image Goddess Of A New Dawn"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">The Bayara Citizens</h4>
<p class="card-text text-center album">Goddess Of A New Dawn</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT">
<a href="details/8719.html">
<img class="card-img-top rounded img-fluid" src="images/8719t.jpg" alt="Image Mofo Congoietric"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">The Bayara Citizens</h4>
<p class="card-text text-center album">Mofo Congoietric</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT">
<a href="details/9074.html">
<img class="card-img-top rounded img-fluid" src="images/9074t.jpg" alt="Image The Girl And The Chameleon - Disc 1"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">The Exaltics</h4>
<p class="card-text text-center album">The Girl And The Chameleon - Disc 1</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT">
<a href="details/9033.html">
<img class="card-img-top rounded img-fluid" src="images/9033t.jpg" alt="Image The Girl And The Chameleon - Disc 2"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">The Exaltics</h4>
<p class="card-text text-center album">The Girl And The Chameleon - Disc 2</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT letterJ">
<a href="details/8777.html">
<img class="card-img-top rounded img-fluid" src="images/8777t.jpg" alt="Image Joaquin Joe Claussell Mixes"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">The Lower East Side Pipes | Joe Claussell</h4>
<p class="card-text text-center album">Joaquin Joe Claussell Mixes</p>
</div>
</div>
</div>
<div class="row">
<br/>
<div class="value col-xs-6 col-sm-6 col-md-6" align="left">20/09/2017 01:14:33</div>
<div class="value col-xs-6 col-sm-6 col-md-6" align="Right">Powered by
<a target="_blank" href="https://www.collectorz.com/music" title="Music Collector">Music Collector</a> & JHR Enhanced Details template
</div>
<br/>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="indexfilter.js"></script>
</body>
Thanks for your help.

one way of doing this that would remove your duplication and do what you want it to do would be to do something like:
$(".filter-button").each(function(idx, item){
let txt = $(item).text();
let className = '.letter' + txt;
if($(className).length === 0){
$(item).addClass('disabled');
}
});
or
$(".filter-button").each(function(idx, item){
let className = $(item).data('filter');
if($(className).length === 0){
$(item).addClass('disabled');
}
});
Protip:
in general, anytime you find yourself copy pasting something or writing the same thing only slightly differently for example
var letterZcount = $(".letter{blah}").length;
if($letter{blah}count.length < 3)
$(this).addClass('disabled');
You either need to extract something into a reusable function or you need to rethink the way you're addressing it. This is what loops are for.

Another tip: You could make your letterXcount declarations much shorter by doing something like:
```
let start = 65,
end = 91,
letters = [],
holder = {};
// Get every letter of the alphabet
for(var i = start; i < end; i++) {
letters.push(String.fromCharCode(i));
}
// Bind them to a property on an object.
// You could also use the `window` object to do the same thing.
letters.forEach(val => {
let localLabel = `letter${val}count`;
let localVal = $(`.letter${val}`).length;
holder[localLabel] = localVal;
});
```

Move to a Div/ID from Navbar Link

Ok, So I have a navbar that, when a link is clicked, I want it to move to a specific div (i.e. when clicking the "About" link, the page moves to the About section of the page).
A JSFiddle of the Code in question:
HTML in question:
<nav class="navbar navbar-toggleable-lg sticky-top navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">David Madrigal's Portfolio</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#About">About</a>
</li>
<li class="nav-item">
Projects
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
The plan is to add classes that would match the id names of the parts of the page I want to go to.
Here is the JS I have so far:
function main() {
$
$('.nav-item').on('click', function() {
$(this).toggleClass('active');
});
}
$(document).ready(main);
Note, I am using Bootstrap 4.0. Any help is much appreciated.Thanks in advance!

Here is a solution with smooth scrolling (the jquery slim libs does not support the animate property)
Snippet below
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if (target.length) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
body {
background: #f5f5dc;
}
.jumbotron {
text-align: center;
background: url(imgs/los-angeles-skyline.jpg);
background-size: cover;
background-repeat: no-repeat;
color: white;
border-radius: 0;
}
#bootstrap-link {
text-decoration: none;
color: white;
}
#bootstrap-link:hover {
text-decoration: underline;
color: #014c8c;
}
#info-cards {
margin-bottom: 20px;
padding-bottom: 5px;
}
#card-blocks {
padding-bottom: 20px;
margin-bottom: 20px;
}
.card-button {
margin-left: 5px;
margin-right: 5px;
}
#form-container {
border: 5px solid rgba(220, 220, 220, 0.4);
margin-top: 10px;
padding: 30px;
padding-bottom: 25px;
background: #ffffff;
}
.form-button {
margin-top: 20px;
}
.footer {
text-align: center;
background-color: #292b2c !important;
padding-bottom: 5px;
padding-top: 20px;
margin-top: 5px;
margin-bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-toggleable-lg sticky-top navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">David Madrigal's Portfolio</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#About">About</a>
</li>
<li class="nav-item">
Projects
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-3">Welcome!</h1>
<p class="lead">This is a site to which I will be adding all of my website works.</p>
<hr class="my-4">
<p>This site uses Bootstrap 4 to make the site visually pleasing.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<div class="container-fluid" id="About">
<div class="row">
<div class="col-sm-12 div.md-12" id="info-cards About">
<div class="card">
<h3 class="card-header">About the <strong>Developer</strong></h3>
<div class="card-block">
<div class="media">
<img class="d-flex mr-3" src="https://avatars1.githubusercontent.com/u/17634751?v=3&u=764e15995bb82b2f37a3bdb15ba59e11f038a2f1&s=400" alt="githubProfilePic">
<div class="media-body">
<h5 class="mt-0">Welcome to My Portfolio!</h5>
Hello there! This is a personal portfolio of all of my works will be open source and can be changed however you please. Just make sure to provide links to the frameworks used so others can create projects with them!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="card-blocks projects projects">
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="card">
<div class="card-header">
Block #1
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="card">
<div class="card-header">
Featured: "Just Random Musing..."
</div>
<div class="card-block">
<h4 class="card-title">My First Site W/ Bootstrap!</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
View the Site!
View Source!
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="card">
<div class="card-header">
Block #2
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="skillbars">
<div class="card">
<h3 class="card-header">Featured Skills</h3>
<div class="card-block">
<p class="card-text">HTML</p>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">95%</div>
</div>
<br>
<p class="card-text">CSS</p>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div>
</div>
<br>
<p class="card-text">JavaScript</p>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">65%</div>
</div>
</div>
</div>
</div>
<form class="container-fluid" id="contact">
<div id="form-container">
<div class="form-group row">
<label for="InputName" class="col-4 col-form-label">Full Name</label>
<div class="col-8">
<input type="name" class="form-control" id="InputName" aria-described-by="nameHelp" placeholder="Enter Name" />
<small id="nameHelp" class="form-text text-muted">Please enter your Full Name (First and Last)</small>
</div>
</div>
<div class="form-group row">
<label for="InputEmail" class="col-4 col-form-label">Email Address</label>
<div class="col-8">
<input type="email" class="form-control" id="InputEmail" aria-described-by="emailHelp" placeholder="Enter Email" />
<small id="emailHelp" class="form-text text-muted">We will never share your email with anyone else.</small>
</div>
</div>
<div class="form-group row">
<label for="exampleInputPassword1" class="col-4 col-form-label">Password</label>
<div class="col-8">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<button type="button" class="btn btn-primary form-button">Submit</button>
</div>
</form>
<footer class="footer text-muted">
<p>&copy 2017. David Madrigal-Hernandez.</p>
</footer>

You missed the Id, just add an Id in the section container, for your case:
<div class="container-fluid" id="About">
since in your anchor you are jumping to #About
<a class="nav-link" href="#About">About</a>

Owl Slider Custom Control Button

Unfortunately the controls that Owl Carousel render will not help me with my current project so I am trying to change a slide with a jQuery click event however I am having no luck.
I have been following the documentation on the Owl Carousel website.
This is the jQuery that I have managed to formulate:
var owl = $('.owl-carousel');
owl.owlCarousel();
$('.car-hub-header-learn-more').click(function() {
owl.trigger('next.owl.carousel');
})
Here is my a tag html:
<i class="fa fa-phone" aria-hidden="true"></i> Request Callback
All carousel html as requested:
<div id="owl-new-car-main" style="position: relative; margin-bottom: -3px; opacity: 1; display: block;" class="owl-carousel owl-theme">
<div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 7612px; left: 0px; display: block; transform: translate3d(0px, 0px, 0px);"><div class="owl-item" style="width: 1903px;"><div class="item">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Scirocco</h1>
</div>
</div>
<div class="row middle-xs">
<div class="car-hub-header-image-box col-lg-12">
<div class="row middle-lg center-lg">
<div class="col-lg-3">
Learn More <i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
<div class="col-lg-6">
<img src="/img/new-car-template/scirocco-transparent.png" alt="Scirocco GT">
</div>
<div class="col-lg-3">
<i class="fa fa-phone" aria-hidden="true"></i> Request Callback
</div>
</div>
</div>
<div class="car-hub-header-info-container col-lg-12">
<div class="row start-lg">
<div class="col-lg-12 car-hub-header-info-box">
<h2>FEATURED DEAL <i class="fa fa-star-o" aria-hidden="true"></i></h2>
<span class="medium-underline"></span>
<h3 class="car-hub-header-model-variant">GT Black Edition - 1.4 TSI Manual</h3>
<div class="row center-lg car-hub-offer-container">
<div class="col-lg-3 car-hub-header-offer-1">
<h2>£198 <span>Monthly</span></h2>
</div>
<div class="col-lg-3 car-hub-header-offer-2">
<h2>£1500 <span>Deposit Contribution</span></h2>
</div>
<div class="col-lg-3 car-hub-header-offer-3">
<h2>£198 <span>Customer Deposit</span></h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div><div class="owl-item" style="width: 1903px;"><div class="item item-2">
<div class="container">
</div>
</div></div></div></div>
</div>
I was hoping that when I click my a tag that the carousel would go to the next slide however this is not the case, I get no errors in my console either.
Any idea where I might be going wrong?
Thanks, Nick

Try this one:
var $dots = $('.owl-dot');
function goToNextCarouselPage() {
var $next = $dots.filter('.active').next();
if (!$next.length)
$next = $dots.first();
$next.trigger('click');
}
$('.car-hub-header-learn-more').click(function () {
goToNextCarouselPage();
});

Categories