How to minimize / enlarge jQuery dialog?

Question

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

What I want to do is minimize the Dialog element, either in the OS, or something like that. A small icon like ("-") that minimizes my dialogue, and when I click (*) it closes the dialogue, but keeps the video in the background.

Here is 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 the var tab is

 <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> 

Answer 1

There is an extension for the jQuery interface dialog box called "DialogExtend" that allows you to add maximize, minimize and restore buttons:

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

Works great.

Answer 2

There are several approaches you could try.

• Enter a new minimize button and add it to ui-dialog-titlebar and click on the position: fixed dialog box and place it so that only the title bar is displayed at the bottom of the screen.

• A pretty similar approach is to change the original div height dialog to 0. Allow the dialog to be dragged so that the user can move it. but you may have to cancel the dialog at the bottom of the viewport. This approach does not matter ui-dialog-titlebar , you can also change the width of a dialogue "on the fly", to make the effect of minimizing.

• Use .animate or other transitions (or easing, e.g. easeInExpo - http://ralphwhitbeck.com/demos/jqueryui/effects/easing/ )

But the simplest approach that uses some of the above methods:

What you need for the effect is to change:

• window width
• window height
• 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); }); 

That this sets the height of the dialog to 0 and positions it at the bottom of the viewport. In maximization mode, he recounts the central position, gives the dialogue a height and enlivens it back.

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

Updated script with minimum / maximum value.

Answer 3

I made a small plugin with factory widgets that extends the jquery ui dialog.

I am using jquery factory widget to add new functionality

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

There is a _createTitlebar method in the code of the JQuery UI dialog. I redefine it and add a maximize and minimize button

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

• jquery-extendeddialog
• sample page

Answer 4

You can use jQuery DialogExtend plugin. It offers a dialogue of maximizing, minimizing, and smoothing functions.

Answer 5

The jQuery DialogExtend plugin solves the problem, although when using an iframe it continues to update the contents of the iframe.