scripts on mobile

[sebastianpetrov]

Hey,

When on mobile does Laytheme load custom scripts differently?

I've got a basic canvas embed set-up that works on desktop, but fails on mobile.

3 main things happen for it to work.

1. add event listener to listen for a .js file (i have this in the head)
2. append canvas element to the dom (this in HTML bottom, wrapped in a newpageshown)
3. load .js file (this right after 2, also wrapped in a newpageshown to ensure timing is right)

On desktop: after the .js file is loaded it registers a message in the console. The event listener is pinged and triggers a chain of events + starts rendering in the canvas 👍

On mobile the console logs appear the same as desktop, however it cycles through parts 1, 2, 3 and then nothing (can see it happening in chrome://inspect/#devices)

The 1,2,3 set-up and the script itself works on mobile, I've verified this with an empty index.html file.

It seems Laytheme is doing something I can't see to prevent it working on mobile.

Without tearing laytheme apart I don't know if I can figure that out so I thought I would ask here. Maybe it's something really obvious for you @arminunruh or @mariusjopen ?

Please let me know what you think?

[arminunruh]

can you just insert the js without loading it in a newpageshown event

instead of step 3
just in html at bottom do:

<script src"…"></script>

[sebastianpetrov]

Hey Armin,

Thanks for your reply - I really appreciate the help - I'm kind of stumped on this!

I have tried that and it works on desktop, but not on mobile.

On mobile if I keep things the same and run the .js script outside a newpageshown event this changes the console output significantly:

The .js file gets loaded before the canvas code even begins to run.

I was wondering at what point does newpageshown get fired and has laytheme executed all it's js by then or are there still things happening after?

[arminunruh]

The .js file gets loaded before the canvas code even begins to run.

u need to execute the js after the canvas element has loaded

I was wondering at what point does newpageshown get fired

once the html of the layout was inserted into the website

[arminunruh]

The .js file gets loaded before the canvas code even begins to run.

just put the <script> tag that loads the js in "html at bottom"
then it should be there after the canvas element has loaded

then inside the js file write

window.laytheme.on("newpageshown", function(){
// write whatever should happen
})

[sebastianpetrov]

Hey Armin,

Thanks for your reply and suggestion.

Unfortunately that breaks it on desktop.

Is there anything in Laytheme that hapens differently on mobile that could interfere with custom scrips?

I'm going to look more closely at the code in the js file in case I've misunderstood how it pings the event listener.

Thanks again, really appreciate the reply!

[arminunruh]

Unfortunately that breaks it on desktop.

then u probably need to code it differently

in your js code, combine both the desktop js and the mobile js, then in the js code determine if you are on mobile or desktop and run different code based on where u are

[sebastianpetrov]

Hey Armin,

Thanks again for your help!

It turns out the script was waiting for window.load to initialize which seems to fire a bit early on Laytheme, so I set-up a different custom event and listened for that instead.