Develop Reference

Using Javascript and JQuery to create a filter button

I'm trying to make my button functional on my website but for some reason it isn't working. I have been working on it endlessly and need some outside. If you could help with figuring out what I am doing wrong I would really appreciate it. I am still learning JavaScript and JQuery so all of this is new to me.
HTML Code:
<div id="portfolio">
<div class="container">
<div class="row">
<div class="heading">
<h2>PORTFOLIO</h2>
</div>
<div class="filter">
<ul id="filters">
<li><button class="btn active" data-filter="all">ALL</a></li>
</ul>
</div>
<div class="itemsContainer">
<ul class="items">
<li>
<div class="item" div class="column apps">
<img src="triviastartthumbnail.jpg">
<h4>Movie Trivia App</h4>
<p>This app was created to test users knowledge on how well they know their movies
and actors/actresses</p>
</div>
<ul class="img-list">
<span class="link">
<a href="https://vshorty2003.github.io/movietrivia/"><i class="fa fa-link">
</i></a></span>
<span class="search">
<a href="movietriviaappstart.JPG" figcaption="Movie Trivia App" /><i
class="fa fa-search"></i></a>
</span>
<li class="img-item">
<img class='item-img' src="html5-logo.png" alt="HTML icon" />
</li>
<li class="img-item">
<img class='item-img' src="css-3-logo.png" alt="CSS icon"/>
</li>
<li class="img-item">
<img class='item-img' src="js-icon-26.jpg" alt="JavaScript icon" />
</li>
<li class="img-item">
<img class='item-imgjq' src="jquery-icon-16-revised.png" alt="JQuery icon"/>
</li>
</li>
</ul>
CSS code:
/*for filtered buttons*/
li{
display: inline;
list-style: none;
}
JavaScript code:
$("button").click(function(){
$("button").removeClass("btn active");
$(this).addClass("btn active");
var dataFilter = $(this).data('filter');
if(dataFilter == "all") {
$(".filter ul").show();
}
else
{
$(".filter ul").hide();
$("." + dataFilter).show();
}
});

Javascript Scroll not working as expected

I am trying to implement a smooth scroll to another section from my navigation.
The following is the javascript function im using
:
<script type="text/javascript">
function goToByScroll(id){
// Reove "link" from the ID
// Scroll
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
$("#nav > ul > li > a").click(function(e) {
// Prevent a page reload when a link is pressed
e.preventDefault();
// Call the scroll function
goToByScroll($(this).attr("id"));
});
</script>
My HTML is as following :
<div class="module-group right">
<div class="module left" id="nav">
<ul class="menu">
<li class="">
<a href="#">
Home
</a>
</li>
<li class="">
<a id="about" href="#">
About Us
</a>
</li>
</ul>
</div>
</div>
My section is as below :
<section id="about">
<div class="container" id="">
<div class="row" id="">
<div class="col-sm-12">
<h4 class="uppercase mb80">About Us</h4>
<div class="tabbed-content button-tabs vertical">
<ul class="tabs">
<li class="active">
<div class="tab-title">
<span>Introduction</span>
</div>
<div class="tab-content">
<h5 class="uppercase">Let's Talk about</h5>
<hr>
<p align="justify">
</p>
</div>
</li>
<li>
<div class="tab-title">
<span>History</span>
</div>
<div class="tab-content">
<h5 class="uppercase">Our footprints on the sands of time..</h5>
<hr>
<p align="justify">
</p>
</div>
</li>
<li>
<div class="tab-title">
<span>Mission</span>
</div>
<div class="tab-content">
<h5 class="uppercase">Our Mission</h5>
<hr>
<p align="justify">
</p>
</div>
</li>
<li>
<div class="tab-title">
<span>Vision</span>
</div>
<div class="tab-content">
<h5 class="uppercase">Our Vision</h5>
<hr>
<p align="justify">
</p>
</div>
</li>
</ul>
</div>
<!--end of button tabs-->
</div>
</div>
<!--end of row-->
</div>
<!--end of container-->
</section>
I am facing problems calling the jquery function. I looked up on other questions asked and tried implementing an answer previously given, however it doesnt seem to be working for me.

Change your nav link to About Us.
Then change the function call to goToByScroll($(this).attr("href"));

You can not have two elements with the same id. Use the href like it was intended.
About Us
and when you read the hsah of the clicked anchor
function goToByScroll(id){
$('html,body').animate({
scrollTop: $(id).offset().top},
'slow');
}
$("#nav > ul > li > a").click(function(e) {
e.preventDefault();
goToByScroll(this.hash);
});
basic example:
function goToByScroll(id) {
$('html,body').animate({
scrollTop: $(id).offset().top
},
'slow');
}
$("#nav > ul > li > a").click(function(e) {
e.preventDefault();
goToByScroll(this.hash);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
<ul>
<li> About Us </li>
</ul>
</div>
<div style="height:300px;">x</div>
<div style="height:300px;">x</div>
<div id="about" style="height:300px; border: 1px solid black;">ABOUT</div>
<div style="height:300px;">x</div>

Use href attribute to store the id you need to scroll to. Also don't forget to wrap javascript in $(document).ready() to make sure event handlers are attached after the page is ready.
Here's javascript:
$(document).ready(function() {
function goToByScroll(id){
$('html,body').animate({
scrollTop: $(id).offset().top
}, 'slow');
}
$("#nav > ul > li > a").click(function(e) {
e.preventDefault();
goToByScroll($(this).attr("href"));
});
});
And in HTML:
<li class="">
<a href="#about">
About Us
</a>
</li>

add class on scroll in bootstrap tabing

i need a small help for add a class on scroll in bootstrap tabbing carousal.
so here is my page url
when i click on any point from tabing like 1,2,3.. active class is adding on tabing on same that is perfect i use this is script
$('#myCarousel').bind('mousewheel', function(e){$(this).carousel('next');});
$('.tab li').on('click', function(){
$('li.active').removeClass('active');
$(this).addClass('active');
});
it is working perfect as class is adding on li.active but i also want .active class on current tab when i scroll in tab container. i have added scroll code and working perfect but need class to add in .tab li when i scroll
here is HTML code as well
<div class="tab">
<div class="container-tab">
<ul class="list-inline nav">
<li data-target="#myCarousel" data-slide-to="0" class="active"> <a href="#">
<div class="round-tab-num"> 1 </div>
<p>Working Smart <small>not harder</small> </p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="1"> <a href="#">
<div class="round-tab-num"> 2 </div>
<p>Working Smart <small>not harder</small> </p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="2"> <a href="#">
<div class="round-tab-num"> 3 </div>
<p>Working Smart <small>not harder</small> </p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="3"> <a href="#">
<div class="round-tab-num"> 4 </div>
<p>Working Smart <small>not harder</small></p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="4"> <a href="#">
<div class="round-tab-num"> 5 </div>
<p>Working Smart <small>not harder</small></p>
</a> </li>
</ul>
<!--The main div for carousel-->
<div id="myCarousel" class="carousel horizantal slide" data-interval="false">
<!-- Sliding images statring here -->
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<h3>test1</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test2</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test3</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test4</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test5</h3>
</div>
</div>
</div>
<!-- Next / Previous controls here -->
<div> </div>
</div>
</div>
</div>
this code is also added
$(document).ready( function() {
$('#myCarousel').carousel({
interval: 4000
});
var clickEvent = false;
$('#myCarousel').on('click', '.container-tab .nav a', function() {
clickEvent = true;
$('.container-tab .nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.container-tab .nav').children().length -1;
var current = $('.container-tab .nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.container-tab .nav li').first().addClass('active');
}
}
clickEvent = false;
});
});

change your code as below simply remove class from currently active li and add active class to next li as below
$('#myCarousel').bind('mousewheel', function(e) {
$(this).carousel('next');
var $currentlyactive =$('li.active');
$currentlyactive.removeClass('active');
$currentlyactive.next().addClass('active');
});
Updated
$(document).ready(function() {
$('.carousel').carousel('pause');
});
$('#myCarousel').bind('mousewheel', function(e){$(this).carousel('next');});
$('.tab li').on('click', function(){
$('li.active').removeClass('active');
$(this).addClass('active');
});
this is the code in your html page remove this all carousel related code has been done in custom.js..

Jumping to sections of the page using only Jquery

I've just started to code, and am learning all there is to know about JQuery. I have a navbar with 'About' and 'What is this' anchors. The specific content for the respective anchors are in different sections of the page. If I click an anchor, say 'About', I want to jump to the 'About-content' section of the webpage. I have read of plugins which do this, but is there any way to do this simply using JQuery? I tried doing what was told in an answer to a similar question but it doesn't work.
HTML
<ul class="nav navbar-nav">
<li class="About"> About </li>
<li class="How-it-works"> How it works </li>
</ul>
......
......
<div class="About-content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<p> text text text </p>
</div>
</div>
</div>
</div>
JQuery
$(document).ready(function () {
$('.About').click(function (event) {
event.preventDefault();
$('body, html').animate({
scrollTop: $(".About-content").offset.top
}, 600);
})
}

Use the id attribute to your target div:
<div id="About-content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>text text text</p>
</div>
</div>
</div>
</div>
Set Nav link to the Div id:
<ul class="nav navbar-nav">
<li class="About"> About
</li>
<li class="How-it-works"> How it works
</li>
</ul>
Use the following simple jquery for smooth scroll:
$(document).ready(function() {
$(".About a").click(function() {
$('html, body').animate({
scrollTop: $("#About-content").offset().top
}, 2000);
});
});

Change your target .About-content to an #About-content
Change the href to #About-content
Remove e.preventDefault()
It should function without jQ/JS but if you add easing to your animation then it'd be useful.
$(document).ready(function() {
$('.About').click(function(event) {
$('body, html').animate({
scrollTop: $("#About-content").offset().top
}, 600);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
<li class="About"> About
</li>
<li class="How-it-works"> How it works
</li>
</ul>
<div style="height: 1000px;"></div>
<div id="About-content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>text text text</p>
</div>
</div>
</div>
</div>

Say you have an Nav like this ,
<ul class="nav navbar-nav">
<li class="About"> About </li>
<li class="How-it-works"> How it works </li>
</ul>
And assuming a div like what you have,
Some Content Here
$(document).ready(function(){
$(".navbar-nav a").on('click', function(event) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1000, function(){
window.location.hash = hash;
});
});
})
Will animate to the respective areas. Here hash holds the values after # from your <a>tags.
IMHO, its better to bind the click event on the .nav instead of binding with separate <a>'s.

Well i don't know about jquery. but you can do it more simply by bootstrap. Like this. It is called bootstrap scrollspy. If you like the answer please rate it. :)
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
<div class="container-fluid">
<div class="navbar-header">
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
</div>

Swing animation to different parts of page

I am trying to use a swing animation to href to certain parts of my page. However I am not sure what to put to refer to the correct sections of my HTML. I think the best thing to do would be to select the href id that my a tag is referring to. I am open to new approaches
jQuery:
$("li a").each(function() {
$(this).on("click", function() {
var mode = "swing";
$('html, body').animate({
scrollTop: $(/*HERE*/).offset().top
}, 750, mode);
});
})
HTML:
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<ul id="nav_pills" class="nav nav-pills" role="tablist">
<li role="presentation">
About
</li>
<li role="presentation">
<a id="test" href="#services">Services</a>
</li>
<li role="presentation">
Portfolio
</li>
<li role="presentation">
Contact
</li>
</ul>
</nav>
</div>
<!-- about -->
<section id="about">
<div class="border">
ABOUT
</div>
</section>
<!-- services -->
<section id="services">
<div class="border">
SERVICES
</div>
</section>
<!-- portfolio -->
<section id="portfolio">
<div class="border">
PORTFOLIO
</div>
</section>
<!-- contact -->
<section id="contact">
<div class="border">
CONTACT
</div>
</section>

Working demo:
http://jsfiddle.net/p0tavns5/2/
$("li a").each(function() { // $('a[href^="#"]') might be a safer selector
$(this).on("click", function(e) {
var mode = "swing";
e.preventDefault(); //stop the default jump to fragment
$('html, body').animate({
scrollTop: $(this.hash).offset().top // .hash is the element's href
}, 750, mode);
});
})
Source: http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery
This also has the advantage of graceful degradation. If it doesn't run (noscript or something), it will default to regular fragment linking.