NetTalk Central

Author Topic: Scroll to rounded tab automatically  (Read 2529 times)

CaseyR

  • Sr. Member
  • ****
  • Posts: 448
    • View Profile
    • Email
Scroll to rounded tab automatically
« on: October 17, 2018, 12:59:44 PM »
Hi,

I have a memory form that accepts user's parameters on one rounded tab and then when these are 'saved' it calls the form again to display the output on the tab below.  Works great for desktop but for mobile the second tab is below the visible area, so the user has to scroll down to see the results.

I would like the browser to scroll down to the display tab on 'saving'.  Javascript looked like the was to go and I can get it conditionally included in the html source with something like this:

document.getElementById("tabmyform1");
document.scrollintoview();

But scrollintoview is listed as experimental with limited browser support and Firebug shows it as an unrecognized function.

Any suggestions to achieve the effect?

Happy to bring it up at the user group tomorrow.

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11155
    • View Profile
Re: Scroll to rounded tab automatically
« Reply #1 on: October 17, 2018, 10:44:48 PM »
https://caniuse.com/#search=scrollintoview
suggests that it's safe to use - at least for now. On some systems it will "jump" to the place, not scroll there, but it seems like support is pretty much universal.

cheers
Bruce

PS - Firebug was terminated a long time ago, so the reports from that are likely inaccurate. I've switched to using Developer Tools - mostly in Chrome now.

CaseyR

  • Sr. Member
  • ****
  • Posts: 448
    • View Profile
    • Email
Re: Scroll to rounded tab automatically
« Reply #2 on: October 18, 2018, 04:23:44 PM »
As you suggested in the user group this morning, I add the scripts to an example app and got the same scrollIntoView unrecognized function error.

Here is the revised web2.app (Basic with Menu).   I changed the MailControlBrowse to call the MailControlForm as a page rather than a popup and added some Display text at the bottom of the AutoResponder tab.  I have included two sets of script code:

1)  In the Javascript on Generate field of the demo Display there is document.getElementById("tab_mailboxesformcontrol2_div") and document.scrollIntoView() ;

2)  In the Value embed for the demo Display there is p_web.jQuery('#tab_mailboxesformcontrol2_div','scrollIntoView','')

Both generate what looks like good script code in the page source view, but the Developer Console shows the same error for both.

Thanks.

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11155
    • View Profile
Re: Scroll to rounded tab automatically
« Reply #3 on: October 21, 2018, 09:43:55 PM »
use get to get the actual element...

$("#tab_mailboxesformcontrol2_div").get(0).scrollIntoView()

so
p_web.script('$("#tab_mailboxesformcontrol2_div").get(0).scrollIntoView()')

CaseyR

  • Sr. Member
  • ****
  • Posts: 448
    • View Profile
    • Email
Re: Scroll to rounded tab automatically
« Reply #4 on: October 27, 2018, 03:16:18 PM »
Thanks, Bruce

That works perfectly for one of my forms that conditionally includes a browse procedure on the display tab but not on another form that just has a Display control on the tab.  The problem is focus which you have dealt with before but I suspect there has been a change in the templates since the topic was discussed in 2014.  I will open another topic for the details because the issue will affect other functions besides scrolling.

Thanks again.