Dynamically change the size of a javascript/jquery dialog box to the size of an image

Question

I have a javascript/jquery question.

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.

<'custom jquery dialog'  runat="server" ID="dialogView" AutoOpen="false"   CloseOnEscape="true" Modal="true" Title="" Visible="true" >
    <div runat="sever" id="imageContainer">
        <img src="" alt="Image" runat="server" id="theImage" />
    </div>
</'custom jquery dialog'>

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

function viewImage(link){
    $('#<%= this.theImage.ClientID %>').attr('src', link);\
    showDialog(<%= this.dialogView.ClientID %>);
}

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

function changeSize(){
    var imageHeight = $('#<%= this.theImage.ClientID %>').height;
    var imageWidth = $('#<%= this.theImage.ClientID %>').width;
    $('#<%= this.dialogView.ClientID %>').height = imageHeight;
    $('#<%= this.dialogView.ClientID %>').width = imageWidth;
    $('#<%= this.imageContainer.ClientID %>').height = imageHeight;
    $('#<%= this.imageContainer.ClientID %>').width = imagewidth;
}

The above function, when implemented, was added before the showDialog call in the viewImage function. This does not work correctly. Am I missing something?

Is your changeSize() function in an external javascript file? (Not inline on the page or in the header) — Adrian, Oct 25 '10 at 17:23
it is in the same page. the function is directly located below the viewImage function — Tom, Oct 25 '10 at 17:24
Check out this stackoverflow post it seems the issue is somewhat related: http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome — Adrian, Oct 25 '10 at 17:29

score 1 · Answer 1 · answered Oct 25 '10 at 17:34

I am not a ASP.NET guy but jQuery has width() and height() methods not properties like you are using in your code. You may try this:

function changeSize(){
    var imageHeight = $('#<%= this.theImage.ClientID %>').height();
    var imageWidth = $('#<%= this.theImage.ClientID %>').width();
    $('#<%= this.dialogView.ClientID %>').height(imageHeight);
    $('#<%= this.dialogView.ClientID %>').width(imageWidth);
    $('#<%= this.imageContainer.ClientID %>').height(imageHeight);
    $('#<%= this.imageContainer.ClientID %>').width(imagewidth);
}

Dynamically change the size of a javascript/jquery dialog box to the size of an image

1 Answers1