I have a tab panel.
It can add tabs dynamically by clicking the add tab button.
A typical use case scenario will be this:
I have multiple tabs open Tab-1, Tab2, Tab-3, and Tab-4 in the panel
and remove some of them Tab-2 and Tab-3 from the panel by closing the tabs.
This will leave Tab-1 and Tab-4 in the panel.
Now, if i try to add new tabs, order in which the tabs are is Tab-1, Tab-4, Tab-2, Tab-3.
I want to sort the panel in jquery and make it Tab-1, Tab-2, Tab-3, and Tab-4
Please Help!!
AFAIK jQuery UI doesn't provide this natively.
The order of the tabs is defined by their order in the DOM.
Get a plugin that can sort any dom element and use it to sort the tab divs (or LI, or whatever type of element is necessary).
Some quick examples I found are
http://tinysort.sjeiti.com/
http://james.padolsey.com/javascript/sorting-elements-with-jquery/
and of course: https://www.google.com/search?q=jquery+sort+elements
Related
I have a webpage and I have managed to keep few accordions in it as well. Since I have given "role"="button" on accordions, my accordions are read as 'button' during accessibility testing.
What should be the aria-parameter values if I wanted my accordions to be read as accordions itself, not buttons?
Can someone give an insight on it? Also, it would be great if anyone can share the accessibility testing standards.
To the average user, a button is a thing you activate to make something happen while an accordion is a musical instrument. The roles you have already are fine.
There is no aria role to describe something as an accordion.
The latest W3C
WAI-ARIA Authoring Practices note includes a section about accordions which uses buttons which is accompanied by a complete example.
My suggestion is:
Use dl element with role="presentation" attribute.
Use dt element with role="heading" for headings of accordion.
Put button inside dt or heading so it will be implicitly focusable with tab order
give button `aria-expanded' attribute and set it to true when accordion panel is expanded otherwise set to false.
Put data in dd element
Here you can find more information with example in w3c
I've seen examples where the tablist role is used for an accordion widget -- which seems very reasonable (https://www.w3.org/TR/wai-aria-1.1/#tablist).
Anyway, WAI does not do that in https://www.w3.org/TR/wai-aria-practices-1.1/#accordion. Instead they demand that the controls to show/hide the panels are buttons (ideally with <button>s and without explicit roles) and that their interaction with the panels is described with aria-expanded, aria-controls and (depending on implementation) aria-disabled. The panel might be a region if you deem the content important enough. Finally, don't forget to make the accordion accessible by keyboard.
The situation:
I work on a web application which consists of a map and a a sidebar. Within the sidebar an accordion is given with 20 panels. When the user selects a point on the map, the relevant accordion panel is opened.
The problem:
When the user selects a point, not only the panel should be opened, but it should scroll to the activated panel.
What I already tried:
I have been searching for a solution for hours, but either the proposed solutions work with jQuery (which I can't use) or different scroll options that are based on the ID of an html element like document.getElementById('id').scrollIntoView(); which I can't use, because the panels are div elements with a class and not an id attribute. I tried to use the scrollIntoView() option for document.getElementsByClassName() but it didn't work.
The code:
I work on html, css and JavaScript code, I don't use jQuery. My implemented accordion is within a div with a id ("description"), the accordion itself consists of the header <button class="accordion"> and the panels <div class="accordion-panel">
The question:
Any idea how I can scroll to a specific div element (from 20 div elements that all belong to the same class, but can be addressed by their certain ID/number (not the html id attribute))?
I assume you have a class which states which accordion-panel is active. If that's true, this solution should work. Otherwise, post some of the HTML you have.
To get the desired element, you should use getElementsByClassName, which accepts multiple classes:
document.getElementsByClassName('accordion-panel active')
If you are sure there is only one of those elements, you should be able to do the following:
document.getElementsByClassName('accordion-panel active')[0].scrollIntoView()
I am using this template
You can scroll down to WORK section which is the portfolio section filterable.
The already selected option is "ALL" and that shows all the items. I want to get rid of it and make one of the other tabs active.
I tried removing the tab and add class 'selected' to one of the other tabs which make it look active but it's still showing 'ALL' items and not just the active tab unless I click on any other tab and select it back.
I'm not too good with java script so an easy instructions will be really appreciated. Thank you so much.
Just trigger the click event too while you make any tabs active like one below:
$('[data-option-value=".web"]').trigger('click');
Run the above code in console of the link given by you and you can see the changes. You can choose any of the tab to be active.
I have a easyui Tab with 4 tabs.
Depending on response from server I may have to hide/show some tabs.
I tried the approach of removing the tabs at first and adding them later.But the problem is as the tabs are removed so as the DOM objects.So am not able to add the $("#") object later.
So better options is to hide/show the tabs .Is that possible in easyui tabs?
just close the tabs that you don't want to show
$('#mytabs').tabs('close','titletab');
The jQuery sample jQuery UI Tab manipulation show's an example of how to make all tabs of a control closeable. But is there any way to make only some tabs closeable and let some stay uncloseable?
Yes, from the code sample you found, you just have to adapt it to use a different tabTemplate for uncloseable tabs (simply remove the close icon)