For context the issue I have is that in NVDA and JAWS screenreaders, then user selects an option in a dropdown, it doesn't announce the selection. So I thought that perhaps this would solve the issue. Unfortunately, I'm unable to test it since I don't have a Windows computer.
I was wondering if changing this:
<label for="select-id" > Some Label </label>
<select id="select-id">
<option> </option</>. (empty option on purpose to have nothing selected)
<option> A </option</>
<option> B </option</>
</select>
To this, will solve my issue.
<label for="select-id" id="label-id"> Some Label </label>
<select id="select-id" aria-labelledby="label-id">
<option> </option</>. (empty option on purpose to have nothing selected)
<option> A </option</>
<option> B </option</>
</select>
Thank you!
No it will make no difference, the association is already there with the for="idOfElement".
As for announcing the selection then only thing that I can see from the HTML given is that you don't have a value on the <option> (well and the options are the same but I am assuming that is purely for the example). It shouldn't make a difference but as I have never created a <select> without using value attributes on the options that is the only thing I can see / think of.
For Clarity (as it isn't entirely clear what behaviour you are describing) it will not announce when you select an item, as that should already have been announced when you cycled through the options.
Expected Behaviour:
focus the select "option 1 selected label announced" should be read
press down arrow "option 2" will be read
press "enter" there will be no announcement.
Related
I want to style my managed_file-Field in a Drupal 7 Form-API custom form and therefore, insert a label element that will replace the "Browse for file".
So I want exactly this:
<input type="file" name="files[bild_0]">
<input type="submit" id="edit-bild-0-upload-button" value="Upload">
<label for="files[bild_0]">Choose Picture</label>
However, the Form API makes it very difficult to insert the label directly next to the input. "#prefix" and "#suffix" are not working. "#field_prefix" and "#field_suffix" inserted the html in a wrapper...any ideas?
Thank you very much in advance!
So, i finally figured out an alternative solution. I used the
'#field_suffix'
property on the Form API field to add the label element. Besides of that, I had to overwrite the initial id of the field via
'#id' => 'upload-selector-' . $index_of_picture field
Since the id of the actual input-field is now different from the div that contains the field, I could use the label of the field to trigger the file-dialog. I styled the label element to my needs and hid the initial input.
Suppose I have a ViewModel where there is a string field which contains name of the color. So in my DropDownList I want list items to be colors instead of mere text)) Can it be somehow done? Thanks in advance!
Unfortunately the standard Html.DropDownListFor helper doesn't allow you to define html attributes on the <option> element that it generates. For example your target HTML could be:
<select name="color">
<option style="background-color:Red;"></option>
<option style="background-color:Blue;"></option>
...
</select>
In order to achieve this markup you could write a custom DropDownList helper as shown in this answer.
And to achieve even sleeker UI you could use some of the existing jQuery DropDown plugins such as this one.
Is this possible to achieve without javascript/jQuery?
I currently have a login template with the input fields as:
<input id="username" type="text" name"username" placeholder="username" autofocus>
I was wondering if there was a way when the user clicked their mouse on the field to type the placeholder text would disappear without using javascript if possible? Before this i was just using value and echoing the variables out into the fields but currently experimenting with HTML 5 and CSS3.
Thanks.
New browsers have a native way to do this. And if supported, you don't have to do anything.
With older browsers you do need to use javascript.
Edit: When using new features on old browsers its called Pollyfills. Here is a nice list with a lot of pollyfills that can be used together with Modernizer, that in turn can detect this features.
I am definitely a CSS noobie, but have looked everywhere and can't find a solution to my problem (I have found out why my attempts don't work, but no solution).
I am hacking a CSS sheet to modify an advanced search form which is linked to a database. I CANNOT touch the HTML, nor can I use JavaScript or JQuery. The search form allows a user to select which fields they wish search from a drop down form menu. I want to hide a number of field options since they have no data.
The HTML is
<div class="inputs"><div class="search-entry">
<select name="advanced[0][element_id]"
id="advanced-0-element_id">
<option value="" label="Select Below ">Select Below </option>
<optgroup label="Dublin Core">
<option value="88" label="Abstract">Abstract</option>
<option value="98" label="Access Rights">Access Rights</option>
<option value="118" label="Accrual Method">Accrual Method</option>
<option value="119" label="Accrual Periodicity">Accrual Periodicity</option>
<option value="120" label="Accrual Policy">Accrual Policy</option>
and so on
I tried
option [value="88"] {
display: none;}
But this doesn't work b/c each drop down option does not create a block in the first palace. Therefore display: none can't hide a block that doesn't exist.
So now you know what doesn't work, and what I need to do. Any suggestions? Again, I can't access the html code at all b/c it is generated by a PHP program on a server I don't have access to. Even if I did, I don't know any PHP at all.
thanks for your time
At the risk of getting downvoted I am going to say that this isn't possible with CSS alone.
The option tag describes the data model of an HTML element. The style sheet describes the view.
You won't be able to do this with CSS. You would need to use JavaScript to do it at runtime. Otherwise, you'd have to edit the server code and/or data from where it is generated. Do you have access to the database? If so you may be able to just remove the rows it's using.
I have a checkbox list control on my asp.net web form that I am dynamically populating from an arraylist. In javascript I want to be able to iterate through the values in the list and if a particular value has been selected to display other controls on the page.
My issue is that all the values in the checkbox list are showing up as 'on' instead of the actual value set. How do I get the actual values for each checkbox?
Thanks.
Javascript:
checkBoxs=document.getElementById(CheckboxList);
var options=checkBoxs.getElementsByTagName('input');
for(var i=0;i<options.length;i++)
{
if(options[i].value=="Other")
{
if(options[i].checked)
{
var otherPub=document.getElementById('<%=alsOtherPublicity.ClientID%>');
otherPub.style.display='block';
}
}
}
Edit: The line that I'm having problems with is if(options[i].value=="Other") as the values showing up in firebug are given as 'on' rather than the values that I set.
Edit 2: The html that is produces looks like:
<span id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity" class="ucFieldCBL" onChange="alValidate();" onClick="alPublicity('ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity');">
<input id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_0" type="checkbox" name="ctl00$ContentPlaceHolderMetadata$Allocation1$alfPublicity$0"/>
<label for="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_0">Text1</label>
<input id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_1" type="checkbox" name="ctl00$ContentPlaceHolderMetadata$Allocation1$alfPublicity$1"/>
<label for="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_1">Text2</label>
<input id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_2" type="checkbox" name="ctl00$ContentPlaceHolderMetadata$Allocation1$alfPublicity$2"/>
<label for="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_2">Text3</label>
<input id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_3" type="checkbox" name="ctl00$ContentPlaceHolderMetadata$Allocation1$alfPublicity$3"/>
<label for="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_3">Text4</label>
<input id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_4" type="checkbox" name="ctl00$ContentPlaceHolderMetadata$Allocation1$alfPublicity$4"/>
<label for="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_4">Text5</label>
</span>
It looks as if the issue stems from the lack of a value attribute available on the asp.net checkbox control as described by Dave Parslow. I'm currently trying a workaround by calling a function server side to return the text of the checkbox and using that instead.
options[i].checked will return true or false.
options[i].value will give you the value attribute of the checkbox tag.
I think your problem is not with the javascript but with the code that is populating the checkboxes. Are you binding the ArrayList as the CheckBoxList data source or iterating through the ArrayList and adding new ListItems to the CheckBoxList. If the former, consider switching to the latter and make sure that you use the ListItem constructor that takes both text and value parameters. If you look at the HTML source I suspect that you will see that the generated code has the value parameter set to on for all of your checkboxes which means that the values weren't actually bound in the codebehind.
Not 100% applicable here, but be aware that if you give a checkbox a cssclass, it gets a span wrapped around it, and the class is placed on that. This causes all sorts of cross browser problems when youre navigating the dom, or disabling checkboxes
I realised after much playing about with prerender events that I didn't actually need to know the exact value of the checkbox as the arraylist values would be in the same order as the checkboxes. I searched through the arraylist to get the position of the value that I needed and then used that position on the list of checkboxes.
It sounds a bit fiddly and I don't know if it would work for everyone but I thought I would put it up here anyway incase it helps someone else someday.
Thanks for all your help.