I have a submenu that I would like to have keyboard focus when I tab through it.
When you hover over the 'Design' item in the nav menu below a submenu appears, but how do I get the submenu to appear when I tab through the items using the keyboard tab key? The 'Design' list item doesn't seem to accept focus?
From what I understand this is done with focus:within pseudo class, but I can't get it to work?
Any assistance would be awesome.
CodePen: https://codepen.io/emilychews/pen/jOPRoqg
li {
margin: 1rem 0;
}
.design-submenu {
visibility: hidden;
opacity: 0;
}
.menu-item-2:hover .design-submenu,
.menu-item-2:focus-within > .design-submenu
{
visibility: visible;
opacity: 1;
}
<nav class="n">
<ul class="nav-menu-items">
<li class="menu-item menu-item-1">Latest</li>
<li class="menu-item menu-item-2">Design
<ul class="submenu design-submenu">
<li class="submenu-item">Illustration</li>
<li class="submenu-item">Graphic Design</li>
</ul>
</li>
<li class="menu-item menu-item-3">Development</li>
<li class="menu-item menu-item-4">Marketing</li>
</ul>
</nav>
For menu items to receive keyboard focus the tabindex attribute must
be set of the element if it is not a form control or link element. https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus
Add tabindex="0" to "Design" item ==> Done :)
The tabindex global attribute indicates that its element can be
focused, and where it participates in sequential keyboard navigation
(usually with the Tab key, hence the name). https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
li {
margin: 1rem 0;
}
.design-submenu {
visibility: hidden;
opacity: 0;
}
.menu-item-2:hover .design-submenu,
.menu-item-2:focus-within > .design-submenu
{
visibility: visible;
opacity: 1;
}
<nav class="n">
<ul class="nav-menu-items">
<li class="menu-item menu-item-1">Latest</li>
<li class="menu-item menu-item-2"><span tabindex="0">Design</span>
<ul class="submenu design-submenu">
<li class="submenu-item">Illustration</li>
<li class="submenu-item">Graphic Design</li>
</ul>
</li>
<li class="menu-item menu-item-3">Development</li>
<li class="menu-item menu-item-4">Marketing</li>
</ul>
</nav>
focus:within not related specifically to Keyboard control accessibility (This is CSS pseudo-class). https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
ARIA menu:
https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus
Related
I have an Owl Carousel inside a tabpanel like this:
<div role="tabpanel" class="tab-pane fade" id="tabAcessorios">
<div id="acessoriosCompativeis8x" class="featured-carousel brand-dot">
//itens here
</div>
</div>
When i click the link to display the tab, the carousel is broken:
I tried to trigger the refresh like this:
$("#acessoriosCompativeis8x").trigger("refresh.owl.carousel");
But it didn't work. What am i missing here?
Here's the nav definition:
<ul class="nav nav-tabs nav-stacked" role="tablist">
<li role="presentation" class="active">FOCO/PRÉ-PAGO</li>
<li role="presentation">INDIVIDUAL</li>
<li role="presentation">FAMÍLIA</li>
<li role="presentation">CONTROLE</li>
#if (Model.AcessoriosCompativeis != null)
{
<li role="presentation">Acessórios Compatíveis</li>
}
</ul>
And here's the carousel definition:
$('#acessoriosCompativeis8x').owlCarousel({
items: 2,
lazyLoad: true,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 5000
});
I managed to solve the issue by destroying and re-creating the carousel when the panel appears:
$('#linkAcessorios').on('shown.bs.tab', function (e) {
var owl = $('#owl-example').owlCarousel(opcoes);
owl.trigger('destroy.owl.carousel');
owl.html(owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');
owl.owlCarousel(options);
});
I've got a few jQuery UI sortable lists and would like to move the items from one list to another. Except one blocked list: this should be able to receive items from other lists but the items inside this list shouldn't even react to attempts to be moved. Is this possible? How? I tried to use .sortable("cancel") in the start event but this seems not to work...
Please see here, the second list should be the "blocked" one: http://jsfiddle.net/r1rffht7/
$(function() {
$( ".sortable_list" ).sortable({
connectWith: ".connectedSortable",
}).disableSelection();
});
You can update your JQuery-UI sortable function by using the cancel selector like so (or see this Updated Fiddle:
Note: make sure to include your sortable_list class in the blocked_list div.
$(function() {
$(".sortable_list").sortable({
connectWith: ".connectedSortable",
cancel: ".blockedList"
}).disableSelection();
});
.blockedList {
border: 1px solid #f00 !important;
}
.sortable_list,
.blockedList {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
.sortable_list li,
.sortable_list .li,
.blockedList li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<h3>Conected lists : You can move items between any list</h3>
<ul id="sortable1" class="sortable_list connectedSortable">
<li class="ui-state-default">List 1 - Item 1</li>
<li class="ui-state-default">List 1 - Item 2</li>
<li class="ui-state-default">List 1 - Item 3</li>
<li class="ui-state-default">List 1 - Item 4</li>
<li class="ui-state-default">List 1 - Item 5</li>
</ul>
<ul id="sortable2" class="sortable_list blockedList connectedSortable">
<li class="ui-state-highlight">List 2 - Item 1</li>
<li class="ui-state-highlight">List 2 - Item 2</li>
<li class="ui-state-highlight">List 2 - Item 3</li>
<li class="ui-state-highlight">List 2 - Item 4</li>
<li class="ui-state-highlight">List 2 - Item 5</li>
</ul>
<ul id="sortable3" class="sortable_list connectedSortable">
<li class="ui-state-default">List 3 - Item 1</li>
<li class="ui-state-default">List 3 - Item 2</li>
<li class="ui-state-default">List 3 - Item 3</li>
<li class="ui-state-default">List 3 - Item 4</li>
<li class="ui-state-default">List 3 - Item 5</li>
</ul>
<ul id="sortable4" class="sortable_list connectedSortable">
<li class="ui-state-highlight">List 4 - Item 1</li>
<li class="ui-state-highlight">List 4 - Item 2</li>
<li class="ui-state-highlight">List 4 - Item 3</li>
<li class="ui-state-highlight">List 4 - Item 4</li>
<li class="ui-state-highlight">List 4 - Item 5</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
I'm stuck trying to change the color of my expandable list after it's expanded. It only works for the default color "red" and after I expand it, it changes to grey instead of yellow like it should. Also, how would I change each list to a different color? For example A can be red, B can be Green, etc. Finally, I is there any way to change the count bubble color and its text color? Here is my code.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<style>
.ui-collapsible-heading-collapsed > .ui-collapsible-heading-toggle{
background:red;
}
.ui-collapsible-heading-toggle{
background:yellow;
}
</style>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Theming Collapsible Lists</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible" >
<h4>A <span class="ui-li-count" id="red_count">0</span></h4>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div data-role="collapsible" >
<h4>B<span class="ui-li-count" id="green_count">0</span></h4>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
</body>
</html>
You can add some CSS classes to the markup as needed and then set the color rules. For example, to get different colors for different collapsibles, give each collapsible its own class (acol, bcol in my example). Then you can also assign classes to the count bubbles (redCount, greenCount in my example)
<div data-role="collapsible" class="acol">
<h4>A <span class="ui-li-count redCount" id="red_count">0</span></h4>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div data-role="collapsible" class="bcol">
<h4>B<span class="ui-li-count greenCount" id="green_count">0</span></h4>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
Then the CSS rules:
.acol .ui-collapsible-heading-collapsed > .ui-collapsible-heading-toggle {
background:red !important;
}
.acol .ui-collapsible-heading-toggle {
background:yellow !important;
}
.bcol .ui-collapsible-heading-collapsed > .ui-collapsible-heading-toggle {
background:green !important;
}
.bcol .ui-collapsible-heading-toggle {
background:orange !important;
}
.redCount {
color: red;
background-color: #333;
text-shadow: none;
}
.greenCount {
color: green;
background-color: #333;
text-shadow: none;
}
Here is a DEMO
NOTE: obviously you should tweak the colors to actually make it look good ;)
I want to show my data like this https://dl.dropboxusercontent.com/u/12173475/sample.png ,
a bit like controlgroup, but controlgroup not seem to merge two labels,
how can I do?
This is my code (temporarily), but I hope there is a line between those(like controlgroup).
<ul data-role="listview" data-inset="true">
<li>
<div>name</div>
<div class="ui-li-aside">name1</div>
</li>
</ul>
You can do it by modifying CSS.
HTML
<ul class='my_list' data-role="listview" data-inset="true">
<li>
<div>name</div>
<div class="ui-li-aside">name1</div>
</li>
</ul>
CSS
.my_list li{
padding:0px !important;
}
.my_list li div{
padding:10px;
}
.my_list li div:nth-child(2){
width:10%;
border-right:1px solid #ccc;
}
.my_list li .ui-li-aside{
margin:0px;
}
here is Demo Fiddle
My question is similar, but different from jquery-hover-menu-when-hovering-over-child-menu-disappears.
I originally had the hover event on the li.item, which was a little quirky, but did what i needed it to do. I switched the hover to the span so that the event would fire on the text block, rather than the list block, which expands the full width of the list.
The effect I'm trying to achieve is when hovering over ul.sub. I'd like it to continue with the animation in queue from span.text's hover, which is displaying it, but also keep it open.
What is happening is that the mouse is leaving the span, so the li.item is firing its mouseout portion of the trigger.
jsFiddle Page
HTML
<ul id="main">
<li class="head">Title Bar</li>
<li class="item odd">
<span class="text">A</span>
<ul class="sub">
<li>1</li>
<li>2</li>
</ul>
</li>
<li class="item even">
<span class="text">B</span>
<ul class="sub">
<li>3</li>
<li>4</li>
</ul>
</li>
<li class="item odd">
<span class="text">C</span>
<ul class="sub">
<li>5</li>
<li>6</li>
</ul>
</li>
<li class="item even">
<span class="text">D</span>
<ul class="sub">
<li>7</li>
<li>8</li>
</ul>
</li>
</ul>
CSS
/* colors used are not for production; they are
used only to enhance the example's visual distinction */
#main{width:10em;}
.head,.item{border:1px solid black;padding:.5em;}
.head{font-weight:bold; background:#336; color:#fff; cursor:pointer;}
.item{background:#f90;}
.sub{display:none;}
.sub li{padding-left:1em;}
.text,.sub{cursor:pointer;}
JavaScript
$(document).ready(function(){
// specific here because of other divs/list items
$('#main li.item span.text').hover(function(){
$(this).siblings().stop(true,true).toggle('slow');
});
$('li.head').hover(function(){
$(this).parent().find('ul.sub').stop(true,true).toggle('slow');
});
});
Edit:
I think something along these lines is what I need, however the animation is refired when going from the sub to the span.
$(document).ready(function(){
// specific here because of other divs/list items
$('#main li.item span.text').hover(
function(){$(this).siblings().stop(false,true).show('slow');}
,function(){$(this).siblings().stop(true,true).hide('slow');}
);
$('#main li.item ul.sub').hover(
function(){$(this).stop(false,true).show();}
,function(){$(this).stop(false,true).hide('slow');}
);
$('li.head').hover(function(){
$(this).parent().find('ul.sub').stop(true,true).toggle('slow');
});
});
Split the hover behavior into its two constituents, mouseenter and mouseleave. Also split toggle() into show() and hide(). Bind mouseenter to the span.text and mouseleave to the li.item:
$(document).ready(function() {
// specific here because of other divs/list items
$('#main li.item span.text').mouseenter(function() {
$(this).siblings().stop(true, true).show('slow');
});
$('#main li.item').mouseleave(function() {
$(this).children("ul").stop(true, true).hide('slow');
});
$('li.head').hover(function() {
$(this).parent().find('ul.sub').stop(true, true).toggle('slow');
});
});
That way, the hover is not triggered by whitespace, which is what you want.