I have a website that has a "list" content block set up with the correct accessibility roles assigned to the parent and children.
However, lists can also be added through the WYSIWYG block.
Therefore I have the below code to ensure these also receive the correct roles.
var lists = document.querySelectorAll("ol, ul");
for (var i = 0; i < lists.length; i++) {
lists[i].setAttribute("role", "list");
}
var lists = document.querySelectorAll("li");
for (var i = 0; i < lists.length; i++) {
lists[i].setAttribute("role", "listitem");
}
What I want to do to make it as efficient as possible is to check that the ordered or unordered lists don't have a role before applying that code however I can't get this working. I am trying the below but with no luck.
if (document.querySelector("ol, ul") && ![role="list"]) {
var lists = document.querySelectorAll("ol, ul");
for (var i = 0; i < lists.length; i++) {
lists[i].setAttribute("role", "list");
}
var lists = document.querySelectorAll("li");
for (var i = 0; i < lists.length; i++) {
lists[i].setAttribute("role", "listitem");
}
}
Can someone explain why this isn't working please?
Related
Is it possible to check the visibility of the particular datatable row?
I found only isColumnVisible and getVisibleCount, but both of them are irrelevant and as far as I can see, there's no such solution for the rows.
How can I do such thing? For instance, after the filtering I can get all data items, but that's all. It's the only idea I've come up with:
onAfterFilter:function(){
var dataId = this.data.pull;
var keys = Object.keys(dataId);
for (var i = 0; i < keys.length; i++){
console.log(this)
}
}
http://webix.com/snippet/c6ecdcd5
Ok it feels like a long way of doing this. And I've not done anything other than just get it to work.
But you will find all of the ids you need in this.data.order so the following code puts all the filtered items into filteredObjs
var dataId = this.data.pull;
var keys = Object.keys(dataId);
var filteredIds = this.data.order;
var filteredObjs = [];
for (var i = 0; i < filteredIds.length; i++) {
for (var j = 0; j < keys.length; j++) {
if (filteredIds[i] === dataId[keys[j]].id) {
filteredObjs.push(dataId[keys[j]]);
}
}
}
console.log(filteredObjs);
Not saying its perfect. But its a start...
For starters you need to change console.log(this) to console.log(keys[i])
As an alternative to the data-based solution made by #ShaunParsons I found that it's possible to check the visibility through the getItemNode function, as the nodes of the invisible items are undefined.
http://webix.com/snippet/4f31a5b5
onAfterFilter:function(){
var dataId = this.data.pull;
var keys = Object.keys(dataId);
for (var j = 0; j < keys.length; j++) {
console.log(this.getItemNode(keys[j]))
}
}
my view:
<........id="S" labelPos="1" labelText=""/>
I want to set the value for labelText dynalically from the controller. i have tried the following but it did not work:
for (var i = 0; i < keys.length; i++) {
var c = labelText[keys[i]].StreetName;
var d = document.getElementsByTagName("S");
d.setAttribute("labelText", c);
}
Please change your document.getElementsByTagName("S");to document.getElementById("S") see if it works.
for (var i = 0; i < keys.length; i++) {
var c = labelText[keys[i]].StreetName;
var d = document.getElementById("S");
d.setAttribute("labelText", c);
}
First query your elements in DOM, querying in loop is not good practice, so:
var elements = document.getElementsByTagName("span");//span is example element
Or:
var elements = document.quertSelectorAll("selector");//your elements by selector
Use it in loop
for (var i = 0; i < elements.length; i++) {
elements[i].setAttribute("labelText", labelText[elements[i].getAttribute("labelPos")].StreetName);
}
I came to the conclusion that Your labelPos attribute is index of labelText array, this would be logical. So in above code I set attrbute from labelText array by labelPos value as key.
Second possibility if DOM elements are in the same order as labelText array:
for (var i = 0; i < elements.length; i++) {
//we take i element in DOM and set it StreetName from i element in labelText array
elements[i].setAttribute("labelText", labelText[i].StreetName);
}
Im trying to append a row to a table. And this is the code that i tried
function load() {
for (var k = 0; k < 1; k++) {
var myTableDiv = document.getElementById("pID");
var tableBody = document.getElementById("tBody");
var table = document.getElementById('pTable');
table.appendChild(tableBody);
for (var i = 0; i < 3; i++) {
var tr = document.getElementById('RiskRow');
tableBody.appendChild(tr);
for (var j = 0; j < 1; j++) {
var element1= document.getElementById('RiskTD');
var element2= document.getElementById('severityTD');
var element3= document.getElementById('mitigationTD');
var element4= document.getElementById('contingencyTD');
var element5= document.getElementById('riskStatusTD');
tr.appendChild(element1);
tr.appendChild(element2);
tr.appendChild(element3);
tr.appendChild(element4);
tr.appendChild(element5);
}
}
myTableDiv.appendChild(table);
}
}
But this results in appending only one row. I need multiple rows to be added that follows the for loop. Im not sure where i stuck up.
Regardless of the redundant loops you have there (var k = 0; k < 1 will always perform once...), the reason you're seeing this behavior is because you're trying to append the same element over and over. This will cause the element to be moved, rather than copied.
Have a look at document.cloneNode
I would like to iterate through a element, removing all disabled elements from the list so that the users are presented only with the items relevant to them. All this is happening in Drupal 7 with the select list being populated from a list of Taxonomy terms. I notice two problems, but first this is my javascript file in a custom theme:
(function($)
{
Drupal.behaviors.mytheme =
{
attach: function(context, settings)
{
var x = document.getElementById("edit-field-diplomatic-mission-und");
for (var j = 0; j < 10; j++) //Force loop
{
for (var i = 0; i < x.length; i++)
{
if (x.options[i].disabled == true)
{
x.remove(i);
}
}
}
}
};
})(jQuery);
The loop does not go through the entire list but breaks at random, around the 21st or 25th option. Thet is why I have a force loop within the code
The disabled elements don't get deleted at all in Drupal
Just as a note, on its own stand-alone format, the same code works OK deleting the elements through the entire list, without the loop:
<script>
$(document).ready(function ()
{
var x = document.getElementById("edit-field-diplomatic-mission-und");
for (var j = 0; j < 10; j++)
{
for (var i = 0; i < x.length; i++)
{
if (x.options[i].disabled == true)
{
x.remove(i);
}
}
}
});
</script>
What am I doing wrong please?
The problem is that you are removing options which affects options collection length (which is live NodeList). You can loop backwards. This is correct code to remove all disabled options:
var x = document.getElementById("edit-field-diplomatic-mission-und");
for (var i = x.options.length - 1; i >= 0; i--) {
if (x.options[i].disabled) {
x.remove(i);
}
}
or
var i = x.options.length;
while (i--) {
if (x.options[i].disabled) {
x.remove(i);
}
}
In general x.length makes no sense because x is a single DOMElement it's not a collection.
Finally since you are using jQuery you should definitely go with it:
$('#edit-field-diplomatic-mission-und option:disabled').remove();
I am a very beginner with Javascript and I want to write a script that modifies the style of (some) tables, at the end of the parsing of an html page.
I have a (hopefully) MWE of such script:
<script type="application/javascript">
<!--
var Ri = document.getElementsByTagName("tr");
var Ca = document.getElementsByTagName("td");
var nRi = Ri.length;
var nCa = Ca.length;
var nCo = nCa/nRi;
for (var i = 0; i < nCo; i++)
{
Ca[i].style.backgroundColor="rgb(221,247,255)";
}
for (var i = nCo; i < nCa; i = i+nCo)
{
Ca[i].style.backgroundColor="rgb(221,247,255)";
}
//-->
</script>
but, as you can easily verify, it would work correctly only if there's a single table in the html page.
The question is the following. Let us say there are m tables with the attribute class="tabx" in the html page. How can I edit the script so that it counts the m tables with the attribute class="tabx" in the page and, say for j=1,...,m, performs the loops
for (var i = 0; i < nCo; i++)
{
Ca[i].style.backgroundColor="rgb(221,247,255)";
}
for (var i = nCo; i < nCa; i = i+nCo)
{
Ca[i].style.backgroundColor="rgb(221,247,255)";
}
on each of such tables?
Thanks, I couldn't find this in particular on this network with keywords search, and not even in documentation in italian that's plentyful as well...and I know it would take 2 seconds using CSS instead...
Here is how you do it.
var t1 = document.getElementsByClassName("tabx");
for(index = 0; index < t1.length; ++index)
{
var Ri = t1[index].getElementsByTagName("tr");
var Ca = t1[index].getElementsByTagName("td");
var nRi = Ri.length;
var nCa = Ca.length;
var nCo = nCa / nRi;
for (var i = 0; i < nCo; i++) {
Ca[i].style.backgroundColor = "rgb(221,247,255)";
}
for (var i = nCo; i < nCa; i = i + nCo) {
Ca[i].style.backgroundColor = "rgb(221,247,255)";
}
}
http://jsfiddle.net/a5F9b/1/
hope that help.