Jump to specified point on page

Hi Mendix-masters, I've built a nice little app in which I can manage real estate data. There's this page that collects quite some data from different sources. For UX reasons, I really want to keep this on one page. However, it would be awesome if it would be possible to 'jump' to a specified section of the page after clicking an item in a listview. Does anyone know whether this is possible? As far as I can see, there's only the possibility to direct to a page, which defaults at the top of the page instead of at a certain section. All ideas are appreciated! Marieke
3 answers

You can use the formatstring widget inside the listview. Below is an example where you can jump to a specific class:

<button class="btn-link" onclick="document.getElementsByClassName('${class}')[0].scrollIntoView();">${name}</button>

if you want to target a specific listview item:

<button class="btn-link" onclick="document.getElementsByClassName('mylistview')[0].firstChild.children[${position}].scrollIntoView();">${name}</button>

Is this maybe what you want?

I tried this with widgets just now, I think it is possible. For the following page in modeler:

View in MBM

./anchorButton.mpk renders a <button> with a hyperlink with that # thingamabob that redirects to a section of page. The part after # is from the object guid.

./anchorLink.mpk creates an <a> with a name attribute of # followed by the guid of the object.

So then you can at least interpage navigate between same page templategrid items or anything context containers with this combination of widgets in

anyways...looks like it works


I think you need to write some custom javascript for this. Here are a couple of links that might be useful.