Hidden Elements on Mobile

Ask the community
,
1

Just now I have received this email from Wix Support:

Investigating this issue we found that in your mobile view some of the elements are hidden and therefore they can’t be accessed by your code causing the console errors, this can be solved by adding these 2 lines of code that will return the state of the Viewer Form:

Reference: https://www.wix.com/code/reference/wix-window.html#formFactor

import wixWindow from ‘wix-window’;
let formFactor = wixWindow.formFactor; // “Mobile”

Then you can wrap your code to only run if the result of “formFactor” is “Desktop”.

========================
I’m a total noob in coding and totally at loss on what I should do. Let’s say I have this code running on one of my page and this element actually hidden on mobile:

export function ShareContainer_onMouseOut(event) {
$w(“#ShareContainer”).hide();
//Add your code for this event here:
}

2

Hi Summit -
we will gladly try to help.

may I ask you to summarize the issues you’re having?
please start from the beginning - what are you trying to implement, and which console errors do you get?

thanks!

3

Hi Ziv,

Okay let me start from the beginning. Two weeks ago my editor started to act crazy. It didn’t want to save and publish on desktop view, can’t cut and paste more than one element, and further down the road the whole editor crashing frequently. It happened after Wix Code has been turned on for my account. Story short, they just fix it yesterday and it goes back to normal. But they give that message, which is a headache.

FIRST PROBLEM

What I’m trying to implement here is I pin a love shape button on my screen, it will show up at viewport leave from the header, when I click the love button it will show social sharing icons to Facebook, Twitter, and G+, when my mouse move out from a certain range (using container box) the social sharing icons goes hidden again. As I make it show in all pages so the code is in the Site Console section. Here is the code:


export function Header_onViewportLeave(event) {
	$w("#LoveIcon").show("FadeIn");
	//Add your code for this event here: 
}

export function LoveIcon_onClick(event) {
	$w("#SocialShareContainer").show("FadeIn");
	//Add your code for this event here: 
}

export function SocialShareContainer_onMouseOut(event) {
	$w("#SocialShareContainer").hide();
	//Add your code for this event here: 
}

Now the problem is all of this thing is hidden in mobile view and it produces a console error. Thus the Wix Support team said so. Right now I don’t know how to solve the error as per the steps they give, which is:

Adding these 2 lines of code that will return the state of the Viewer Form:
Reference: https://www.wix.com/code/reference/wix-window.html#formFactor
import wixWindow from 'wix-window';
let formFactor = wixWindow.formFactor; // "Mobile"
Then you can wrap your code to only run if the result of "formFactor" is "Desktop".

If it is possible so I can learn from this problem, please explain a bit: Why is that code matter? What will it do? How will it affect the whole site? Will it differentiate between the code that will be processed in Mobile vs Desktop?

SECOND PROBLEM

1920×960 124 KB

As you can see from the attached screenshots, there is one page on my site that has this “Code Not Loaded” error. Yesterday when I open that page and took the screenshots, it freeze my editor and unable to save, so I have to reload the editor.

THIRD PROBLEM

This is just a question on animation. Is it possible to give properties to the animation effect. Let’s say like “Float In” from bottom with 2 speed and 1 delay. If it is possible, how should the code be?

Sorry if there is so many questions. I have so many others, because I’m just so new to coding. Right now I’m settled doing this interaction coding, as making form feels like a very hard thing to do.

4

Hi Sam,

I actually don’t really know the problem. The one that said there is a problem in my code was the Wix Support. But I know what they are talking about because when I preview the mobile view I always get an error. This error:

TypeError: $w(...).hide is not a function

Afterwards when I go back to edit mode my editor freeze and I have to reload the editor. So that is definitely the coding that makes my editor error.

5

Basically what I need to know is: How to wrap a code to only work on desktop view, never on mobile view? Perhaps that’s a simple thing for any code expert, but I don’t know how to do it.

6

Hi Summit,
thanks for a very detailed explanation.
way to go on venturing into code for the first time - keep it up!

well, it seems like you have definitely stumbled upon one or two defects we may have in the system.
I will ask our QA to try and reproduce the issues and get back to you.

I’ll also provide some guidance on how to have code run only on mobile or desktop.
thanks!

7

OK, we’re investigating the issues.
in the meantime, here’s a short code snippet to check if you run or mobile or desktop:

import wixWindow from 'wix-window'; 
 
let formFactor = wixWindow.formFactor; // can be either "Mobile" or "Desktop"

if (formFactor === "Mobile")
{
 //do some mobile only code
}
else
{
 //do some desktop only code
}

hope this helps.

8

Hey Ziv, maybe and this is just maybe the editor error happens due to the using of animation for Wix Blog elements, Wix Galleries, Wix Video. I’m currently deleting all the animation code for that apps. So no hide show at all.

Thanks for the code. That is very clear!

9

Sorry ehm… apparently I don’t know what I should put inside the bracket. Because when I put the animation code in the wix-window code you give, like this:

 import wixWindow from 'wix-window';
 
 let formFactor = wixWindow.formFactor; // can be either "Mobile" or "Desktop"
 if (formFactor === "Mobile")
 {
 //do some mobile only code }
 else
 {
 export function Header_onViewportLeave(event){
 $w("#LoveIcon").show("FadeIn");
 //Add your code for this event here:
 }
 //do some desktop only code
 }

There is an error “import and export may only appear at the top level” #OMG

10

let me explain a bit more.

the following piece of code is an event handler.

export function Header_onViewportLeave(event){
    $w("#LoveIcon").show("FadeIn");
}

for the purposes of this explanation, an event handler should always be a “top level” function in your page code.

now, sometimes you want your code to behave differently depending on some condition, in your case the form factor.

so here’s what you do:

//import statements always go to the top of the file 
import wixWindow from 'wix-window'; 

//event handler is a top-level function
export function Header_onViewportLeave(event){  
    //get the form factor
    let formFactor = wixWindow.formFactor;
    
    //in desktop. do animation
    if (formFactor === "Desktop")
    {
        $w("#LoveIcon").show("FadeIn"); 
    }
    else
    {
        //in mobile, do nothing
    }
}

See what we did here?
we moved the condition into the event handler and kept the event handler as a top-level function.

hope this helps…

p.s. the “else” part does nothing and can be removed,
I left it in for completeness.

11

Yay it’s working nicely! I’m currently rewriting all the codes to differentiate between mobile vs desktop. I hope it will somehow alleviate the editor error, although I’m not so sure. How is it going on with the investigation? I still got frequent freezes in mobile as of now.

Suggestion, I think there should be lots of detailed step by step explanation like what you just gave me Ziv. As a beginner the gap to understand how to implement code is the inability to recognize what’s the actual function of the code. If the explanation is just a generalization of things, like the one in the API Reference, it will make total beginners at loss. Even things like “;” should be explained. If not we will be like what the heck is this semicolon thingy for. After your explanation, I now know a little bit more about wix-window function. At least I can treat mobile vs desktop differently now! Thumbs up!

Oh and for show(animation), I’m only able to use FadeIn correctly. The other animation just doesn’t start. For hide(animation) if I fill in the animation, most of the time the process is buggy, so I decided not to use any animation at all.

12

Hi Sammit,
Here I have a few answers/solutions for you.

  1. About the next one:
    “This is just a question on animation. Is it possible to give properties to the animation effect. Let’s say like “Float In” from bottom with 2 speed and 1 delay. If it is possible, how should the code be?”

At this moment we don’t have the full scope of Editor API’s for custom usage, but you can easily set animation effect with delay via code, here is the sample:

setTimeout(showimage, 1000);

function showimage() {
	$w("#image1").show('FloatIn');
}
  1. “Code Not Loaded” error: can’t reproduce this issue at this point, will continue with analyz.
  2. About “Hide” animations - I see a few issues, once it will be solved - I’ll update you, that you can use it.

Thanks.