Dear Fellow Xara folk,
As you may be aware, the inner workings of a rendered Xara web page that is configured so as to 'Scale to fit width' render with the following top level <div> (key attribute highlighted) ...
<div id="xr_xr" class="xr_noc" style="width: 1921px; height: 1267px; position: relative; text-align: left; margin: 0px auto; z-index: 2; zoom: 0.296875;" onmousedown="xr_mm(event);">
I am trying to use pure JavaScript to act on the value of the
... zoom: 0.296875...
... portion on my case.
But, no matter what I try - and have been trying for the best part of two days - I cannot read the actual value of that style attribute.
Yes, I see easily 'see' it in a browser Inspector such as Chrome's and Firefox's using...
alert(window.getComputedStyle(document.getElementById('xr_xr')).getPropertyValue("zoom"));
...but the value of ...
getPropertyValue("zoom")
... is simply not available when the JavaScript is running inline - i.e. when I include it in the Xara document's <head>.
Can someone PLEASE give me some expert guidance here.
Maybe I'm going about this the wrong way?
What I want actually achieve is to have some way, (any way) of getting a relative value for the scaling that is being applied in any given viewport size.
That's all I need, just a single variable that I can query to find out how much the document is scaled up or down by.
Just clarify the broader picture here, the reason why I want to do this is so that I can use the embedded JavaScript to react to viewport size (media queries I guess) and show/hide elements on the page according.
Any offers from folk with better JS skills than I out there?
Thank you!
Nick