locked
jquery ui dialogue box some times scroll to top when close RRS feed

  • Question

  • User2108892867 posted

    Hello everyone, I have this weird problem with jquery ui dialogue box that it some times scroll to top and some times it doesn't. Has anyone ever experienced this problem? Here is my mark up code that I got when inspect the page:

    <div tabindex="-1" role="dialog" style="; height: auto; width: 500px; top: 657.125px; left: 461.5px;"

    This will scroll to top when I clicked the close sign. But this doesn't

    <div tabindex="-1" role="dialog" style="; height: auto; width: 500px; top: 457.125px; left: 461.5px;"

    I noticed the inline top style seems to be the reason. It seems to scroll to top based on how far down I go. But not so sure if this the reason.. I just want to scrolling to top when I close the dialogue box. Any solutions to this? 

    Thanks. 

    Monday, March 5, 2018 4:14 AM

All replies

  • User2108892867 posted

    Anybody please?

    Thanks

    Monday, March 5, 2018 9:12 PM
  • User2108892867 posted

    Please have a look at this video clip:

    https://www.screencast.com/t/lhawhmVpiG

    It keeps scrolling to top. I found this link but it still doesn't work.

    https://stackoverflow.com/questions/22864889/jqueryui-dialog-scrolls-to-top-when-clicking-close-button-in-ie

    I am using Chrome.

    Thanks. 

    Monday, March 5, 2018 10:35 PM
  • User-832373396 posted

    <g class="gr_ gr_114 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="114" data-gr-id="114">Hi</g> asplearning,

    Please have a look at this video clip:

    https://www.screencast.com/t/lhawhmVpiG

    It keeps scrolling to top. I found this link but it still doesn't work.

    Please try this way, 

    <html>
    <body>
    
    
    <div style="height:1000px"  >
    aaaaa
    </div>
    <button type="button">
    top
    </button>
    
    </body>
    </html>
    $(function(){
    $('button').click(function(){
    
    $("html").animate({ scrollTop: "0px" },2000);// it will scroll to top in 2 seconds
    
    });
    
    })

    With regards, Angelina Jolie

    Tuesday, March 6, 2018 6:42 AM
  • User2108892867 posted

    Hello Angie. no I do not want it to scroll to top. I want it to stay still after I close the dialogue box. 

    Tuesday, March 6, 2018 8:06 PM
  • User2108892867 posted

    I think I have found the problem that is causing this jump. I believe it's this piece of code in jquery UI 1.12.1

    close: function( event ) {
    		var that = this;
    
    		if ( !this._isOpen || this._trigger( "beforeClose", event ) === false ) {
    			return;
    		}
    
    		this._isOpen = false;
    		this._focusedElement = null;
    		this._destroyOverlay();
    		this._untrackInstance();
    
    		if ( !this.opener.filter( ":focusable" ).trigger( "focus" ).length ) {
    
    			// Hiding a focused element doesn't trigger blur in WebKit
    			// so in case we have nothing to focus on, explicitly blur the active element
    			// https://bugs.webkit.org/show_bug.cgi?id=47182
    			$.ui.safeBlur( $.ui.safeActiveElement( this.document[ 0 ] ) );
    		}
    
    		this._hide( this.uiDialog, this.options.hide, function() {
    			that._trigger( "close", event );
    		} );
    	},

    If I comment this section out, it seems to work fine: 

    //if ( !this.opener.filter( ":focusable" ).trigger( "focus" ).length ) {
    
    		//	// Hiding a focused element doesn't trigger blur in WebKit
    		//	// so in case we have nothing to focus on, explicitly blur the active element
    		//	// https://bugs.webkit.org/show_bug.cgi?id=47182
    		//	$.ui.safeBlur( $.ui.safeActiveElement( this.document[ 0 ] ) );
    		//}

    But I really do not want to touch the library. Is  there a way I can override these couple of lines in my own code? 

    Thanks. 

    Tuesday, March 6, 2018 9:37 PM
  • User-832373396 posted

    <g class="gr_ gr_8 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="8" data-gr-id="8">Hi</g> <g class="gr_ gr_5 gr-alert gr_spell gr_inline_cards gr_disable_anim_appear ContextualSpelling ins-del multiReplace" id="5" data-gr-id="5">asplearning</g>,

    But I really do not want to touch the library. Is  there a way I can override these couple of lines in my own code? 

    Yeah, so an idea that you could remember the scrollTop before close the dialogue box, then after closing, we re-set the scrollTop again.

    $("cli-open").click(function(){
    var scrollTop = document.body.scrollTop;//remember, when we open the dialogue box 
    window.onscroll=function(){
    document.body.scrollTop = scrollTop;//assign
    }
    })
    $(".cli-close").click(function(){
    window.onscroll=function(){
    document.body.scrollTop=document.body.scrollTop;//after closing
    }
    })

    It maybe gives you an idea:)

    Bests,

    Jolie

    Wednesday, March 7, 2018 1:46 AM
  • User2108892867 posted

    Angei, my dialogue box is not on top. It's in the middle of the windows. 

    Wednesday, March 7, 2018 8:09 PM
  • User-832373396 posted

    <g class="gr_ gr_16 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="16" data-gr-id="16">Hi</g> <g class="gr_ gr_17 gr-alert gr_spell gr_inline_cards gr_disable_anim_appear ContextualSpelling ins-del multiReplace" id="17" data-gr-id="17">asplearning</g>,

    my dialogue box is not on top. It's in the middle of the windows. 

    Yes, so please note this code 

    var scrollTop = document.body.scrollTop;

    it is scrollTop, it is for recording the  scroll Top, not about <g class="gr_ gr_191 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="191" data-gr-id="191"><g class="gr_ gr_206 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep" id="206" data-gr-id="206">aialogue</g></g> box;

    Please have a check again ;

    Jolie

    Thursday, March 8, 2018 7:17 AM