Mobile editor page code - red dots

Ask the community
,
1

In the mobile editor the page code shows some errors (red dots) for items that are hidden in mobile view. So, I’ve wrapped the references to those items with the following:

if (wixWindow.formFactor !== "Mobile") {
    // red dot items here
}

However, the red dot editor errors persist. Is this ok - do I just ignore the errors then? (And if it is ok then it might be a good feature request to update the editor to not read elements of the code which don’t apply to mobile view?)

Final question, is the above wrapper ok, or should it be like this if (wixWindow.formFactor === “Desktop”) {}?

2 
if(wixWindow.formFactor === "Mobile"){
// code that will only run on mobile
}

wix-window-frontend - Velo API Reference - Wix.com
Velo Tutorial: Displaying Elements in Mobile Only | Help Center | Wix.com
Velo: Writing Code That Only Runs on Mobile Devices | Help Center | Wix.com

3

@givemeawhisky thanks for taking the time to reply, but that doesn’t answer my question…

4

@aquacruise

Yes it does as the Wix Window API form factor function and the two articles about showing on mobile only explains to you clearly how to display items on a certain device only. You can swap mobile for desktop or tablet.

However, as you are just wanting to hide on mobile view then you don’t need to do code for that as you can simply hide it in the mobile editor.
https://support.wix.com/en/article/hidden-elements-in-the-mobile-editor-8434840

If you must insist on doing it in code then you can simply do it like this.

import wixWindow from 'wix-window';

$w.onReady(function () {
if(wixWindow.formFactor === "Mobile"){
$w("#yourelement1").hide();
$w("#yourelement2").hide();
$w("#yourelement3").hide();
}
});

Note that this code will not work in preview mode, for it to be tested fully, it needs to be viewed on a live published site.

See here for testing notes.
Velo: Writing Code That Only Runs on Mobile Devices | Help Center | Wix.com

Plus, don’t forget to add it to your site tab and not your page tab so that it is applied across your site and not just on the one page only.

5

The code will run if you wrap your code correctly in the Mobile condition. However, you will still get errors from the linter that you can safely ignore.

6

@givemeawhisky I had already read the API and all the articles, and I did already understand all of this that you have written above. My question clue was in the title and with respect you still haven’t answered it, but my question was obviously not clear (my apologies). I do not need to hide items in code, and I understand how to do it in the editor, so let me rephrase my question from the beginning for clarity:-

  1. I have created the desktop version of a new website. This site has lots of code (some pages are over 1000 lines of existing JS code…)

  2. I’ve now come to create the mobile version. I have hidden lots of items in the mobile editor.

  3. Now in the mobile code editor there are lots and lots of errors (red dots on the left hand side). This is because I have hidden items (as per 2 above) but the code still references them.

  4. I have gone through my existing code and put (if-not-mobile) wrappers around ever single item that I hid in 2 above as follows:

if (wixWindow.formFactor !== "Mobile") {
    // items here that I have hidden in the editor will now not be referenced in the mobile view of the site
}

  1. However, the red dot errors still persist in the editor after doing this. MY QUESTION IS - is this still ok that there are still these red dot errors in the editor? Even though the live mobile view of the site should never get to that code, since the if wrappers prevent that.

  2. And I had a follow question in my original post - if 5 above is ok, then should it be a feature request for the editor to ignore putting red dots on referenced hidden items in the mobile code editor if they are wrapped as 4? I say that because, if you have 1000 lines of code and around 100 red dots, it makes it really makes it very very very difficult to spot genuine errors…

I hope this is clear.

Thanks.

7

Thank you David, that DOES answer my question! It would be a good feature for the editor to be aware of this (IMO) and not show the errors, since as I have just written in my reply above, in a page with a 1000 lines of code, the resulting 100 or so red dots make it very difficult to see genuine errors… Anyway, just a thought for future development.

8

@aquacruise Agreed, though I’ve yet to find a linter that didn’t annoy me in some way. At least this one doesn’t take a Draconian approach to silly style rules :slight_smile: