Window scrolling up when jquery dialog opens up

Question

I am trying to open a modal jquery dialog using jquery 1.4 and jquery-ui-1.8rc3.custom.js

The dialog opens up with no issues, in all browsers, but in IE 7 and 6, after the dialog opens up, the window scrolls itself to the buttom... I tried scrolling the window up back to the modal position but is very inconsistent. was using the following line of code after opening up the modal

window.scrollTo($('#selector').dialog('option', 'position')[0],$('#selector').dialog('option', 'position')[1]);

One weird thing I am noticing is that after I open the modal, the page becomes huge... as if some extra things adds up on the bottom .... and it eventually scrolls to the bottom. Any idea why this could be hapenning

in html

<div id="selector">
</div>

in document.ready

$('#selector').dialog({
  bgiframe: true,
  autoOpen: false,
  width: 100,
  height: 100,
  modal: true,
  position: 'top'
});

in js

$('#selector').dialog('open');

Pintle

Answer 1

Looks like you are missing the # in your selector:

window.scrollTo($('#selector').dialog('option', 'position')[0], $('#selector').dialog('option', 'position')[1]);

that might be why the window is scrolling to the left top corner.

---

Edit: I was just looking at the documentation and .dialog('option','position') default value is center.

position Type: String, Array Default: 'center'

Specifies where the dialog should be displayed. Possible values: 1) a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'. 2) an array containing an x,y coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100]) 3) an array containing x,y position string values (e.g. ['right','top'] for top right corner).

So you could get text or numbers returned using the position option and window.scrollTo() requires numbers. So try this instead:

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

Agribusiness

Oh... I think I missed it when I copied the code onto stackoflow.com and edited it, it does have the '#' sign... Thanks for pointing it out though! – Pintle

I am sorry, I did not get a chance to implement your suggestion till now. Give me few hrs and I will get back to you. Thanks a lot for getting back! – Pintle

tried this and worked... but with a little tweak... had to use window.scrollTo($('#selector').closest('.ui-dialog').offset().left ,$('#selector').closest('.ui-dialog').offset().top ); Thanks again for your idea! :) – Pintle

Answer 2

If you're using an anchor tag like below to trigger the dialog

<a href="#" onclick="$(#id).dialog('open');">open dialog</a>

you'll want to add a return false; to the onclick attribute:

<a href="#" onclick="$(#id).dialog('open'); return false;">open dialog</a>

This prevents the page reloading to anchor # which causes it to jump to the top.

Consolidation

This really helped. When I was opening a modal, in FF it the screen would scroll to the top but the modal would stay put. – Jennifer

Answer 3

I was struggling with this issue too. I didn't use any theming so I didn't have this important CSS property:

position:absolute;

I added this to my CSS file and all works fine now:

.ui-widget { position: absolute; }

Frostwork

Answer 4

I had this problem because I was assigning a class to the dialog that in my stylesheet was setting:

position: relative;

which was overriding the:

position: absolute;

needed by the dialog.

Basically, make certain the .ui-dialog class has:

position: absolute;

and the window shouldn't scroll to the bottom of the page and the extra vertical space won't be added to the body.

Quenchless

Answer 5

I have had a similar situation where the dialog was opening where it should on the page, but the user was redirected to the bottom of the page. Basically, I forgot to include the appropriate css to match the jQuery UI JavaScript library. By doing this everything was ok. I imagine it's something like that, where there are styles set on elements on the jQuery css that are not set in your own css.

To debug the problem so I didn't have to include the whole jQuery UI css, I made two identical pages, one using the jQuery UI css and one not and just checked what was different in the css via Firebug on Firefox and added these styles to my css.

Hope it helps. Mag

Vadnee

Answer 6

How I fixed it:

HTML

<a href="javascript:openDialogFunction(parameters)">...</a>

Javascript

function openDialogFunction(parameters) {

    var topOff = $(window).scrollTop();

    //code to open the dialog

    $(window).scrollTop(topOff);
}

Spline

Answer 7

I had similar issue and this is how I resolved. Its similar to @bassim solution, but with a little different flavor of it.

I had the same anchor tag and used "$(#anchor-element).click(function(){..}. Below is the code snippet -

In jsp -

<a id="open-add-comments-${site}" class="open-add-comments" href="#"  site-id="${site}" project-id="${project}"  >Add comments</a><br/>

In javascript -

 $( ".open-add-comments" ).click(function(){

    var projectId=$(this).attr("project-id");

    $( "#add-comment-form" ).dialog({
        //width: "auto",
        width: 800,
        height: "auto",
        position: "absolute",
        maxWidth: 800,
        minWidth: 300,
        maxHeight: 400,
        modal: true,
        title: "Adding comment for \"${project.name}\" and site \""+siteName+"\" ",
        open: function(event, ui) { 

        $("#add-comment fieldset textarea").html("").focus();
            ............
            .....
        },
        buttons: {
            "Save": function() {

            .... some business logic

            },
            Cancel: function() {
                $( this ).dialog( "close" );

            }
        }   

    });

    return false; // -- THIS IS IMPORTANT AND RESOLVED THE ISSUE

});

This did the trick and resolved the issue. Thank you for rest in this page who gave good pointers and helped to resolve the issue. Kudos team.

Periwinkle

Answer 8

Another solution is to call event.preventDefault when the dialog is open

$('#demo4').click(function() { 
    $( "#tallContent" ).dialog( "open" );
    event.preventDefault(); 
});

Abbacy