Page 1 of 1

Change JQuery dialog with Javascript

Posted: Fri May 22, 2020 8:01 am
by alex4orly
I have hidden Modal that loads on the startup of a page,

I am detecting the device screen size with this:

function ChangeSize()
{
var sheight = screen.height / 2;
alert(sheight);
$('#Dialog2').dialog("option", "height", sheight); // OR $('#Dialog2').dialog({height:sheight, width:'auto'});
}
I want to change the Dialog dimensions based on this and inserted the above into an the Dialog "Show" .

The alert() shows up, but the resizing is ignored

I must be doing it wrong???

Re: Change JQuery dialog with Javascript

Posted: Fri May 22, 2020 8:54 am
by Pablo
Did you set the mode of the Dialog to 'jQuery UI'?

Re: Change JQuery dialog with Javascript

Posted: Fri May 22, 2020 9:02 am
by alex4orly
I tried that and also Bootsrap

Should this work in Preview mode on my PC or must I first publish it?

Or what else should I try?

Thanks

Re: Change JQuery dialog with Javascript

Posted: Fri May 22, 2020 9:16 am
by Pablo
This code will not work with Bootstrap. It is only valid for jQuery UI.
It will also work in preview.

If there is an error in your code then the browser's debugger may be helpful (F12)

Re: Change JQuery dialog with Javascript

Posted: Fri May 22, 2020 9:32 am
by alex4orly
I checked in DEbug / F12 - there is no error.

It is set to JQuery and I set an evan on the dialog itself
Open, run javascript ChangeSize();

Maybe, triggering the open event is too late?

Thaks

Re: Change JQuery dialog with Javascript

Posted: Fri May 22, 2020 9:51 am
by alex4orly
OK, I moved the call to that function from the Dialog object to the html page.

THis works
$('#Dialog2').dialog("option", "height", sheight);

But, inside that dialog, I have an iFrame which also needs to be reduced
And, it doesn't work
$('#Extension3').dialog("option", "height", sheight );
The iFrame now hangs outside the bottom of the dialog

I tried reversing the order, it doesn't work

Re: Change JQuery dialog with Javascript

Posted: Fri May 22, 2020 10:27 am
by Pablo
You cannot resize an inline frame with this code.
This code is only to set the size of the Dialog itself.

This may work:
https://api.jquery.com/width/

Re: Change JQuery dialog with Javascript

Posted: Sat May 23, 2020 2:39 am
by alex4orly
Hello again,

I followed the link, read the instructions, but I don't see from this how to implement it in my case.

My site is here : https://squadron-125.org.il/home2.php It works OK on my Windows PC, on iPad in Portrait mode, on Android Tablet and Phone in Portrait mode.

BUT - on either Android or Apple devices, in Landscape mode - that Dialog Popup on the home page and others I am using (JQuery), in Landscape mode, being centered mid screen vertically, the bottom half of that dialog is down below the screen line on both Mobile phone (Apple , Android) and what I want do do is at the point of detecting view mode dimensions, shorten the Dialog / iFrame height through the script.

My Dialogs are ID=Dialog1, the iFrame is ID=iFrame1 or ID=Extension1 ....

ANd, not clear what script should I use to reduce that iFrame height

Thanks again

Re: Change JQuery dialog with Javascript

Posted: Sat May 23, 2020 6:38 am
by Pablo
I'm sorry, but I cannot help you with custom code, because for me it may alsi take a lot of time to make this work.
With the link, I was trying to point you in the right direction.

Also note that on some mobile browsers, scrollbars in inline frame are not supported. These browsers will display the complete frame regardless of the specified size.

Re: Change JQuery dialog with Javascript

Posted: Sat May 23, 2020 6:41 am
by alex4orly
I understand

Thanks