check #Objectives {
if (Category1 == checked) {
class == done;
}
}
check #objectives2012 {
if (Sub-Category1 == checked && Sub-Category2 == checked && Sub-Category3 == checked) {
Category1 class = done
}
else if (Sub-Category1 == checked || Sub-Category2 == checked || Sub-Category3 == checked) {
Category1 class = started
}
else {
Category1 class = not_done
}
}
Well certainly nothing like you have written.
Are you talking about setting up the INITIAL CONDITIONS on the page, presumably based on what some PHP (or other server side code) does when it creates the page from the current user's data from some database table?
If so, I'd just use the PHP code to set up the initial classes.
Then your code sort of works if it's attached to the various onclick handlers.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
For browsers < IE9 we would have to reinstate the opacity of the checkbox and remove the background images from the span.. or try and push it behind the checkbox (bleugh!!).
If we *must* support browsers back to, say, MSIE 7 then I'd toss all that out and just use <img>s.
Click on the image to change it. Click again to change it back. Just have some JS variable reflect the checked/unchecked state. Or, if you must have a checkbox (e.g., to submit a <form> to another page), then simply make it display: none and use the click on the <img> to change its state.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Now to figure out how to change the color of text that *precedes* the checkbox. I don't think there is a CSS selector that will do that, but we could do it a different way, I think...hmmm...
To clarify, css selectors always look downwards (down the DOM tree). We cannot use css to affect a parent element, or even a previous sibling. So we have to use negative left, top (or margin-left, margin-top), so that the element we want to affect appears to be before the controlling element (the one that is hovered, checked, etc.).
Off topic: Strange to say, but CSS can be a lot more challenging that JS. There are a finite number of elements and properties to work with, but finding the right combination - particularly that work cross-browser - can be a brain-squeezer?!
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
No Old Pedant, I was trying to explain it the best I could. Each one of the categories will have sub-categories and all the sub-categories will have things to do.
2012 Objectives
Sub-Category
To Do
To Do
Each one of these will be under a new tab. If any of the To-Do's are checked, then the class for the Sub-Category and the Category will change to 'Started'. If the 'Sub-Category' is checked and it is the only one, the 'Category will then change to the class of 'Done'.
Upon one being checked, markers will be removed from the map and new ones will be shown as there are three years of objectives and if you are just starting, you have to start from the 2010 objectives and the new ones will not be available to them.
But my point was this: I *assume* that the display will depend upon the *person* viewing it, right? My objectives may not have been met, but yours have been, for example.
So where does the *DATA* come from that drives the display of objectives??? I assumed, further, that it must come from a database on some server. And that being the case, you will need to use server-based code to initialize one of these pages. So let the *SERVER CODE* set up the initial conditions/colors and now you only have to worry about onclicks changing things. No?
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Even so, aren't you going to "personalize" it? Save the information about each person in some way? You mean each time a person comes to this page, he/she has to start over entering all the objectives he/she has met, etc., etc.? Surely not?
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.