How to Minimize/Maximize jQuery Dialog?

Question

I am using jQuery UI Dialog to show a video. The video is working fine.

What I want to do is minimize the Dialog-element just like in an OS or something like that. A small icon like (" - ") that would minimize my dialog and when I press (*) it would close the dialog but keep the video running in the background.

Here's my code

//Watch Video

$(".watchVideo").live('click',function(){
    if($('div.ui-dialog').length){
        $('div.ui-dialog').remove();
    }

    var path  = $(this).attr('rel');
    var title = $(this).attr('title');

    var $dialog = $('<div>', {
        title: translator['Watch Video']
    }).dialog({
        autoOpen: false,
        modal: true,
        width: 600,
        height: 500
    });

    var tab = '<table  style="margin: 10px 10%;"><tr><td><object id="MediaPlayer1" width="500" height="400" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Loading Microsoft® Windows® Media Player components..." type="application/x-oleobject" align="middle"><param name="'+title+'" value="'+path+'"> <param name="ShowStatusBar" value="True">  <param name="DefaultFrame" value="mainFrame"> <param name="autostart" value="false">  <embed type="application/x-mplayer2"  pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/"  src="'+path+'"   autostart="false"  align="middle" width="500"    height="300"   defaultframe="rightFrame"  showstatusbar="true"> </embed></object></td></tr></table>';

    $('<div id="updateContent">').html(tab).appendTo($dialog);
    $dialog.dialog('open');
    return false;

});

where var tab is equal to

<object id="MediaPlayer1" width="500" height="400"
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft® Windows® Media Player components..."
type="application/x-oleobject" align="middle">
    <param name="FileName" value="YourFilesName.mpeg">
    <param name="ShowStatusBar" value="True">
    <param name="DefaultFrame" value="mainFrame">
    <param name="autostart" value="false">
    <embed type="application/x-mplayer2"
     pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/"
     src="YourFilesName.mpeg"
     autostart="false"
     align="middle"
     width="500"
    height="300"
    defaultframe="rightFrame"
    showstatusbar="true">
 </embed>

Solution 1

There is an extension for jQuery UI dialog, named "DialogExtend" that allows you to add a maximize, minimize and restore buttons:

• Code: https://github.com/ROMB/jquery-dialogextend
• Demo: http://jsbin.com/ehagoy/154

Works perfectly.

Solution 2

There are a couple of approaches that you could try.

1. Introduce a new minimize button and append it to the ui-dialog-titlebar and on click change the dialog to a position: fixed and position it so only the title bar is visible on the bottom of the screen.

2. Fairly similar approach - change your original dialog div's height to 0. Allow the dialog to be draggable, so a user can move it around. but you would probably need to offset the dialog to the bottom of the viewport. This approach leaves the ui-dialog-titlebar intact - you could also change the width of the dialog on the fly, to make the minimize effect.

3. Use .animate or other transitions (or easing, such as easeInExpo - http://ralphwhitbeck.com/demos/jqueryui/effects/easing/)

But the easiest approach that uses some of the methods above is:

What you need for the effect is to change is:

• width of the window
• height of the window
• top position
• left position

like this:

    $('#window').dialog({
    draggable: false,
    height: 200,
    buttons: [
    {
        text: "minimize",
        click: function() {
            $(this).parents('.ui-dialog').animate({
                height: '40px',
                top: $(window).height() - 40
            }, 200);            
        }
    }]


});

$('#open').click(function() {
   $('#window').parents('.ui-dialog').animate({
       //set the positioning to center the dialog - 200 is equal to height of dialog
       top: ($(window).height()-200)/2,
       //set the height again
       height: 200
            }, 200); 
});

What this does it set the height of the dialog to 0, and positions it at the bottom of the viewport. On maximise, it recalculates the center position, gives the dialog a height, and animates it back into view.

See example: http://jsfiddle.net/jasonday/ZSk6L/

Updated fiddle with minimize/maximize.

Solution 3

I made a little plugin with the widget factory that extends the jquery ui dialog.

I use the jquery widget factory to add new functionnalities

$.widget('fq-ui.extendeddialog', $.ui.dialog, {
...
})(jQuery);

In the Jquery UI dialog code, there is a _createTitlebar method. I override it and add a maximize and minimize button

_createTitlebar: function () {
    this._super();
    // Add the new buttons
    ...        
    },

• jquery-extendeddialog
• sample page

Solution 4

You could use the jQuery DialogExtend plugin. It offer dialog maximize, minimize, and collapse features.

View more solutions