I'm working on a combobox, and in doing so, I want to use the new :focus-within pseudo selector to manage displaying the expandable listbox that's associated with the combobox.
:focus-within is a great solution and works like a charm. The only problem I'm having is figuring out how to keep the aria-expanded attribute on the listbox updated. Because all of the hide/show functionality is happening in browser-land due to the pseudo-selector, I'm unsure of a hook I can use in Javascript to determine when the item is visible or not in order to update that property.
Is there an elegant solution anyone knows about? I'd hate to have to replicate the logic for focus/blur that :focus-within is handling right now just to update this attribute. I'm also concerned they may get out of sync. There any way to spy on an element with :focus-within or something like that?
.list {
display: none;
}
.combobox-container:focus-within .list {
display: block;
}
<section class="combobox-container">
<div role="combobox" aria-expanded="false" aria-owns="listbox" aria-haspopup="listbox">
<label> Foo
<input type="text" aria-autocomplete="list" aria-controls="listbox" />
</label>
</div>
<ul class="list" id="listbox" role="listbox" tabindex="0" aria-multiselectable="true">
<!-- items for autocomplete. focusable anchors inside li tags. -->
<li>Javascript</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</section>
Accessibility guidelines for a combobox
focus-within only has 84% browser coverage
For this reason that instantly makes your solution inaccessible as a lot of screen reader users still use JAWs with Internet Explorer.
Additionally you have the problem that while this works as a demo, in the real world an auto-complete list will be populated via AJAX or via a preloaded list that is filtered.
This means that the list will always be shown the second you focus the <input>, even when nothing has been typed into the combobox (which is not expected behaviour).
This is one of the few circumstances where relying solely on JavaScript is acceptable (with a fallback that the form can still be submitted without JavaScript).
Instead of trying to use :focus-within you can instead use JavaScript to toggle aria-expanded="true" when you return some suggestions and then use standard CSS3 selectors to show and hide the results.
The below example shows the CSS to achieve this. The + operator is the key, it is the Adjacent Sibling Combinator that selects the next sibling within a parent element.
CSS: .combobox-container div[aria-expanded="true"]+.list
For the example below I have made it so that once you type more than 1 character into the box it will change the aria-expanded attribute to true (and back again if the input is empty) - this makes it feel more like a 'real world' example.
Side note: You do not need to add a tabindex to the <ul>, the expected behaviour is to tab directly to the first suggested item, I have removed that in the example below.
//ignore this, this is my standard jQuery replacement for snippets
if(typeof $=="undefined"){!function(b,c,d,e,f){f=b['add'+e]
function i(a,d,i){for(d=(a&&a.nodeType?[a]:''+a===a?b.querySelectorAll(a):c),i=d.length;i--;c.unshift.call(this,d[i]));}
$=function(a){return /^f/.test(typeof a)?/in/.test(b.readyState)?setTimeout(function(){$(a);},9):a():new i(a);};$[d]=i[d]={on:function(a,b){return this.each(function(c){f?c['add'+e](a,b,false):c.attachEvent('on'+a,b)})},off:function(a,b){return this.each(function(c){f?c['remove'+e](a,b):c.detachEvent('on'+a,b)})},each:function(a,b){for(var c=this,d=0,e=c.length;d<e;++d){a.call(b||c[d],c[d],d,c)}
return c},splice:c.splice}}(document,[],'prototype','EventListener');var props=['add','remove','toggle','has'],maps=['add','remove','toggle','contains'];props.forEach(function(prop,index){$.prototype[prop+'Class']=function(a){return this.each(function(b){if(a){b.classList[maps[index]](a);}});};});$.prototype.hasClass=function(a){return this[0].classList.contains(a);};}
$.prototype.find=function(selector){return $(selector,this);};$.prototype.parent=function(){return(this.length==1)?$(this[0].parentNode):[];};$.prototype.findWithin=function(a){console.log("THIS IS",this[0],a);return this[0].getElementsByClassName(a);};$.prototype.first=function(){return $(this[0]);};$.prototype.focus=function(){return this[0].focus();};$.prototype.css=function(a,b){if(typeof(a)==='object'){for(var prop in a){this.each(function(c){c.style[prop]=a[prop];});}
return this;}else{return b===[]._?this[0].style[a]:this.each(function(c){c.style[a]=b;});}};$.prototype.text=function(a){return a===[]._?this[0].textContent:this.each(function(b){b.textContent=a;});};$.prototype.html=function(a){return a===[]._?this[0].innerHTML:this.each(function(b){b.innerHTML=a;});};$.prototype.attr=function(a,b){return b===[]._?this[0].getAttribute(a):this.each(function(c){c.setAttribute(a,b);});};$.param=function(obj,prefix){var str=[];for(var p in obj){var k=prefix?prefix+"["+p+"]":p,v=obj[p];str.push(typeof v=="object"?$.param(v,k):encodeURIComponent(k)+"="+encodeURIComponent(v));}
return str.join("&");};$.prototype.append=function(a){return this.each(function(b){b.appendChild(a[0]);});};$.ajax=function(a,b,c,d){var xhr=new XMLHttpRequest();var type=(typeof(b)==='object')?1:0;var gp=['GET','POST'];xhr.open(gp[type],a,true);if(type==1){xhr.setRequestHeader("X-Requested-With","XMLHttpRequest");}
xhr.responseType=(typeof(c)==='string')?c:'';var cb=(!type)?b:c;xhr.onerror=function(){cb(this,true);};xhr.onreadystatechange=function(){if(this.readyState===4){if(this.status>=200&&this.status<400){cb(this,false);}else{cb(this,true);}}};if(type){xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');xhr.send($.param(b));}else{xhr.send();}
xhr=null;};
//only part of the demo, not for production use
$('input').on('keyup', function(e){
if($(this)[0].value.length > 0){
$('div[role=combobox]').attr('aria-expanded', true);
return;
}
$('div[role=combobox]').attr('aria-expanded', false);
return;
});
.list {
display: none;
}
.combobox-container div[aria-expanded="true"]+.list{
display: block;
border:2px solid #333;
}
<section class="combobox-container">
<div role="combobox" aria-expanded="false" aria-owns="listbox" aria-haspopup="listbox">
<label> Foo
<input type="text" aria-autocomplete="list" aria-controls="listbox" />
</label>
</div>
<ul class="list" id="listbox" role="listbox" aria-multiselectable="true">
<!-- items for autocomplete. focusable anchors inside li tags. -->
<li>Javascript</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</section>
Related
I'm trying to add field validation to a "Contact Us" form using Bootstrap and a validation library (a jQuery Plugin) called Validetta (http://lab.hasanaydogdu.com/validetta/).
After implementing the form and the validation, though, I am noticing a problem with the z-index of the tooltip that causes it to show up beneath the next form field.
If I were dealing with normal HTML and CSS, I think the answer would be a little more clear to me, but with Bootstrap, I do not know what sort of mysticism is afoot and am having trouble finding answers on how to solve this problem in the best-practices way.
I know that Validetta is adding a <SPAN> after the form field and is applying a custom CSS class to it, which I can easily modify, override, or append. I've also read, in other contexts, that this problem can be solved using a combination of z-index and position on the tooltip SPAN and one or more of its parent elements... but all of my quick tests and trials have not had the desired affect.
Here's the rendered HTML for the form field shown above:
<div class="form-group has-feedback has-error">
<label class="control-label" for="inputFromName">Your Name</label>
<input type="text" class="form-control" id="inputFromName" name="fromName" placeholder="Your Name Here" data-validetta="required" data-vd-message-required="This field is required!">
<span class="validetta-bubble validetta-bubble--bottom">This field is required!<br></span>
</div>
Any help would be much appreciated!
you may check the z-index attribute on parent elements of "validetta-bubble" ;
because z-index judge from parent to child, if a parent has a lower z-index while child elemtn has a higher this element's z-index finally work base on the parenet's
you may try to set form-group's z-index
.form-group {
z-index: 10000;
position: relative;
}
and set a higher on target like answer 1
.crazy-zindex {
z-index: 10001;
}
Ultimately, I found the answer to this question here: z-index of hover tooltip with CSS
The answer from Панайот Толев provided this example:
<div class="level1">
<span class="level2"> 1 </span>
<span class="level2"> 2 </span>
<span class="level2"> 3 </span>
</div>
So, to solve the problem, I wrapped each row of form elements in a div that specified a z-index in the style attribute. As I went down the rows, I decreased the z-index value, like so:
<div style="z-index: 23;"> .. </div>
<div style="z-index: 22;"> .. </div>
<div style="z-index: 21;"> .. </div>
This ensured that each row fell "behind" the one above, which allowed tool-tips to appear on top of the fields (and labels), rather than beneath them.
I had same issue.
When no other script solved my problem. Then I had used parent class as data-container.
For exp.
<ul id="responsivator">
<li data-placement="bottom" data-toggle="tooltip" data-container="#responsivator" title="iPhone landscape Preview" >
</ul>
I would add a custom class like crazy-zindex (I'm sure you can come up with a better name) and a rule in the css for it.
HTML
<span class="validetta-bubble validetta-bubble--bottom crazy-zindex">This field is required!<br></span>
^^^^^^^^^^^^
CSS
.crazy-zindex {
z-index: 10000;
}
Its important to remember that CSS is cascading, so the last rule will overwrite anything above it, with this said, any overwrites you want to do to bootstrap you'll have to link that stylesheet after bootstrap. Or you can use !important but that's not good practice.
In the following example, I use checkbox for making a pure CSS dropdown navigation, also available in this jsFiddle example.
Open that fiddle, click "Menu", click "Link 1", and click the "Back" button on the browser toolbar, as you can see the checkbox remains checked, so the navigation is still open.
My question is - would it be possible to reset that checkbox to unchecked automatically when going back from the browser history? Any suggestions please? Do I need to use Javascript/jQuery?
HTML
<label for="m">Menu</label>
<input id="m" type="checkbox">
<nav id="n">
<ul>
<li>Link 1</li>
</ul>
</nav>
CSS
#n {
display: none;
}
#m:checked ~ #n {
display: block;
}
No need for JS or CSS, just add autocomplete="off" to the checkbox. This will prevent the browser from caching the 'checked' status.
Example: https://jsfiddle.net/6g5u8wkb/
Also, if you have multiple checkboxes, I beleive you can add autocomplete="off" to the form element to apply the effect to all inputs fields.
Try adding something like this:
$( document ).ready(function() {
$("#m").prop('checked',false );
});
$( document ).ready(function() {
$("#m").prop('checked',false );
});
#n {
display: none;
}
#m:checked ~ #n {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="m">Menu</label>
<input id="m" type="checkbox">
<nav id="n">
<ul>
<li>Link 1</li>
</ul>
</nav>
Further to the other comments, if you are writing an AJAX driven page that uses pushState/replaceState, and the back button would not actually reload a page (i.e. no HTTP request), you can listen for the popState event and clear the checkbox.
window.onpopstate = function(event) {
$("#m").prop('checked',false );
};
It's a HTML 5 feature that's not fully supported across all browsers (although support is pretty good)
https://developer.mozilla.org/en-US/docs/Web/Events/popstate
Other options would be to use libraries like history.js, jquery-bbq, sammyjs, and so on.
add autocomplete="off" to the checkbox.
I'm working on a js script which will show / hide multiple divs based on css class, seemingly pretty simple. I set out to find an example of this and found something close in the article linked below. I used the code in the following link as a starting point.
Show/hide multiple divs using JavaScript
In my modified code (shown below) I am able to hide all (which is errant) and show all (which works correctly. I'm not sure why its not targeting the CSS class "red, green or blue" correctly. If I hard one of the class names in the script it works as expected, so I'm fairly certain I'm having an issue in the way I'm referencing the css targets themselves.
I am able to hide all and show all, yet I'm having difficulty showing only the selected class.
Here is the jsFiddle I'm working with: http://jsfiddle.net/juicycreative/WHpXz/4/
My code is below.
JavaScript
$('.categories li a').click(function () {
$('.marker').hide();
$((this).attr('target')).show();
});
$('#cat-show').click(function () {
$('.marker').show();
});
HTML
<ul class="categories">
<li id="cat-show" class="cat-col1" target="all" >All</li>
<li id="cat-models" class="cat-col1" target="red" >Model Homes</li>
<li id="cat-schools" class="cat-col1" target="blue">Schools</li>
<li id="cat-hospital" class="cat-col1" target="green" >Hospitals</li>
</ul>
<div id="locator">
<div id="overview-00" class="marker models" title="Maracay Homes<br />at Artesian Ranch"></div>
<!--SCHOOLS-->
<div id="overview-01" class="marker red" title="Perry High School">1</div>
<div id="overview-02" class="marker red" title="Payne Jr. High School">2</div>
<div id="overview-03" class="marker blue" title="Hamilton Prep">3</div>
<div id="overview-04" class="marker blue" title="Ryan Elementary">4</div>
<div id="overview-05" class="marker green" title="Chandler Traditional – Freedom">5</div>
</div>
Thanks in advance for any responses.
$((this).attr('target')).show();
This is syntactically incorrect. It should be $($(this).attr('target'))
However that's no good either because this is the anchor element that does not have the target. Use $(this).closest('li').attr('target') (or add the target to the <a>).
This is also semantically incorrect as that would interpolate to $("red") which would try to look for a <red> element.
$("." + $(this).closest('li').attr('target'))
http://jsfiddle.net/WHpXz/5/
You are almost there. This is the line that needs tweaking: $((this).attr('target')).show();
$(this) actually refers to the current anchor tag that was clicked. Since the anchor tag doesn't have the target attribute, you need to go up to the parent.
From there, you can get the target and add the '.' to the color to use as a selector.
var catToShow = $(this).parent().attr('target');
$('.' + catToShow).show();
I've edited your fiddle. Give it a shot.
http://jsfiddle.net/juicycreative/WHpXz/4/
I am attempting to create a listview control in jquery-mobile that has the ability for certain list items to expand and show child items. My goal is that this list is filterable, and the jquery-mobile data-filter="true" attribute is sufficient. Unfortunately, it seems to be inherited by < u l > and < o l > elements inside, and I end up with multiple filter controls. Is there a best practice for preventing this type of inheritence in jquery? Using jquery to remove extraneous form tags is a hack that works, but I'd rather do it as designed.
Here is a quick example:
<div data-role="content">
<div class="choice_list">
<h2>Select an item</h2><br />
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a>Item</a></li>
<li data-role="collapsible">
<h3>Super Item</h3>
<ul data-role="listview" data-inset="true">
<li><a>Sub Item</a></li>
</ul>
</li>
</ul>
</div>
</div>
Please take a look at this JSFiddle for an example: http://jsfiddle.net/harlomic/SsJjS/3/.
You could use CSS to hide two of the three filter inputs:
/*hide all of the search filter forms*/
#test .choice_list form.ui-listview-filter {
display : none;
}
/*show just the first search filter form*/
#test .choice_list form.ui-listview-filter:nth-child(-n+3) {
display : block;
}
Here is a demo: http://jsfiddle.net/SsJjS/5/
Note that test is the ID of the page on which the list-views are found and choice_list is the class of the container element to your list-views.
I have also ran into this same problem with nested lists in JQM.
I messed around with it and if you remove data-role="listview" from your extra < ul >'s that will solve your problem, however, you will lose your JQM styling and that is not what you're looking for. We all want the slick layout and styling from JQM.
JQM should fix this as I also feel this could be a bug as I haven't found anything in the docs about this.
I've been having nothing but problems with this script for a simple hide/show gallery of testimonials.
I think the java is somewhat self explanatory...
When the page loads, I tell it to show the first testimonial in the line up (as the css is display:none) and gives it a selected class name. Works fine in across the board.
On click I want it to remove the selected class place it to another, and then hide the first testimonial and pull up a corresponding one. Except all that happens here is the first testimonial disappears (hide) and the selected class is added.
<script type="text/javascript">
$(document).ready(function(){
$(".testimonial:first").show();
$("li.testID:first").addClass("selectedName");
$("li.testID").click(function(){
$("li.testID").removeClass("selectedName");
$(this).addClass("selectedName");
$(".testimonial").hide();
$(this).next(".testimonial").fadeIn("slow");
});
});
</script>
Example of markup
<ul id="testName">
<li class="testID">Persons Name</li>
<blockquote class="testimonial">
<span class="bqStart">“</span>
Testimoinal here
<span class="bqEnd">”</span><br /><br />
<span class="testAuthor"><b>Name</b><a target="_blank" href="#">Website</a> Company</span>
</blockquote>
As a side note this is working fine in FF and Safari
Your help is greatly appreciated.
Thanks.
It's probably not working in IE because it's not valid markup: you can't have a blockquote as a direct child of a UL, so IE probably stores them in some weird place in the DOM tree which means .next doesn't find them. Can you move the blockquote elements into the li?
Is .testimonial the class you have given to your lists? <ul> or <ol>
It seems as if you are trying to get the next testimonial list to show, when infact you are actually getting the next <li> which has a class of .testimonial which I suspect is incorrect as you are using .testID as the class for your list items.
Please try this instead:
$(this).parent().next(".testimonial").fadeIn("slow");