Mobile site code gives error TypeError: $w(...).hide is not a function, also multi-state box not working in mobile view

Ask the community
, ,
1

Problem #1 - Error on Mobile Preview “show”

I’m hiding the main menu (menu3) from the home page on all the other pages. Other pages have similar menu, but with different design elements as menu3 colors (reverse type) won’t show on other pages. Client didn’t want a navigation bar at the top on home page and wanted a full page bleed on image. Home page code (desktop editing)

$w.onReady(function() {
    $w("#text72,#horizontalMenu3").show();
 //Hides the element when the page loads
    $w("#text73,#horizontalMenu4,#columnStrip9").hide();
 let isGlobal = $w("#text72,#horizontalMenu3,#columnStrip9").global; // false
});

That seems to work okay, but when previewed in mobile I get error. On desktop editing, no error appears. Home page code (screen shots of code in mobile Edit, and also Preview modes) attached:
Mobile Edit view screen capture: (this does not show errors in “Desktop” views—only mobile):
Mobile “Preview” screen capture of error: (this does not show errors in “Desktop” views—only mobile):

702×201 17.1 KB

Preview

914×327 37.7 KB

Any way to fix code error for mobile? The menu for mobile seems to work fine, but I don’t like the error code and maybe there’s a better way to achieve this?

Problem #2
Multi-state boxes are used for “Awards,” “Education,” and “Recent Clients” links for additional text. They work on desktop, but mobile does not work (click text, nothing happens, no opening of “expanded states”)

How to fix for mobile? Do multi-state boxes work in mobile? If not, is there a better way to do this?
Multi-state code pic attached. Works in desktop, not mobile:

381×553 59.7 KB


$w.onReady(function () {
// Hides homepage menu3 and shows the other menu4 element when the page loads
$w("#text72,#horizontalMenu3").hide();
$w("#text73,#horizontalMenu4").show();

$w("#text84").onClick(() => {
    $w("#readMoreStatebox").changeState("expandedState");
    $w("#educationStatebox").changeState("educationCollapsed");
    $w("#clientsBoxcollapsed").changeState("clientsCollapsed");
});

$w("#text85").onClick(() => {
    $w("#readMoreStatebox").changeState("collapsedState");
});

$w("#text87").onClick(() => {
    $w("#educationStatebox").changeState("educationExpanded");
    $w("#readMoreStatebox").changeState("collapsedState");
    $w("#clientsBoxcollapsed").changeState("clientsCollapsed");
});

$w("#text86").onClick(() => {
    $w("#educationStatebox").changeState("educationCollapsed");
 
});

$w("#text89").onClick(() => {
    $w("#clientsBoxcollapsed").changeState("clientsExpanded");
    $w("#readMoreStatebox").changeState("collapsedState");
    $w("#educationStatebox").changeState("educationCollapsed");

});

$w("#text88,#text90,#text91").onClick(() => {
    $w("#clientsBoxcollapsed").changeState("clientsCollapsed");
 
});

});

I’ve searched for answers for these questions and have found nothing similar. I hope someone can help me. Much appreciated.

2

Maybe you don’t have these elements on your mobile view. Check the editor.

3

The menu elements do not appear in mobile, so that’s not really an issue (other than seeing an error code in the code).

The multi-state boxes do appear in mobile, but don’t function when clicked. Nothing happens. They do work in desktop, but not mobile:

721×1088 121 KB

4

Solved it myself… just kept looking. Apparently if something is “hidden” on mobile and causes an error — as my hide of the “menu1”— it breaks the code for everything that comes after that. Code. Just. Stops. So, I moved the naughty code to the BOTTOM of my onReady function, and voila. Works. Only took all day to figure this out—and looks sloppy. There’s gotta be a better way, but working works for me.

5

Don’t move it to the bottom (becuase you don’t want to get an error when the code gets to its end. Instead do:

import wixWindow from 'wix-window'; //at the top of you code
//.....
if(wixWindow.formFactor !== "Mobile"){
//put here the code the is not relevant to mobile
}
6

@jonatandor35 Wow. Thank you so much! I’ll give it a try. I really hate errors. I really appreciate your support.

It still shows the error on mobile in “Edit” view, (see screen capture), but at least it doesn’t break the code below it. There probably is a better way to do the menu with a different color theme than on the home page, but this works. The client wanted the home page menu to look different—to not have a bar at the top—, and that design didn’t work on the subsequent pages with reverse type.

754×446 53.2 KB