Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Form tabs lose focus if static text is first

Avatar

Level 4

Hi!

We are building large, multi-tabbed panel forms for government use. Our toolbar with "Previous" and "Next" buttons is at the bottom of the page.

When we click on the tab or the buttons and go to a new tab-panel, if the first item is a form input, the browser will focus on that first item.

However, if the panel starts with text, then there is no focus on the page, and if the user was at the bottom of the form on the previous tab, they will still be there so have to scroll back to the top.

We've been looking for a way to make sure that upon changing tab panels, the user is at the top of the panel, no matter if there is a form field or static text.

Alternately, we thought we might put code on the Back and Next buttons to force to the top of the page (jQuery('html,body').animate({scrollTop:0},0);), but putting any onClick code into the rules for those buttons breaks their functionality.

Anybody run into this usability issue and find a good solution?

1 Accepted Solution

Avatar

Correct answer by
Level 4

I figured it out.

If you
have a Tabs on Top or Tabs on Left layout, you can put this code in on the guideRootPanel
- Initialize
event to force the page to scroll to the top when you click
those buttons.

$('.guidetoolbar').on('click', 'button.moveNext', function(){
   $('html,body').animate({scrollTop:0},0);
});

$('.guidetoolbar').on('click', 'button.movePrev', function(){
   $('html,body').animate({scrollTop:0},0);
});

And this won't conflict with the button action because it's not a direct click event. 

View solution in original post

3 Replies

Avatar

Correct answer by
Level 4

I figured it out.

If you
have a Tabs on Top or Tabs on Left layout, you can put this code in on the guideRootPanel
- Initialize
event to force the page to scroll to the top when you click
those buttons.

$('.guidetoolbar').on('click', 'button.moveNext', function(){
   $('html,body').animate({scrollTop:0},0);
});

$('.guidetoolbar').on('click', 'button.movePrev', function(){
   $('html,body').animate({scrollTop:0},0);
});

And this won't conflict with the button action because it's not a direct click event. 

Avatar

Level 1

Unfortunately - Chris has passed on - after a fight with liver cancer.

 

We (his teammates) are experiencing this issue again.  The code Chris developed did work when it was rolled out - but after a few AEM upgrades - the solution no longer works.

 

Anyone have any other ideas/solutions?

Avatar

Level 1

funny

 

slight variation - and the code works again.  The bolded text needs to be the name of the buttons.  I did have to add a text box above one of the panels that had static text first in the layout.

 

$('.guidetoolbar').on('click', 'button.moveNext', function(){
   $('html,body').animate({scrollTop:0},0);
});

$('.guidetoolbar').on('click', 'button.movePrev', function(){
   $('html,body').animate({scrollTop:0},0);
});