Hi -
I want a user to be able to click a button and jump from the top of a form to mid-way down the same form.
Kind of like the anchors, or bookmarks in HMML. Does Anvil have this feature? Thanks -Ian
Don’t think it has it natively, but if you’re using custom HTML you could create the anchors :
<a name="myanchorname"></a>
and add “#myanchorname” to the URL property for the link.
Hmm - just testing it and the problem is, whilst it does take you to the anchor, it fires up a new window. You may have to do it in pure custom html for now unless someone else knows a way.
Yeah; all Links with urls open their targets in a new tab (otherwise it would be impossible to link to an http:// URL, due to browser security rules).
It would be useful to have some kind of “scroll until this component is visible on the screen” functionality, though, without breaking out to HTML. I’ll consider that a feature request!
2 Likes
I’m not using HTML, my HTML is essentially blank other than pointing to CSS. Is adding the standard HTML tags (title, head, etc…) a good practice for Anvil apps that don’t really rely on HTML?
No; you should be able to do this all from Python!
In the meantime, here’s a drop-in custom component you can use to scroll a given component into view. Just clone this app, add it as a dependency of your app, then add a ScrollAnchor component to your page. You can then call its scroll_into_view() method to scroll to wherever it is on the page:
self.scroll_anchor_1.scroll_into_view()
https://anvil.works/ide#clone:W6W45SXPTEN3FQGH=WIRDMPEYJ3G7NKQKCW7TOTBU
Enjoy!
1 Like
(link is missing…)
Missing link? What missing link? I don’t see a missing link. That link was always there. Always. Ahem.
3 Likes
Thanks, @meredydd, it’s almost there but I’m getting an error, I think the issue is that I placed the anchor on the home page, and the browse jobs link, which links to the anchor, lives in the header, which is a separate form within the homepage form.
Is the home page a parent to the header form? Your wording suggests it is, so try referencing the parent of the link form (self.parent? I’m not able to test right now) to get access to the anchor. Something like (and this is untested) -
self.parent.scroll_anchor_1.scroll_into_view()I’ve got a Form within a Form, within a Form
So the Header_Links… (what the user will click)
…are within the Header…
…which is within the Home page (where the anchor destination lives)
I will test this later too.
Sorry for reviving an old thread, but I believe it is relevant. I’m trying to use the custom component meredydd posted. I get it to work as advertised when linking in the same form. How would this work when linking from a separate form? I tried this (linking from one form to an FAQ form):
Current form where link is:
from FAQ import FAQ
...
def faq_link_click(self, **event_args):
open_form('FAQ')
FAQ.scroll_anchor_1.scroll_into_view()
The form opens but then gives an error that FAQ does not have the scroll_anchor_1 property. My thought was to pass an argument to open_form like: open_form('FAQ', anchor=1)
But I’m unsure how to grab this on the destination form? If I can do that I can write a simple constructor to dynamically call the component based on the anchor number (scroll_anchor_1, 2, etc.).
When you pass extra arguments to open_form, you add them to the init function on the destination form. Then in init you can do what you need to based on the argument.
1 Like
Hi there,
I am struggeling with the scroll anchor at the top of the page e.g. about.
I followed the instruction in the forum, but not working out, what I am doing wrong?
It would be great having this feature as a std. component in the toolbox.
https://anvil.works/build#clone:L7OJQKSVJBUX2U7K=3KEJVZ5LUH42XWODEAPIYGBP
BR,
Gerhard
Hi @Gerhard,
Good news: These days, scrolling a particular component into view is part of the Anvil standard library! Every component has a scroll_into_view() method you can use.
Here are the docs on how to use it:
1 Like
HI Meredydd,
apprecitate the fast response and implantation of the component into the std. library.
It works by click on a button (put on the form for testing)
I am still struggeling by showing of the page.
Task:
- as the published form or page is shown on the screen, the scroll should go the first label on the page.
- I tried within the int and show function but not jumping at the top label (no error is shown)?
from ._anvil_designer import ImprintTemplate
from anvil import *
import anvil.server
class Imprint(ImprintTemplate):
def init(self, **properties):
# Set Form properties and Data Bindings.
self.init_components(**properties)
def Imprint_show(self, **event_args):
# Scroll First Page Label into view
self.label_imprint.scroll_into_view()
BR,
Gerhard
Is your Imprint_show function hooked up to your form’s form_show event? Double-check in the properties of the form itself.
Or is there a component named Imprint that has a show event it’s hooked up to? If so, maybe try the form_show instead.
Hi Jshaffstall,
thank you for the properties hint.
Unter the container properties events was missing form_show in the show field.
It needs to be added by click first in the form properties event handler ;-), and yes form_show is correct.
def form_show(self, **event_args):
“”“This method is called when the column panel is shown on the screen”""
self.label_imprint.scroll_into_view()
pass
Now it works! Thanks a lot!
BR,
Gerhard
2 Likes