Single page website with everything on display, organized by category

and

Hello and thank you so much for the theme. It works beautifully.

I have a couple of questions about the website I’m currently working on. It’s a single scroll website divided in three sections:

Section #1 displays all projects belonging to category #1;
Section #2 displays all projects belonging to category #2;
Section #3 consists of a series of links to download some PDFs.

A nav bar with anchors allows the page to scroll to the beginning of each of these sections. (I’m attaching a basic wireframe sketch, in case the structure wasn’t clear)

I just figured out how to implement the nav bar, but I’m still trying to understand what’s the best way to structure the website. More specifically:

How to automatically display all projects belonging to the same category on the same category page (not their thumbnails but the whole projects);
How to display more than one category page on the front page.

Could you point me in the right direction?
I spent quite some time looking for similar situations in the forum but I had no luck.

Many thanks in advance,
Andrea

Richard

Dear Andrea @and

Interesting questions :)
Is it possible to post a link to your website as it is at the moment?

Best
Richard

and

Dear Richard.
Thanks for your answer.
Here it is: https://test.tudorbratu.com/

At the moment the front page displays one single project.

What I’d like to achieve is displaying all projects on the front page, ordered by category (“work” projects should appear first; “curatorial” projects after).
If you can think of anything please let me know.

Many thanks in advance,
Andrea

Richard

Dear Andrea @and

This is a very interesting question,

The issue is that each project is really its own page:
Screen Shot 2020-10-07 at 4.28.09 PM.png

Existing outside of the home page, not being loaded yet. you cant merge two permalinks together so content cannot be merged either.

I can think of a few options moving forwards but i apologise that i cannot offer a definite solution.

Creating all content within one whole page ( one permalink ).
Creating the whole wireframe. ( however i can see why this may be unappealing especially if you have already created the projects.
Using JS.
This would require some good knowledge of JS -
Create a page that is based on your wireframe & add your category area's with the Project Thumbnail inserts:

Screen Shot 2020-10-07 at 4.43.18 PM.png

Screen Shot 2020-09-14 at 2.50.29 PM.png

This will give us the necessary data and links!
Using Custom CSS that can be added in "lay-options - Custom CSS & HTML"

Screen Shot 2020-09-14 at 2.51.54 PM.png
You can set the <img> image of the project thumbnail and caption to 'Display:None' ( but we now have the information )

Then by adding Custom Javascript we need to ask for the link - and ask for all the Content within that Link:
This gets difficult and unsure how plausible it is...

Using Iframe's. Basically in that last option this is what was being attempted.
So using an Iframe you could create a window into each project that would sit on this main page you have created. There are lots of iframe Generator's to choose from. You could add this Iframe code into your page through the "+ More - HTML " Option and then use CSS if extra styling is needed.

Without Actually just making one page as you wish to with all the content of the project's, these are 3 options i can think of.

Sorry once again that i cannot pursue this deeper

Best wishes, Thank you for using Lay Theme

Sincerely
Richard

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