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>
Related
I created a submenu using HTML and CSS. The elements of the submenu open when hovered on the elements of nav-list. I need help figuring out how to blur the HTML's main content when the nav-list hovers and sub-menu is open. When open, the submenu will have a picture below it and multiple pictures and classes further down. The current code does blur the HTML, but the problem is, to blur the entire HTML, I need to add each class below the submenu to CSS individually.
nav {
display: inline-flex;
width: 100%;
}
.nav-list {
display: flex;
width: 100%;
margin-top: .7rem;
padding-left: 1.1rem;
}
.nav-list li {
position: relative;
}
.nav-list>li>a {
color: black;
display: block;
font-size: 1rem;
padding: 1.3rem 1rem;
text-transform: uppercase;
}
.sub-menu {
display: flex;
position: absolute;
box-sizing: border-box;
background-color: black;
visibility: hidden;
top: 3.89rem;
left: -4rem;
width: 82.5rem;
height: 35rem;
z-index: 5000;
}
.sub-menu a {
position: relative;
top: 2rem;
color: white;
font-size: 1.1rem;
font-weight: 200;
padding: 3rem 40px 0 40px;
}
.nav-list>li:hover .sub-menu {
visibility: visible;
}
.nav-list>li:hover>a::after {
width: 100%;
}
/* CSS for blur effect */
.blurred::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
filter: blur(5px);
/* adjust the blur amount */
z-index: 900;
visibility: hidden;
}
<div class="main" id="navbar">
<div class="logo">
XYZ<br>123
</div>
<nav class="menu">
<ul class="nav-list">
<li>
Men
<ul class="sub-menu">
<li>shirts </li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="main">
<img></img>
<img></img>
<img></img>
<img></img>
</div>
<footer>
1
</footer>
<script>
var subMenu = document.querySelector('.sub-menu');
var main = document.querySelectorAll('main');
subMenu.addEventListener('mouseover', function() {
main.forEach(function(elem) {
elem.classList.add('blurred');
});
});
subMenu.addEventListener('mouseout', function() {
main.forEach(function(elem) {
elem.classList.remove('blurred');
});
});
</script>
You only need to add the blurred class to the main container div, all content will be blurred in it.
Demo for blur on hover over hamburger (you can change that to blur only on sub-menu hover). There is a 2 sec delay on mouse-out to that you have time to scroll down to see the blurred image:
const hamburger = document.getElementById('hamburger');
const main = document.getElementById('mainContainer');
hamburger.addEventListener('mouseover', function() {
main.classList.add('blurred');
});
hamburger.addEventListener('mouseout', function() {
setTimeout(() => main.classList.remove('blurred'), 2000);
});
.blurred {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
background-color: #eee;
}
<div class="main" id="navbar">
NAVBAR mouse over to blur ==> <span id="hamburger">☰</span>
<hr />
</div>
<div class="main" id="mainContainer">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis blandit felis vel hendrerit. Morbi nunc augue, pellentesque eu laoreet in, bibendum nec sem.</p>
<ul><li>In eu libero eget nulla laoreet aliquet in quis augue.</li><li>Praesent vulputate leo tellus, quis eleifend purus viverra vitae.</li><li>Phasellus eget augue venenatis, facilisis nulla sed, consequat lorem.</li></ul>
<p>Duis sapien diam, dignissim quis imperdiet eget, hendrerit nec nulla. Nam nisi purus, ultrices nec fringilla vitae, interdum vitae nunc.</p>
<p><img src="https://via.placeholder.com/500x90/000000/FFFFFF.png?text=This+is+an+embedded+image" /></p>
<p>Integer lobortis tellus a orci ultrices, at varius risus fermentum. Maecenas maximus elit sit amet varius facilisis. Morbi molestie rutrum eros, id molestie dui maximus in. Etiam fermentum felis eu vehicula euismod.</p>
</div>
<footer>
<hr />
FOOTER
</footer>
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>
I'm working on tabs. Multiple tabs on the same page are working fine now I'm trying to add tab inside the tab. Nested Sub tabs default, current active class, is not coming i have tried using $(this).parent() and $(this).closest() in jquery but not achieve the result.Here I was not used any id's because I want multiple tabs on the same page which is coming dynamically. Can anyone point me in the right direction nested tab default active tab and I have added the current class in HTML but because of for each loop current class is removing. How to target only the current parent tab, not sub nested tabs.
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var $mainContainer = $(this);
var $menuContainer = $(this).find('.at-tabs-nav__item');
var $label = $(this).find('.at-tab-__title_text');
var $content = $(this).find('.at-tabs-content__item');
$content.hide();
//adding data attribute
$label.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$($menuContainer[0], $label[0]).addClass('current');
$($content[0]).show();
//Display current tab content
$(this).find('.at-tabs-nav__item').click(function(ele) {
//debugger;
$(this).closest('.at-tabs').find('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-tab-__title_text').addClass('current');
$(this).closest('.at-tabs').find('.at-tabs-content:first > .at-tabs-content__item').hide();
$(this).closest('.at-tabs').find('.at-tabs-content:first > .at-tabs-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show()
});
});
}
atscTabs();
.tab-warp {
width: 500px;
margin: 0 auto;
}
.at-tabs-nav__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tabs-nav {
display: flex;
padding: 28px 0px;
}
a.at-tabs-title {
text-decoration: none;
font-size: 18px;
color: black;
}
.current a.at-tabs-title {
color: #fff;
}
.at-tabs-nav__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-tabs-content {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
/* Vertial tabs */
.at-tabs.at-vertical {
display: flex;
}
.at-vertical .at-tabs-nav {
display: flex;
flex-direction: column;
padding: 28px 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tab-warp">
<div id="at-tabs-c2a3d74" class="at-tabs">
<div class="at-tabs-nav">
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text current">Tab #1</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Tab #2</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Tab #3</span>
</div>
</a>
</div>
</div>
<div class="at-tabs-content">
<div class="at-tabs-content__item">
<div id="at-tabs-c2a3d74" class="at-tabs">
<div class="at-tabs-nav">
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text current">Sub Tab #1</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Sub Tab #2</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Sub Tab #3</span>
</div>
</a>
</div>
</div>
<div class="at-tabs-content">
<div class="at-tabs-content__item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
I am item content. Click edit button to change this text. Lorem ipsum dolor sius, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
</div>
</div>
</div>
<div class="at-tabs-content__item">
ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adnec ullamcorper mattis, pulvinar dapibus leo.
</div>
</div>
</div>
click on tabs and again come back to the first tab then nested tab current class is not showing.
The problem is that the find method will find matches in the whole DOM subtree, so when you apply it to a top level tab, it will also match items in the subtabs.
You can solve this by using the children method instead -- sometimes chained to get grandchildren. That way you control at which depth in the DOM tree you want to inspect and modify things.
So change this:
$(this).find('.at-tabs-nav__item').click(function(ele) {
$(this).closest('.at-tabs').find('.current').removeClass('current');
// ...
to:
$(this).children('.at-tabs-nav').children('.at-tabs-nav__item').click(function(ele) {
$(this).closest('.at-tabs').children('.at-tabs-nav')
.children('.current').removeClass('current')
.children('.current').removeClass('current');
// ...
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var $mainContainer = $(this);
var $menuContainer = $(this).find('.at-tabs-nav__item');
var $label = $(this).find('.at-tab-__title_text');
var $content = $(this).find('.at-tabs-content__item');
$content.hide();
//adding data attribute
$label.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$($menuContainer[0], $label[0]).addClass('current');
$($content[0]).show();
//Display current tab content
$(this).children('.at-tabs-nav').children('.at-tabs-nav__item').click(function(ele) {
//debugger;
$(this).closest('.at-tabs').children('.at-tabs-nav').children('.current').removeClass('current').children('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-tab-__title_text').addClass('current');
$(this).closest('.at-tabs').find('.at-tabs-content:first > .at-tabs-content__item').hide();
$(this).closest('.at-tabs').find('.at-tabs-content:first > .at-tabs-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.tab-warp {
width: 500px;
margin: 0 auto;
}
.at-tabs-nav__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tabs-nav {
display: flex;
padding: 28px 0px;
}
a.at-tabs-title {
text-decoration: none;
font-size: 18px;
color: black;
}
.current a.at-tabs-title {
color: #fff;
}
.at-tabs-nav__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-tabs-content {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
/* Vertial tabs */
.at-tabs.at-vertical {
display: flex;
}
.at-vertical .at-tabs-nav {
display: flex;
flex-direction: column;
padding: 28px 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-warp">
<div id="at-tabs-c2a3d74" class="at-tabs">
<div class="at-tabs-nav">
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text current">Tab #1</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Tab #2</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Tab #3</span>
</div>
</a>
</div>
</div>
<div class="at-tabs-content">
<div class="at-tabs-content__item">
<div id="at-tabs-c2a3d74" class="at-tabs">
<div class="at-tabs-nav">
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text current">Sub Tab #1</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Sub Tab #2</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Sub Tab #3</span>
</div>
</a>
</div>
</div>
<div class="at-tabs-content">
<div class="at-tabs-content__item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
I am item content. Click edit button to change this text. Lorem ipsum dolor sius, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
</div>
</div>
</div>
<div class="at-tabs-content__item">
ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adnec ullamcorper mattis, pulvinar dapibus leo.
</div>
</div>
</div>
Here is what I am trying to do,
I want to add a JavaScript event handler so that when the user moves the mouse cursor onto the content element, a timeout timer is started that will set the opacity of the payWall element to 1.0 – three second later.
Then I want to dd another JavaScript event handler so that when the user clicks the subscribe button, an alert box appears with the message “Subscribing now.”
When the alert is OK-ed, the payWall slides down the page and out of sight. I think I will need to set an interval timer so that the payWall moves down like 2 pixels every 30 milliseconds.
I am not sure how to do it, I tried my best, but if someone can please help me, I would really appreciate it.
function init()
{
document.getElementById("subscribe").onclick = function()
{
}
}
window.onload=init;
* {
margin: 0;
box-sizing: border-box;
}
body {
font: 1em Verdana, sans-serif;
background-color: antiquewhite;
}
h2, h4 {
text-align: center;
}
#header {
border-bottom: 2px solid black;
font-size: 2.5em;
padding: 0.5em 0;
height: 100px;
}
#footer {
border-top: 2px solid black;
padding: 1em 0;
}
#header, #footer {
text-align: center;
background-color: #CCC;
}
#leftnav, #rightnav {
position: absolute;
width: 20%;
padding-top: 3em;
}
#rightnav{
left: 80%;
}
#wrapper {
background-color: dodgerblue;
overflow: hidden;
}
#content div {
border: 1px solid black;
border-radius: 10px;
padding: 0.5em;
margin-bottom: 10px;
background-color: #ccc;
}
#content div:last-child {
margin-bottom: 0px;
}
#content div:hover {
border-color: dodgerblue;
background-color: white;
}
#content {
padding: 0.5em;
margin: 0 20%;
border-left: 2px solid black;
border-right: 2px solid black;
background-color: white;
}
/* ---------------------------------------------------------*/
#payWall {
background-color : darkseagreen;
font-size: 2em;
opacity: 0.5;
}
<body>
<div id="header">
The Header
</div>
<div id="wrapper"> <!-- Can be used to apply bg colour -->
<div id="leftnav">
<h4> Left</h4>
</div>
<div id="rightnav">
<h4> Right</h4>
</div>
<div id="content">
<div>
<h2> Article 1 </h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse ultricies condimentum velit vel scelerisque.
</p>
</div>
<div>
<h2> Article 2 </h2>
<p>
Mauris sagittis aliquam odio vitae pulvinar.
Suspendisse id dolor nibh, sed consectetur sem.
Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis.
Morbi accumsan tempus neque, sed varius lectus molestie imperdiet.
Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac.
</p>
</div>
<div>
<h2> Article 3 </h2>
<p>
Proin ultrices lectus vel orci lacinia a iaculis nibh hendrerit.
Mauris sagittis aliquam odio vitae pulvinar.
Suspendisse id dolor nibh, sed consectetur sem.
Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis.
Morbi accumsan tempus neque, sed varius lectus molestie imperdiet.
Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac.
</p>
</div>
</div> <!-- end of content -->
</div> <!-- end of wrapper -->
<div id="footer">
<h3>
The End
</h3>
<div id="payWall">
For further access please subscribe here. <br>
<button id="subscribe"> Subscribe</button>
</div>
</div>
</body>
First:
Use <div onmouseenter='setTimeout(doStuff, 3000)'> for a three second delay when the cursor enters the div
In JS:
Add a function, doStuff, which has the following code:
document.getElementById('payWall').style.opacity = '1';
document.getElementById('subscribe').onclick = function(){
alert("Subscribing now");
vanishPayWall();
}
One problem is that the payWall would just keep moving down the page. If you wanted it to disappear, you'd want to put overflow-y: hidden on the payWall, and shorten the paywall by 2px every time as well as setting the upper margin to 2px higher. Maybe something like
function vanishPayWall() {
var key = window.setInterval(function(){
var pw = document.getElementById('payWall');
pw.style.height = String(Number(pw.style.height.slice(-2)) - 2) + 'px';
pw.style.marginTop = String(Number(pw.style.height.slice(-2)) + 2) + 'px';
}, 25)
setTimeout(function(){
clearInterval(key)
}, Number(pw.style.height.slice(-2)) * 12.5)
}
Not absolutely sure this will work, but it should help out a bit.
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