Change JQuery dialog with Javascript
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
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
Change JQuery dialog with Javascript
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???
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
Did you set the mode of the Dialog to 'jQuery UI'?
Re: Change JQuery dialog with Javascript
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
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
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)
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
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
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
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
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
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/
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
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
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
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.
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
I understand
Thanks
Thanks