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');
Related
I am trying to add a position indicator to my nav bar using the snippet below (i.e. a border should appear when a list item is selected). I currently have the rest of my css code nested using scss in the form nav{ li{/*code here */} a{/code here/}} and so on. When I add this active tag, nothing happens. Should I be formatting this differently with the active tag? Is there an easier way to do this? Why dosen't the active tag work? Thanks!!
HTML
<nav class="navbar navbar-main">
<ul class="top-menu">
<li id="home">HOME</li>
<li id="about">ABOUT</li>
<li id="info">MEDIA</li>
<li id="social">SOCIAL</li>
</ul>
</nav>
CSS
#nav ul li .active {
border-bottom:3px #FFF solid;
}
JS
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
$("#nav ul li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})
For starters the css is not targeting the element correctly. Your css is looking for an element with an id of nav, which doesn't exist.
The nav element has two classes (navbar and navbar-main), so you can use either to start off the selection. Because the jquery is adding a class of active to a matching link, the css rule would need to include a. To actually see the border, you'd also need to set a display property. One that is used quite often is block e.g:
.navbar ul li a.active {
display:block;
border-bottom:3px #FFF solid;
}
In the example I've provided below, I've updated the jquery to target a specific link, just for illustration purposes.
$(document).ready(function() {
var pgurl = "#about"; //Using a static value for illustration purposes.
$(".navbar ul li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' ) {
console.log($(this).attr("href"));
$(this).addClass("active");
}
});
});
Fiddle example
Below code will find all <a> tag whose href attribute contains the current pathname.
$(function () {
$("a[href*='" + location.pathname + "']").addClass("active");
})
This will work for you. That's how I use mine.
$(document).ready(function () {
$(".top-menu > li > a[href*='" + location.pathname + "']").addClass('active'); //the .top-menu is your ul class
});(jQuery);
I am trying to change the property of background color on mouseover of the nav ul li element but when I select another element of the same kind I want the first one to revert its color and the newly selected to change color and so on.
$(document).ready(function() {
$('nav ul li').on('mouseover', function() {
if ($(this).css('background-color') == '#BBB') {
$(this).css("background-color", "#36D900");
} else {
$(this).css("background-color", "#BBB");
}
});
});
Try the code
$('nav ul li').hover(function(){
$('nav ul li').css("background-color", "#BBB");
$(this).css("background-color", "#36D900");
});
So I got myself this far and I've solved the problem I was having but I'd still like to know why this is.
First, here is my original code:
$(function(){
var navListLength = $('nav ul li').length;
buttonPress(1);
function buttonPress(i){
if(i < navListLength){
$('nav ul li a:nth-child(' + i + ')').click(function(){
$(this).toggleClass('button-pressed');
console.log('Button Down');
setTimeout(function(){
$('nav ul li a:nth-child(' + i + ')').toggleClass('button-pressed');
buttonPress(i + 1);
console.log('Button Up');
}, 500);
});
}
}
});
It's supposed to toggle the style of a single link in a navigation list when it's clicked and not affect any other links in the list.
I wanted to do it this way so that I could add any amount of links to this list in the future without having to create a new a new class and add it to the jQuery each time.
The first toggle works as expected. But the second toggle is being applied to all of the links and it creates an inverted effect. So all of the links are opposite of what they are supposed to be except the link being clicked.
I solved the problem by changing the first toggleClass to addClass and the second toggleClass to removeClass. But I shouldn't have to do that.
Could anyone tell me why this is?
Here's a picture of my buttons:
You're doing way too much work just to toggle a class on click. You don't need to make an array of all the navigation items, the whole point of jQuery is that it handles selecting DOM elements for you.
Try this:
$(function() {
$('nav ul li').click(function() {
$(this).toggleClass('button-pressed');
});
});
You don't have to handle making sure the others aren't affected. Only the clicked element gets toggled.
-- EDIT --
I see what you were going for with the setTimeout() now. You can do it inside the click handler, like this:
$('nav ul li').click(function() {
// store the selection in a variable
var $this = $(this);
$this.toggleClass('button-pressed');
window.setTimeout(function() {
$this.toggleClass('button-pressed');
}, 500);
});
FIDDLE
Why now in pure CSS like:
LIVE DEMO
<span class="button" tabindex="1">
<span>Home</span>
</span>
span.button{
display:inline-block;
border-radius:9px;
background:#ddd;
padding:6px;
vertical-align:middle;
outline:none;
}
span.button > span{
background:#F06BAE;
color:#fff;
font-size:20px;
font-weight:bold;
display:inline-block;
padding:10px 25px;
border-radius: 6px;
border-bottom:4px solid #CB4589;
transition: border 0.3s;
}
span.button:focus > span{
border-top: 4px solid #FCA9D2;
border-bottom-width:0;
}
I have a html code like this:
<ul>
<li class="curent">Home</li>
<li>
Products
<ul class="sub">
<li>Samsung</li>
<li>Lenovo</li>
</ul>
</li>
<li>News</li>
</ul>
http://img38.imageshack.us/img38/5795/70a.png
I want to click any a tag and li tag parent is hightlighted. I try this code but it doesn't work with a tag in ul has sub class:
var this_url = window.location.href;
$('#block_nav_primary ul li').each(function() {
if ($(this).children().attr('href') == this_url) {
$('#block_nav_primary ul').find('li[class="curent"]').removeClass('curent');
$(this).addClass('curent');
}
});
Can anyone point me in the right direction here?
Thanks for your help!
P/S: it looks like this thread Highlight Parent Link in Navigation Menu With Jquery
I'm not sure I quite understand your wording, but you want to apply the same effect to all LI tags, including those in a sublist?
Replace this:
$('#block_nav_primary ul li').each(function() {
With this:
$('#block_nav_primary ul').find('li').each(function() {
Try
val items = $('#block_nav_primary ul li').click(function(){
items.filter('.current').removeClass('current');
$(this).addClass('current')
})
Why don't you try styling it such that the A tag takes the width of the entire LI tag and so when you click A tag, it would highlight the entire thing. The CSS code for it would be something like:
li a {display: block; width: 100%; padding: 10px 0; background-color: pink;}
li a:hover {background-color: orange;}
Try this:
$("ul a").click(function () {
$(this).parent().parent().addClass("blue");
});
or
$("ul a").click(function () {
$(this).closest("ul").addClass("blue");
});
CSS in both cases:
.blue > a {
color: blue;
}
JSFiddle to a quite similar scenario.
What I need to add a class on hover to the a tag with a menu below is the menu. Any ideas?
<ul id="nav">
<li>Home</li>
<li>Another
<ul>
<li>Sub</li>
...
$("#nav li ul li a").hover(
function() {
$(this).parent().parent().parent().addClass('current');
},
function() {
$(this).parent().parent().parent().removeClass('current');
//alert();
}
);
$("#nav a").hover(
function() { $(this).closest("a").addClass("current"); },
function() { $(this).closest("a").removeClass("current"); }
);
You can achieve this without jQuery by using css psuedo classes. All elements in html gain a psuedo class of :hover when the mouse is over them.
To select them in CSS:
#nav li ul li:hover {
// Your style here.
}
This method is what you need http://api.jquery.com/closest/ god bless jQuery
Might but just quicker to do this
$(document).ready(function() {
$('#nav a:hover').parents('div > ul > li:hover > a').addClass('current');
});