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()
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.
I have been trying to build a multi-level vertical tabs with hidden content which gets visible by some jquery. It is working fine but with it has one problem.
Because of this code:
$(this).nextUntil("li.tabsclose").slideToggle();
When page loads for the first time, all the parent categories are shown but if you click on a category with some sub-categories, jquery hides everything until the next item with "tabsclose" class. Which is a problem because I have some Parent categories towards the end of the list.
Here is the jsfiddle: https://jsfiddle.net/ebf6cdpe/
Thank you very much for your help in advance!
SOLUTION:
After spending some considerable time on searching web, I have used if/else statement to be able to close parent tabs on re-click.
https://jsfiddle.net/ebf6cdpe/5/
This particular piece is causing all the Parent categories without subcategories to be hidden:
$('.subtabs').not(this).nextUntil(".subtabs").slideUp();
If you remove that, all the Parents without subcategories won't disappear permanently. However, there is still an issue with them temporarily disappearing when opening the subcategory.
You need to have a class that is applied to all your parents that you can use as a selector in this loop:
$(this).nextUntil("li.tabsclose").slideToggle();
I'm still not 100% sure this is the exact functionality you want, but here is an updated version:
https://jsfiddle.net/ebf6cdpe/1/
Whatever the case, you may be better off using nested lists for your subcategories. https://www.w3.org/wiki/HTML_lists
The page I'm working on is this: http://rafaelviana.com.br/busca_usp/
First, hover on the "test" link on top of the page. No bootstrap tooltip, right? Now press 'a' on the form. A table will appear with relevant results. Hover over the "test" link again. The tooltip appears.
I'm trying to make those tooltips appear on the "Unidade" column's items (these are acronyms for University departments' names). Such tooltips should display the department's full names.
But it appears that no tooltips ever work when I add the data-toggle="tooltip" attribute to dynamically-generated elements. They only work on static elements (such as the odd 'test' link on top of the page).
This persists even when I call bootstrap's tooltip from inside the code that generates the table (which is what's happening, as you noticed the test tooltip won't appear unless you make a search), that is, it persists even though $(function () {$('[data-toggle="tooltip"]').tooltip()}) runs after the elements are added to the DOM.
How can I make it so that tooltips appear on every element that contains the data-toogle attribute, be it dynamic or static?
edit: fixed, per solution in the comments. I think what I was doing wrong was make the call for .tooltip() inside a $function () {} element.
I have 2 Polymer pages sharing one navigation menu structure. Only one menu item links to page two, the others are linking to id's on page one. How would I write the menu links from page two to id's on page one with JavaScript?
(Hashtags in a links are not relative to URLs in custom Polymer elements, and neither same page anchor links like p1 nor url changing links like work therefore.)
This seems to be a general problem with custom elements, and there is not much documentation on how to fix this in the Polymer-project page, therefore.
I have got help with same page id linking, but unfortunately am still really struggling with JavaScript, and have no idea how I would go about referencing a target element on a previous page by DOM methods, and attaching the necessary event-listeners and scroll functions.
This JS Bin from Frankie Fu is showing how to do this with same page links, but I would need to do it with url changing links.
My pages are therapie-jetzt.de/index.html and therapie-jetzt.de/Aktuelles.html (page two). The menu items are all linking to id's on page one, except for "Aktuelles", which points to page two. So what I need to do is point all other menu items in the menu on Aktuelles.html to the corresponding paragraph id's in the first page, index.html.
I guess I would have to start with getting and storing the previous page, say with document.referrer, put it in a variable, and query my id's, and then go on from that? But that wouldn't work, as I can only query nodes in the current dom/window object, right?
The easiest way would probably be to not load a second page at all and just hide the other content away when the menu item Aktuelles is tapped...
Lex
I am working on a pre-existing website, now this website need to work for partially visible people as well. The requirement is the Active Navigation menu Items should be highlighted on each active page.
The problem is that there is no id's for div and Ul/li tags for the navigation menu.
If there were any ID's i could have created a css and called those to selected. Also I can not modify any HTML code of any page.
Could you please suggest any way to make this work out.
Looking forward for your answer.
Regards,
S
The easiest solution may be looping through all <a>s and comparing window.location.href to the value of their href if you're able to modify the Javascript.
Something like this should work for you: http://jsfiddle.net/a7C8a/3/