Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 3 of 4 FirstFirst 1234 LastLast
Results 31 to 45 of 55
  1. #31
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,650 Times in 4,612 Posts
    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
    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.
    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.

  2. #32
    Regular Coder
    Join Date
    Nov 2010
    Posts
    432
    Thanks
    56
    Thanked 1 Time in 1 Post
    Yes sorry, I do not wish to change the class of the checkboxes but the objective names.

  3. #33
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,650 Times in 4,612 Posts
    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"> ???
    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.

  4. #34
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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(?).
    "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

  5. #35
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    @OldPedant I'll tell you in a minute
    "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

  6. #36
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,650 Times in 4,612 Posts
    Quote Originally Posted by MrTIMarshall View Post
    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>
    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.

  7. #37
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Change + for ~ !
    "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

  8. #38
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,650 Times in 4,612 Posts
    Quote Originally Posted by AndrewGSW View Post
    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.
    Last edited by Old Pedant; 01-05-2013 at 02:12 AM.
    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.

  9. #39
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,650 Times in 4,612 Posts
    By the by, it even works in MSIE 9, at least.
    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.

  10. #40
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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
    "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

  11. #41
    Regular Coder
    Join Date
    Nov 2010
    Posts
    432
    Thanks
    56
    Thanked 1 Time in 1 Post
    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!
    Last edited by MrTIMarshall; 01-05-2013 at 02:21 AM.

  12. #42
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    @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!!).
    Last edited by AndrewGSW; 01-05-2013 at 02:25 AM.
    "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

  13. #43
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,650 Times in 4,612 Posts
    *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.
    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.

  14. #44
    Regular Coder
    Join Date
    Nov 2010
    Posts
    432
    Thanks
    56
    Thanked 1 Time in 1 Post
    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.

  15. #45
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    "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


 
Page 3 of 4 FirstFirst 1234 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •