Welcome Guest Search | Active Topics | Sign In | Register

Just curiuos as to why it takes so long to render Dialog in Chrome Options
Darrell Reinke
Posted: Monday, January 7, 2013 5:06:51 PM
Rank: Advanced Member
Groups: Member

Joined: 7/18/2008
Posts: 76
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()


eo_support
Posted: Monday, January 7, 2013 5:42:54 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 23,159
Hi,

You are one of the hardcore customers out there. :) The reason that you need a setTimeout for Chrome is because in one of the early Safari versions, its layout engine will become corrupt if we try to initialize the dialog (we modify the DOM trees when we initialize the dialog) before the full page has been fully loaded. To avoid this problem, our code specifically detects Safari and delay dialog initialization until the page has been loaded. Since Safari and Chrome are based on the same WebKit rendering engine, so the code applies to Chrome as well. The initial problem may have already been fixed in WebKit, however to be safe the code is still left there.

One way to ensure you always call resize after the dialog has been loaded is to handle the dialog's ClientSideOnLoad event. You can then call your resizing code inside that event.

Thanks!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.