Mobile Go to Position

Mobile Go to Position

  

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

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

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


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




Solution

Hi Renato,

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

Thanks

Keith

I'm glad I could help!


Cheers,

Renato


Keith Matthews wrote:

Hi Renato,

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

Thanks

Keith



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é

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