Good Afternoon,
Below is a sample of code that I hope will help others in the future as far as it pertains to the resize capabilites of different web browsers. I have tested this in IE, FireFox and Google Chrome. My question pertains to Google Chrome Browsers.
If you look at the following javascript statement you will notice that I had to set a timeout for the script in order for it to execute successfully on the Chrome browser, it is not necessary to have the "setTimeout" defined in order for it to render correctly in the other browsers mentioned above.
I am curious as to why it takes so long (I have to set the timeout to 30 milliseconds in order for the resize function) to execute successfully on the Chrome browser? If the answer is "that is just the way it is becuause of how Chrome renders the DOM objects", I understand. I was just hoping you could provide more insight into why Chrome is the only browser that requires settting the "setTimeout" in order for the resize event to work. From my testing, this has not been an issue with the other browsers.
Thank you for your time.
Code: JavaScript
setTimeout(function () {
var dlgPCN = eo_GetObject("<%=dlgPCN.ClientID %>");
dlgPCN.resize(iWidth, iHeight);
}, 30);
I am using the latest version of EO Objects.
Samle HTML:
Code: HTML/ASPX
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!DOCTYPE html />
<html>
<head runat="server">
<title></title>
<style type="text/css">
html, body {margin: 0; padding: 0; font-family: Tahoma; font-size: 9pt;}
</style>
<script type="text/javascript">
function errorMsg(asError, asValue) {
var sAlert = "";
sAlert = "There was an problem with " + asValue + ").<br />";
sAlert += "Error Description: " + asError + "<br /><br />";
sAlert += "Click OK to continue.<br /><br />";
eo_MsgBox("msgAttention", //ClientID of the MsgBox control
"<span style='font-weight:bold;color:white;'>ATTENTION! An ERROR has occured</span>", //Message box title
sAlert, //Message box text
"", //No message box icon
[{ Text: " OK "}] //Providing an array of buttons
);
} //End errorMsg(asError, asValue);
function resizeDlg() {
try {
var iWidth = 975;
var iHeight = viewPort().height - 50;
if (parseInt(viewPort().width) < parseInt(iWidth)) { iWidth = (viewPort().width - 5); }
setTimeout(function () {
var dlgPCN = eo_GetObject("<%=dlgPCN.ClientID %>");
dlgPCN.resize(iWidth, iHeight);
}, 30);
}
catch (errorObject) {
var sFunction = "resizeDlg()";
errorMsg(errorObject.description, sFunction);
return false;
}
} //End function resizeDlg() {
function viewPort() {
//Get ViewPort Size of Browser Window
var h = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
var w = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
return { width: w, height: h }
}
</script>
</head>
<body>
<form id="frmTest" runat="server">
<div>
TEST DIALOG RESIZE ON INITIAL LOAD. SPECIAL ATTENTION is needed for this to work in Google Chrome.
</div>
<eo:Dialog ID="dlgPCN" runat="server" AllowResize="True" BorderColor="#335C88" BorderStyle="Solid" BorderWidth="1px" CloseButtonUrl="00070101" ControlSkinID="None"
MinimizeButtonUrl="" ResizeImageUrl="00020014" RestoreButtonUrl="00070103" ShadowColor="Gray" ShadowDepth="8" AnchorElementID="" EnableKeyboardNavigation="True" HorizontalAlign="Center"
IsModal="False" MinHeight="350" MinWidth="350" ClientSideOnLoad="resizeDlg" HeaderHtml="'width:85%;text-align:center;color:white;'>Caption Info Goes Here</span>">
<FooterTemplate>
<div style="text-align: center; padding-top: 3px;">
<asp:Label ID="lblFooter" runat="server" Text="Footer Text goes here."></asp:Label>
</div>
</FooterTemplate>
<HeaderStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 9pt; background-image: url(00070104); padding-bottom: 3px; padding-top: 3px; font-family: tahoma" />
<ContentTemplate>
Content for Dialog goes here
</ContentTemplate>
<ContentStyleActive CssText="border-top: #335c88 1px solid; background-color: white" />
<FooterStyleActive CssText="background-color: #e5f1fd; padding-bottom: 8px;" />
</eo:Dialog>
<eo:MsgBox ID="msgAttention" runat="server" AllowResize="True" BorderColor="#335C88" BorderStyle="Solid" BorderWidth="1px" CloseButtonUrl="00070101" ControlSkinID="None" HeaderHtml="Active Transfer exists -- Please Read."
MinimizeButtonUrl="00070102" ResizeImageUrl="00020014" RestoreButtonUrl="00070103" ShadowColor="LightGray" ShadowDepth="3" Width="450px">
<MsgBoxButtonStyle CssText="font-family:Tahoma;font-size:9pt;" />
<HeaderStyleActive CssText="background-image:url(00070104);font-family:tahoma;font-size:9pt;padding-bottom:3px;padding-left:4px;padding-right:4px;padding-top:3px;" />
<ContentStyleActive CssText="border-top: #335c88 1px solid; background-color: #e5f1fd" />
<FooterStyleActive CssText="background-color: #e5f1fd; padding-bottom: 8px;" />
</eo:MsgBox>
</form>
</body>
</html>
.NET code
Code: Visual Basic.NET
If Not IsPostBack Then dlgPCN.Show()