Single page website with everything on display, organized by category

and

Dear @Richard-Keith,
Thank you very much for your feedback. I ended up creating all content within one single page and it actually works fine.

I do have one last issue to solve, however, before I can finally go public. Two scripts I added in the <head> work fine on desktop, but don't seem to work on mobile. Any idea what the reason might be?

The first script creates a "Read More / Read Less" button that shows/hides extra text like an accordion; the second makes the anchors in the navbar scroll smoothly to their targets.

You can find my code in the screenshot attached.
Thanks in advance,
Andrea

Screen Shot 2020-11-06 at 16.06.01.png

Richard

Dear Andrea

Do you need to wrap your code in a Newpage event like this?

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){

---INSERT YOUR CODE HERE---
    
  });
</script>

http://laytheme.com/documentation.html#custom-javascript

Hope this helps! :)

Best
Richard

and

Hi Richard.
Thanks for your answer.
I tried but it doesn't look like it makes any difference.
There must be something else I'm doing wrong...

Richard

Dear @and

For me both Scripts work on both Desktop and mobile layout, i cant find issue with your code at the moment?

Apologies that i am not seeing the issue! :)
The Accordion works for me, and the Scroll works for me? Maybe the scroll is meant to be smoother and this is the issue.

Have a wonderful day & thank you for being a user of Lay Theme
Sincerely
Richard

and

Dear Richard,
Thanks for your answer.
The accordion works now.

The menu, on the other hand, works well only on the desktop layout. On the mobile layout it doesn't work at all (if you click on the anchors nothing happens).

If you could have a last look I would be very grateful. It's literally the last thing I need to solve.

Thanks a lot,
Andrea

Richard

Dear Andrea @and

I am unable to reach your page at the moment:
Screen Shot 2020-11-23 at 2.10.34 PM.png

Sorry for any inconvenience
Richard

and

I forgot to forward you the updated link: https://www.tudorbratu.com/

Have a nice day,
Andrea

Richard

Hi Andrea

I think it centres round the .on('click') event - i don't believe this click event is possible on mobile as 'click' doesnt really exist on mobile - that is why your scroll code doesn't register. I hope i am right! :)

https://stackoverflow.com/questions/43220776/jquery-onclick-not-working-on-mobile

Take a look at this and see if you can alter your code accordingly

Good luck and best wishes

Sincerely
Richard

and

Dear Richard,
Sorry to bother again but I just realised the problem is not about javascript at all.
There appears to be some sort of conflict between navbar and custom phone layout, and this has nothing to do with my custom code.

I made a test by creating a new page and, as you can see, the navbar here works perfectly: it makes you scroll smoothly to the targets, on both desktop and phone layout.

As soon as I create a custom phone layout in the gridder, however (namely: click on the phone icon in the top right corner of the gridder), it immediately stops working on mobiles (you click on the anchors and nothing happens). And this is true whether I start by ‘stacking elements’, by ‘copying the same layout’, or with an ‘empty layout’: I tried them all.

This is the original page with the custom phone layout—which isn’t working—in case you want to check.

Then again, as soon as I delete my custom phone layout, the navbar starts working again.

I’m not sure what the conflict is about but it seems strange, and it’s not caused by my custom code anyway. To be completely sure about this I even removed my own script and adopted an alternative way to create the smooth scrolling effect (by adding “html{scroll-behavior: smooth;}” in the custom CSS). The result is exactly the same.

Is there any way I can customise my phone layout without interfering with the navbar functioning?
If you could help me that would be very much appreciated, and I sincerely hope this whole conversation will be useful for future LayTheme users.

Many thanks in advance,
Andrea

Richard

Dear Andrea

Not a bother at all! :) Great rundown of the bugs behaviour,
A new update has been released for the theme, does the issue remain?

http://laythemeforum.com:4567/topic/6244/anchor-link-in-mobile-not-working-anymore/5
Armin also mentions that LayTheme has built in anchor scrolling

Best wishes Andrea and have a lovely day

Richard

Lay Theme Forum

Single page website with everything on display, organized by category

Before you post:

When you post:

Online Users