CODEWITHSUNDEEP
jqueryasp.net-mvc-3dialogsize
ZedZip
ZedZip

Reputation: 6462

How to change size of modal dialog dynamically?

I have a modal dialog in main page, then I add jPlayer to this dialog. All works fine, but I see only part of player in this dialog. How to change dialog size to the player size after the player is inserted?

i.e. I want to insert audio or video player to this dialog and they have different sizes. 

$(document).ready(function(){

    $("#jquery_jplayer_1").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: "media/track.mp3",
            }).jPlayer("play"); // auto play
        },
        ended: function (event) {
            $(this).jPlayer("play");
        },
        swfPath: "swf",
        supplied: "mp3"
    })
    .bind($.jPlayer.event.play, function() { // pause other instances of player when current one play
            $(this).jPlayer("pauseOthers");
    });
  });


 <script type="text/javascript">

        $.ajaxSetup({ cache: false });

        $(document).ready(function () {
            $(".openDialog").live("click", function (e) {
                e.preventDefault();

                $("<div></div>")
                    .addClass("dialog")
                    .attr("id", $(this)
                    .attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        title: $(this).attr("data-dialog-title"),
                        close: function () { $(this).remove() },
                        modal: true
                    })
                    .load(this.href);
            });

            $(".close").live("click", function (e) {
                e.preventDefault();
                $(this).closest(".dialog").dialog("close");
            });
        });
    </script>

Upvotes: 1

Views: 10984

Answers (2)

Jeff Camera
Jeff Camera

Reputation: 5544

Load the data into your $("<div></div>") container before calling dialog()

Example:

var $dialogContent = $("<div></div>");

$dialogContent.load("some href", function () {
    // Initialize dialog in callback after the data has been loaded.
    $dialogContent.dialog(options);
});

Upvotes: 1

Jasper
Jasper

Reputation: 75993

I'm guessing that you are using jQuery UI's dialog widget. If so then you can target the element via CSS (which will be better for performance than doing it in JavaScript):

.ui-dialog {
    width  : 500px;
    height : 150px;
}

If you have multiple dialogs then you should make the CSS selector above a bit more unique:

#root-element .ui-dialog {
    width  : 500px;
    height : 150px;
}

Also, this line should be throwing an error:

.attr("id", $(this)

And should be changed to something like this:

.attr("id", $(this).attr('id') + '_dialog')

Which will give the dialog an ID that is the same as the button clicked to create it with _dialog appended to the end.

UPDATE

If you do want to do this via JavaScript (say after a link is clicked) then you can use jQuery's .css() function to alter the element's dimensions as necessary:

$('#some-link').bind('click', function () {
    $('.ui-dialog').css({
        width  : 500px,
        height : 150px
    });
});

If you do not know the height/width values to use then you can check the values of the dialog content:

$('#some-link').bind('click', function () {
    var $dialog = $('.ui-dialog');
    $dialog.append('<div class="audio" style="width:123px; height: 321px;"></div>');
    $dialog.css({
        width  : $dialog.children('.audio').width(),//note that pixels will be assumed so it is not necessary to specify `px`
        height : $dialog.children('.audio').height()
    });
});

Upvotes: 3

Related Questions