1016
Views
14
Comments
Solved
Mobile Go to Position
Question

In a mobile app I have a page with an embedded wizard so that the page content consists of:

1. A header section with fixed fields that must be input/picked

2. A 'wizard' section that displays a dynamic list of (weblocks) questions for answers

this section can display a dynamic (n) number of times and each time could have a different length list.

each time the section and questions are retrieved from the database

3. A Footer section that displays some final fields and submission button

At the moment as you navigate back and forth in the wizard the previous/next section displays at the relative position of the section the user is coming from i.e. it could be at the top, bottom or anywhare in between.

I would like to be able to go back to the top of the section being navigated to i.e. not the top of the page as its basically all on one page, just displaying different sections based on logic.

Does anyone have a good technique for doing this?

Thanks

Keith

Rank: #233
Solution

Hi Keith,


I had the same issue  .


You need to add the jQuery dependency and in the screen set the Required Scripts.


Please check the print screens:




Cheers,

Renato


Keith Matthews wrote:

Hi Renato,

Thanks for that I have replicated your code but for some reason am getting a $ is not defined which suggest jQuery may not be loading correctly, so I am tryiong to fix that.

Your example is not exactly what I want as the mid section is dynamically generated and refreshed so its going to be a case of where to execute the client action, but once I get the example working I should be able to figure the rest out.

Thanks

Keith




Rank: #233

Keith Matthews wrote:

In a mobile app I have a page with an embedded wizard so that the page content consists of:

1. A header section with fixed fields that must be input/picked

2. A 'wizard' section that displays a dynamic list of (weblocks) questions for answers

this section can display a dynamic (n) number of times and each time could have a different length list.

each time the section and questions are retrieved from the database

3. A Footer section that displays some final fields and submission button

At the moment as you navigate back and forth in the wizard the previous/next section displays at the relative position of the section the user is coming from i.e. it could be at the top, bottom or anywhare in between.

I would like to be able to go back to the top of the section being navigated to i.e. not the top of the page as its basically all on one page, just displaying different sections based on logic.

Does anyone have a good technique for doing this?

Thanks

Keith

Hi Keith,


I did a test with "plain old HTML" using anchors and JS and it seams to work:

  1. For each section define an anchor using the "HTML Element" 
  2. Use javascript to scroll to that anchor


Screenshots of my prototype:


1. Add a "HTML Element" per section


2. The element is just a plain anchor


3. Add buttons that call a client action

4. The action scrolls using javascript / JQuery:


I hope it helps!


Cheers,

Renato

Rank: #361

Hi Renato,

Thanks for that I have replicated your code but for some reason am getting a $ is not defined which suggest jQuery may not be loading correctly, so I am tryiong to fix that.

Your example is not exactly what I want as the mid section is dynamically generated and refreshed so its going to be a case of where to execute the client action, but once I get the example working I should be able to figure the rest out.

Thanks

Keith


Rank: #361

Hi Renato,

Perfect timing, the example works now - so thanks for that - now back to the real problem.

Thanks

Keith

mvp_badge
MVP
Rank: #62

Hi Keith,

I would just like to add that if you do not need the jQuery library for anything else, the same functionality can be achieved with:

document.getElementById($parameters.anchorName).scrollIntoView();

This way you avoid having another library that is loaded into your app, which in mobile apps can be a big issue.

Cheers,

José

Rank: #361

Hi José

Thanks you for that also I got both solutions to work in the actual app once I figured out exactly where to put the tag and the call, excellent!

Unfortunately I can only mark one as a solution.

Regards

Keith


Rank: #783

José,

Does this also work with an element of a list? It don't clearly. Anyone has an idea for this?

Rank: #44537

I have tried above example (I have tried many but no luck) with the use of the anchors in my mobile app but unfortanely it's not working. 

I need to scroll to a specific part on my screen, the user chooses extra information and it's being added on the screen but the user cannot see it when his mobile screen is too small so I would like to scroll down (under the barcode) so the user can see the newly added part. 








Rank: #44537
Rank: #16737

Hi All,


I used this way in list, but i get this error. Cannot read property 'scrollIntoView' of null. Anybody help me in this.



regards,

Naveen