title: Dynamically change the size of a javascript/jquery dialog box to the size of an image
body: <p>I have a javascript/jquery question.</p>
  
  <p>I have a custom jquery dialog box setup in my project. I set this up with a div and an image tag. The image is populated with a filedownload link.</p>
  
  <pre><code>&lt;'custom jquery dialog'  runat="server" ID="dialogView" AutoOpen="false"   CloseOnEscape="true" Modal="true" Title="" Visible="true" &gt;
      &lt;div runat="sever" id="imageContainer"&gt;
          &lt;img src="" alt="Image" runat="server" id="theImage" /&gt;
      &lt;/div&gt;
  &lt;/'custom jquery dialog'&gt;
  </code></pre>
  
  <p>That is the setup for the box itself. Here is the javascript I have to populate the box with the image depending on the link sent from a class</p>
  
  <pre><code>function viewImage(link){
      $('#&lt;%= this.theImage.ClientID %&gt;').attr('src', link);\
      showDialog(&lt;%= this.dialogView.ClientID %&gt;);
  }
  </code></pre>
  
  <p>This works fine and shows the dialog box with the image in it. However, I really want to be able to size this dialog box/div. How can I change this according to the size of the image? I tried this</p>
  
  <pre><code>function changeSize(){
      var imageHeight = $('#&lt;%= this.theImage.ClientID %&gt;').height;
      var imageWidth = $('#&lt;%= this.theImage.ClientID %&gt;').width;
      $('#&lt;%= this.dialogView.ClientID %&gt;').height = imageHeight;
      $('#&lt;%= this.dialogView.ClientID %&gt;').width = imageWidth;
      $('#&lt;%= this.imageContainer.ClientID %&gt;').height = imageHeight;
      $('#&lt;%= this.imageContainer.ClientID %&gt;').width = imagewidth;
  }
  </code></pre>
  
  <p>The above function, when implemented, was added before the showDialog call in the viewImage function. This does not work correctly. Am I missing something?</p>