Improved Current Field Highlighting help

Danopoly · March 2, 2010, 8:36pm

I am using this technique from CSS-Tricks for a long form page. I’ve managed to set it up for long sections of checkboxes so that you can now see the entire section highlighted.

The problem is that if I indent any of the checkboxes (using “UL”), I lose the styling or the ability to highlight the entire section defined by ‘div class=“single-field”’. I took a try at creating a new “UL” style that also triggers the highlight… however it ends up selecting only the indented section.

I’ve created 2 screenshots to explain. “divhighlighted1.jpg” is when the entire div is highlighted. “ulhighlighted1.jpg” is when just the UL is highlighted.

Thanks for the assistance!
Dan

div.single-field {
	padding: 10px;
	position: relative;
	}
ul.single-field {
	padding: 10px;
	position: relative;
	}
	.tl {
		position: absolute;
		top: 0;
		left: 0;
		width: 10px;
		height: 10px;
		background: url(../images/corner-topleft.jpg);
		display: none;
	}
	.tr {
		position: absolute;
		top: 0;
		right: 0;
		width: 10px;
		height: 10px;
		background: url(../images/corner-topright.jpg);
		display: none;
	}
	.bl {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 10px;
		height: 10px;
		background: url(../images/corner-bottomleft.jpg);
		display: none;
	}
	.br {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 10px;
		height: 10px;
		background: url(../images/corner-bottomright.jpg);
		display: none;
	}

	
div.curFocus {
	background: #fdecc2;
}

ul.curFocus {
	background: #fdecc2;
}

Stomme_poes · March 2, 2010, 8:48pm

Hi,

I find lists in forms rilly weeeird… so I’m assuming someone’s going to ask you to post your html (at least the form part). Might as well do that now as attachments sometimes take a while.

Danopoly · March 2, 2010, 9:44pm

Of course! Here’s the HTML used in one example.

<div class="single-field">Select one:<br />
          <br />
          <input type="checkbox" name="checkbox2" value="checkbox" />
          </input><label for="SystemAcc"><a href="#" class="check">Text</a><a href="#"></a></label>
          <br />
          <input type="checkbox" name="checkbox3" value="checkbox" />
          <label for="HCA"><a href="#" class="check">Text</a>&nbsp;</label>
          <br />
<ul>          <input type="checkbox" name="checkbox4" value="checkbox" />
          </input><label for="SystemAcc"><a href="#" class="check">Text</a>&nbsp;</label>
          <input name="textfield1" type="text" class="check_gray" size="13" />
          </input>
          <a href="#"></a> <br />
          <input type="checkbox" name="checkbox5" value="checkbox" />
          </input>
          <label for="SystemAcc"><a href="#" class="check">Text</a>&nbsp;</label>
          <a href="#"></a> <br /></ul>
</div>

Stomme_poes · March 3, 2010, 8:06am

Your attachments still aren’t through, but I can let you in on some unrelated stuff going on in your form:

In a screen reader, the “select one” will not get read out if the reader has a Forms Mode (as the two big Windows screen readers do). If you need only one selected, make them radio buttons. (checkbox practically BEGS “check none or more”! while radio buttons say “you must choose one and only one”, like the old radio buttons in cars in the 70’s. remember those?)


<input type="checkbox" name="checkbox3" value="checkbox" />
          <label for="HCA"><a href="#" class="check">Text</a>&nbsp;</label>

I have recently discovered (the hard way) that having an anchor wrapped around the label text inside the label seems to remove the benefit of being able to click on the label to select the input (one of the touted benefits of explicit linking with the “for” attribute) in all browsers except Firefox (for whatever reason).

This hasn’t stopped me from using anchors in labels for when I needed a focus point or help text, but be aware of it. I found Opera, Saffy, Chrome, and IE6 and 7 let you click either the label or the input, but clicking the label did not select the input except in FF.


<ul>          <input type="checkbox" name="checkbox4" value="checkbox" />

This part is illegal. Are you sure this is what you have?

While I don’t personally like lists in forms, you can have them in there legally, but legally the only valid child of a ul is a li. When people make listed forms, they put all the form controls in a li because they must.

The li has all the same abilities of a div, and can contain just about anything. I looked at your link and they don’t mix lists with divs… they just use jQuery to add a bunch of divs for rounded corners.

And it looks like jQuery just is there to make a “parent selector” (something CSS is sorely lacking!). I’m sure there’s a css way to do it still, but right now I think we need to backtrack and figure out where these lists are coming from, because they way you’ve got them now, they’re illegal (and likely screwing with one or more browsers despite their attempts at covering up our errors, lawlz).

You don’t need to use a ul to get checkboxes indented. You just put them (and their label) in a box like a div and throw some left padding on the div or something.

For that matter, <div class=“single-field”> looks like it may need to be a fieldset. You can put fieldsets in fieldsets, and you can put divs in fieldsets.

I’ll see if I can bug someone about your attachments getting approved if they aren’t approved today, but so long as you have invalid code it may be moot… we’ve gotta fix that first. Then figure out what you need to get the indenting you want.

Danopoly · March 3, 2010, 3:13pm

Thanks for your comments. Maybe a new div instead of “ul” is what I need to do. I didn’t realize that was incorrect. I’ll try using a div instead.

Also, the checkboxes are preferred, since multiple selections will be necessary, leaving radio buttons out.

If the images ever get approved, you’ll see the real issue I’m having.

Thanks for your help!
Dan

Stomme_poes · March 3, 2010, 3:22pm

Also, the checkboxes are preferred, since multiple selections will be necessary, leaving radio buttons out.

Ok, that makes sense with your images, but your text in the div says “select one”. You could have “select at least one” but like I said if someone using a screen reader just gets a group of checkboxes and don’t hear the “select one”, they’ll be right to assume they can check as many as they want.

Of your two images, which one did you want? I was under the impression originally that a label-input pair was to get selected if the user had :focus on the input.

You want the whole group of questions highlighted, or just part?

For a group where you don’t want them all highlighted, you’d want your outer div to not have the class name, just classless, while the div with the class jQuery is using is wrapped around each chunk you want.

Or, if everything was fine until you wanted to add some indenting styles, then I’d still go ahead and wrap a fieldset around that whole group (it is a group of related questions right?) and have your div with the class inside. The fieldset can have the left padding so you don’t have to touch the classed div.

OR you could add another class to your div:
<div class=“single-field indented”>

.single-field {
whatever;
}

.indented {
padding here;
}

Danopoly · March 3, 2010, 3:41pm

It’s the image with all of the questions selected (divhighligthed1.jpg).

I think I see where you’re going. I’ll work on it a bit.

As far as the “Select one” at the top, there are other sections that say “Select all that apply”… I’m getting inconsistent content from several people and I’m trying to get everything to match (or at least be logical).

I don’t know a lot about screen readers, but it’s definitely something that I want to learn more about. You’ve given me a lot to think about.

Dan

Danopoly · March 3, 2010, 7:30pm

No matter what I do, I can’t accomplish it. The indented class always gets highlighted separately. This is currently the code I have:

CSS:

div.single-field {
	padding: 10px;
	position: relative;
	}
.indent {
	padding: 10px;
	position: relative;
	padding-left: 20px;
	padding-right: 20px;
}

HTML:

     <fieldset> <div class="single-field">
<input type="checkbox" name="checkbox7" value="checkbox" />
        </input><label for="SystemAcc"><a href="#" class="check">Text</a><a href="#"></a></label>
          <br />
          <input type="checkbox" name="checkbox8" value="checkbox" /></input>
          <label for="HCA"><a href="#" class="check">Text 2</a>&nbsp;</label>
          <br /><br />

          Select all that apply: <br />
 <div class="single-field indent">         <input type="checkbox" name="checkbox9" value="checkbox" />
          </input><label for="SystemAcc"><a href="#" class="check">Text 3</a><a href="#"></a></label>
          <br />
          <input type="checkbox" name="checkbox10" value="checkbox" /></input>
          <label for="HCA"><a href="#" class="check">Text 4</a></label>
          <br />
		  </div></div></fieldset>

PaulOB · March 3, 2010, 8:03pm

Hi,

I think we’d need to see your page to understand better.

If I understand correctly you are using the JS to highlight sections which it does by applying a class to the parent of the input. Therefore the parent of the input will get the highlight class as required.

If you don’t want the indented list to get it’s own highlight then don’t create a new parent for it. Just add a class to the inputs themselves to indent them individually.

Danopoly · March 3, 2010, 8:10pm

I will try to get an external page set up. I don’t know if that’s possible from where I’m at.

If you don’t want the indented list to get it’s own highlight then don’t create a new parent for it. Just add a class to the inputs themselves to indent them individually.

I think I’ve tried that. No matter what I do, the inner class gets the highlight.

Indent class is “single-field indent”

     <fieldset> <div class="single-field">
<input type="checkbox" name="checkbox7" value="checkbox" />
        </input><label for="SystemAcc"><a href="#" class="check">Text</a><a href="#"></a></label>
          <br />
          <input type="checkbox" name="checkbox8" value="checkbox" /></input>
          <label for="HCA"><a href="#" class="check">Text 2</a>&nbsp;</label>
          <br /><br />

          Select all that apply: <br />
 <div class="single-field indent">         <input type="checkbox" name="checkbox9" value="checkbox" />
          </input><label for="SystemAcc"><a href="#" class="check">Text 3</a><a href="#"></a></label>
          <br />
          <input type="checkbox" name="checkbox10" value="checkbox" /></input>
          <label for="HCA"><a href="#" class="check">Text 4</a></label>
          <br />
		  </div></div></fieldset>

Indent class is “indent”

     <fieldset> <div class="single-field">
<input type="checkbox" name="checkbox7" value="checkbox" />
        </input><label for="SystemAcc"><a href="#" class="check">Text</a><a href="#"></a></label>
          <br />
          <input type="checkbox" name="checkbox8" value="checkbox" /></input>
          <label for="HCA"><a href="#" class="check">Text 2</a>&nbsp;</label>
          <br /><br />

          Select all that apply: <br />
 <div class="indent">         <input type="checkbox" name="checkbox9" value="checkbox" />
          </input><label for="SystemAcc"><a href="#" class="check">Text 3</a><a href="#"></a></label>
          <br />
          <input type="checkbox" name="checkbox10" value="checkbox" /></input>
          <label for="HCA"><a href="#" class="check">Text 4</a></label>
          <br />
		  </div></div></fieldset>

I’ll see if I can work on getting a page set up so you can see what’s going on.

I appreciate the responses.

Dan

Danopoly · March 3, 2010, 8:23pm

Here’s the basic structure of the page.

http://www.danspeziale.com/draft_site/div_select.html

I had forgotten that I set this up a few weeks ago to test elements off-site.

Dan

Danopoly · March 5, 2010, 6:04pm

If anyone can give me further assistance, it would be most appreciated.

Thank you,
Dan

PaulOB · March 5, 2010, 7:42pm

Hi,

I am still unclear of what you want to do exactly.

If you just want to highlight all 4 inputs then do this:


<fieldset>
<div class="single-field">
    <input type="checkbox" name="checkbox7" value="checkbox" />
    <label for="SystemAcc"><a href="#" class="check">Text</a><a href="#"></a></label>
    <br />
    <input type="checkbox" name="checkbox8" value="checkbox" />
    <label for="HCA"><a href="#" class="check">Text 2</a>&nbsp;</label>
    <br />
  
    Select all that apply: <br />
[B]    <span class="indent">[/B]
        <input type="checkbox" name="checkbox9" value="checkbox" />
     
        <label for="SystemAcc"><a href="#" class="check">Text 3</a><a href="#"></a></label>
        <br />
        <input type="checkbox" name="checkbox10" value="checkbox" />
       
        <label for="HCA"><a href="#" class="check">Text 4</a></label>
        <br />
  [B]  </span>[/B]
</div>
</fieldset>


.indent {
    padding: 10px;
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
[B]    display:block;[/B]
}

If that’s not what you meant can you give step by step instructions of what you want to happen as I’ve read through a couple of times now but I seem to be missing the point somewhere along the line

Danopoly · March 5, 2010, 8:30pm

As far as I know, it should be working, but it is not. I tried your solution above and the ‘span class=“indent”’ doesn’t cause any highlighting to happen.

What’s happening:

The picture called “divhighlighted1.jpg” is what I want to happen, no matter which checkboxes are selected, the entire div gets highlighted. If the checkbox is within the "div class=“single-field”, the entire div should be highlighted.

Adding an indent to the procedure causes “ulhighlighted1.jpg” or breaks the highlight trigger completely.

PaulOB · March 5, 2010, 10:22pm

Hi,

I think I must be misunderstanding what you want as my first suggestion seems to be what you want.

e.g.


.indent-it{
    margin:0 0 0 20px;
}


<fieldset>
<div class="single-field">
    <input type="checkbox" name="checkbox7" value="checkbox" />
    <label for="SystemAcc"><a href="#" class="check">Text</a><a href="#"></a></label>
    <br />
    <input type="checkbox" name="checkbox8" value="checkbox" />
    <label for="HCA"><a href="#" class="check">Text 2</a>&nbsp;</label>
    <br />
    Select all that apply: <br />
    <input[B] class="indent-it" [/B]type="checkbox" name="checkbox9" value="checkbox" />
    <label for="SystemAcc"><a href="#" class="check">Text 3</a><a href="#"></a></label>
    <br />
    <input [B]class="indent-it[/B]"  type="checkbox" name="checkbox10" value="checkbox" />
    <label for="HCA"><a href="#" class="check">Text 4</a></label>
    <br />
</div>

You can’t wrap a parent around any of the inputs because the js looks for the parent and toggles the class.


$(this)
                .parent()
                    .removeClass("curFocus")
                .children("div")
                    .toggle();

You have to add a class to each input as per my first suggestion.
Unless I’m misunderstanding again which is quite likely

Danopoly · March 5, 2010, 10:43pm

Thank you, sir! That did the trick. Best of all, it is very simple and no editing the javascript.