Response title
This is preview!
Hi, I recently took over a PHP/jQuery-based project in a company, and I am modifying existing jQUery modules that require to get an image/video dimensions, and then resize a jQuery .dialog height/width based on image/video dimensions.
I have this code snippet from the .js file that modifies .dialog:
var dlg_QnaPreview = "dlg_QnaPreview";
...
$(dlg_QnaPreview).dialog(
{
autoResize: true,
width: auto,
height: auto,
modal: false,
title: 'Media Preview',
position: ['top', 'center']
});
However, when I run this .js file to trigger "#dlg_QnaPreview".dialog(), the dialog does open but does not automatically resize width/height according to the image/video. Instead, scrollbars are seen across the width and height of the dialog box, which is not what I desired.
However, if I were to write something like this:
$(dlg_QnaPreview).dialog(
{
width: 600,
height: 600,
//rest of code is came from here onwards
});
The dialog dimensions does change according to these fixed values. I find this puzzling, as I already consulted various links and questions found on StackOverflow asking similar questions, and almost all of them at least points to these solutions:
1. Set the width to auto, or use autoResize: true
2. Using naturalHeight and naturalWidth of img element
3. Changing the order of the width/height/autoResize properties declarations
In my case, none of these worked as (1.) showed scrollbars and the media element is not visible until resized, and (2.) cannot grab the img element, meaning that it would return "undefined"; (3.) does not change the behaviour, thus showing scrollbars just like in (1.)
I am not sure what things I am missing here. It does sound like I am pretty much at wits' end now... What is causing the width and height properties to not be captured correctly? Anyone with insights, I appreciate your inputs so that I can probe into this further and solve it, thanks!
1