Can’t select multiple aria descendants – JavaScript – SitePoint Forums

0

In Outlook Web Access OWA, the next selector is intended to select all aria descendants of an item ID, but only the first one is selected. What am I doing wrong?

#ReadingPaneContainerId [aria-label="Message body"]

I want to select all message bodies in the reading pane, in a conversation.

THX!

also requested on freecodecamp


Solved! This method does not require iteration and does not generate a mountain of style tags. It just creates and rewrites the same temporary style tag. Performance seems very fast, with no lag in the slider.

It depends on global variables, so if the page state breaks, the cursor won’t work. I don’t know if it’s a problem with JavaScript.

Mozilla recommends transform:scale instead of zoom, but a weird problem with transform:scale. Seems to drag the divs to the left side of the window. Maybe just a codepen issue?

Here is the working solution, using zoom.

// reusable function to return node by selector
var $$ = function (sel) {
  return document.querySelector(sel);
};

// create slider

// slider for zoom
$$("#TopBar").insertAdjacentHTML(
  "beforeend",
  ""
);

/* 
// slider for transform: scale
$$("#TopBar").insertAdjacentHTML(
  "beforeend",
  ""
);
*/

// add temp style tag to hold the zoom css
var styleTag = document.createElement("style");
document.head.appendChild(styleTag);

// define selector for Outlook reading pane
var selector = "#ReadingPaneContainerId [aria-label="Message body"]";

// define slider event
$$("#slidZoom").addEventListener("input", function () {

  // change css in temp style tag
  
  // works, using zoom
  styleTag.innerHTML = selector + " {zoom: " + $$("#slidZoom").value + "%}";
  
  // transform:scale causes divs to slide toward left side of window
  // styleTag.innerHTML = selector + " {transform: scale(" + $$("#slidZoom").value + ")}";
});

I’ll move this to the JS forum as it doesn’t appear to be a CSS question

It seems to me that you are trying to select a group of elements in JS, but you would need to loop through all the matching elements (Js doesn’t work the same as css).

Also note that Zoom doesn’t work in Firefox and the transform wouldn’t keep the element in the stream. If you were just making the letter/text bigger, I guess changing the font size would be enough.

I hope one of the JS gurus will look here and advise on the best way to do this :slight_smile:

You wouldn’t “need” to iterate. Iteration is a solution. My solution is different, and I believe the solution is superior.

Generally, I avoid iterations. I believe it’s a performance hog, and ties up the processor. We style multiple elements while dragging a slider. If we’re styling multiple elements, then of course the iteration has to happen somewhere. Why not let the browser’s highly optimized rendering engine handle the iteration, instead of my JavaScript? That’s why I think the right CSS will provide better performance for this requirement. Also, loooops are more verbose. My solution is a single line of code while dragging the cursor.

There is certainly nothing “wrong” with defining CSS with JS, although in my experience some JS purists are hostile to CSS.

i want to resize everything the content, not just the fonts.

I am aware of that. For my personal use, zoom works well on Chrome. For general use, Mozilla recommends transform:scale.

…as I described in my solution. It would be great if someone here could solve the problem with transform:scale.

Update: I try these solutions:

Yes, I was really referring to your first question and not your later solution 🙂

I believe originally you were using js to find these elements and it would require you to loop through them. Your later solution updates the css instead which of course doesn’t need to iterate.

OK fine :slight_smile:

Yes, I mentioned that transform and zoom do different things. When you zoom, the element stays in the document flow. This means that anything that hasn’t been zoomed in will spread out and not overlap.

The transform, on the other hand, doesn’t change the flow of the document and will therefore overlap other elements that are in the way (unless you zoom in on everything, but your demo doesn’t show that is the case ).

To stop it, you just need to set the origin of the transformation to the left ( transform-origin: left; Where transform-origin: 0 0; which will also keep the first position) but of course does not solve the problem of overlapping if something gets in the way. Here is a codepen (css only) that shows both zoom and transform in action to illustrate my point.

Ah OK :slight_smile:



1 like

Here is a fix for the scale positioning problem

  transform: scale(4);
  transform-origin: left center;
}

But the following items do not descend as desired. They overlap. How to solve this problem ?

image

Maybe I could create a pseudo-element after the resized elements to push the next element, but wotta hack! Firefox, please support zoom!

Yes, I have already mentioned transform-origin several times :slight_smile:

You would need to account for the change in size and compensate somehow. I see that in the post you linked from SO above, someone has already written a js routine to do the same thing using height, but that seems very flimsy to me.

I don’t see an easy solution, I’m afraid.:frowning:



1 like

Luckily for me, I use Chrome. But that won’t help Firefox users.

Imo, Firefox should support zoom. I think it is not appropriate for them to recommend transform:scale – it’s a different functionality.

Cheers!

You are right. They do different things. It seems to have been a bone of contention for about 15 years now.



1 like

If you agree that Firefox should support zoomput your comment here:

and here

Share.

Comments are closed.