I have made a dropdown menu with multiple checkboxes using bootstrap (see http://jsfiddle.net/rxdazn/ryzJb/3/ ). This dropdown menu will introduce the possibility to plot multiple graphs ("measures") on the same chart + multiple options (log scale etc.).
A list of values (corresponding to "measures") will be stored in a json object.
For now, I am just using a single select (users can only plot 1 chart, there are no graph type nor options):
<select ng-model="measure" ng-options="facet.path as facet.name for facet in station.facet_groups[0].facets"></select>
How can I best handle the fact that each measure type will have the same submenu?
Should I change my HTML? Should I dynamically generate values for <input> id attributes ?
<!-- graph type -->
<li class="dropdown-submenu"> Graph type
<ul class="dropdown-menu">
<li>
<input type="checkbox" id="line" name="graph" value="line">
<label for="line">line</label>
</li>
<li>
<input type="checkbox" id="dot" name="graph" value="dot">
<label for="dot">dot</label>
</li>
</ul>
Since an id must be unique on a page, you definitely should dynamically generate them; plus, you might also want to generate the name attribute in input element, but this is totally up to your use case. Based on you fiddle, I think you can generate your menu like this:
<ul id="menu">
<li class="dropdown-submenu" ng-repeat="facet in facets"> {{facet.name}}
<ul class="dropdown-menu">
<li>
<input type="checkbox" id="{{facet.name}}-line" name="{{facet.name}}-graph" value="line">
<label for="line">line</label>
</li>
<li>
<input type="checkbox" id="{{facet.name}}-dot" name="{{facet.name}}-graph" value="dot">
<label for="dot">dot</label>
</li>
</ul>
</li>
</ul>
I try to generate the id and name based on facet.name, you may want to change it to suit you needs.
Related
I'm using TinyMCE 6 and I've created a custom block insert using a <ul>, and for the most part this is working great. However, if I have several and position the cursor in front of one of the blocks and hit backspace, it then merges all the contained <li> into a single <ul>. I've tried using attributes like data-id, id, name etc but Tiny simply discards this data from one of the elements and does the merge anyway. If I use a random number as a class name, they do not merge so this is a workaround.
For reference, the blocks are set as noneditable (I have a double-click handler configured for a custom function), so I don't see why it would try and merge them anyway.
Any ideas?
Here's a snippet of HTML as it should be:
<ul id="123" class="leaders mceNonEditable">
<li class="item-en text_gold"><span>Mmm Cookies</span><span>$MONEY$$$$$$</span></li>
<li class="item-ja"><span>SOMEJATEXT</span></li>
</ul>
<ul id="234" class="leaders mceNonEditable">
<li class="item-en"><span>Mmm Cookies</span><span>$495</span></li>
<li class="item-ja"><span>SOMEJATEXT</span></li>
</ul>
And some that ended up:
<ul id="123" class="leaders mceNonEditable">
<li class="item-en text_gold"><span>Mmm Cookies</span><span>$MONEY$$$$$$</span></li>
<li class="item-ja"><span>SOMEJATEXT</span></li>
<li class="item-en"><span>Mmm Cookies</span><span>$495</span></li>
<li class="item-ja"><span>SOMEJATEXT</span></li>
</ul>
The following is an example of a drop down menu implemented in Google MDL Javascript and HTML
<div class="mdl-textfield mdl-js-textfield getmdl-select" id="extractModeReferral">
<input type="text" value="" class="mdl-textfield__input" id="extractModetextReferral" readonly style="width:250px;">
<input type="hidden" value="" name="extractModeReferralhidden">
<label for="extractModeReferraldd" class="mdl-textfield__label">Extract Mode</label>
<ul for="extractModeReferraldd" class="mdl-menu mdl-menu--bottom-left mdl-js-menu" id="extractModeReferralUL">
<li class="mdl-menu__item" data-val="PrintOnArrival" data-selector=true>Print On Arrival</li>
<li class="mdl-menu__item" data-val="PrintOnAcceptance" data-selector=true>Print On Acceptance</li>
<li class="mdl-menu__item" data-val="DoNotPrint">Do Not Print</li>
</ul>
</div>
And here is the javascript which populates that drop down
$('#extractModetextReferral').val(data.ReferralExtractMode).parent().addClass("is-dirty"); // referral
.
.
.
getmdlSelect.init('#extractModeReferral');
.
.
.
componentHandler.upgradeDom();
When it is originally set it is populated as expected, the text field contains the expected text, the drop down has the expected options.
However as soon as you click on the control or any other control on the page the contents of the text field vanishes.
If you select an option from the menu, the text field components is populated. There are 5 of these pulldowns but I have only included the one for clarity
Sure I am doing something daft but anyone got an idea what?
I have a HTML portfolio page that has filtering attribute
<ul class="portfolio-filters list-inline">
<li class="filter active" data-filter="all">All</li>
<li class="filter" data-filter="webdesign">Web Design</li>
<li class="filter" data-filter="responsive">Responsive</li>
<li class="filter" data-filter="wordpress">Wordpress</li>
</ul>
And I have another HTML page that has some services. example of one of my codes in the other page:
<div>
<i></i>
<div>
<h4>Web Design</h4>
</div>
</div>
What I want is when user click on this service icon for example, it will redirect the user to the webdesign filter of the portfolio page.
I tried many ways like adding link portfolio.html?filter=webdesign to the a href of the service icon but it didn't work.
I think you should follow a few tutorials on HTML5, CSS 3 and Javascript.
I made a basic version in this codepen. Please note I'm using the URLSearchParams API which is not supported in IE and other older browser. Also, I'm using Ecmascript 6.
What does the algorithm do?
Check the URL, is there a filter parameter (as in http://.../somewhere?filter=wordpress)
If not, do nothing and show everything, otherwise,
get all the content that has a filter class
display the content that match
hide the rest.
The crux of the algorithm lies in the getting of the query parameters, then it's a matter of looping over a collection and changing the style's display attribute (see the documentation for the display attribute)
// 1. get URL query param (does not work on IE, AFAIK)
const url = new URL(window.location.href)
const currentFilter = url.searchParams.get('filter')
// we only filter stuff if a filter is provided
if (currentFilter != null) {
// 2. collect all filters
const collection = document.getElementsByClassName('filter')
// 3. traverse the collection, hide what's not of interest, show the rest
for (let item of collection) {
if (item.classList.contains(currentFilter)) {
item.style.display = 'block'
break
}
item.style.display = 'none'
}
}
Maybe this works for you. Give your li tags specific id's:
<ul class="portfolio-filters list-inline">
<li class="filter active" data-filter="all" id="all-filter">All</li>
<li class="filter" data-filter="webdesign" id="webdesign-filter">Web Design</li>
<li class="filter" data-filter="responsive" id="responsive-filter">Responsive</li>
<li class="filter" data-filter="wordpress" id="wordpress-filter">Wordpress</li>
</ul>
Then you can just link to the specific id:
<div>
<i></i>
<div>
<h4>Web Design</h4>
</div>
</div>
Else you would have to use javascript I guess.
I'm working on making a dropdown menu accessible. I'm largely following this W3 example: https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html#
However, my menu has an unusual structure. Some of my list item's contain more than one button, which are horizontally aligned within the list item.
<ul role="menu">
<li role="none">Header</li>
<li role="none">
<button role="menuitem">Option A</button>
<button role="menuitem">Option B</button>
<button role="menuitem">Option C</button></li>
<li role="none">
<button role="menuitem">Button Foo</button>
</li>
</ul>
Is there a recommended way to make this WCAG accessible?
I'd like the user to use the LEFT/RIGHT keys to move between the buttons inside a list item.
Furthermore, currently my screenreader (NVDA) will inform the user that there are 4 items within the list (due to there being 4 elements with the role="menuitem" tag). Ideally I'd like the screenreader to let the user know that there are only 2 items in the list, and then when he is on a button with siblings (e.g. "Option A" in my example), I'd like the screenreader to announce that, besides being in the first item in the menu, it is option 1 out of 3 in the list item.
Any advice is appreciated!
IMPORTANT NOTE: The menu role and pattern is designed to be used in applications. If you want to do a menu for a simple website, you should use the navigation role
Answering now, your question...
You are describing what menuitemradio role is intended for: (note: this could also be menutitemcheckbox if different options are not exclusive)
<ul role="menu">
<li role="none" id="group_header">Header</li>
<li role="group" aria-describedby="group_header">
<button role="menuitemradio">Option A</button>
<button role="menuitemradio">Option B</button>
<button role="menuitemradio">Option C</button></li>
<li role="none">
<button role="menuitem">Button Foo</button>
</li>
</ul>
I'd like the user to use the LEFT/RIGHT keys to move between the buttons inside a list item.
You can see the requisits for keyboard interactions for menu role items on the WAI ARIA Authoring practices, which include more than just the left and right keys. So you will have to rely on important javascript development for your application.
Note: Remember, that if you are designing a website (so your menu won't be in an application role), you should use the navigation role. This would be easier and you could use any standard HTML elements like input[type='radio'] which will natively handle the left and right key:
<ul role="navigation" aria-label="Menu">
<li><div id="group_header">Header</div>
<div role="group" aria-describedby="group_header">
<label><input type="radio" name="item" /> Option A</label>
<label><input type="radio" name="item" /> Option B</label>
<label><input type="radio" name="item" /> Option C</label>
</div>
</li>
<li><button>Button Foo</button></li>
</ul>
A discussion on the "menu not for website" theme
I am trying to select individual selection and in hidden a input checkbox in an un-ordered list.
Issue: When I click on one it selects all instead of one
I need just like checkbox in list with hidden input checkbox
here is my code shared in jsFiddle
<ul class="checkbox_list">
<li>
ravi
<p>2343534656 - U44BB387587</p>
<input type="checkbox" class="input_class_checkbox" id="c1">
</li>
<li>
arvi
<p>2343534656 - U444BB387587</p>
<input type="checkbox" class="input_class_checkbox" id="c2">
</li>
<li>
jiva
<p>2343534656 - 444BB387587</p>
<input type="checkbox" class="input_class_checkbox" id="c3">
</li>
</ul>
You need to use clicked element context this to target correct element:
$('.checkbox_list li').on('click',function(){
$(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'));
});
Working Demo