Question

I am using a jquery function to open a dialog box, and I need to be able to change the height and the width of the box. I am wanting to pass it a parameter from within the DIV. I have looked at many different possibilities, but to no avail. Any ideas would be greatly appreciated.

$.fx.speeds._default = 1000;
$(function() {
    $("#dialog").dialog({
        autoOpen: false,
        height: 300,
        width: 500,
        show: "drop",
        hide: "drop"
    });
    $("#opener").click(function() {
        $("#dialog").dialog("open");
        return false;
    });
});

Here is my Div.

<div id="dialog">
   Some text here
</div>

Answer 1

According to the documentation you can make the window resizable, set a min/max height and width and set the height and width as options when calling the .dialog() method.

From the documentation:

$( ".selector" ).dialog({ width: 460 });

Get or set the width option, after init.

//getter
var width = $( ".selector" ).dialog( "option", "width" );
//setter
$( ".selector" ).dialog( "option", "width", 460 );

It should be pretty simple to get whatever data or parameters you have stored in your div and pass it as an option to the .dialog() method.

Update:

From your comments, you want something like this:

The fiddle

<div id="dialog" data-height="400" data-width="400" style="background-color: red;">
   Some text here
</div>
<a id="opener" href="#">Open dialog</a>​

$(document).ready(function() {
    $("#opener").click(function(e) {
        e.preventDefault();
        var dialogHeight = $("#dialog").data("height"),
            dialogWidth = $("#dialog").data("width");
        $("#dialog").dialog({
            height: dialogHeight,
            width: dialogWidth            
        });
        return false;
    });
});​