CSS and Jquery: addClass not overwriting css - javascript

I have a script that adds a class to an element on hover.
Issue is the new, added class does not seem to 'overwrite' the existing css (even though on my style sheet the added class is listed below the existing css).
I cannot use removeClass on the element as there is no actual initial class styling the element.
The 'initial' styling that needs to be overwritten is:
#menu ul li ul li {
background-color: #ccc;
}
The class that needs to be added is:
.whitebg {
background-color: #fff;
}
My script is:
$('#menu ul li ul li').hover(
function() {
$(this).addClass('whitebg');
},
function () {
$(this).removeClass('whitebg');
}
);
Does anyone know a way I can fix this up?
Thanks!

id selectors take precedence over class selectors. You need !important
.whitebg {
background-color: #fff !important;
}

This is because of the specificity. you can use !important as the other posts suggested but
using !important in your CSS is a bad practice.
Use that as you last option.
Instead use two classes..
Make sure the inner most li has the default class to it..
$('#menu ul li ul li').addClass('default').hover(
function() {
$(this).addClass('whitebg').removeClass('default');
},
function () {
$(this).removeClass('whitebg').addClass('default');
}
);
Check Fiddle

Simply add the !important tag to the background-color in .whitebg class. That should fix your problem.

then, you need code this:
#menu ul li ul li {
background-color: #ccc;
}
#menu ul li ul li.whitebg {
background-color: #fff;
}
Only in this way, can we have a common parent class.
!important will be a compatibility problem.

Related

Edit css:after with jQuery .siblings()

I would like to edit :after element created by css with jQuery.
<div class="box">
<h3 class="social">Social</h3>
<ul>
<li><a href="https://www.youtube.com/"
onmouseout="bgc('rgba(0, 0, 0, 0.4)')"
onmouseover="bgc('rgba(230, 33, 23, 0.88)')">Youtube</a></li></ul></div>
.box ul li a:after {
content: '';
display: block;
width: 0px;
height: 1px;
background: #fff;
transition: width 1s;
}
.box ul li a:hover:after {
width: 90%;
}
/* jQuery */
$("document").ready(function bgc(color){
$('.box ul li a').siblings().css({"border-color": color});
});
But this code doesn't work. Is there any way how to do it?
You can't access after or before elements with JavaScript, but you can change their style by appending classes to their parent element.
.colorBlue:after {
border-color: blue;
}
and then:
$('.box ul li a').toggleClass('colorBlue');
would change border color of after element.
You can not select pseudo elements in jQuery because pseudo-elements
themselves are not part of the DOM. - Selecting and manipulating CSS pseudo-elements
Although they are rendered by browsers through CSS as if they were like other real DOM elements, , and thus you can't select and manipulate them directly with jQuery (or any JavaScript APIs for that matter, not even the Selectors API).
See this question for more: Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

Javascript function only allowing for one class on an anchor tag

I am trying to add a navigation item to a site built by someone else. They wrote a javascript function that is only allowing one class to be on an anchor tag. I need to add a second class to the last navigation item that will give it a border-right. The .last class is already written in CSS and I have put .last on the proper anchor tag, but because of the javascript it will only render .active in the browser and not the .last class. Any ideas on how to do that with this function or with the html I already have? Thanks.
Javascript function:
function setActive() {
aObj = document.getElementById('navigation').getElementsByTagName('a');
for(i=0;i<aObj.length;i++) {
if(document.location.href.indexOf(aObj[i].href)>=0) {
aObj[i].className='active';
}
}
}
window.onload = setActive;
CSS:
#navigation .MainNavigation li a.last{
border-right:#648558 2px solid;
}
#navigation .MainNavigation li a.active{
padding:12px 19px 12px 17px;
background: url(/_images/bkgd_Active.png) repeat;
}
URL of page: http://securitybank.designangler.com/insurance
Like this:
aObj[i].className='active anotherclassname';
Or add to existing classes with:
aObj[i].className=aObj[i].className + ' active';
You can try this if it's the last item, only with CSS:
#navigation .MainNavigation li:last-child a {
border-right:#648558 2px solid;
}

Setting link hover property with jQuery

I want to change the background color of a link with jQuery,
the orginal CSS for the link is
#container ul li:hover ul li a{
background: #FF0000
}
I'm trying the following jQuery code, but it does not seem to work.
jQuery('#container ul li:hover ul li a').css('background', '#FF0000');
I can set the css for the normal links, but its only causing problem with the link hover.
try this:
jQuery('#container ul li ul li a').hover(function(){
$(this).css('background', '#FF0000');
})
or this :
jQuery('#container ul li').hover(function(){
$(this).find("ul li a").css('background', '#FF0000');
})
You could try it with the jquery hover function. http://api.jquery.com/hover/
And re-set the color.

How to "mark" a UL/LI nav item as "active" based on click?

Each <a link is an anchor for jQuery to hide(show) certain divs.
I'm using this CSS to handle hover style:
ul.textMenu a:hover
{
border-bottom: 3px solid #ff5c00;
margin-bottom: -3px;
}
After the user clicks an item, I want that border-bottom to persist. How do I do this?
Add a css rule
ul.textMenu a.clicked
{
border-bottom: 3px solid #ff5c00;
}
and then some js
$('ul.textMenu a').click( function() {
// Remove the class clicked so that we have only one clicked item
// Since there might be more than one ul i finde the parent.
$(this).closest('ul.textMenu').find('a').removeClass('clicked')
$(this).addClass('clicked');
} );
jQuery('ul.textMenu a').click(function () {
jQuery('ul.textMenu a').removeClass('active');
jQuery(this).addClass('active');
});
The set your css for ul.textMenu a.active to keep the CSS border

JavaScript add and remove class function on click

Basically I have this problem. I have an accordion that toggles one heading open at a time and I am having a problem adding in the open/close image that sits to the right of the heading.
I have it so far so that once you click a heading it removes the 'open' image and toggles another class for the 'close' image. Now I need to basically swap out these classes again so that if you toggle another heading it removes the other image and goes back to the original.
Here is the code I am using.
JavaScript
<SCRIPT>
$("#accordion > li").click(function () {
$("#accordian li").removeClass("faq-header");
$(this).addClass("faq-header2");
if (false == $(this).next().is(':visible')) {
$('#accordion > ul').slideUp(250);
$('#accordion > ul').addClass('faq-header');
$(this).removeClass("faq-header");
}
$(this).next().slideToggle(300);
});
$('#accordion > ul:eq(0)').show();
</SCRIPT>
CSS
#accordion {
list-style: none;
margin-left:-38px;
}
#accordion ul:eq {
background-image:url(../img/faq-open.gif);
background-repeat:no-repeat;
background-position:right;
padding-right:20px;
}
#accordion li{
display: block;
background-color: #FFF;
font-weight: bold;
cursor: pointer;
}
.faq-header {
text-align:left;
background-image:url(../img/faq-close.gif);
background-repeat:no-repeat;
background-position:right;
margin-right:20px;
}
.faq-header2 {
text-align:left;
background-image:url(../img/faq-open.gif);
background-repeat:no-repeat;
background-position:right;
margin-right:20px;
}
#accordion ul {
list-style: none;
display: none;
}
#accordion ul li{
font-weight: normal;
cursor: auto;
background-color: #fff;
border-bottom:1px solid #999;
margin-left:-38px !important;
}
I have removed one class and added another class as you can see $("#accordian li").removeClass("faq-header"); and added the following $(this).addClass("faq-header2");
But I need to now remove .faq-header2 and add back .faq-header after it is no longer the section selected. It doesn't seem too hard to me but i just can't figure out how to code it. Should be a basic if function I would think...
The jQuery UI accordion is a well proven cross browser widget, and does images on open and close (by default on the left, but one change of CSS will put them on the right)
as per here
if you don't won't to use it, I would persue an option with toggleClass, here
EDIT
Thanks for posting your HTML, I didn't necessarily mean the whole page, just the HTML for you accordion functionality, but hey thats cool
First point though, your HTML seems a bit heavy for just doing an accordion. Its also not entirely valid to put a ul inside a ul (they tend to go inside li, as in a drop down menu style). Further more it doesn't seem to be much point in all those ul and li as each ul only has one li anyway, just seems like a lot more tags than you would really need. ul and li tend to come with a lot of default styling (bullet points, margins, padding, indents etc), which can mean a lot more CSS than need to make them display how you want. I would have gone with a simpler structure, makes it easier to write your jQuery. A bit more like this
<div id="accordion">
<h3>First header</h3>
<div>First content</div>
<h3>Second header</h3>
<div>Second content</div>
</div>
Anyway, that was just a comment from my experience. To your problem at hand, this worked for me
$("#accordion > li").click(function () {
var self = $(this);
self.next('ul').slideToggle(300, function () {
if ($(this).is(':visible')) {
self.removeClass('faq-header').addClass('faq-header2')
}
else {
self.removeClass('faq-header2').addClass('faq-header')
}
});
self.siblings().removeClass('faq-header2').addClass('faq-header').next('ul').slideUp(250);
});
toggleClass, although useful, in your circumstance as to how you want classes to be added and removed, may not be as useful as I would have thought
I think that toggle() function is a bit not intuitive. I usually use my pwn method replaceClass() to do as you want:
void replaceClass(Object classList, String surrogateClass, String classToReplace);
defined as follow
function replaceClass(elementClassList, firstClass, secondClass) {
if(elementClassList.contains(firstClass)){
{
elementClassList.remove(firstClass);
elementClassList.add(secondClass);
}
}

Categories