We Keep Coding

jQuery's addClass works but browser doesn't apply new class

So, on my page I have navigation bar that helps to move around it. After clicking I remove .active class from previous < li> and give it to new one. In console everything looks nice but on the page there is a problem. I can't see the .active class properties in active < li> and scrolling around it isn't working like it used to before clicking. Here is my page and code:
https://kreha6.github.io/MacopediaTask/
(it's hard to describe what's exactly happening :) )
$(document).ready(function() {
function scrollToId(id){
id = id.replace("link", "");
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
$("#navbar > ul > li > a").click(function(e) {
$('.active').removeClass('active');
$(this).addClass('active');
e.preventDefault();
scrollToId(this.id);
});
});
SCSS:
.active{
a{
background-color: $transparent !important;
text-decoration: overline;
text-decoration-color: $color1;
}
}
edit:
I changed my code to add class to parent element like this:
$(this).parent().addClass('active');
Bootstrap adds active class to < li> which is a's parent, I tried to do the same thing. For some reason it doesn't work. Anyone know why?

Well you are writing it wrong in SCSS because in JQ
$("#navbar > ul > li > a").click(function(e) {
$('.active').removeClass('active');
$(this).addClass('active'); //here you add class active to the clicked 'a' element
So the a element has class .active on click. But, as I understood from the comments you want the li to have class active , so use:
$(this).parents('li').addClass('active')
and also in CSS you should be more specific, because you could have some styles already set for li.active a, for e.g. write:
#navbar ul.nav li.active > a { /*styles*/ }

You need to target the parent div, try to change $("#navbar > ul > li > a") with $("#navbar > ul > li")
$(document).ready(function() {
function scrollToId(id){
id = id.replace("link", "");
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
$("#navbar > ul > li").click(function(e) {
$('.active').removeClass('active');
$(this).addClass('active');
e.preventDefault();
scrollToId(this.id);
});
});

I look at your website, your classes are not targeted, change the way they are done in CSS, look the image I have attached for you, the class .active not applied]1
as you see the grey colour is overriden, but your classes get applied in javascript.

you can write script as $(this).parent().addClass('active');

Keep parent selected while mouseovering the dropdown in boostrap

What I'm trying to do is to keep the <a> selected while I'm mouseovering the dropdown:
I tried the closest selector but didn't work:
$('.dropdown-menu', this).stop().fadeIn("fast").closest("a").css("background-color", "#eee");
This is my jsfiddle. Thanks.

I'd suggest using CSS:
li:hover {
background-color: #eee;
}
JS Fiddle demo.
Obviously adjust selector-complexity as necessary.

use css
the default styles are added for a tag add this styles for li
.nav > li:hover, .nav > li:focus {
background-color: #eee;
}
demo - http://jsfiddle.net/gpLa33ad/9/

You can modify your function so that it toggles bootstrap's open class on the li element in the dropdown menu after your animation.
// Dropdown Menu Fade
jQuery(document).ready(function () {
$(".mega-inner-dropdown").hover(
function () {
$('.dropdown-menu', this).stop().fadeIn("fast");
$(this).children("li").addClass("open");
},
function () {
$('.dropdown-menu', this).stop().fadeOut("fast");
$(this).children("li").removeClass("open");
});
});
Live example: http://jsfiddle.net/08gxjset/

css style change for table using button/jquery

Here's the issue:
I want to be able to turn "on and off" the grid on this html table. I'm not sure why the css is not taking over other than the original css I have for the table isn't allowed to change.
Here's the fiddle
Here's the css:
td{ width:15px; height:15px; font-size: 10px; text-align:center; vertical-align:middle; border-style:inset; text-overflow:ellipsis; white-space: nowrap; z-index:-1;}
and here's the jquery:
$('#hideGrid').click(function(){
$('#tab td').css({ 'border-style': 'none !important'});
});
$('#showGrid').click(function(){
$('#tab.td').css({'border-style': 'inset !important'});
});
Any advice on how to get the css with the button to override the declared original css or explain why this method is not working?
Thanks!

Use CSS class it is fatser than .css(). Aslo not that in you fiddle you have not set ID of table.
HTML
<table id="tab">
CSS, Here created a new class
td.no-border {
border-style:none;
}
JS
$('#hideGrid').click(function () {
$('#tab td').addClass('no-border'); //Added class
});
$('#showGrid').click(function () {
$('#tab td').removeClass('no-border'); //Removed class
});
DEMO

works now:
http://jsfiddle.net/Nez7V/2/
your selector for the table td's was wrong:
$(document).ready(function(){
var tableTds = $('table td');
$('#hideGrid').click(function(){
tableTds.css('border-style', 'none');
});
$('#showGrid').click(function(){
tableTds.css('border-style', 'inset');
});
});
however, you can use the jquery function elem.css(attribute, value) if you only want to change one css-attribute.

On Hover sublist to drop down without extending the height of the div

please guide me as i'm trying to learn.
1) I am trying to make this list to expand when it hover. It work on my browser but not on jsfiddle. But problem is it wont stop expand and shrink when I move my mouse over it several time.
2) How do I make the list by the time it expand, my div will got grow longer, everything stay inside the div. I have try overflow:hidden but it doesn't work.
3) The hover that I try to make in CSS was to only change the font color of the main name but it change color of the whole name.
my JFiddle http://jsfiddle.net/Y3tc6/1/
THE JQUERY
$(".subli").hide();
$(".mainli").on("click", function (e) {
e.preventDefault();
$(this).find(".subli").slideToggle();
});
Thank You

Try this:
$(".mainli").on("mouseover", function (e) {
$(this).find(".subli").slideDown();
});
$(".mainli").on("mouseout", function (e) {
$(this).find(".subli").slideUp();
});
You will have to make some css changes. But i think this will help you with your slide down and slide up

2) How do I make the list by the time it expand, my div will got grow longer, everything stay inside the div. I have try overflow:hidden but it doesn't work.
#droplist {
display:block;
max-height:212px;
width:250px;
background-color:grey;
overflow:auto;
}
3) The hover that I try to make in CSS was to only change the font color of the main name but it change color of the whole name.
#droplist > ul > li:hover {
color:red;
}
#droplist li ul {
color:#000;
}
JSFiddle http://jsfiddle.net/Y3tc6/4/
For more information of > on CSS.
CSS '>' selector; what is it?
Sorry if it's messy, on the 3rd number.
My last edit! XD

1) Use mouseenter and mouseleave
$(".subli").hide();
$(".mainli").mouseenter(function (e) {
$(this).find(".subli").slideDown();
});
$(".mainli").mouseleave(function (e) {
$(this).find(".subli").slideUp();
});
2 & 3) You need to be more specific in you CSS to get the colors right, and use block, max-height and overflow to make the height of the div constant
#droplist {
display:block;
max-height:250px;
height:250px;
width:250px;
background-color:grey;
overflow: hidden;
}
#droplist .mainli:hover li {
color:initial;
}
#droplist .mainli:hover,
#droplist .mainli li:hover {
color:red;
}
Working demo

Try this:
$(".subli").hide();
$(".mainli").hover( function (e) {
e.preventDefault();
$(this).find(".subli").stop(true).slideToggle();
}
);

Change Link Color in Jquery UL li Filter

I am new to jquery. What I want to create is a Jquery Filter in Unordered list with links and input field on the top. As I type letters in the input field I want the letters of links inside the li items to change color. Without link it is achievable but I need it for links(a href). for eg: If I type 'Mum' of Mumbai then the letters in the list having MUM should change to red color. Have a look at the Jsfiddle
HTML
<div id="location-search">
<p id="header">Select Your Prefered Location</p>
<ul id="list">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Goa</li>
<li>Navi Mumbai</li>
<li>Pune</li>
<li>Thane</li>
</ul>
</div>
CSS
body {background:#f3f3f3;}
#location-search {float:left; display:inline; width:280px; background:#fff; padding:20px;}
p#header {font:bold 15px Arial;}
input {
border:1px solid #ccc;
font-size:1em;
height:2.10em;
*height:1.0em;
line-height:1.0em;
padding:0.10em 0;
width:100%;
}
.filterform {
width:220px;
font-size:12px;
display:block;
}
ul#list {float:left; display:inline; width:224px; padding:10px 0;}
ul#list li {font:bold 13px Arial; padding:5px 0 5px 10px;}
ul#list li a {color:#646464;}
Javascript
(function ($) {
jQuery.expr[':'].Contains = function(a,i,m){
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
function listFilter(header, list) {
var form = $("<form>").attr({"class":"filterform","action":"#"}),
input = $("<input>").attr({"class":"filterinput","type":"text"});
$(form).append(input).appendTo(header);
$(input)
.change( function () {
var filter = $(this).val();
if(filter) {
$(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
$(list).find("a:Contains(" + filter + ")").parent().slideDown();
} else {
$(list).find("li").slideDown();
}
return false;
})
.keyup( function () {
$(this).change();
});
}
$(function () {
listFilter($("#header"), $("#list"));
});
}(jQuery));
And here's what I want to achieve:
Screenshot
Any help would be appreciated I am just stuck at this step. N all other stuff I have done it.

Here is another solution Demo http://jsfiddle.net/MF4Tn/28/
I have made some in-line changes using substring and then span is added to change color

Here is the working Demo http://jsfiddle.net/MF4Tn/12/
I have added two javascript functions: jQuery.fn.removeHighlight and jQuery.fn.highlight and little css code. javascript I took from the link that I posted below.
Here is written useful code example
thanks to #dzordz

i created a fiddle that may suit your needs:
http://jsfiddle.net/MF4Tn/29/
Basicly it does:
$(list).find("li>a").each(function(id,el){
var a=$(el);
if(a.text().toLowerCase().indexOf(filter.toLowerCase()) >= 0){
a.html(a.text().split(filter).join("<span style='color:red;'>"+filter+"</span>" ));
}else{
a.html(a.text());
}
});
This is how it is done:
I iterate over all achors and than check weather the content is in line with the filter
If so I insert a span that makes this text red
I removed all the slideDown and slideUp things in order to have this example clean.
One may even change the .split() and .join() thing into some string replace funktion.