Loading ...
Sorry, an error occurred while loading the content.

Re: Dialog Question

Expand Messages
  • Andrew Myers
    Hi All, I have made some excellent progress and hopefully will be able to show it to you when I have it in a production environment. I m currently using 3
    Message 1 of 10 , Jan 2, 2008
    View Source
    • 0 Attachment
      Hi All,

      I have made some excellent progress and hopefully will be able to show
      it to you when I have it in a production environment.

      I'm currently using 3 dialogs - a login dialog, "wait" dialog and a
      confirmation dialog. The dialogs are defined in the HTML source as
      follows:

      <div class=" ">
      <div id="loginDialog">
      <div class="hd">Please log in to continue</div>
      <div class="bd">
      <div id="loginError"></div>
      <form method="POST" action="/blackbook/index.cfm?event=loginUser">
      <label for="username">Username:</label><input type="textbox"
      name="username" /><br/>
      <label for="password">Password:</label><input type="password"
      name="password" />
      <input type="hidden" name="horseName" value="" id="hdHorseName">
      </form>
      <div class="instructionalText"><a
      href="/tradingring/forgot_password.cfm" target="_top">Forgotten your
      password?</a></div>
      <div class="instructionalText"><a href="/tradingring/register.cfm"
      target="_top">Register Now</a></div>
      </div>
      </div>

      <div id="confirmDialog">
      <div class="hd">Horse Added</div>
      <div class="bd" id="horseAddedDialogBody">
      The horse was added
      </div>
      </div>

      <div id="waitDialog">
      <div class="hd">Loading...</div>
      <div class="bd">
      <div class="waitIndicator" style="padding-left: 100px;
      padding-top: 17px"><img src="images/ajax-loader.gif" width="66"
      height="66"></div>
      </div>
      </div>

      In my callbacks I swap between them as follows:

      YAHOO.example.container.waitDialog.hide();
      YAHOO.example.container.loginDialog.show();

      However there is a very brief period between the show and hide which
      causes the screen to "flicker" (for want of a better word).

      Can you reuse the one dialog and swap the content easily, or is this
      the best option?

      Many thanks,
      Andrew.
    • kc_6800
      Hi everyone, I am trying to show a dialog when the user clicks a button. I am using YUI 2.3.0. The problem is that the dialog stretches to the entire width of
      Message 2 of 10 , Feb 5, 2008
      View Source
      • 0 Attachment
        Hi everyone,

        I am trying to show a dialog when the user clicks a button. I am using
        YUI 2.3.0. The problem is that the dialog stretches to the entire
        width of the screen by default (in IE 7.0).

        I am trying to get away without specifying an exact width for the
        dialog because I might change the text that is displayed in the dialog
        in the future and that might involve me having to re-adjust the width
        at that time.

        Is there a simple setting for invoking the Dialog that would ensure
        that the width is automatically set based on the text that is being
        displayed?

        Here's my source code. Thanks.

        <html>
        <head>
        <title>Dialog Test</title>

        <!-- YAHOO Global Object source file -->
        <script type="text/javascript"
        src="./yui/build/yahoo/yahoo-min.js" ></script>

        <!-- Source File -->
        <link rel="stylesheet" type="text/css"
        href="./yui/build/reset-fonts-grids/reset-fonts-grids.css"/>

        <!-- ************************* YAHOO Connection Manager
        ****************************** -->
        <!-- Used for Custom Events and event listener bindings -->
        <script type="text/javascript"
        src="./yui/build/event/event-min.js"></script>

        <!-- Source file -->
        <script type="text/javascript"
        src="./yui/build/connection/connection-min.js"></script>
        <!-- ************************* End of YAHOO Connection Manager
        ****************************** -->

        <!-- ************************* Dialog
        ****************************** -->
        <!-- CSS -->
        <link rel="stylesheet" type="text/css"
        href="./yui/build/container/assets/skins/sam/container.css">

        <!-- Dependencies -->
        <script type="text/javascript"
        src="./yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>

        <!-- OPTIONAL: Connection (not required if not using
        Dialog/SimpleDialog) -->
        <script type="text/javascript"
        src="./yui/build/connection/connection-min.js"></script>

        <!-- OPTIONAL: Animation (not required if not enabling animation) -->
        <script type="text/javascript"
        src="./yui/build/animation/animation-min.js"></script>

        <!-- Source file -->
        <script type="text/javascript"
        src="./yui/build/container/container-min.js"></script>

        <!-- ************************* End of Dialog
        ****************************** -->

        <script language="Javascript" TYPE="text/javascript">
        function showDialog()
        {
        document.getElementById('testSection').style.display = "block";
        var oWaitDialog = new YAHOO.widget.Dialog("waitDialog",
        {
        fixedcenter : true,
        visible : true,
        constraintoviewport : true,
        close: true,
        draggable : false
        }
        );
        oWaitDialog.render();
        }
        </script>
        </head>
        <body class="yui-skin-sam">
        <input type='button' value='Show Dialog'
        onClick='showDialog();'></input>

        <div id="testSection" style='display: none;'>
        <div id="waitDialog">
        <div class="hd"><div>Loading...</div></div>
        <div class="bd">
        <div>
        Loading the Dialog
        </div>
        </div>
        </div>
        </div>

        </body>
        </html>
      • sania
        ... using ... dialog ... width ... animation) -- ... = block ;
        Message 3 of 10 , Feb 5, 2008
        View Source
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, "kc_6800"
          <karthikchandrasekhar@...> wrote:
          >
          > Hi everyone,
          >
          > I am trying to show a dialog when the user clicks a button. I am
          using
          > YUI 2.3.0. The problem is that the dialog stretches to the entire
          > width of the screen by default (in IE 7.0).
          >
          > I am trying to get away without specifying an exact width for the
          > dialog because I might change the text that is displayed in the
          dialog
          > in the future and that might involve me having to re-adjust the
          width
          > at that time.
          >
          > Is there a simple setting for invoking the Dialog that would ensure
          > that the width is automatically set based on the text that is being
          > displayed?
          >
          > Here's my source code. Thanks.
          >
          > <html>
          > <head>
          > <title>Dialog Test</title>
          >
          > <!-- YAHOO Global Object source file -->
          > <script type="text/javascript"
          > src="./yui/build/yahoo/yahoo-min.js" ></script>
          >
          > <!-- Source File -->
          > <link rel="stylesheet" type="text/css"
          > href="./yui/build/reset-fonts-grids/reset-fonts-grids.css"/>
          >
          > <!-- ************************* YAHOO Connection Manager
          > ****************************** -->
          > <!-- Used for Custom Events and event listener bindings -->
          > <script type="text/javascript"
          > src="./yui/build/event/event-min.js"></script>
          >
          > <!-- Source file -->
          > <script type="text/javascript"
          > src="./yui/build/connection/connection-min.js"></script>
          > <!-- ************************* End of YAHOO Connection Manager
          > ****************************** -->
          >
          > <!-- ************************* Dialog
          > ****************************** -->
          > <!-- CSS -->
          > <link rel="stylesheet" type="text/css"
          > href="./yui/build/container/assets/skins/sam/container.css">
          >
          > <!-- Dependencies -->
          > <script type="text/javascript"
          > src="./yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
          >
          > <!-- OPTIONAL: Connection (not required if not using
          > Dialog/SimpleDialog) -->
          > <script type="text/javascript"
          > src="./yui/build/connection/connection-min.js"></script>
          >
          > <!-- OPTIONAL: Animation (not required if not enabling
          animation) -->
          > <script type="text/javascript"
          > src="./yui/build/animation/animation-min.js"></script>
          >
          > <!-- Source file -->
          > <script type="text/javascript"
          > src="./yui/build/container/container-min.js"></script>
          >
          > <!-- ************************* End of Dialog
          > ****************************** -->
          >
          > <script language="Javascript" TYPE="text/javascript">
          > function showDialog()
          > {
          > document.getElementById('testSection').style.display
          = "block";
          > var oWaitDialog = new YAHOO.widget.Dialog("waitDialog",
          > {
          > fixedcenter : true,
          > visible : true,
          > constraintoviewport : true,
          > close: true,
          > draggable : false
          > }
          > );
          > oWaitDialog.render();
          > }
          > </script>
          > </head>
          > <body class="yui-skin-sam">
          > <input type='button' value='Show Dialog'
          > onClick='showDialog();'></input>
          >
          > <div id="testSection" style='display: none;'>
          > <div id="waitDialog">
          > <div class="hd"><div>Loading...</div></div>
          > <div class="bd">
          > <div>
          > Loading the Dialog
          > </div>
          > </div>
          > </div>
          > </div>
          >
          > </body>
          > </html>
          >
        • Saqib
          Hi usually the dialog doesn t take th width of full screen but only the width of the content which is provided to be shown. Anyways try specifying the width of
          Message 4 of 10 , Feb 5, 2008
          View Source
          • 0 Attachment
            Hi
            usually the dialog doesn't take th width of full screen but only the width of the content which is provided to be shown. Anyways try specifying the width of the dialog. i am sure it will work.

            Regards
            Saqib

            On Feb 5, 2008 7:56 PM, sania <djogja_00@...> wrote:

            --- In ydn-javascript@yahoogroups.com, "kc_6800"
            <karthikchandrasekhar@...> wrote:
            >
            > Hi everyone,
            >
            > I am trying to show a dialog when the user clicks a button. I am
            using
            > YUI 2.3.0. The problem is that the dialog stretches to the entire
            > width of the screen by default (in IE 7.0).
            >
            > I am trying to get away without specifying an exact width for the
            > dialog because I might change the text that is displayed in the
            dialog
            > in the future and that might involve me having to re-adjust the
            width
            > at that time.
            >
            > Is there a simple setting for invoking the Dialog that would ensure
            > that the width is automatically set based on the text that is being
            > displayed?
            >
            > Here's my source code. Thanks.
            >
            > <html>
            > <head>
            > <title>Dialog Test</title>
            >
            > <!-- YAHOO Global Object source file -->
            > <script type="text/javascript"
            > src="./yui/build/yahoo/yahoo-min.js" ></script>
            >
            > <!-- Source File -->
            > <link rel="stylesheet" type="text/css"
            > href="./yui/build/reset-fonts-grids/reset-fonts-grids.css"/>
            >
            > <!-- ************************* YAHOO Connection Manager
            > ****************************** -->
            > <!-- Used for Custom Events and event listener bindings -->
            > <script type="text/javascript"
            > src="./yui/build/event/event-min.js"></script>
            >
            > <!-- Source file -->
            > <script type="text/javascript"
            > src="./yui/build/connection/connection-min.js"></script>
            > <!-- ************************* End of YAHOO Connection Manager
            > ****************************** -->
            >
            > <!-- ************************* Dialog
            > ****************************** -->
            > <!-- CSS -->
            > <link rel="stylesheet" type="text/css"
            > href="./yui/build/container/assets/skins/sam/container.css">
            >
            > <!-- Dependencies -->
            > <script type="text/javascript"
            > src="./yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
            >
            > <!-- OPTIONAL: Connection (not required if not using
            > Dialog/SimpleDialog) -->
            > <script type="text/javascript"
            > src="./yui/build/connection/connection-min.js"></script>
            >
            > <!-- OPTIONAL: Animation (not required if not enabling
            animation) -->
            > <script type="text/javascript"
            > src="./yui/build/animation/animation-min.js"></script>
            >
            > <!-- Source file -->
            > <script type="text/javascript"
            > src="./yui/build/container/container-min.js"></script>
            >
            > <!-- ************************* End of Dialog
            > ****************************** -->
            >
            > <script language="Javascript" TYPE="text/javascript">
            > function showDialog()
            > {
            > document.getElementById('testSection').style.display
            = "block";
            > var oWaitDialog = new YAHOO.widget.Dialog("waitDialog",
            > {
            > fixedcenter : true,
            > visible : true,
            > constraintoviewport : true,
            > close: true,
            > draggable : false
            > }
            > );
            > oWaitDialog.render();
            > }
            > </script>
            > </head>
            > <body class="yui-skin-sam">
            > <input type='button' value='Show Dialog'
            > onClick='showDialog();'></input>
            >
            > <div id="testSection" style='display: none;'>
            > <div id="waitDialog">
            > <div class="hd"><div>Loading...</div></div>
            > <div class="bd">
            > <div>
            > Loading the Dialog
            > </div>
            > </div>
            > </div>
            > </div>
            >
            > </body>
            > </html>
            >


          Your message has been successfully submitted and would be delivered to recipients shortly.