Develop Reference

jquery filter search needs to search within categories

I'm creating a jquery filter search.
I want to be able to search within a filtered category. I can filter out categories, but if I search within the selected category the search searches through the whole bunch but not only the selected category.
The search is almost working as it should, but I'm not sure how I can implement the search within categories criteria.
Here is a link to a fiddle
Any help or advise would be very much appreciated
$(document).ready(function(){
$("#searchInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#searchFilterDiv div.CompanyDirectoryItem").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
if($('#searchFilterDiv div.CompanyDirectoryItem:visible').length===0){
$('.error').show();
}else{
$('.error').hide();
}
});
});
$(".filter-button").on("click", function(){
var selectItem = $(this).data('category');
filter(selectItem);
});
function filter(e) {
var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
$('.CompanyDirectoryItem').hide().filter(function () {
return regex.test($(this).data('name'))
}).show();
if($('.CompanyDirectoryItem:visible').length===0){
$('.error').show();
}else{
$('.error').hide();
}
}
$('.box-item').on('click', function(){
$('.box-item').removeClass('selected');
$(this).addClass('selected');
});
.search-form-item{
margin-top: 30px;
background-color: #f9f9f9;
border: 1px solid lightgrey;
margin-bottom: 2em;
padding: 20px;
font-size: .9em;
text-align: left;
}
/* Thjonusta AO */
.boxes-centered{
text-align:center;
}
.box-item{
color: #333;
background-color: #fff;
border: 1px solid #ccc;
padding: 20px 10px;
margin: 1.7em .8em 1.7em .8em;
max-width: 10vw;
font-size: 1.1em;
font-weight: 500;
cursor: pointer;
display:inline-block;
float:none;
text-align:center;
}
.box-item:hover{
border-color: blue;
}
.box-item.selected{
border-color:red;
color:red;
}
.search-form-service {
border: 1px solid lightgray;
margin-left: 8.333%;
margin-right: 8.333%;
background: #fff;}
.search-form-service .form-control {
border-radius: 0 !important;
box-shadow: none;
-webkit-appearance: none;
border: 0;
height: 50px;
font: 18px "DINPro", Arial, sans-serif;
padding: 15px;
color: #4b4b4b; }
.search-form-service .form-control::-moz-placeholder {
color: #4b4b4b;
opacity: 1; }
.search-form-service .form-control:-ms-input-placeholder {
color: #4b4b4b; }
.search-form-service .form-control::-webkit-input-placeholder {
color: #4b4b4b; }
#media (max-width: 767px) {
.search-form-service .form-control {
font-size: 16px;
height: 50px;
padding: 10px 12px; } }
.search-form-service .btn-search {
border-width: 0 0 0 1px; }
.search-form-service .input-group-btn {
z-index: 5; }
.search-form-service.type2 {
max-width: 281px; }
.search-form-service.type2 .form-control {
height: 39px;
padding: 8px 15px; }
.search-form-service.type2 .btn-search {
min-width: 57px;
height: 39px; }
/*Custom Media Quearies */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container form-container">
<div class="row search-form-item">
<div class="col-md-10 col-md-offset-1 searchtext-input search-form-service">
<input class="form-control" id="searchInput" type="text" placeholder="Search">
</div>
<div class="row boxes-centered">
<div class="col-md-2 col-md-offset-1 box-item filter-button" data-category="EveryCat">Every Category</div>
<div class="col-md-2 box-item filter-button" data-category="Category1">Category1</div>
<div class="col-md-2 box-item filter-button" data-category="Category2">Category2</div>
<div class="col-md-2 box-item filter-button" data-category="Category3">Category3</div>
<div class="col-md-2 box-item filter-button" data-category="Category4">Category4</div>
</div>
</div>
</div><!-- / container -->
<div id="searchFilterDiv">
<div class="CompanyDirectoryItem" data-name="EveryCat, Category1">
<h3>this belongs to Category1</h3>
<p>Some text, more text more text more text </p>
some link
</div>
<div class="CompanyDirectoryItem" data-name="EveryCat, Category2">
<h3>this belongs to Category2</h3>
<p>Some text, more text more text more text </p>
some link
</div>
<div class="CompanyDirectoryItem" data-name="EveryCat, Category3">
<h3>Item belongs to Category3</h3>
<p>Some text, more text more text more text </p>
some link
</div>
<div class="CompanyDirectoryItem" data-name=" EveryCat, Category4">
<h3>Item in Cat 4</h3>
<p> this item belongs to Category4 </p>
some link
</div>
<div class="CompanyDirectoryItem" data-name="EveryCat, Category4, Category1">
<h3> this belongs to 1 and Category4</h3>
<p>Some text, text about this item that belongs to category 1 and 4 </p>
some link
</div>
<div class="CompanyDirectoryItem" data-name="EveryCat, Category3, Category2">
<h3>Item belongs to Category2 and Category3</h3>
<p>Some text, more text more text more text Category2 and Category3 txoeljljl </p>
some link
</div>
<div class="alert alert-error"></div>
<div class="error search-results-box-item" style="display: none;">
<h3>No Results</h3>
<p> Search gave no results, please try again </p>
</div>
</div> <!-- searchFilterDiv ends -->

You want to search from visible sections only:
$("#searchFilterDiv div.CompanyDirectoryItem:visible").filter(function() {
EDIT
To keep searching/filtering functionality I suggest to use detach/attach:
let tmp=[];
function filter(e) {
if(tmp.length>0)
tmp.map(x => x.appendTo($('#searchFilterDiv')));
var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
$('.CompanyDirectoryItem').detach().filter(function () {
if(regex.test($(this).data('name')))
return true
else
tmp.push($(this))
}).appendTo($('#searchFilterDiv'));
}
and now you can use your initial search/filtering function
$("#searchFilterDiv div.CompanyDirectoryItem").filter(function() {

Div fade away on click and reveal other div

So let's say I have something like this:
body {
background: #ffffff;
}
.table {
display: table;
margin: 0px auto;
max-width: 400px
}
.row {
display: table-row;
width: 100%
}
.td1,
.td2,
.td3 {
display: table-cell;
border: 2px #aaaaaa solid;
padding: 15px;
background: #eeeeee;
font-size: 18px;
color: #000000;
width: 100%;
}
.td2,
.td3 {
border-top: none;
color: red;
}
<body>
<div class="table">
<div class="row">
<div class="td1">Here is some random text</div>
</div>
<div class="row">
<div class="td2">This is the text you see at first</div>
</div>
<div class="row">
<div class="td3">This is the text below the other div</div>
</div>
</div>
Now, what I would like to do is have the td2 text to show when you first see the page, but not the td3. Then when clicking the td2 div it makes a fadeout or slides upwards, and then reveal the td3 div and that text. In this particular case the div doesn't have to come back when re-clicking. It's just like a "one way ticket". Click, and it's gone forever.
What might be the easiest way to do this ?

You could use JQuery UI to get the fade effect, and register to click event on .td2 in order to update the DOM as per your requirement. Here's one way of doing it:
$(".td2").on("click", function(){
$(".td2").fadeOut();
$(".td3").fadeIn();
});
body {
background: #ffffff;
}
.table {
display: table;
margin: 0px auto;
max-width: 400px
}
.row {
display: table-row;
width:100%
}
.td1, .td2, .td3 {
display: table-cell;
border: 2px #aaaaaa solid;
padding: 15px;
background: #eeeeee;
font-size: 18px;
color: #000000;
width:100%;
}
.td2, .td3 {
border-top: none;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery-ui.min.js"></script>
<div class="table">
<div class="row">
<div class="td1">Here is some random text</div>
</div>
<div class="row">
<div class="td2">This is the text you see at first</div>
</div>
<div class="row">
<div class="td3" style="display:none">This is the text below the other div</div>
</div>
</div>

$('.td2').on('click', function() {
$(this).fadeOut(200).promise()
.done(function() {
$('.td3').fadeIn(200);
});
});
.table {
display: table;
margin: 0px auto;
max-width: 400px
}
.row {
display: table-row;
width: 100%
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
<div class="row">
<div class="td1">
Here is some random text
</div>
</div>
<div class="row">
<div class="td2">
This is the text you see at first
</div>
</div>
<div class="row">
<div class="td3 hide">
This is the text below the other div
</div>
</div>
</div>
You will need to learn some javascript and some jQuery for this ;)

Add this to your css:
.td3{
display: none;
}
And write this javascript:
$('.td2').on( "click", function(){
$('.td2').fadeOut();
$('.td3').fadeIn();
});

bootstrap change background color on click

I want to change the background color of the column when it is clicked and revert back to its initial color when another column is clicked on.
Please check the code on codepen link.
<div class="row">
<div class="col-sm-2 col2">Type</div>
<a href="#" class="link">
<div class="col-sm-5 col3">Close Ended</div>
</a>
<a href="#" class="link">
<div class="col-sm-5 col4">Open Ended</div>
</a>
http://codepen.io/SantoshNeela/pen/zKYAOa

First in your codepen you haven't included Jquery.
Include it.
Then if you want to change the color of the background you can do it by adding this code
.active div{
background-color:red!important;
}
the jquery code is ok.
$('a.link').click(function() {
$('a.link').removeClass('active');
$(this).addClass('active');
});
.active div{
background-color:red!important;
}
.stats-div {
display: inline-block;
text-align: center;
margin-left: 20px;
}
.stats-div .row .col2 {
background: grey;
margin-left: -10px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding: 8px;
font-weight: bold;
color: white;
}
.stats-div .row .col3 {
background: lightgrey;
padding: 8px;
font-weight: bold;
color: black;
border-right-style: ridge;
}
.stats-div .row .col4 {
background: lightgrey;
padding: 8px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
font-weight: bold;
}
.stats-div .row a,
a:visited {
background: lightgrey
}
a.link {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stats-div col-sm-6 col-md-6">
<div class="row">
<div class="col-sm-2 col2">Type</div>
<a href="#" class="link">
<div class="col-sm-5 col3">Close Ended</div>
</a>
<a href="#" class="link">
<div class="col-sm-5 col4">Open Ended</div>
</a>
</div>

$('a.link').click(function(e) {
$('a.link').each(function(i, el) {
// Remove existing active classes
$(el).removeClass('active');
})
// Set the new (clicked) class as active.
$(e.target).addClass('active');
})
Also, don't forget to include jQuery in your codepen.io.

You can find using JavaScript please ref this back ground color changer http://jsfiddle.net/p7w9W/2/
var $p = $("#P44");
$p.stop()
.css("background-color","yellow")
.hide(1500, function() {
$p.css("background-color","red")
.show(1500);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"> </script>
<div class="row">
<div class="col-sm-2 col2">Type</div>
<a href="#" class="link">
<div class="col-sm-5 col3">Close Ended</div>
</a>
<a href="#" class="link">
<div class="col-sm-5 col4">Open Ended</div>
</a>
Just add jquery in your head, nothing else

Smooth Scroll On Button Click

I am using this code for scroll on an anchor link. It works one time and if click on anchor again it is not working.
$("#erly").on("click", function() {
$(".table-responsive").scrollLeft(0);
});
$("#late").on("click", function() {
$(".table-responsive").scrollLeft(50);
});

You may try unbinding the previous event handlers, like this.
$("#erly").unbind().on("click", function() {
$(".table-responsive").scrollLeft(0);
});
$("#late").unbind().on("click", function() {
$(".table-responsive").scrollLeft(50);
});
div.table-responsive {
background: #ccc none repeat scroll 0 0;
border: 3px solid #666;
margin: 5px;
padding: 5px;
position: relative;
width: 200px;
height: 100px;
overflow: auto;
}
p {
margin: 10px;
padding: 5px;
border: 2px solid #666;
width: 1000px;
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<a id="erly" href="#1">Early</a>
<br />
<a id="late" href="#2">Late</a>
<div class="table-responsive">
<h1>lalala</h1>
<p>Hello 1</p>
</div>
<div class="table-responsive">
<h1>lalala</h1>
<p>Hello 2</p>
</div>
</body>

<div class="col-xs-12 early_late">
<ul class="list-inline">
<li class="pull-left">
<a id="erly" class="erlier" onclick="scrollWin2()">
<span class="glyphicon glyphicon-menu-left span_left"></span> Earlier</a>
</li>
<li class="pull-right" onclick="scrollWin()">
<a id="late">Late <span class="glyphicon glyphicon-menu-right span_right"></span></a>
</li>
</ul>
function scrollWin() {
document.getElementById('scroll').scrollBy(100 , 0);
}
function scrollWin2() {
document.getElementById('scroll').scrollBy(-100 , 0);
}

Why is my carousel snapping to the top on user interaction?

I've made a carousel on my single page website that displays some of my photography work. The problem I'm having is that whenever I click one of the arrows to access the next picture - left or right, I am instantly snapped to the top of the page!
I've checked through both the CSS and JS and I can't seem to find any reason as to why this would be occurring.
HTML:
<div class="container">
<h3><span class="underline">Exploration</span></h3>
<p>I love exploring and capturing epic moments on my journeys. Here's some of my favourites from my latest trip across the west coast of America.</p>
</div>
<div class="slider">
<!--SLIDE 1 START-->
<div class="slide active-slide slide-feature slide-feature-1">
<div class="container">
<div class="row">
</div>
</div>
</div>
<!--SLIDE 1 END-->
<!--SLIDE 2 START-->
<div class="slide slide-feature slide-feature-2">
<div class="container">
<div class="row">
</div>
</div>
</div>
<!--SLIDE 2 END-->
<!--SLIDE 3 START-->
<div class="slide slide-feature slide-feature-3">
<div class="container">
<div class="row">
</div>
</div>
</div>
<!--SLIDE 3 END-->
<!--SLIDE 4 START-->
<div class="slide slide-feature slide-feature-4">
<div class="container">
<div class="row">
</div>
</div>
</div>
<!--SLIDE 4 END-->
<!--SLIDE 5 START-->
<div class="slide slide-feature slide-feature-5">
<div class="container">
<div class="row">
</div>
</div>
</div>
<!--SLIDE 5 END-->
</div>
<div class="slider-nav">
<img src="images/arrow-left.svg">
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<img src="images/arrow-right.svg">
</div>
</div>
<!--FLIPBOARD ENDS HERE-->
</div>
CSS:
.exploration {
height: 1100px;
background-color: #ffffff;
}
.exploration .container {
position: relative;
top: 35px;
width: 1200px;
}
.exploration h3 {
color: #313131;
font-size: 40px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
padding-bottom: 20px;
text-align: center;
}
.exploration p {
color: #313131;
font-size: 20px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
text-align: center;
}
.slider {
position: relative;
top: 50px;
width: 100%;
height: 800px;
}
.slide {
display: none;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
/* Slide feature */
.slide-feature {
text-align: center;
height: 800px;
}
.slide-feature-1 {
background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xaf1/t31.0-8/11036160_10152854777396270_5157414753497878003_o.jpg');
background-position: center;
}
.slide-feature-2 {
background-image: url('https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xta1/t31.0-8/11218515_10152909922431270_7749144937209461633_o.jpg');
background-position: center;
}
.slide-feature-3 {
background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xpa1/t31.0-8/11187795_10152891725491270_1769195601160147349_o.jpg');
background-position: bottom;
}
.slide-feature-4 {
background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xaf1/t31.0-8/11154672_10152854784061270_3532862830070230799_o.jpg');
background-position: center;
}
.slide-feature-5 {
background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/11164749_10152909922426270_8192461025609874418_o.jpg');
background-position: center;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
position: relative;
top: 40px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
position: relative;
top: 40px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
position: relative;
top: 40px;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #7FCCE5;
}
JS:
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
//Next Arrow Functionality
$('.arrow-next').click(function() {
var currentSlide=$('.active-slide');
var nextSlide=currentSlide.next();
var currentDot=$('.active-dot');
var nextDot=currentDot.next();
if (nextSlide.length == 0) {
nextSlide=$('.slide').first();
nextDot=$('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
//Previous Arrow Click Functionality
$('.arrow-prev').click(function() {
var currentSlide=$('.active-slide');
var prevSlide=currentSlide.prev();
var currentDot=$('.active-dot');
var prevDot=currentDot.prev();
if(prevSlide.length == 0) {
prevSlide=$('.slide').last();
prevDot=$('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
//Load Jumbotron text on page open.
$("#test h1").addClass("load");
};
$(document).ready(main);

You need to add e.preventDefault(); to your onlick functions
Check the fiddle
EDIT
As I just commented in the comment section it is the href="#" that is causing the page to the jump to the top. So technically if you remove the achor tag the e.preventDefault(); is not necessary. But it is good to keep it.

Add a parameter (e) to your click callback functions then prevent default post (that an anchor tag with href set has) with this line:
e.preventDefault();
like this:
//Next Arrow Functionality
$('.arrow-next').click(function (e) {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nextSlide.length == 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
e.preventDefault();
});
//Previous Arrow Click Functionality
$('.arrow-prev').click(function (e) {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length == 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
e.preventDefault();
});