If checkbox is checked this class? - Page 3

Old Pedant · 01-05-2013, 12:23 AM

WOW! That's so close to what I was going to do it is scary!

I wasn't going to bother with the :checked part on the style, since he needs the onclick anyway (I was just going to change the style via the onclick).

But I *do* like the fact than now the onclick handler can be completely independent.

NOW....

What I still don't get is this part

Quote:

If they've not checked that they have completed 2011 for example or not checked everything in-side to auto-check the 2011 objectives, the 2012 objectives will not show on the map as they don't be available.

How will changing the class *OF THE CHECKBOX* help with all of that???

Seems to me you want to change the class of something that *depends* on the checkbox! That is, as you say, if the 2011 objectives are not met then the class for the 2012 objectives would presumably contain display: none; or equivalent.

It also seems to me that you want to change the class (or maybe simply the color) of the *labels*, not necessarily of the checkboxes, per se.

MrTIMarshall · 01-05-2013, 12:34 AM

Yes sorry, I do not wish to change the class of the checkboxes but the objective names.

Old Pedant · 01-05-2013, 12:35 AM

Okay, Andrew.

Why doesn't this work?

Code:

<!DOCTYPE html>
<html lang="en-GB">
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="key, words">
    <meta name="description" content="description">
    <title>Check It</title>
    <style type="text/css">
    label {
        display: block;
        margin-top: 2px; margin-bottom: 2px;
    }

    label.checking input[type=checkbox] {
        display: inline;
        width: 1.2em;
        vertical-align: middle;
        outline: none;
        opacity: 0;
        width: 18px; height: 18px;
        margin: 0 0 0 8px; padding: 0;
        z-index: 10;
    }
    span.checking {
        margin: 0;
        padding: 0 0 0 18px;
        position: relative; left: -18px;
        z-index: 25;
        height: 18px;
        background: url('images/checkblank.png') right center no-repeat;
    }
    label.checking input[type=checkbox]:checked + span.checking {
        background: url('images/checktick.png') right center no-repeat;
    }
    span.red { 
        color: red; 
    }
    label.checking input[type=checkbox]:checked + span.red {
        color: green;     
    }
    </style>
</head>
<body>
<label class="checking"><input type="checkbox" id="remember" 
        name="remember" value="yes"><span class="checking"></span
        ><span class="red">Remember me</span
        ></label>
</body>
</html>

Why will it change the background of <span class="checking"> but not the color of <span class="red"> ???

AndrewGSW · 01-05-2013, 12:36 AM

He/you will have to use image-software to reduce the size of the images (if required) or, presumably just find smaller images.

Probably need to use absolute-positioning, negative margins (etc.), to bring the little i-image between the label and the checkbox. It could be a background to the label but this would make it trickier to click

Actually, we could probably just position the i-image between the label and checkbox(?).

AndrewGSW · 01-05-2013, 12:38 AM

@OldPedant I'll tell you in a minute

Old Pedant · 01-05-2013, 12:38 AM

Quote:

Originally Posted by MrTIMarshall

Yes sorry, I do not wish to change the class of the checkboxes but the objective names.

So that's trivial.

Use Andrew's code for the checkboxes.

And then you can have

Code:

<label class="checking">Remember me<input type="checkbox" id="remember" 
        name="remember" value="yes"
        onclick="document.getElementById('someObjectiveId').className=
                      this.checked ? 'objectiveMet' : 'objectiveNotMet';"
        ><span class="checking"></span></label>

AndrewGSW · 01-05-2013, 12:44 AM

Change + for ~ !

Old Pedant · 01-05-2013, 12:58 AM

Quote:

Originally Posted by AndrewGSW

Change + for ~ !

Fascinating. Changed both of them, by the way, and it worked fine. (Also worked when only the span.red was change.)

Why did the + work, at all???

EDIT: Oh, stupid me. + means "immediately following" where ~ means "any following". DOH. Nice.

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...

By the by, so far as I can tell, the z-indexes you used don't do anything. I changed your z-index of 8 to 25 and it made no difference.

Old Pedant · 01-05-2013, 01:01 AM

By the by, it even works in MSIE 9, at least.

AndrewGSW · 01-05-2013, 01:10 AM

I extracted this code from another page so presumably z-index has lost its impetus..

+ Is the adjacent sibling selector, ~ is the general sibling selector. But, of course, you've inserted another element.. between

MrTIMarshall · 01-05-2013, 01:16 AM

Isn't there are way to do something like this?

Code:

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
	}
}

Hopefully you can see what I'm trying to show there and hopefully there's a way to check if everything under a tab of lets say #mission_3 checks are all checked otherwise I'll need a big if statement to check if all of them are done checked of any of them...

I'll read back on this tomorrow as I am very tired now and need to sleep.

Oh and Andrew, will your code work with my image at all? It's not essential, I'm just curious.

Thank you both for all your help!

AndrewGSW · 01-05-2013, 01:21 AM

@MrTIMarshal Yes, of course, you could substitute your images - although they're not as nice as mine

. Depending on the size of the images you'll probably need to adjust the css as well - so that the span sits neatly with the checkbox.

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!!).

Old Pedant · 01-05-2013, 01:23 AM

*TA DA*

Code:

<!DOCTYPE html>
<html lang="en-GB">
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="key, words">
    <meta name="description" content="description">
    <title>Check It</title>
    <style type="text/css">
    label {
        display: inline;
        margin-top: 2px; margin-bottom: 2px;
    }

    label.checking input[type=checkbox] {
        display: inline;
        width: 1.2em;
        vertical-align: middle;
        outline: none;
        opacity: 0;
        width: 18px; height: 18px;
        margin: 0 0 0 8px; padding: 0;
        z-index: 10;
    }
    span.checking {
        margin: 0;
        padding: 0 0 0 18px;
        position: relative; left: -12px;
        z-index: 25;
        height: 18px;
        background: url('images/checkblank.png') right center no-repeat;
    }
    label.checking input[type=checkbox]:checked ~ span.checking {
        background: url('images/checktick.png') right center no-repeat;
    }
    span.red {
        position: relative;
        left: -18px; 
        color: red; 
    }
    label.checking input[type=checkbox]:checked ~ span.red {
        color: green;     
    }
    </style>
</head>
<body>
<label class="checking"
        ><input type="checkbox" id="remember" 
                name="remember" value="yes"
        ><span class="red">Remember me</span
        ><span class="checking"></span
        ></label>
&nbsp;&nbsp;
<label class="checking"
        ><input type="checkbox" id="remembe2r" 
                name="remember2" value="yes"
        ><span class="red">Remember tons and tons more</span
        ><span class="checking"></span
        ></label>
</body>
</html>

The display: inline; is very important for the <label>! Else you can't put more than one on a line, of course.

MrTIMarshall · 01-05-2013, 01:23 AM

Final note before I shut down.

Regardless of what the outcome is tonight, I'll start making the 2012 sub-Categories and their todo's so there is at least one full thing to test on and for me to study and do for the other years.

AndrewGSW · 01-05-2013, 01:27 AM

Quote:

The display: inline; is very important for the <label>! Else you can't put more than one on a line, of course.

Yes, my original page had the "Remember me" option on its own line.