CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
George Irimiciuc
George Irimiciuc

Reputation: 4633

Jquery dialog sliding

http://jsfiddle.net/G5RP3/

I have made a div be a dialog through jQuery UI. It is empty at the moment, but what I want to do is make it slide from left to center, from outside the window. What it does instead, is it slides like a drawer is opened. I think I am close, but not sure how to do it.

JS

var speed = 2000;
$(document).ready(function () {
    $('#loginmenu').dialog({
        show: {
            effect: 'slide',
            direction: 'left',
            speed: speed

        },
        hide: {
            effect: 'slide',
            direction: 'left',
            speed: speed

        },
        modal: true
    });
});

HTML

<div id="loginmenu"></div>

CSS

#loginmenu {
}

Upvotes: 1

Views: 4476

Answers (1)

Lucas Trzesniewski
Lucas Trzesniewski

Reputation: 51390

Here's a simple solution:

http://jsfiddle.net/MsS9z/1/

var speed = 2000;
$(document).ready(function () {
    $('#loginmenu')
        .on("dialogopen", function() {
            var widget = $(this).dialog("widget");
            var offset = widget.offset();
            widget
                .css("left", -widget.outerWidth() + "px")
                .animate({ left: offset.left }, { duration: speed });
        })
        .dialog({
            modal: true
        });
});

When the dialog opens, this code will shift it outside of the screen, then animate the dialog back into place.

If you want to slide the dialog to the right on close, things get a bit more complicated:

http://jsfiddle.net/MsS9z/2/

var speed = 2000;
$(document).ready(function () {
    $('#loginmenu')
        .on("dialogopen", function() {
            var widget = $(this).dialog("widget");
            var offset = widget.offset();
            widget
                .css("left", -widget.outerWidth() + "px")
                .animate({ left: offset.left }, { duration: speed });
        })
        .on("dialogbeforeclose", function() {
            var dialog = $(this);
            var widget = dialog.dialog("widget");

            if (widget.data("dialog-closing") || widget.is(":animated")) {
                widget.data("dialog-closing", false);
                return true;
            }

            widget.data("dialog-closing", true);
            var origOverflow = $("html").css("overflow-x");
            $("html").css("overflow-x", "hidden");
            widget.animate({ left: $(window).width() }, {
                duration: speed,
                complete: function() {
                    dialog.dialog("close");
                    $("html").css("overflow-x", origOverflow);
                }
            })

            return false;
        })
        .dialog({
            modal: true
        });
});

Here we have to cancel the original dialog close, then trigger the animation, then allow the dialog to close normally. We also have to set the document's overflow-x to hidden so that the horizontal scrollbar doesn't appear.

Upvotes: 6

Related Questions