Unibyte
Unibyte

Reputation: 93

When opening jQuery dialog the page scrolls

I have rows of elements with a edit button that shows on hover. I'm trying to open my jQuery dialog window next to the element that you click on the edit button:

So far so good.

Here's my problem: the dialog opens at the right place, but the page scrolls down at the same time I open the dialog.

jQuery dialog code:

$("#object-form").dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    modal: true,
    buttons: {
        Save: function () {
            alert("hello");
        },
        Abort: function () {
            $(this).dialog("close");
        }
    },
    show: "slow"
});

Initializing code for dialog and sets the dialogs position:

$(".matrix-cell-options-edit").click(function () {
    $("#object-form").dialog("open");
    var target = $(this).parent().parent();
    $("#object-form").dialog("widget").position({
        my: 'left bottom',
        at: 'right top',
        of: target
    });
});

Upvotes: 1

Views: 1396

Answers (2)

alaster
alaster

Reputation: 4171

I had same problem. Fixed by adding <!DOCTYPE html> before <html> tag

Upvotes: 1

Unibyte
Unibyte

Reputation: 93

Finally I fixed this. It had nothing to do with CSS. It was some discrete error that always was present. For some reason the body tag ended up before the head tag. It got nested. See this screenshot to see how it looks like in the element inspector in Chrome (not mine but similar): http://www.flickr.com/photos/57553101@N06/5357885472/

In below thread this problem was solved for some with UTF-8 without BOM but not for me. I had included db.php and a couple of other functions before the first HTML tag. I moved this down to the beginning of the body and now everything seems to work as it should!

Useful threads on this matter: http://wordpress.org/support/topic/header-appearing-in-body-tag http://wordpress.org/support/topic/head-scriptslinks-showing-up-inside-body-tag

Upvotes: 0

Related Questions