jQuery if myDiv is:visible, addclass to another element

Question

I've been getting into jQuery again and obviously I'm missing something.

I want to add a class to an element depending on if another one is visible.

It's hidden with display: none; and activated with slideToggle

I have this:

if ($("#about_me").is(':visible')){
        $("#about_me_clicker").addClass(".about_highlight"); 
    } else {
}

Now I'm assuming I've gotten it totally wrong, so here's a fiddle for you to see.

How can I add this class to the certain div, if the other one is :visible?

Thanks.

Edit:

To make things clear, I will be only applying the class to the one element.

Write this line $("#about_me_clicker").addClass("about_highlight"); instead of $("#about_me_clicker").addClass(".about_highlight"); — Emaad Ali, Sep 16 '11 at 20:49

gen_Eric · Accepted Answer · 2011-09-16T21:07:23.713

3

Change:

$("#about_me_clicker").addClass(".about_highlight");

To:

$("#about_me_clicker").addClass("about_highlight");

You don't need to include the . in the class names for addClass.

Also, in your fiddle's CSS:

.about_highlight
{
    color; #f00;
}

Should be:

.about_highlight
{
    color: #f00;
}

Another note, in CSS, ids take precedence over classes. So even though the div has class about_highlight, the color declared in #about_me_clicker will be active.

~~To fix this you can use !important.~~

.about_highlight
{
    color: #f00 !important;
}

To fix this, just make a more specific CSS rule.

#about_me_clicker.about_highlight
{
    color: #f00;
}

Updated fiddle: http://jsfiddle.net/YVqJ7/20/

edited Sep 16 '11 at 21:07

answered Sep 16 '11 at 20:49

gen_Eric

223,194
41
299
337

1

Damn typos! And really i should have seen the precedence override... I think it's time for a break.. Thanks :) – Kyle Sep 16 '11 at 20:55
No problem. Oh, you also missed a `{` at the end of your CSS :-P – gen_Eric Sep 16 '11 at 21:02
@BNL: I'm aware `!important` is bad, but how else can you make the color precedence work, and still be able to use the class on other elements? – gen_Eric Sep 16 '11 at 21:03
That wasn't part of the question. :) Removed the -1 anyway. – BNL Sep 16 '11 at 21:05
Maybe I should have made it clear that the class would only be applied to this element. – Kyle Sep 16 '11 at 21:05
Thanks Rocket.. Now I've hit another wall.. http://jsfiddle.net/Kyle_Sevenoaks/YVqJ7/22/ – Kyle Sep 16 '11 at 21:19
@Kyle: What's the problem? When the page loads `#about_me` is hidden. If you want the color to change, put the code inside the click handler. – gen_Eric Sep 16 '11 at 21:21
Omg of course.. I am so not awake. I'm going for coffee. Thanks very mcuh :) – Kyle Sep 16 '11 at 21:22

score 3 · Answer 2 · answered Sep 16 '11 at 20:51

3

There are a bunch of errors in that fiddle:

color; #f00;

Should be a colon not a semi-colon.

$("#about_me_clicker").addClass(".about_highlight");

Remove the . should just be the name of the class.

You are missing a } at the end of your CSS.

And finally, your #about_me_clicker css takes precedence over the .about_highlight one.

answered Sep 16 '11 at 20:51

James Montagne

77,516
14
110
130

#about_me_clicker.about_highlight { color: #f00; } /* fixed style */ – BNL Sep 16 '11 at 21:00
1

@BNL: That's assuming he only has one element that can have the class `about_highlight`. – gen_Eric Sep 16 '11 at 21:00

score 0 · Answer 3 · answered Sep 16 '11 at 20:50

0

Try this one

http://jsfiddle.net/genesis/YVqJ7/8/

added !important into color and also remove dot in addClass(".about_highlight") (so it's addClass("about_highlight"))

answered Sep 16 '11 at 20:50

genesis

50,477
20
96
125

2

just a note but `!important` is such bad practice in such simple css. – cillierscharl Sep 16 '11 at 20:53
@f0x: this one was important. Look [here](http://jsfiddle.net/genesis/YVqJ7/14/) I have just deleted that !important and it's not working anymore – genesis Sep 16 '11 at 20:54
indeed, but there are much more elegant ways to fix it. it's a colour damnit ;) see @kingjiv's answer to see the reason behind it. Rather suggest a css refactor. – cillierscharl Sep 16 '11 at 20:56
@f0x: no, my one has it all corrected, but withhout !important it just doesn't work. – genesis Sep 16 '11 at 20:57
I used to use !important too, then I learned about css specificity. – BNL Sep 16 '11 at 20:58
#about_me_clicker.about_highlight { color: #f00; } /* no !important */ – BNL Sep 16 '11 at 20:58
@gen, the css part of his answer >_> – cillierscharl Sep 16 '11 at 20:59
@f0x: `color; #f00;` ? I have fixed it already! and that bracket added, too. Take a look into @Rocket fiddle – genesis Sep 16 '11 at 20:59
1

I changed the selector to be more specific. http://jsfiddle.net/Kyle_Sevenoaks/YVqJ7/19/ – Kyle Sep 16 '11 at 21:00
1

@gen , css precedence - ie. it will choose an ID CSS Rule before a Class Rule. Hence the need for `!important` a simple css refactor or selector refinement would be much better. Valid(ish) times to use `!important` http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css not for simple things ... like colour in css you control. – cillierscharl Sep 16 '11 at 21:03

score -1 · Answer 4 · edited Sep 17 '11 at 05:43

-1

just without dot

if ($("#about_me").is(':visible')){
  $("#about_me_clicker").addClass("about_highlight");
} else {}

edited Sep 17 '11 at 05:43

oezi

51,017
10
98
115

answered Sep 16 '11 at 20:50

Senad Meškin

13,597
4
37
55

jQuery if myDiv is:visible, addclass to another element

Edit:

4 Answers4

Linked