Navigation & carousel

Anvil Q&A
1

Not sure if this post is going where it should but I just can’t find a way to make things work on this app: https://anvil.works/build#clone:2GEBEELYS67Z46XA=VKCULFAQCHFC3TT5KJ7AYXRI

Since I didn’t find a native way to do carousel in anvil I did it with Custom HTML following this tutorial.

And then used the app mentioned in this post to implement navigation with url hashes.

The problems are:

  • the carousel might or might not start animating at first page load (seems random)
  • navigating to the “Other” form doesn’t seem to work for some mysterious reason
  • navigating to the “Carousel” form definitely doesn’t start animating the carousel

What am I missing here?

2

Is there a reason the link/form loading is so complex? If not, I’m going to suggest a simpler way to swap forms.

1 Like
3

What I’d expect from the navigation (=link/form) loading is that:

  • each link to replace the components in the content_panel (hence the nav_panel_link_click() function in the Top form)
  • each form to be loaded based on the triggering link (hence the mapping of link.tag.form to it’s corresponding Form class
  • the site users should be able to copy a link url (as I’ve seen from other posts in the forum, target of links is set by anvil to “open in a new tab” behaviour so I need some Custom HTML for that too for sure!? can’t just set the url property of links :frowning: )
  • to be able save the state of the Form instances by mapping the link.tag.form to the instance instead of the class/type. (or any other better way :question:)
4

Apologies, I’ve just been called away. Will have to wait until later.

maybe someone else can jump in?

5

The Other form won’t load because it’s Class Other(CarouselTemplate)
It should Class Other(OtherTemplate)

1 Like
6

Really sry 'bout that, that was very noob of me :slight_smile: thx

That was fixed but my carousel ain’t carouseling :stuck_out_tongue: and not sure how to add hashes to urls in those two links: Anvil | Login

1 Like
7

I did it…

So (for anyone else struggling with this):

  1. using this post for navigation

  2. adding re-carouseling :stuck_out_tongue: to the carousel via a bit of jquery in the form custom HTML (seems to always activate the carousel now)

  3. adding a bit of jquery to the HTML asset used by the Top form to set ALL <a>-s target attributes to _self (so I could set the url property of Link components now)

  4. Corrected version of the app (previous versions wont work): https://anvil.works/build#clone:2GEBEELYS67Z46XA=7GFVNRQIF6C4T7KZHPXNP6BI

Note: there’s a hackish way of using anvil.call-s first argument (might need to be more specific)

Happy Anvil-ing :slight_smile:

3 Likes