Change JQuery dialog with Javascript

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
User avatar
alex4orly
 
 
Posts: 934
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Change JQuery dialog with Javascript

Post by alex4orly » Fri May 22, 2020 8:01 am

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???

User avatar
Pablo
 
Posts: 20562
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Change JQuery dialog with Javascript

Post by Pablo » Fri May 22, 2020 8:54 am

Did you set the mode of the Dialog to 'jQuery UI'?

User avatar
alex4orly
 
 
Posts: 934
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Change JQuery dialog with Javascript

Post by alex4orly » Fri May 22, 2020 9:02 am

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

User avatar
Pablo
 
Posts: 20562
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Change JQuery dialog with Javascript

Post by Pablo » Fri May 22, 2020 9:16 am

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)

User avatar
alex4orly
 
 
Posts: 934
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Change JQuery dialog with Javascript

Post by alex4orly » Fri May 22, 2020 9:32 am

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

User avatar
alex4orly
 
 
Posts: 934
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Change JQuery dialog with Javascript

Post by alex4orly » Fri May 22, 2020 9:51 am

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

User avatar
Pablo
 
Posts: 20562
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Change JQuery dialog with Javascript

Post by Pablo » Fri May 22, 2020 10:27 am

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/

User avatar
alex4orly
 
 
Posts: 934
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Change JQuery dialog with Javascript

Post by alex4orly » Sat May 23, 2020 2:39 am

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

User avatar
Pablo
 
Posts: 20562
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Change JQuery dialog with Javascript

Post by Pablo » Sat May 23, 2020 6:38 am

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.

User avatar
alex4orly
 
 
Posts: 934
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Change JQuery dialog with Javascript

Post by alex4orly » Sat May 23, 2020 6:41 am

I understand

Thanks

Post Reply