onresize Callback Hack...
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<style>
<!--
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:Arial;
color:windowtext;}
@page Section1
{size:612.0pt 792.0pt;
margin:72.0pt 90.0pt 72.0pt 90.0pt;}
div.Section1
{page:Section1;}
-->
</style>
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>First off, I am new to jQuery and fairly
new to JS. I was looking at how I could get a callback on the resize event for
the dialog window and I came up with this half baked idea. It has some holes:
Richard, can you help me understand how this should be done correctly or why
this is a bad implementation:<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>1. I added the option onResize to the
dialog window:<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>$(</span></font><font size=2 color="#006600" face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:#006600'>"#dialog1"</span></font><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'>)</span></font><font size=2 color=blue
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:blue'>.</span></font><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>dialog({</span></font><font
size=2 face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> title</span></font><font size=2 color=blue face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:blue'>:</span></font><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'> </span></font><font size=2 color="#006600"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#006600'>'CNN Window'</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>,</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> width</span></font><font size=2 color=blue face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:blue'>:</span></font><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'> </span></font><font size=2 color="#ff0a0a"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#FF0A0A'>410</span></font><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>,</span></font><font
size=2 face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> height</span></font><font size=2 color=blue
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:blue'>:</span></font><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'> </span></font><font
size=2 color="#ff0a0a" face="Courier New"><span style='font-size:10.0pt;
font-family:"Courier New";color:#FF0A0A'>320</span></font><font size=2
color=black face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>,</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> <span style='background:yellow'>onResize</span></span></font><font
size=2 color=blue face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:blue;background:yellow'>:</span></font><font size=2
color=black face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black;background:yellow'> </span></font><font size=2 color=blue
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:blue;background:yellow'>function</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black;background:yellow'>(w,h){</span></font><font size=2
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
background:yellow'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black;background:yellow'> console</span></font><font size=2
color=blue face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:blue;background:yellow'>.</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black;background:yellow'>log(w </span></font><font size=2 color=blue
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:blue;background:yellow'>+</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black;background:yellow'> </span></font><font size=2 color="#006600"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#006600;background:yellow'>' , '</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black;background:yellow'> </span></font><font size=2 color=blue
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:blue;background:yellow'>+</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black;background:yellow'> h)</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";background:yellow'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black;background:yellow'> },</span></font><font size=2
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> resize</span></font><font size=2 color=blue
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:blue'>:true</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'> });</span></font><font
size=2 color=navy face=Arial><span style='font-size:10.0pt;font-family:Arial;
color:navy'>
</span></font><font color=navy><span style='color:navy'>
</span></font><font size=2 color=navy face=Arial><span style='font-size:10.0pt;
font-family:Arial;color:navy'>2. Added the default to the options map in
ui-dialog.js:</span></font><font color=navy><span style='color:navy'><o:p></o:p></span></font>
<p class=MsoNormal><font size=3 color=navy face="Times New Roman"><span
style='font-size:12.0pt;color:navy'><o:p> </o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><b><font size=2 color="#0000c8"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#0000C8;font-weight:bold'>var</span></font></b><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> options = {</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> width: 300,</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> height: 200,</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> position: </span></font><font size=2 color=green
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:green'>'center'</span></font><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>,</span></font><font
size=2 face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> buttons: [],</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> modal: </span></font><b><font size=2 color="#c86400"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#C86400;font-weight:bold'>false</span></font></b><font size=2
color=black face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>,</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> drag: </span></font><b><font size=2 color="#c86400"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#C86400;font-weight:bold'>true</span></font></b><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>,</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> resize: </span></font><b><font size=2 color="#c86400"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#C86400;font-weight:bold'>true</span></font></b><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>,</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> <span style='background:yellow'>onResize: </span></span></font><b><font
size=2 color="#0000c8" face="Courier New"><span style='font-size:10.0pt;
font-family:"Courier New";color:#0000C8;background:yellow;font-weight:bold'>function</span></font></b><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black;background:yellow'>(){},</span></font><font size=2
color=black face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> </span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> shadow: </span></font><b><font size=2 color="#c86400"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#C86400;font-weight:bold'>false</span></font></b><font size=2
color=black face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>, </span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>};</span></font><font
color=navy><span style='color:navy'>
</span></font><font size=2 color=navy face=Arial><span style='font-size:10.0pt;
font-family:Arial;color:navy'>3. Pass the onResize() function to the call to
resizable width ui-dialog.js:</span></font><font color=navy><span
style='color:navy'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>uiDialog.resizable(<span
style='background:yellow'>{onResize:options.onResize}</span>);<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color="#333399" face=Arial><span
style='font-size:10.0pt;font-family:Arial;color:#333399'>4. In ui-resizable.js,
at the very bottom of drag() just before the return statement I added:<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'><o:p> </o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p> </o:p></span></font>
<p class=MsoNormal><b><font size=2 color="#0000c8" face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:#0000C8;font-weight:
bold'>if</span></font></b><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'> (</span></font><b><font
size=2 color="#0000c8" face="Courier New"><span style='font-size:10.0pt;
font-family:"Courier New";color:#0000C8;font-weight:bold'>typeof</span></font></b><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'> </span></font><b><font size=2 color="#0000c8"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#0000C8;font-weight:bold'>this</span></font></b><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>.options.onResize == </span></font><font size=2 color=green
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:green'>'function'</span></font><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>){<o:p></o:p></span></font>
<p class=MsoNormal><b><font size=2 color="#0000c8" face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:#0000C8;font-weight:
bold'>this</span></font></b><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>.options.onResize(c[0].css(</span></font><font
size=2 color=green face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:green'>'width'</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>),c[0].css(</span></font><font size=2 color=green
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:green'>'height'</span></font><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>))}<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color="#333399" face=Arial><span
style='font-size:10.0pt;font-family:Arial;color:#333399'>This appears to be
working, however I was unable to define a default value for onResize() in the
options map within ui-resizable.js so that function must be defined or I get an
error (hence the typeof check). I don’t understand why the option I was
passing as an argument keeps getting overridden..<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color="#333399" face=Arial><span
style='font-size:10.0pt;font-family:Arial;color:#333399'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color="#333399" face=Arial><span
style='font-size:10.0pt;font-family:Arial;color:#333399'>So what is wrong with
this implementation (I’m sure it’s a hack…_)?<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color="#333399" face=Arial><span
style='font-size:10.0pt;font-family:Arial;color:#333399'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color="#333399" face=Arial><span
style='font-size:10.0pt;font-family:Arial;color:#333399'>BrookD<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>P.S <o:p></o:p></span></font>
</div>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<style>
<!--
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:Arial;
color:windowtext;}
@page Section1
{size:612.0pt 792.0pt;
margin:72.0pt 90.0pt 72.0pt 90.0pt;}
div.Section1
{page:Section1;}
-->
</style>
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>First off, I am new to jQuery and fairly
new to JS. I was looking at how I could get a callback on the resize event for
the dialog window and I came up with this half baked idea. It has some holes:
Richard, can you help me understand how this should be done correctly or why
this is a bad implementation:<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>1. I added the option onResize to the
dialog window:<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>$(</span></font><font size=2 color="#006600" face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:#006600'>"#dialog1"</span></font><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'>)</span></font><font size=2 color=blue
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:blue'>.</span></font><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>dialog({</span></font><font
size=2 face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> title</span></font><font size=2 color=blue face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:blue'>:</span></font><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'> </span></font><font size=2 color="#006600"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#006600'>'CNN Window'</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>,</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> width</span></font><font size=2 color=blue face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:blue'>:</span></font><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'> </span></font><font size=2 color="#ff0a0a"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#FF0A0A'>410</span></font><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>,</span></font><font
size=2 face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> height</span></font><font size=2 color=blue
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:blue'>:</span></font><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'> </span></font><font
size=2 color="#ff0a0a" face="Courier New"><span style='font-size:10.0pt;
font-family:"Courier New";color:#FF0A0A'>320</span></font><font size=2
color=black face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>,</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> <span style='background:yellow'>onResize</span></span></font><font
size=2 color=blue face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:blue;background:yellow'>:</span></font><font size=2
color=black face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black;background:yellow'> </span></font><font size=2 color=blue
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:blue;background:yellow'>function</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black;background:yellow'>(w,h){</span></font><font size=2
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
background:yellow'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black;background:yellow'> console</span></font><font size=2
color=blue face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:blue;background:yellow'>.</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black;background:yellow'>log(w </span></font><font size=2 color=blue
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:blue;background:yellow'>+</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black;background:yellow'> </span></font><font size=2 color="#006600"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#006600;background:yellow'>' , '</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black;background:yellow'> </span></font><font size=2 color=blue
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:blue;background:yellow'>+</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black;background:yellow'> h)</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";background:yellow'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black;background:yellow'> },</span></font><font size=2
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> resize</span></font><font size=2 color=blue
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:blue'>:true</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'> });</span></font><font
size=2 color=navy face=Arial><span style='font-size:10.0pt;font-family:Arial;
color:navy'>
</span></font><font color=navy><span style='color:navy'>
</span></font><font size=2 color=navy face=Arial><span style='font-size:10.0pt;
font-family:Arial;color:navy'>2. Added the default to the options map in
ui-dialog.js:</span></font><font color=navy><span style='color:navy'><o:p></o:p></span></font>
<p class=MsoNormal><font size=3 color=navy face="Times New Roman"><span
style='font-size:12.0pt;color:navy'><o:p> </o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><b><font size=2 color="#0000c8"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#0000C8;font-weight:bold'>var</span></font></b><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> options = {</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> width: 300,</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> height: 200,</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> position: </span></font><font size=2 color=green
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:green'>'center'</span></font><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>,</span></font><font
size=2 face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> buttons: [],</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> modal: </span></font><b><font size=2 color="#c86400"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#C86400;font-weight:bold'>false</span></font></b><font size=2
color=black face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>,</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> drag: </span></font><b><font size=2 color="#c86400"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#C86400;font-weight:bold'>true</span></font></b><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>,</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> resize: </span></font><b><font size=2 color="#c86400"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#C86400;font-weight:bold'>true</span></font></b><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>,</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> <span style='background:yellow'>onResize: </span></span></font><b><font
size=2 color="#0000c8" face="Courier New"><span style='font-size:10.0pt;
font-family:"Courier New";color:#0000C8;background:yellow;font-weight:bold'>function</span></font></b><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black;background:yellow'>(){},</span></font><font size=2
color=black face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> </span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> shadow: </span></font><b><font size=2 color="#c86400"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#C86400;font-weight:bold'>false</span></font></b><font size=2
color=black face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>, </span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>};</span></font><font
color=navy><span style='color:navy'>
</span></font><font size=2 color=navy face=Arial><span style='font-size:10.0pt;
font-family:Arial;color:navy'>3. Pass the onResize() function to the call to
resizable width ui-dialog.js:</span></font><font color=navy><span
style='color:navy'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>uiDialog.resizable(<span
style='background:yellow'>{onResize:options.onResize}</span>);<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color="#333399" face=Arial><span
style='font-size:10.0pt;font-family:Arial;color:#333399'>4. In ui-resizable.js,
at the very bottom of drag() just before the return statement I added:<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'><o:p> </o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p> </o:p></span></font>
<p class=MsoNormal><b><font size=2 color="#0000c8" face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:#0000C8;font-weight:
bold'>if</span></font></b><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'> (</span></font><b><font
size=2 color="#0000c8" face="Courier New"><span style='font-size:10.0pt;
font-family:"Courier New";color:#0000C8;font-weight:bold'>typeof</span></font></b><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'> </span></font><b><font size=2 color="#0000c8"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#0000C8;font-weight:bold'>this</span></font></b><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>.options.onResize == </span></font><font size=2 color=green
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:green'>'function'</span></font><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>){<o:p></o:p></span></font>
<p class=MsoNormal><b><font size=2 color="#0000c8" face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:#0000C8;font-weight:
bold'>this</span></font></b><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>.options.onResize(c[0].css(</span></font><font
size=2 color=green face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:green'>'width'</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>),c[0].css(</span></font><font size=2 color=green
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:green'>'height'</span></font><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>))}<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color="#333399" face=Arial><span
style='font-size:10.0pt;font-family:Arial;color:#333399'>This appears to be
working, however I was unable to define a default value for onResize() in the
options map within ui-resizable.js so that function must be defined or I get an
error (hence the typeof check). I don’t understand why the option I was
passing as an argument keeps getting overridden..<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color="#333399" face=Arial><span
style='font-size:10.0pt;font-family:Arial;color:#333399'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color="#333399" face=Arial><span
style='font-size:10.0pt;font-family:Arial;color:#333399'>So what is wrong with
this implementation (I’m sure it’s a hack…_)?<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color="#333399" face=Arial><span
style='font-size:10.0pt;font-family:Arial;color:#333399'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color="#333399" face=Arial><span
style='font-size:10.0pt;font-family:Arial;color:#333399'>BrookD<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>P.S <o:p></o:p></span></font>
</div>
Topic Participants
brook
Richard Worth