- This topic is empty.
-
AuthorPosts
-
September 11, 2012 at 6:12 pm #39789
ChristinaHooper
MemberIs there any way that anyone knows of to pull this off:
I have:
What I want is to change the background of body to blue IF the div inside it has a class of blue. Same principle if it’s red, green, yellow, etc.
Does anyone know of a way to accomplish that?
September 11, 2012 at 6:13 pm #109828Kitty Giraudel
ParticipantNo way in CSS. We can’t target a parent with pure CSS yet.
September 11, 2012 at 6:15 pm #109831ChristinaHooper
MemberIs there a way with javascript or jquery?
September 11, 2012 at 6:16 pm #109833ChristinaHooper
MemberI’m doing this in a WordPress Theme if that makes a difference…
September 11, 2012 at 6:19 pm #109834TheDoc
MemberNo problem with jQuery. Would look something like this:
if( $(‘#target’).hasClass(‘blue’) ) {
$(document.body).addClass(‘yellow’);
}Then in your CSS you would have your styles for `.blue` and `.yellow`.
September 11, 2012 at 6:30 pm #109837ChristinaHooper
MemberI have got to be doing something wrong. Here’s what I have:
In Header.php inside the head tag I put:
In my page.php, I have:
September 11, 2012 at 6:31 pm #109838ChristinaHooper
Memberwell – apparently I can’t figure out how to do code blocks in the new forum either…
one of those days – I have my if statement wrapped in script tags, and it removed them. September 11, 2012 at 9:53 pm #109847ChristinaHooper
MemberThat didn’t work either… hmmm…
September 11, 2012 at 10:47 pm #109851theacefes
Memberhttp://codepen.io/katbella5/pen/pxutd
No need for periods. The jQuery docs say they aren’t needed.
Make sure you are calling the jQuery library properly. I think that is likely your issue.
-Kat
P.S.: In other exciting news, that was my first CodePen! Yay.
September 12, 2012 at 12:54 am #109862TheDoc
MemberAlso, it’s generally best practice to make sure you IDs and classes are lowercase. There is *some* preference to using camelCase out there, but I think the industry standard is lowercase with hyphens.
So it your example:
`#ContentRow` would become `#content-row` and `.Blue` would be `.blue`, etc.
You don’t need to add periods when using `.hasClass()`. It also doesn’t play very nicely with multiple class names, they have to be in the proper order. So if you do `.hasClass(‘first second’)` but the element on the page is actually `class=”second first”` then hasClass() will return `false`.
Here’s an example for you: http://jsfiddle.net/e6kE3/
September 12, 2012 at 12:56 am #109863TheDoc
MemberHaving said all of that, @theacefes is probably correct – you might be trying use jQuery before the library is included. You might also want to wrap your code in something like this:
$(document).ready(function() {
// your code here
});September 12, 2012 at 2:25 am #109864theacefes
MemberI work for a company that uses .NET so we’re all about Camel Case. I started off using underscores though.
https://css-tricks.com/poll-results-hyphens-underscores-or-camelcase/
It’s from a while ago, but still interesting.
September 12, 2012 at 2:35 am #109865TheDoc
MembercamelCase certainly has its place! I think it’s all about what language you are using.
JS/PHP – camelCase
HTML/CSS – hyphens / underscoresSeptember 12, 2012 at 1:06 pm #109906theacefes
MemberWell for us it’s about maintaining a consistent standard across the board I think. On a personal level, whatever makes one comfortable I think. :)
September 15, 2012 at 5:26 am #110095Taufik Nurrohman
Participant$(document).ready(function() {
$('div').each(function() {
var foo = this.className; // Get the element class...
if ($(this).hasClass(foo)) {
$('body').addClass(foo);
}
});
}); -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.