Wix and screen resolution jacascript

Ask the community
,
1

Hi,

I’m trying to get a custom javascript to work on my website. The script should scale the webpage due to different screen resolutions. I’ve read Wix support pages to find a solution getting this to work with no effort.

I hope someone of you could help me. Here is the code:

function onReady(function(){
let pageTitle = $w(“#page1”).title;
window.utility = function (utility) {
utility.screen = {
rtime: new Date(1, 1, 2000, 12, 0, 0),
timeout: false,
delta: 200
};
utility.getBrowser = function () {
var $b = $.browser;
$.extend(utility.screen, $.browser);
utility.screen.isZoomed = false;
var screen = utility.screen;
screen.zoomf = screen.zoom = 1;
screen.width = window.screen.width;
screen.height = window.screen.height;
if ($b.mozilla) { //FOR MOZILLA
screen.isZoomed = window.matchMedia(‘(max–moz-device-pixel-ratio:0.99), (min–moz-device-pixel-ratio:1.01)’).matches;
} else {
if ($b.chrome) { //FOR CHROME
screen.zoom = (window.outerWidth - 8) / window.innerWidth;
screen.isZoomed = (screen.zoom < .98 || screen.zoom > 1.02)
} else if ($b.msie) { //FOR IE7,IE8,IE9
var _screen = document.frames.screen;
screen.zoom = ((((_screen.deviceXDPI / _screen.systemXDPI) * 100 + 0.9).toFixed()) / 100);
screen.isZoomed = (screen.zoom < .98 || screen.zoom > 1.02);
if (screen.isZoomed) screen.zoomf = screen.zoom;
screen.width = window.screen.width * screen.zoomf;
screen.height = window.screen.height * screen.zoomf;
}
}
return utility.screen;
};
window.onresize = function (e) {
utility.screen.rtime = new Date();
if (utility.screen.timeout === false) {
utility.screen.timeout = true;
setTimeout(window.resizeend, utility.screen.delta);
}
};
window.resizeend = function () {
if (new Date() - utility.screen.rtime < utility.screen.delta) {
setTimeout(window.resizeend, utility.screen.delta);
} else {
utility.screen.timeout = false;
utility.screen = utility.getBrowser();
if (window.onresizeend) window.onresizeend(utility.screen);
if (utility.onResize) utility.onResize(utility.screen);
}
};
window.onresizeend = function (screen) {
if (screen.isZoomed)
$(‘body’).text(‘zoom is not 100%’);
else {
$(‘body’).text(‘zoom is 100% & browser resolution is’ + [screen.width + ‘X’ + screen.height]);
}
};
$(document).ready(function () {
window.onresize();
});
return utility;
}({});

I get only one error and it’s on the first line and it says “ESLint failed to validate this file because an error occurred r.props is undefined.”

Thank you for your help!

2

First of all…

You can use wix-window to inspect various attributes of the site.

And then…

WixCode understands all of Javascript, except for anything that accesses the DOM.

This keeps the user from inadvertently “breaking” something. I myself tried to hack things from the code, from an iFrame, and in my dreams, but WixCode wasn’t having any of it.

Accessing document elements such as div, span, button, etc is off-limits. The way to access elements on the page is only through $w.

One small exception is the $w.HtmlComponent (which is based on an iFrame). This element was designed to contain vanilla HTML and it works just fine. You just can’t try to trick it by using parent, window, top, etc.

Have fun with Wix Code,

Yisrael

3

Did you get this to work in the end?need the same thing

4

Yisreal you have not answered the question. Okay, so you can use wix-window to check window properties. How do you get that logic to fire on window resize if you don’t have access to window.onresize? Or is this yet another use case that Wix can’t handle?