jquery modal dialog scrolling to bottom

Victor Kimura
Victor Kimura used Ask the Experts™
on
Hi,

I have this page:
https://secure.myultratrust.com/diy/login/create_username.php

If one clicks on the "Privacy Policy" and "Terms of Use" links at the bottom the modal dialog will scroll to the bottom. It's strange because if you first click on the "Privacy Policy" the modal dialog is at the top. But then when you click on "Terms of Use" the modal dialog scrolls to the bottom.

However, if you refresh and the first click "Terms of Use" the modal dialog opens at the top but then if you click on "Privacy Policy" the modal dialog scrolls to the bottom.

It just depends on what link you click on first.

Here is the code in the jquery plugin:

termsOfUseModal : function() {
            $( "#dialog:ui-dialog" ).dialog( "destroy" );

            $( "#terms_of_use" ).dialog({
                modal: true,
                width: 800,
                title: "Terms of Use: MyUltratrust.com",
                position: 'top',
                buttons: {
                    Ok: function() {
                        $( this ).dialog( "close" );
                    }
                }
            });

            var d = $(".ui-dialog").position();
            window.scrollTo( d.left , d.top);
        },

        /**
         * Display Privacy Policy onclick event.
         * Called from /form/includes/general/footer_entire.php by onclick()
         */
        privacyPolicyModal : function() {
            $( "#dialog:ui-dialog" ).dialog( "destroy" );

            $( "#privacy_policy" ).dialog({
                modal: true,
                width: 800,
                title: "Privacy Policy: MyUltratrust.com",
                position: 'top',
                buttons: {
                    Ok: function() {
                        $( this ).dialog( "close" );
                    }
                }
            });

            var d = $(".ui-dialog").position();
            window.scrollTo( d.left , d.top);
        },

Open in new window


Here are the links and the onclick calls on the .pi_general plugin:

Disclaimer: Communications between you and MyUltraTrust.com are protected by our <a onclick="$().pi_general('privacyPolicyModal');" class="terms_of_use">Privacy Policy</a> but not by the attorney-client privilege or as work product. MyUltraTrust.com provides access to independent attorneys and self-help services at your specific direction. We are not a law firm or a substitute for an attorney or law firm. We cannot provide any kind of advice, explanation, opinion, or recommendation about possible legal rights, remedies, defenses, options, selection of forms or strategies. Your access to the website is subject to our <a onclick="$().pi_general('termsOfUseModal');" class="terms_of_use">Terms of Use</a>. Vertex Management Group, LLC, Riverside Center, 275 Grove Street, Building 2, Suite 400, Newton, MA, 02466 is a registered and bonded legal document assistant.

Open in new window


How do I correct the code so the modal dialog always open at the top for both links?

Thank you<><
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
What if you add the scrollTop to the Open?
        termsOfUseModal : function() {
            $( "#terms_of_use:ui-dialog" ).dialog( "destroy" );

            $( "#terms_of_use" ).dialog({
                modal: true,
                width: 800,
                title: "Terms of Use: MyUltratrust.com",
                position: 'top',
                buttons: {
                    Ok: function() {
                        $( this ).dialog( "close" );
                    }
                },
        open: function () {
          $(this).scrollTop(0);
        }
            });

            var d = $(".ui-dialog").position();
            window.scrollTo( d.left , d.top);
        },

Open in new window

Victor KimuraSEO, Web Developer

Author

Commented:
Hi julianH,

Just tried it but that doesn't work. Any other suggestions?
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Yes - I made an error in my post - remove the windwo.scrollTo at the bottom i.e.
        termsOfUseModal : function() {
            $( "#terms_of_use:ui-dialog" ).dialog( "destroy" );

            $( "#terms_of_use" ).dialog({
                modal: true,
                width: 800,
                title: "Terms of Use: MyUltratrust.com",
                position: 'top',
                buttons: {
                    Ok: function() {
                        $( this ).dialog( "close" );
                    }
                },
                open: function () {
                  $(this).scrollTop(0);
                }
            });

        },

Open in new window

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Victor KimuraSEO, Web Developer

Author

Commented:
Hi julianH,

No, unfortunately that didn't work either.

https://secure.myultratrust.com/diy/login/create_username.php
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
According to the comment here (3rd answer) the button is the cause - by adding a

$( "#terms_of_use:ui-dialog" ).focus( )

Open in new window


Claims after opening the dialog should fix the problem.
SEO, Web Developer
Commented:
Hi julianH,

thanks for the link. I tried to fix it but for some reason that's not working either. So I just decided to use fancybox and that seems to work. Hopefully, jquery will fix this bug sometime in the future.
Victor KimuraSEO, Web Developer

Author

Commented:
Using a jquery fancybox plugin worked for me. I think it's a jQuery bug but don't have time to find out the solution right now. =(

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial