Develop Reference

Jquery search not working properly in accordion?

Here if search text matches the text of <a> tag I want to hide other unmatched items.
Here what is happening is if the searched input does not match any thing then only the accordion disappears otherwise nothing happens.
I want to display only the accordion which matches the searched text and hide unmatched .How can I do it here ?
script
jQuery("#query").keyup(function () {
var filter = jQuery(this).val();
jQuery("#accordion").each(function () {
if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
jQuery(this).hide();
} else {
jQuery(this).show()
}
});
});
html
<input type="text" id="query" >
<div class="crollable">
<div id="accordion">
<div class="card">
<div class="card-header">
<a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a>
</div>
<div id="collapse1" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a>
</div>
<div id="collapse2" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value2</div>
</div>
</div>

Your html structure are missing some tags . Then you can iterate through your [data-toggle] element and if match found hide closest card from that elements.
Demo Code :
jQuery("#query").keyup(function() {
var filter = jQuery(this).val().toLowerCase(); //get text
//loop through `a` tag
jQuery("#accordion [data-toggle]").each(function() {
if (jQuery(this).text().toLowerCase().trim().indexOf(filter) < 0) {
jQuery(this).closest(".card").hide(); //hide closest card
} else {
jQuery(this).closest(".card").show()
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="text" id="query">
<div class="crollable">
<div id="accordion">
<div class="card">
<div class="card-header">
<a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a>
</div>
<div id="collapse1" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a>
</div>
<div id="collapse2" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value2</div>
</div>
</div>
</div>
</div>
</div>

This should be easy. its a little mistake that you did.
jQuery("#query").keyup(function () {
var filter = jQuery(this).val().toLowerCase();
// Search function return 0 when it dose not find anything.
// and the Regexp should be using g instead of i so the problem with casesensetive should be solved.
jQuery("#accordion .card-body .col-3").each(function () {
var text = jQuery(this).text().toLowerCase();
if (text.indexOf(filter) == -1) {
jQuery(this).hide();
} else {
jQuery(this).show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="query" >
<div class="crollable">
<div id="accordion">
<div class="card">
<div class="card-header">
<a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a>
</div>
<div id="collapse1" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a>
</div>
<div id="collapse2" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value2</div>
</div>
</div>

setTimeout function on a <div>

I am working on my own portfolio and I want to put a delay between 2 pages with a setTimeout function. I've tried some ways but haven't worked yet. I am already using a function to open my "href" with all my box but now I just want to put a delay to go from accueil.html to presentation.html.
"accueil.html":
document.addEventListener('DOMContentLoaded', function()
{
var items = document.querySelectorAll('.ouverture');
for (var i = 0; i < items.length; i++)
{
var item = items[i];
item.addEventListener('click', function()
{
var url = this.getElementsByTagName('a');
url = url[0];
window.location = url;
});
}
});
<div class="box">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="box-part text-center ouverture">
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<div class="title">
<h4>Présentation</h4>
</div>
</div>
</div>
</div>
</div>
</div>

Just add a timeout add the part where you redirect to another page:
item.addEventListener('click', function() {
var url = this.getElementsByTagName('a');
if(url.length > 0)
url = url[0];
setTimeOut(() => {
window.location = url;
}, 2000); // 2000 = 2000ms === 2sec
});
More info is found here

A general-purpose snippet that "delays" clicks. Just add the script at the top of the page and use the delay-click[=numberOfMilliseconds] attribute.
document.body.addEventListener("click", function(event) {
var target = event.target;
var currentTarget = target.closest("[delay-click]:not(.delay-click-ignore)");
if (!currentTarget) return;
var delay = +currentTarget.getAttribute("delay") || 2000;
currentTarget.classList.add("delay-click-ignore");
setTimeout(function() {
target.click();
currentTarget.classList.remove("delay-click-ignore");
}, delay);
event.preventDefault();
});
.delay-click-ignore,
.delay-click-ignore a,
.delay-click-ignore input,
.delay-click-ignore button {
cursor: progress !important;
}
<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">
<div class="box">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="box-part text-center ouverture">
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<div class="title">
<!-- on the element itself -->
<h4><a href="presentation.html" delay-click>default delay</a></h4>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<!-- or somewhere up the ranks -->
<div class="box-part text-center ouverture" delay-click=5000>
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<div class="title">
<h4>delay 5s</h4>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="box-part text-center ouverture">
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<div class="title">
<h4>immediate</h4>
</div>
</div>
</div>
</div>
<div class="form-group">
<!-- works here too -->
<input type="checkbox" class="form-control" delay-click />
</div>
</div>
</div>

Change Bootstrap's carousel arrow color when slide changes

I got this working for a single carousel. However, when there's more than 1 carousel, it doesn't work.
Could some help? It works only when one carousel is added.
JSFIDDLE: https://jsfiddle.net/177eLsmh/
HTML
<span class="pull-right">
<a class="" href="#TeamCarousel" data-slide="prev"><i class="controls class-fade"> << </i></a>
<a class="" href="#TeamCarousel" data-slide="next"><i class="controls class-active"> >> </i></a>
</span>
<hr />
<div class="row">
<div class="carousel slide" data-interval="false" data-wrap="false" id="TeamCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-6">
<p>
Slide1 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide2 goes here
</p>
</div>
</div>
<div class="item">
<div class="col-xs-6">
<p>
Slide3 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide4 goes here
</p>
</div>
</div>
<div class="item">
<div class="col-xs-6">
<p>
Slide5 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide6 goes here
</p>
</div>
</div>
<div class="item">
<div class="col-xs-6">
<p>
Slide7 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide8 goes here
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<span class="pull-right">
<a class="" href="#Team1Carousel" data-slide="prev"><i class="controls class-fade"> << </i></a>
<a class="" href="#Team1Carousel" data-slide="next"><i class="controls class-active"> >> </i></a>
</span>
<hr />
<div class="row">
<div class="carousel slide" data-interval="false" data-wrap="false" id="Team1Carousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-6">
<p>
Slide1 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide2 goes here
</p>
</div>
</div>
<div class="item">
<div class="col-xs-6">
<p>
Slide3 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide4 goes here
</p>
</div>
</div>
<div class="item">
<div class="col-xs-6">
<p>
Slide5 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide6 goes here
</p>
</div>
</div>
<div class="item">
<div class="col-xs-6">
<p>
Slide7 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide8 goes here
</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.class-fade {
color: grey;
}
.class-active {
color: red;
}
JS
$('#TeamCarousel').on('slide.bs.carousel', function (e) {
var inner = document.querySelector('.carousel-inner');
var controls = document.querySelectorAll('.controls');
if (e.direction === 'left') {
controls[0].className = 'controls class-active';
}
if (e.direction === 'right') {
controls[1].className = 'controls class-active'
}
if (e.relatedTarget == inner.lastElementChild) {
controls[1].className = 'controls class-fade'
}
if (e.relatedTarget == inner.firstElementChild) {
controls[0].className = 'controls class-fade'
}
})
$('#Team1Carousel').on('slide.bs.carousel', function (e) {
var inner = document.querySelector('.carousel-inner');
var controls = document.querySelectorAll('.controls');
if (e.direction === 'left') {
controls[0].className = 'controls class-active';
}
if (e.direction === 'right') {
controls[1].className = 'controls class-active'
}
if (e.relatedTarget == inner.lastElementChild) {
controls[1].className = 'controls class-fade'
}
if (e.relatedTarget == inner.firstElementChild) {
controls[0].className = 'controls class-fade'
}
})

Check below solution. You were using same class for both carousel that was causing this issue.
$('#TeamCarousel').on('slide.bs.carousel', function (e) {
var inner = document.querySelector('#first-carousel-inner');
var controls = document.querySelectorAll('.first_carousel');
if (e.direction === 'left') {
controls[0].className = 'first_carousel class-active';
}
if (e.direction === 'right') {
controls[1].className = 'first_carousel class-active'
}
if (e.relatedTarget == inner.lastElementChild) {
controls[1].className = 'first_carousel class-fade'
}
if (e.relatedTarget == inner.firstElementChild) {
controls[0].className = 'first_carousel class-fade'
}
})
$('#Team1Carousel').on('slide.bs.carousel', function (e) {
var inner = document.querySelector('#second-carousel-inner');
var controls = document.querySelectorAll('.second_carousel');
if (e.direction === 'left') {
controls[0].className = 'second_carousel class-active';
}
if (e.direction === 'right') {
controls[1].className = 'second_carousel class-active'
}
if (e.relatedTarget == inner.lastElementChild) {
controls[1].className = 'second_carousel class-fade'
}
if (e.relatedTarget == inner.firstElementChild) {
controls[0].className = 'second_carousel class-fade'
}
})
.class-fade {
color: grey;
}
.class-active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<span class="pull-right">
<a class="" href="#TeamCarousel" data-slide="prev"><i class="controls class-fade first_carousel"> << </i></a>
<a class="" href="#TeamCarousel" data-slide="next"><i class="controls class-active first_carousel"> >> </i></a>
</span>
<hr />
<div class="row">
<div class="carousel slide" data-interval="false" data-wrap="false" id="TeamCarousel">
<div class="carousel-inner" id="first-carousel-inner">
<div class="item active">
<div class="col-xs-6">
<p>
Slide1 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide2 goes here
</p>
</div>
</div>
<div class="item">
<div class="col-xs-6">
<p>
Slide3 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide4 goes here
</p>
</div>
</div>
<div class="item">
<div class="col-xs-6">
<p>
Slide5 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide6 goes here
</p>
</div>
</div>
<div class="item">
<div class="col-xs-6">
<p>
Slide7 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide8 goes here
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<span class="pull-right">
<a class="" href="#Team1Carousel" data-slide="prev"><i class="controls class-fade second_carousel"> << </i></a>
<a class="" href="#Team1Carousel" data-slide="next"><i class="controls class-active second_carousel"> >> </i></a>
</span>
<hr />
<div class="row">
<div class="carousel slide" data-interval="false" data-wrap="false" id="Team1Carousel">
<div class="carousel-inner" id="second-carousel-inner">
<div class="item active">
<div class="col-xs-6">
<p>
Slide1 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide2 goes here
</p>
</div>
</div>
<div class="item">
<div class="col-xs-6">
<p>
Slide3 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide4 goes here
</p>
</div>
</div>
<div class="item">
<div class="col-xs-6">
<p>
Slide5 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide6 goes here
</p>
</div>
</div>
<div class="item">
<div class="col-xs-6">
<p>
Slide7 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide8 goes here
</p>
</div>
</div>
</div>
</div>
</div>
</div>

In your second carousel on slide function you need to edit the index value you are using to access the controls array, as there are 4 controls in the array. You also need to make sure you're targeting the correct '.carousel-inner' so that .lastElementChild and .firstElementChild are working properly
$('#Team1Carousel').on('slide.bs.carousel', function (e) {
console.log(e.relatedTarget);
var inner = document.querySelector('#Team1Carousel .carousel-inner');
var controls = document.querySelectorAll('.controls');
if (e.direction === 'left') {
controls[2].className = 'controls class-active'; //changed from controls[0].className
}
if (e.direction === 'right') {
controls[3].className = 'controls class-active' //changed from controls[1].className
}
if (e.relatedTarget == inner.lastElementChild) {
controls[3].className = 'controls class-fade' //changed from controls[1].className
}
if (e.relatedTarget == inner.firstElementChild) {
controls[2].className = 'controls class-fade'//changed from controls[0].className
}
})

Try to change <i class="controls class-fade"> << </i> to <i class="controls class-active"> << </i>

jQuery. Bootstrap wizard not going to next step

I am using a bootstrap wizard but when you click on the next step, it's not going forward .
I am trying to make it go all the way and enable the previous once it reaches the end.
For some reason its not working correctly
my FIDDLE
$(document).ready(function() {
var navListItems = $('ul.setup-panel li a'),
allWells = $('.setup-content');
allWells.hide();
navListItems.click(function(e)
{
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this).closest('li');
if (!$item.hasClass('disabled')) {
navListItems.closest('li').removeClass('active');
$item.addClass('active');
allWells.hide();
$target.show();
}
});
$('ul.setup-panel li.active a').trigger('click');
$('#activate-step-2').on('click', function(e) {
$('ul.setup-panel li:eq(1)').removeClass('disabled');
$('ul.setup-panel li a[href="#step-2"]').trigger('click');
$(this).remove();
})
$('#activate-step-3').on('click', function(e) {
$('ul.setup-panel li:eq(1)').removeClass('disabled');
$('ul.setup-panel li a[href="#step-3"]').trigger('click');
$(this).remove();
})
});

First: you missed the next buttons in your html like:
<button id="activate-step-4" class="btn btn-primary btn-lg">Activate Step 4</button>
If you need to cycle both on the container and setup you can implement this behavior in one of the two container and make the other to follow the first one.
I rearranged your code so that you can cycle in a cyclic way (updated fiddle here).
If, instead, you want to cycle only on the setup you may consider a new event: clickwiz instead of click.
The snippet:
$(document).ready(function() {
var navListItems = $('ul.setup-panel li a'),
allWells = $('.setup-content');
allWells.hide().eq(0).show();
navListItems.on('click', function(e)
{
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this).closest('li');
if (!$item.hasClass('disabled')) {
navListItems.closest('li').removeClass('active').addClass('disabled');
allWells.hide();
if ($item.next('li').length == 0) {
//
// for cyclic: go back to first ele
//
navListItems.eq(0).closest('li').removeClass('disabled').addClass('active');
allWells.eq(0).show();
} else {
$item.next('li').removeClass('disabled').addClass('active');
$target.next('div').show();
}
}
});
$('[id^="activate-step-"]').on('click', function(e) {
var href = '#' + $(this).closest('.setup-content').attr('id');
$('ul.setup-panel li a[href="' + href + '"]').trigger('click');
})
});
body{
margin-top:20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row form-group">
<div class="col-xs-12">
<ul class="nav nav-pills nav-justified thumbnail setup-panel">
<li class="active"><a href="#step-1">
<h4 class="list-group-item-heading">Step 1</h4>
<p class="list-group-item-text">First step description</p>
</a></li>
<li class="disabled"><a href="#step-2">
<h4 class="list-group-item-heading">Step 2</h4>
<p class="list-group-item-text">Second step description</p>
</a></li>
<li class="disabled"><a href="#step-3">
<h4 class="list-group-item-heading">Step 3</h4>
<p class="list-group-item-text">Third step description</p>
</a></li>
<li class="disabled"><a href="#step-4">
<h4 class="list-group-item-heading">Step 4</h4>
<p class="list-group-item-text">Fourth step description</p>
</a></li>
</ul>
</div>
</div>
<div class="row setup-content" id="step-1">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1> STEP 1</h1>
<button id="activate-step-2" class="btn btn-primary btn-lg">Activate Step 2</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1 class="text-center"> STEP 2</h1>
<button id="activate-step-3" class="btn btn-primary btn-lg">Activate Step 3</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1 class="text-center"> STEP 3</h1>
<button id="activate-step-4" class="btn btn-primary btn-lg">Activate Step 4</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-4">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1 class="text-center"> STEP 4</h1>
<button id="activate-step-1" class="btn btn-primary btn-lg">Activate Step 1</button>
</div>
</div>
</div>
</div>

remove parent if no list element has children

On my Website I have a list with different classes which maybe have content or not. If all of them are empty the whole container should be removed, but if one or more have content inside, nothing should happen.
Code Snippets:
<div class="fts">
<div class="panel-heading">...</div>
<div class="panel-collapse">
<div class="panel-body">
<div class=" bd-layoutbox-16 clearfix">
<div class="bd-container-inner">
<h5>Heading 5</h5>
<div>...</div>
</div>
</div>
<div class=" bd-layoutbox-84 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-31 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-82 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-85 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-86 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-87 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-88 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-89 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-90 clearfix">
<div class="bd-container-inner"></div>
</div>
</div>
</div>
</div>
JS
$(".bd-layoutbox-84, .bd-layoutbox-31, .bd-layoutbox-82, .bd-layoutbox-85, .bd-layoutbox-86, .bd-layoutbox-87, .bd-layoutbox-88, .bd-layoutbox-89, .bd-layoutbox-90")
.each(function(){
if($(this).has("h5").length == 0){
$(this).parent().parent().parent().remove();
}
});
What's the problem?
Thanks for help.

You may need to rework your logic a bit by creating a function, but here's a thought ..
var removethis=1;
$(".bd-layoutbox-84, .bd-layoutbox-31, .bd-layoutbox-82, .bd-layoutbox-85, .bd-layoutbox-86, .bd-layoutbox-87, .bd-layoutbox-88, .bd-layoutbox-89, .bd-layoutbox-90")
.each(function(){
if($(this).has("h5").length > 0){
removethis = 0;
}
});
if (removethis == 1) {
// remove parent item here
}

You can use contains selector to check any content there or not and then remove it. Below is the code
$('div.fts').each(function() {
var $this = $(this);
if ($this.find('div[class*="bd-layoutbox-"] h5').length === 0) {
$this.remove();
}
});
Demo: https://jsfiddle.net/6bh0d9yo/1/