Lay Theme Forum

@arminunruh yes, when landing on a page those parts of the page don't fade in.

Sorry I didn't post a link, it is a private staging site - may I send you a pm or email with the access details?

Hey,

Element Grid and Thumbail Grid don't seem to fade in. Other elements on the same page do.

I tried disabling all custom code and there are no shortcodes active.

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.

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!

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?

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?

Hey @Richard @arminunruh

I've removed a non-essential shortcode in the footer, however there is one shortcode on one page for a "forminator" form that has to stay.

I'd love to dig in and try to find a workaround if there is one.

Is there any documentation available on how laytheme is treating shortcodes or how to disable the hard refresh when shortcodes are present?

Please let me know? The new site is so smooth aside from this one page that hard refreshes and I don't know if I can move on with my life knowing this page hard refreshes when it could be another smoooth page load 😂

@sebastianpetrov hey, good morning ☀️@arminunruh have you seen this last message?

@arminunruh Thanks so much for your quick reply.

I'm pretty sure my problem is shortcode related then.

I'm happy to kill the mailchimp shortcode I was using in the footer. However, there's another shortcode I'd like to keep - its a Forminator form.

My gut says it goes in 1 of 2 directions - please let me know if I'm completely off the point!

Is Laytheme seeing the shortcode and then forcing a page refresh to improve compatibility with short codes in general? Are there any links to information you can share that might help me try different workarounds?

Or perhaps some shortcodes cause a page refresh and others don't based on how they work? Any advice on how I can attemp to debug this?

Hey,

How are you?

I sort of forgot about this and now I'm preparing to launch content updates to beautifulbeautiful.xyz

I can see its not just the css animation that is reloaded between pages, but the site title and menus themselves are reloading. Actually it appears like a full page hard refresh is happening rather than the graceful Ajax partial loads Laytheme became so popular for.

I've tried toggling Ajax Compatibility on/off, disabling all plugins, disabling all custom code and opening the site in a fresh incognito window and I'm still getting full page hard refresh. I can see the site title and menus blink between page loads.

Are there any other troubleshooting steps I can take? Can you please help me with this?

Happy to share staging site details if that will help.

Thanks so much and look forward to hearing from you.

Sebastian

@arminunruh Hey, thanks for the quick reply!

Hey,

I noticed the randomise thumbnail grid doesn't work as expected when using it in a footer.

I'm using this page as a footer for all my projects: https://sebastianpetrovski.com/projects-2/

If I visit the footer page directly it works as expected and the thumbnails are random on every page load, including the first 👍

When the above page is used as a footer, for example on this project page: https://sebastianpetrovski.com/a-2d-emoji-made-of-3d-noise/

The thumbnails in the footer load in their default order 🙃

However, thumbnails do randomise if the page is refreshed. So my amateurish guess is the feature isn't really broken just needs a small change to how the footer is called so it randomises without a page refresh required. I don't know how to do this though 😂 Can you have a look at it please?

Cheers,

Sebastian

@Richard

I just found an easy workaround for getting i-frames to fill the full viewport correctly on mobile and it seems to be working flawlessly.

In case someone else needs it or I need to find this again...

Pasting the link to the web-page that describes the fix - almost effortless to implement in Laytheme.

https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

Hi,

I hope you're well ☀

If I select and then deselect all tag filters, the tag filters become hidden and the thumbnail grid refreshes.

Please see screen recording at the link below to easily understand what I mean: https://photos.app.goo.gl/t2UkkSBAeK8Kau4g7

I've tried to troubleshoot by removing any related css code, but that doesn't seem to fix it. Any ideas what it could be?

Best,

Sebastian

Hey Richard, I'm really sorry to be a pain. I was wondering if you had been able to log into the staging site? Isn't it strange that even without any plugins active or any other custom code that the menu and site title are hard refreshing on page load? Isn't that a bug of laytheme?

Hello,

I've spun up a another copy of the site and disabled all plugins and removed all custom CSS & HTML.

Site Title and Menu CSS animation persistence

-> I still get full page loads,

-> I tried putting only the CSS for the siteTitle and menu to see what would happen.

-> same result =

... unless navigating from any page TO the home page
that does not interrupt the css animations on the SiteTitle or either Menu.
I even tried toggling the AJAX compatibilty just in case it somehow fixed it.

Can you please help me fix this? Full page loads are super jarring and one of the main reasons I went with Laytheme is because of the smoooth transitions.

Here's a link to the clean version of the site: https://wordpress-414790-2426846.cloudwaysapps.com/

username: zwgvjywatd
password: 87TuRpFC3M

iframe mobile viewport fill size - still troubleshooting

I've since discovered the issue i'm having with the iframe is not unique. Apparently It is due to how space is defined relative to the URL bar on mobile browsers. I've detailed it here in case it helps someone else down the road.

Generally speaking...

/*defines height as bottom of screen to *bottom* of URL bar
--sizes element as if URL bar where always *showing*/
body {
    height: 100%;
  }

/*defines height as bottom of screen to *top* of URL bar
--sizes element as if URL bar were always *hidden*/
body {
    height: 100vh;
  }

See Stack Overflow for full explanation: https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser

What's confusing though is if I open up the iframe link directly the web page in my iframe scales perfectly. I may try generating an DIV with javascript so it sits outside the gridder and put the iframe in there.

Hi Richard,

Thanks for your reply.

Q1:

Ok I have sent you the link via chat message.

Q2:

I checked and Ajax compatibility is not checked on. Could it be anything else?

Best,

Sebastian

Hi,

I have a couple questions I hope might have simple fixes. One about iframe behaviour on mobile in laytheme and another about css animation behaviour on page load.

First:

I have an iframe on my homepage which I have set-up to fill the screen on desktop and mobile layouts - no matter what I try so far it won't stretch to the bottom of the viewport on mobile. Can you help me with this?

Second:

When I navigate between pages it appears that a full page load is happening, meaning the menus appear to blink instead of being persistent.

The blink is quite pronounced because there are looping CSS animations on the menus and siteTitle.

Strangely, if I navigate from any page to the home page - the CSS animations are uninterrupted while the contents of the home page is loaded. I want this behaviour for all page navigation and I don't understand why that isn't happening.

I would greatly appreciate any input you may have on these two things.

Please let me know what you think.

If you need to look at the site, may I send the website link in a private message? It is still in development and don't want the staging address listed :)

Look forward to hearing from you.

Best,

Sebastian

Hi Richard,

Apologies for the delay. Thank you for getting back to me and a detailed response.

Take care ☀

Sebastian

Hey,

I hope you're well ☀️

Apologies if this information is out there already. I haven't been able to find much documentation on the search function and that's why I'm posting here.

I recently added the search function to a site I'm building and I have 2 questions about it - first one is really a precursor.

1. The search seems to only reveal projects and not pages. Is that the correct functionality or have I somehow broken it? It would be awesome if it searched pages as well,

2. Is it possible to exclude/hide specific projects or pages from the search; or maybe hide project categories or tags?

The reason I want to hide some items from search is because I often make portfolios or pitches for a single person to review and don't want them to be found by anyone else.

Look forward to hearing from you.

Best,

Sebastian