Solved

jquery modal dialog scrolling to bottom

Posted on 2014-03-02
7
2,617 Views
Last Modified: 2014-03-09
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<><
0
Comment
Question by:Victor Kimura
  • 4
  • 3
7 Comments
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
Comment Utility
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

0
 

Author Comment

by:Victor Kimura
Comment Utility
Hi julianH,

Just tried it but that doesn't work. Any other suggestions?
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
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

0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:Victor Kimura
Comment Utility
Hi julianH,

No, unfortunately that didn't work either.

https://secure.myultratrust.com/diy/login/create_username.php
0
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
Comment Utility
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.
0
 

Accepted Solution

by:
Victor Kimura earned 0 total points
Comment Utility
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.
0
 

Author Closing Comment

by:Victor Kimura
Comment Utility
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. =(
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now