Bootstrap 4 carousel stopped working when running a js script - javascript

I am using bootstrap 4 with CDN.
The problem is that I have a boostrap4 carousel (taken from their official site) and it works great, but when I run a js code the carousel images disappear.
this is the carousel code and it works great
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class='col-7 mx-auto'>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ-yiYswFmMD0pScf5VgsHoOmITBngv2NlYeg&usqp=CAU" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRs8rzKLMYWBvde8Rv7xpJszIb3bvcOd7N4eQ&usqp=CAU" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://blog.es.playstation.com/tachyon/sites/14/2020/09/50375482006_7c978f60f7_o.jpg?resize=1088,612&crop_strategy=smart" class="d-block w-100" alt="...">
</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>
</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>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
But when I click on a button in another div, the carousel images disappear and only the arrows remain on the sides
This is what the other code does:
var jsaccordion = {
init: function(target) {
var headers = $("." + target + " .accordion-btn");
if (headers.length) {
headers.on('click', jsaccordion.select);
}
},
select: function() {
var tar = $(this).closest('.accordion-container');
$('#shared-container').remove();
if (tar.hasClass('active')) {
tar.removeClass('active')
} else {
$('.active').removeClass('active')
tar.addClass('active');
var targText = tar.find('.accordion-text').html();
var sharedCont = "<div id='shared-container'>" + targText + "</div>";
if($('body').width() > 768){
tar = tar.parent();
}
tar.after(sharedCont);
}
}
}
window.addEventListener('load', function() {
jsaccordion.init("accordion-container");
});
body {
max-width: 90%;
margin: 0 auto;
}
.accordion-container {
position: relative;
}
.accordion-container button::before {
content: '+' !important;
}
.accordion-container.active button::before {
content: '-' !important;
}
.accordion-container.active::after {
content: '';
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid orange;
position: absolute;
bottom: -2rem;
left: 50%;
transform: translateX(-50%);
color: orange;
z-index: 100;
font-size: 3rem;
line-height: 1;
}
.accordion-container .accordion-text {
display: none;
color: #808080;
padding: 15px;
border: 1px solid #ffcc4b;
}
#shared-container {
margin-top: 2rem;
display: block;
width: 100%;
padding: 2rem;
border: 1px solid orange;
text-align: center;
}
#shared-container p {
margin: 0;
}
#media (max-width : 768px){
.col-6{
max-width: 100%;
min-width: 100%;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Testing testing testing</h1>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class='row'>
<div class='col-6 accordion-container'>
<div class="my-3">
<h3 class=" text-center">First one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis natoque penatibus et magnis. Duis convallis
convallis tellus id interdum velit laoreet. </p>
</div>
</div>
</div>
<div class='col-6 accordion-container'>
<div class="my-3">
<h3 class='text-center'>second one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium lectus quam id leo.</p>
</div>
</div>
</div>
</div>
I tried with the js code in the same file and also from another file, but the same thing keeps happening


The problem is that I have a boostrap4 carousel (taken from their
official site) and it works great, but when I run a js code the
carousel images disappear.
Firstly you need to include boostrap libs, not only the css.
Instantiate the carousel with:
$('.carousel').carousel();
Finally, if you need to toogle active between the accordions this line:
$('.active').removeClass('active')
needs to be changed in:
tar.siblings().removeClass('active'); // toogle active state....
The snippet:
$(function () {
$('.carousel').carousel();
var jsaccordion = {
init: function (target) {
var headers = $("." + target + " .accordion-btn");
if (headers.length) {
headers.on('click', jsaccordion.select);
}
},
select: function () {
var tar = $(this).closest('.accordion-container');
$('#shared-container').remove();
if (tar.hasClass('active')) {
tar.removeClass('active')
} else {
tar.siblings().removeClass('active');
tar.addClass('active');
var targText = tar.find('.accordion-text').html();
var sharedCont = "<div id='shared-container'>" + targText + "</div>";
if ($('body').width() > 768) {
tar = tar.parent();
}
tar.after(sharedCont);
}
}
}
jsaccordion.init("accordion-container");
});
body {
max-width: 90%;
margin: 0 auto;
}
.accordion-container {
position: relative;
}
.accordion-container button::before {
content: '+' !important;
}
.accordion-container.active button::before {
content: '-' !important;
}
.accordion-container.active::after {
content: '';
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid orange;
position: absolute;
bottom: -2rem;
left: 50%;
transform: translateX(-50%);
color: orange;
z-index: 100;
font-size: 3rem;
line-height: 1;
}
.accordion-container .accordion-text {
display: none;
color: #808080;
padding: 15px;
border: 1px solid #ffcc4b;
}
#shared-container {
margin-top: 2rem;
display: block;
width: 100%;
padding: 2rem;
border: 1px solid orange;
text-align: center;
}
#shared-container p {
margin: 0;
}
#media (max-width: 768px) {
.col-6 {
max-width: 100%;
min-width: 100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class='col-7 mx-auto'>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ-yiYswFmMD0pScf5VgsHoOmITBngv2NlYeg&usqp=CAU"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRs8rzKLMYWBvde8Rv7xpJszIb3bvcOd7N4eQ&usqp=CAU"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://blog.es.playstation.com/tachyon/sites/14/2020/09/50375482006_7c978f60f7_o.jpg?resize=1088,612&crop_strategy=smart"
class="d-block w-100" alt="...">
</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>
</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>
</a>
</div>
</div>
<div class='row'>
<div class='col-6 accordion-container'>
<div class="my-3">
<h3 class=" text-center">First one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas
pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis
natoque penatibus et magnis. Duis convallis
convallis tellus id interdum velit laoreet. </p>
</div>
</div>
</div>
<div class='col-6 accordion-container'>
<div class="my-3">
<h3 class='text-center'>second one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet.
Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium
lectus quam id leo.</p>
</div>
</div>
</div>
</div>

Related

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>

Trying to control element visibility activated by JQUERY functionality at different HTML breakpoints

I have cards that I want to toggle visibility when the page is narrower than 750px. I have that part figured out. What I need help controlling (either with js or css) is displaying block on the elements that were hidden at < than 750 when I expand the page > than 750 automatically. I am attaching the code and jsfiddle to make sense of this.
Here is the jsfiddle
https://jsfiddle.net/galnova/bjz6pgyp/16/
$('[id^="coll-"]').click(function(e) {
e.preventDefault();
if ($(window).width() < 750) {
$("." + this.id).stop().slideToggle();
return false;
}
});
//I also tried this
I tried this but it didn't work.
$('[id^="coll-"]').click(function(e){
e.preventDefault();
if ($(window).width() < 750) {
$("." + this.id).stop().slideToggle();
return false;
} else if ($(window).width() > 750) {
$(".coll-1, .coll-2, .coll-3").show();
}
});
.coll-1,
.coll-2,
.coll-3 {
display: block;
background: pink;
}
#coll-1,
#coll-2,
#coll-3 {
display: none;
}
.ful_cwrap {
display: block;
top: 30px;
position: relative;
width: 100%;
}
.cwrap {
padding-left: 5px!important;
padding-right: 5px!important;
}
hr {
width: 100%;
float: left;
}
/* .card > hr { margin: 0px 0 10px 0; } */
dl.hpair {
float: left;
overflow: hidden;
margin-bottom: 0px;
}
.hpair dt,
.hpair dd {
float: left;
display: inline-block;
}
.hpair dt {
margin-right: 5px;
}
.hpair dd {
margin-right: 10px;
}
.card {
float: left;
width: 100%;
border: solid 1px #000;
padding: 0 10px 10px 10px;
margin-bottom: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
/*background: #eee;*/
}
span.card-title {
font-size: 1.4em;
}
.card-title {
margin-top: 0;
margin-bottom: .5em;
padding-top: 10px;
text-align: center;
/*padding-bottom: 10px;*/
font-weight: 700;
font-size: 1.143em;
line-height: 20px;
}
.card-subtitle {
margin-top: 0;
margin-bottom: 0;
}
#media only screen and (max-width: 767px) {
.coll-1,
.coll-2,
.coll-3 {
display: none;
}
#coll-1,
#coll-2,
#coll-3 {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.2.4/css/bootstrap.min.css" />
<div class="ful_cwrap">
<div class="col-xs-12 col-sm-2 cwrap">
<div class="card card-block">
<h4>
Tester
</h4>
<div class="col-xs-12 nill">
<dl class="hpair">
<dt>Cash: </dt>
<dd>Plenty Dollars</dd>
</dl>
<dl class="hpair">
<dt>Names: </dt>
<dd>Alot</dd>
</dl>
<dl class="hpair">
<dt>Avg. Time: </dt>
<dd>30 hours</dd>
</dl>
</div>
<hr/>
<div class="col-xs-12 nill">
<p class="card-text">
<span class="coll-1">
Maecenas mattis purus nunc, et molestie risus porttitor a. Phasellus ex lacus, viverra sed tempus at. Vivamus congue fringilla fringilla. Pit amet semper lacus.
</span>
</p>
</div>
<div class="col-xs-12 nill mar_bott">
<a id="coll-1" href="" class="">Show more <span class="indicator glyphicon glyphicon-plus"></span></a>
</div>
</div>
</div>
<!-- -->
<div class="col-xs-12 col-sm-2 cwrap">
<div class="card card-block">
<h4>
Tester
</h4>
<div class="col-xs-12 nill">
<dl class="hpair">
<dt>Cash: </dt>
<dd>Plenty Dollars</dd>
</dl>
<dl class="hpair">
<dt>Names: </dt>
<dd>Alot</dd>
</dl>
<dl class="hpair">
<dt>Avg. Time: </dt>
<dd>30 hours</dd>
</dl>
</div>
<hr/>
<div class="col-xs-12 nill">
<p class="card-text">
<span class="coll-2">
Maecenas mattis purus nunc, et molestie risus porttitor a. Phasellus ex lacus, viverra sed tempus at. Vivamus congue fringilla fringilla. Pit amet semper lacus.
</span>
</p>
</div>
<div class="col-xs-12 nill mar_bott">
<a id="coll-2" href="" class="">Show more <span class="indicator glyphicon glyphicon-plus"></span></a>
</div>
</div>
</div>
<!-- -->
<div class="col-xs-12 col-sm-2 cwrap">
<div class="card card-block">
<h4>
Tester
</h4>
<div class="col-xs-12 nill">
<dl class="hpair">
<dt>Cash: </dt>
<dd>Plenty Dollars</dd>
</dl>
<dl class="hpair">
<dt>Names: </dt>
<dd>Alot</dd>
</dl>
<dl class="hpair">
<dt>Avg. Time: </dt>
<dd>30 hours</dd>
</dl>
</div>
<hr/>
<div class="col-xs-12 nill">
<p class="card-text">
<span class="coll-3">
Maecenas mattis purus nunc, et molestie risus porttitor a. Phasellus ex lacus, viverra sed tempus at. Vivamus congue fringilla fringilla. Pit amet semper lacus.
</span>
</p>
</div>
<div class="col-xs-12 nill mar_bott">
<a id="coll-3" href="" class="">Show more <span class="indicator glyphicon glyphicon-plus"></span></a>
</div>
</div>
</div>
<!-- -->
</div>
I added an image to help explain.
https://ibb.co/jj99w6

Does it have to be exactly 750px? if i understand you correctly bootstrap has classes for the behaviour you want to achieve.
However, be warned this feature was removed in bootstrap 4, however i've seen you're using bootstrap 3 so it will
hidden-xs = hidden when below 768px
hidden-sm = hidden between 768px and 992px
hidden-md = hidden between 992px and 1200px
hidden-lg = hidden when above 1200px
visible-xs-block, visible-xs-inline, visible-xs-inline-block
which will set the element to be visible in the ranges i've listed above.
There is also a really nice table and explanation on the bootstrap docs

navbar-fixed-top - page flickers and I am forced to top

I am using Bootstrap 3, navbar-fixed-top class in particular. I have two menus that I fix to top with JQ as shown below. I see a weird bug only on short pages - only when the page height is almost exactly as long as page content: when I try to scroll, the page flickers and I am forced back to top. This happens with hand scroll or by using the scroll wheel. As a result, I can never see the last copyright line. See video of this.
EDITED:
When I remove this line $('nav').addClass('navbar-fixed-top'); the issue goes away (but obviously I need that line). How do I fix this?
Also, when class navbar-fixed-top is applied to nav, the scroll happens smoothly (hence, I don't see the bug on long pages). When it's not applied - the bug comes back.
var navFixStart;
var subFixStart;
var xs = 480;
var lg = 1200;
var mobileStart = (992 - 15);
if ($('body').hasClass('min')) {
navFixStart = 40;
subFixStart = 40;
} else {
navFixStart = 0;
subFixStart = 160;
}
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).width() < mobileStart) {
// stuff
} else {
if ($(window).scrollTop() > navFixStart) {
$('nav').addClass('navbar-fixed-top'); // problem line
} else {
$('nav').removeClass('navbar-fixed-top');
}
}
});
$(window).on('load resize', function() {
if ($(window).width() < mobileStart) {
//mobile stuff
} else {
$('nav').removeClass('navbar-inverse').removeClass('navbar-fixed-top');
$('nav>div').removeClass("container-fluid").addClass("container");
if ($(window).scrollTop() > navFixStart) {
$('nav').addClass('navbar-fixed-top');
} else {
$('nav').removeClass('navbar-fixed-top');
}
}
});
});
/* Nav */
nav {
border: none !important;
padding-top: 15px;
z-index: 1000;
-webkit-transition: 0.3s all ease;
-moz-transition: 0.3s all ease;
-ms-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
transition: 0.3s all ease;
}
nav div>ul>li>a:link {
padding: 20px;
}
nav.navbar-fixed-top {
background-color: rgba(244, 242, 239, 0.95);
}
nav.navbar-fixed-top.shad-bottom,
.subnav {
box-shadow: 0 3px 5px rgba(0, 0, 0, .1);
}
.navbar-brand {
width: 145px;
margin-left: 15px;
margin-top: -5px;
}
.navbar-fixed-top .navbar-brand {
width: 115px;
}
.navbar-fixed-top {
margin-top: 0 !important;
padding-top: 0 !important;
}
.navbar-fixed-top .navbar-brand>img {
height: auto;
}
.navbar-fixed-top .navbar-brand {
margin-top: 5px;
}
.navbar-toggle {
padding: 9px;
}
.navbar-toggle .icon-bar {
width: 20px;
}
nav .dropdown .dropdown-menu {
border: 0;
}
nav .dropdown .dropdown-menu a:link {
line-height: 32px;
}
nav .navbar-collapse {
padding: 0;
}
nav .navbar-collapse.collapsing,
nav .navbar-collapse.in {
padding-right: 15px;
padding-left: 15px;
}
.navbar-collapse .nav {
position: relative;
top: -7px;
}
.navbar-fixed-top .navbar-collapse .nav {
position: static;
}
.navbar-nav>li>.dropdown-menu {
margin-top: 7px;
}
.navbar-fixed-top .navbar-nav>li>.dropdown-menu {
margin-top: inherit;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body class="top" ontouchstart="">
<nav class="navbar navbar-default shad-bottom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Option
<ul class="dropdown-menu">
<li>Option
</li>
<li>Option
</li>
</ul>
</li>
<li class="dropdown"> Option
<ul class="dropdown-menu">
<li>Option
</li>
<li>Option
</li>
</ul>
</li>
<li class="dropdown"> Option
<ul class="dropdown-menu">
<li>Option
</li>
<li>Option
</li>
</ul>
</li>
<li class="dropdown"> Option
<ul class="dropdown-menu">
<li>Option
</li>
<li>Option
</li>
<li>Option
</li>
</ul>
</li>
<li class="dropdown"> Option
<ul class="dropdown-menu">
<li>Option
</li>
<li>Option
</li>
<li>Option
</li>
<li>Option
</li>
</ul>
</li>
<li>Support
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid intro">
<div class="container">
<div class="row">
<div class="no-pad">
<h1>Support</h1>
</div>
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- end container-fluid -->
<div class="container-fluid block">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet blandit lectus, quis auctor ante posuere sit amet. Fusce venenatis, arcu non viverra pulvinar, augue metus laoreet leo, sed convallis orci nisi vitae turpis. Cras sed euismod
ligula. Sed id nulla elit. Aenean dapibus condimentum ex nec fermentum. Aliquam accumsan velit in dui sagittis cursus. Vestibulum id scelerisque risus, at efficitur turpis.
<p>
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- end container-fluid -->
<div class="container-fluid block block-dark">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet blandit lectus, quis auctor ante posuere sit amet. Fusce venenatis, arcu non viverra pulvinar, augue metus laoreet leo, sed convallis orci nisi vitae turpis. Cras sed euismod
ligula. Sed id nulla elit. Aenean dapibus condimentum ex nec fermentum. Aliquam accumsan velit in dui sagittis cursus. Vestibulum id scelerisque risus, at efficitur turpis.
<p>
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- end container-fluid -->
<div class="container-fluid footer">
<div class="container no-pad">
<footer class="row">
<div class="col-sm-12 text-center visible-xs" style="background-color:#45555f;">
<div class="to-top"><span class="glyphicon glyphicon-chevron-up"></span>back to top
</div>
</div>
<!-- end col -->
<div class="col-sm-12 text-center visible-xs">
<div class="pad-bottom-md pad-top-sm">Products | Services | News | Jobs | Company
</div>
</div>
<!-- end col -->
<div class="col-sm-4">
<h6>Company Name</h6>
<address>
Address 1<br>
Address 2<br>
Address 3<br>
<span>555-555-5555</span>
</address>
</div>
<div class="col-sm-4"></div>
<div class="col-sm-4 pad-bottom-md">
<h6>Connect</h6>
<div class="social"> <span class="mu-icon-twitter"></span> <span class="mu-icon-linkedin2"></span> <span class="mu-icon-youtube"></span>
</div>
<!-- end social -->
</div>
<div class="col-sm-12 pad-bottom-md">
<div class="copy">© 2016 Company Name, LLC. <span style="white-space:nowrap;">Privacy | Terms | Disclaimer</span>
</div>
</div>
</footer>
</div>
<!-- end container -->
</div>
<!-- end container-fluid -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')
</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script-prototype-only.js"></script>
</body>
</html>
JS
$(window).scroll(function () {
if ($(window).width() < mobileStart) {
$('.subnav').removeClass('navbar-fixed-top');
} else {
if ($(window).scrollTop() > navFixStart) {
$('nav').addClass('navbar-fixed-top');
if ($(window).scrollTop() > subFixStart) {
$('.subnav').addClass('navbar-fixed-top'); // bugger!!!
} else if ($(window).scrollTop() <= subFixStart) {
$('.subnav').removeClass('navbar-fixed-top');
}
} else {
// some more stuff
}
}
});

<div class="container-fluid block">
You have to add padding-top to this div equal to the height of your subnav element when the subnav is fixed.
For example if your subnav has 50px height your code may look like this:
$(window).scroll(function () {
if ($(window).width() < mobileStart) {
$('.subnav').removeClass('navbar-fixed-top');
} else {
if ($(window).scrollTop() > navFixStart) {
$('nav').addClass('navbar-fixed-top');
if ($(window).scrollTop() > subFixStart) {
$('.subnav').addClass('navbar-fixed-top');
$('.container-fluid.block').css('padding-top', '50px');
} else if ($(window).scrollTop() <= subFixStart) {
$('.subnav').removeClass('navbar-fixed-top');
$('.container-fluid.block').css('padding-top', '0');
}
} else {
// some more stuff
}
}
});
If your block with form already has padding-top (for example 20px) you have to add 50px to it (so in javascript change 50px to 70px and 0 to 20px)

How do i add a Bootstrap carousel to Ruby on rails app?

I am new developer and trying to add a Bootstrap carousel to my rails app.
This is the carousel that I am trying to add in particular:
http://arturssmirnovs.com/blog/bootstrap-carousel-100-height-and-width/
So far i've only gotten the white left and right pointers to show up from the carousel (Ex: the navigation pointers that look like this < >)
Here's my html code, that i snabbed from the link above, I inserted this portion in the about.html.erb page, which is the static page that I want the carousel to appear in like this
views/layouts/staticpages/about.html.erb:
<div class="aboutslide">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item bg bg1 active">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item bg bg2">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item bg bg1">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
Here is my app/assets/stylesheets/carousel.css file:
html, body {
height:100%;
margin:0;
padding:0;
}
.carousel, .item, .active {
height:100%;
}
.carousel-inner {
height:100%;
}
.carousel {
margin-bottom: 60px;
}
.carousel-caption {
z-index: 10;
}
.carousel .item {
background-color: #777;
}
.carousel .carousel-inner .bg {
background-repeat:no-repeat;
background-size:cover;
}
.carousel .carousel-inner .bg1 {
background-image:url(bg1.jpg);
background-position: center top;
}
.carousel .carousel-inner .bg2 {
background-image:url(bg2.jpg);
background-position: center center;
}
.carousel .carousel-inner .bg3 {
background-image:url(bg3.jpg);
background-position: center bottom;
}
#media (min-width: 768px) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
}
and there is the docs.js file that i have inserted in apps/assets/javascripts/docs.js. I can't post it because the file is too big.

The issue with the button images is probably just that you need to add the images to your app/assets/images directory and change the css use the Rails asset_path helper:
.carousel .carousel-inner .bg {
background-repeat:no-repeat;
background-size:cover;
}
.carousel .carousel-inner .bg1 {
background-image:url(<%= assets_path 'bg1.jpg' %>);
background-position: center top;
}
.carousel .carousel-inner .bg2 {
background-image:url(<%= assets_path 'bg2.jpg' %>);
background-position: center center;
}
.carousel .carousel-inner .bg3 {
background-image:url(<%= assets_path 'bg3.jpg' %>);
background-position: center bottom;
}
This uses ERB (embedded ruby) to add the correct url in the stylesheet. You can also just change the extension of the file to '.css.scss' and use the sass-rails helpers.
.carousel.carousel-inner {
.bg {
background-repeat:no-repeat;
background-size:cover;
}
.bg1 {
background-image:url( image-url('bg1.jpg') );
background-position: center top;
}
.bg2 {
background-image:url( image-url('bg2.jpg') );
background-position: center center;
}
.bg3 {
background-image:url( image-url('bg3.jpg') );
background-position: center bottom;
}
}

Categories