We Keep Coding

Jquery Smooth Scrolling anchor

I am having a problem, so basically, I tried to add a smooth scrolling with jquery, I want to have a smooth scrolling everytime I click in my navbar anchor link, I tried to do it by myself but it's not working, any help would be much appreciated, Thanks.
// Smooth Scroll to div
$(".ser").click(function() {
$("html, body").animate(
{
scrollTop: $("#services").offset().top
},
1000
);
});
<div class="navbar">
<div class="container">
<div class="brand">
<h2>Kataki</h2>
</div>
<ul class="links">
<li>
<a href="#" class="active">
Home
</a>
</li>
<li>
<a class="ser" href="#">
About
</a>
</li>
<li>
Portfolio
</li>
<li>
Testimonials
</li>
<li>
Contact
</li>
</ul>
<div class="clearfix" />
</div>
</div>
<div id="services" class="services">
<div class="container">
<h2>Our Services</h2>
</div>
</div>

You appear to be using the slim build of jQuery, which doesn't include most of the library. Instead, you should be using the full version and just need to put your script in document ready event :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
// Smooth Scroll to div
$(document).ready(function(){
$(".ser").click(function() {
$("html, body").animate(
{
scrollTop: $("#services").offset().top
},1000
);
});
});
</script>
I tried this Here and it worked fine. if this doesn't solve your issue then you probably have another java script error in your code.
I hope it helps.

Find active submenu and remove its class

I have a main menu and sub-menu. When I click the main menu it displays its content. When the sub-menu is clicked, the sub-menu contents are displayed. But when I click the main menu after the sub-menu it displays the main menu content along with the sub-menu content because it is not removing the sub-menu active class. I tried the following code to find the id of the active sub-menu and remove it.
var ref = $("ul#submenu li a").find(".active");
var ide= ref.attr("id");
$('#ide').removeClass("active");
For better understanding of my issue I have attached a jsfiddle
https://jsfiddle.net/0pmzzp7e/11/

Is this what you want?
function clickHome(){
$('#home-content').addClass('active').show();
$('#home-content').siblings().removeClass('active');
$("ul#submenu li").removeClass("active");
};
function clickContact(){
$('#contact-content').addClass('active').show();
$('#contact-content').siblings().removeClass('active');
$("ul#submenu li").removeClass("active");
}
https://jsfiddle.net/h1afncux/1/

Please do not use inline JavaScript, try to separate JavaScript and HTML as much as possible.
$("ul a[href=\"#home\"]").on("click", function () {
$(".active").removeClass("active");
$("#home-content").addClass("active");
});
$("ul a[href=\"#contact\"]").on("click", function () {
$(".active").removeClass("active");
$("#contact-content").addClass("active");
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-12 container">
<ul class="nav nav-tabs" id="main-menu">
<li class="active">
Home
</li>
<li>
Contact
</li>
</ul>
<div class="tab-content clear-fix">
<!-- Home-->
<div class="tab-pane active" id="home">
<ul class="nav nav-tabs">
<li>
Home 1
</li>
<li>
Home 2
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="home-content"> Home Content </div>
<div class="tab-pane" id="home1"> Home 1 Submenu</div>
<div class="tab-pane" id="home2">Home 2 Submenu</div>
</div>
</div>
<!-- Contact-->
<div class="tab-pane" id="contact">
<ul class="nav nav-tabs">
<li>
Contact 1
</li>
<li>
Contact 2
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="contact-content"> Contact Content</div>
<div class="tab-pane" id="contact1">Contact1 Content</div>
<div class="tab-pane" id="contact2">Contact2 Content</div>
</div>
</div>
</div>
</div>

You're currently only finding the a tags in the submenu that are active. What I assume you want to do is to check for any active element in the entire tab-pane section. If doing that you can then iterate all the found active items and remove the active class from them as such:
var ref = $(".tab-pane .active")
$(ref).each(function(){
$(this).removeClass("active");
})
Here's a forked JSFiddle:
https://jsfiddle.net/2zd309eo/1/

how to create a full-width dropdown menu using jquery

I am trying to create my custom full width menu using a simple hover function but my problem is as soon the mouse move out of the menu the subdiv also hides.
Can you help me with my code?
Here's my nav
HTML
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="open-block-menu">
ONLINE STORE
</li>
</ul>
<div class="top-block">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>HELLO WORLD</h1>
</div>
</div>
</div>
</div>
JS
$('#open-block-menu').hover(function() {
$('.top-block').slideDown();
}, function() {
$('.top-block').slideUp();
});

Instead of hover method, you could use mouseenter and mouseleave as below, so every-time when mouseenters it show below menus and on mouse pointer leave below menu hides again.
$('#open-block-menu').on("mouseenter",function() {
$('.top-block').slideDown();
});
$('.top-block').on("mouseleave",function() {
$(this).slideUp();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="open-block-menu">
ONLINE STORE
</li>
</ul>
<div class="top-block">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>HELLO WORLD</h1>
</div>
</div>
</div>
</div>

Try to change ur markup like this:
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="open-block-menu">
ONLINE STORE
<div class="top-block">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>HELLO WORLD</h1>
</div>
</div>
</div>
</div>
</li>
</ul>

hide unwanted element from list of elements using jquery

I have a list of div just like this:
<div class="portfolio-categories">
<ul>
<li>ALL WORKS</li>
<li>Residential</li>
<li>Commercial</li>
</ul>
<div class="clear"></div>
</div>
<div class="portfolio-container">
<div class="portfolio-item portfolio-cat-1">1</div>
<div class="portfolio-item portfolio-cat-1">2</div>
<div class="portfolio-item portfolio-cat-1">3</div>
<div class="portfolio-item portfolio-cat-2">4</div>
<div class="portfolio-item portfolio-cat-2">5</div>
</div>
There are 3 menus: ALL WORKS, Residential, Commercial. If I click Residential, all "portfolio-item" beside "portfolio-cat-1" will be hidden. The same goes for Commercial, all div "portfolio-item" beside "portfolio-cat-2" will be hidden.
I use .not() for this. Here is my jquery code:
$(".portfolio-categories a").click(function(e){
e.preventDefault();
var id=$(this).attr("id").split("-")[1];
$(".portfolio-item").not(".portfolio-cat-"+id).fadeOut(400, function(){
alert("done");
});
});
The problem is, when I click Residential (cat-1) all portfolio-cat-1 div are hidden instead of portfolio-cat-2. What went wrong? Is it not .not() that I should use?
Any help would be appreciated.

$(".portfolio-categories a").click(function(e){
e.preventDefault();
var id=$(this).attr("id").split("-")[1];
console.log(id)
$(".portfolio-item:not(.portfolio-cat-"+id+")").fadeOut(400, function(){
console.log("done");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="portfolio-categories">
<ul>
<li>ALL WORKS</li>
<li>Residential</li>
<li>Commercial</li>
</ul>
<div class="clear"></div>
</div>
<div class="portfolio-container">
<div class="portfolio-item portfolio-cat-1">1</div>
<div class="portfolio-item portfolio-cat-1">2</div>
<div class="portfolio-item portfolio-cat-1">3</div>
<div class="portfolio-item portfolio-cat-2">4</div>
<div class="portfolio-item portfolio-cat-2">5</div>
</div>
Try using the selector :not()

$(".portfolio-item").fadeIn(400).not(".portfolio-cat-"+id).fadeOut(400);
You need to bring back the previously hidden elements using fadeIn
Try the above line

Menu with Collapse BootStrap

Hello I have a button in BootStrap. I use "collapse" in a menu and each of those buttons when I push this to collapse this appear with any problem.
But when I push another button with this active appear down on the other.
How change this action? When I push any button this hide this but with the same animation like collapse do it.
Here is the code, when you try it you'll understand me:
<ul class="nav nav-pills">
<li class="dropdown">1<strong class="caret"></strong></li>
<li class="dropdown">2<strong class="caret"></strong></li>
</ul>
<div class="clearfix"><p>content more</p></div>
<div id="content0a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...1 </li></ul>
</div>
</div>
</div>
</div>
</div>
<div id="content1a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...2 </li></ul>
</div>
</div>
</div>
</div>
</div>

Try this.
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).height(0);
$('.in').not($(this).data('target')).removeClass('in');
});
});
</script>
You can also try this. (which gives more of a collapse animation)
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).collapse('hide');
});
});
</script>
You can add it to the bottom of your page right before the </body> tag or add it to your existing javascript file.
Try that and let me know if it's close to what you want.