In Outlook web access OWA, the following selector is intended to select all aria descendants of an element ID, but only the first one gets 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 asked on freecodecamp
Solved! This method doesn’t require iteration, and doesn’t generate a mountain of style tags. It just creates and keeps rewriting the same temporary style tag. Performance seems very fast, with no lags in the slider.
This depends on global vars, so if page state breaks then the slider won’t work. I don’t know if that’s an issue with Javascript.
Mozilla recommends transform:scale instead of zoom, but a weird problem with transform:scale. Seems to cause divs to slide toward left side of window. Maybe just a codepen issue?
Here’s 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", "<input type='range' min='50' max='200' id='slidZoom' value='100' step='1'>"
); /* // slider for transform: scale
$$("#TopBar").insertAdjacentHTML( "beforeend", "<input type='range' min='0.5' max='2' id='slidZoom' value='1' step='0.1'>"
);
*/ // 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 seem to be a css question 
It looks to me as though you were trying to select a group of elements in JS but you would need to iterate through all the elements that matched (Js doesn’t work the same as css).
Also note that zoom does not work in Firefox and transform would not keep the element in the flow. If you were just enlarging the letter/text then I guess just changing font-size would suffice.
Hopefully one of the JS gurus will look in here and advise of the best way to do this
You wouldn’t “need” to iterate. Iteration is one solution. My solution is a different, and i believe superior solution.
Generally, i avoid iteration. I believe it’s a performance hog, and ties up the processor. We’re styling multiple elements while dragging a slider. If we’re styling multiple elements, then of course iteration has to happen someplace. Why not let the highly-optimized browser rendering engine handle the iteration, instead of my Javascript? That’s why I believe straight CSS is going to give better performance for this requirement. Also, loooops are more verbose. My solution is a single line of code while dragging the slider.
Certainly there’s nothing “wrong” with setting CSS with JS, although in my experience some JS purists are hostile to CSS.
I want to resize all the content, not just fonts.
I’m aware of that. For my personal usage, zoom works fine on Chrome. For general usage, Mozilla recommends transform:scale.
…as i described in my solution. Would be great if someone here can solve the problem with transform:scale.
Update: i’m trying these solutions:
Yes I was really referring to your first question and not your later solution:)
I believe that originally you were using js to find those elements and that would require you to iterate through them. Your later solution instead updates the css which of course does not need to iterate.
Ok good
Yes I mentioned that transform and zoom do different things. When you zoom the element remains in the flow of the document. That means anything not zoomed will move out of the way and not get overlapped.
Transform on the other hand does not alter the flow of the document and therefore will overlap other elements that happen to be in the way (unless you are zooming everything but your demo doesn’t show that to be the case).
To stop it moving you just need to set the transform origin to left ( transform-origin: left; or transform-origin: 0 0; which wil kepp the top position also) but of course does not solve the problem of overlapping if anything is in the way. Here’s a codepen (css only) that shows both zoom and transform in action to illustrate my points.
Ah ok
Here’s a fix for the scale positioning issue
transform: scale(4); transform-origin: left center;
}
But subsequent elements don’t move down as desired. They overlap. How to fix that?
Maybe i could create a pseudoelement after the resized elements to push subsequent element, but wotta hack! Firefox, please support zoom!
Yes I mentioned transform-origin a couple of times already
You’d need to account for the change in size and compensate in some way. I see that in the post you linked to from SO above someone has already written a js routine to do similar using height but it looks very fragile to me.
I don’t see an easy solution I’m afraid.
Fortunately for me, i use Chrome. But that won’t help Firefox users.
Imo, Firefox should support zoom. I think it’s not appropriate for them to recommend transform:scale – it’s a different functionality.
Cheers!
Techyrack Website stock market day trading and youtube monetization and adsense Approval
Adsense Arbitrage website traffic Get Adsense Approval Google Adsense Earnings Traffic Arbitrage YouTube Monetization YouTube Monetization, Watchtime and Subscribers Ready Monetized Autoblog
from Web Development – My Blog https://www.techyrack.com/syndication/2022/10/13/cant-select-multiple-aria-descendants-javascript-sitepoint/
via IFTTT
No comments:
Post a Comment