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

RE: [ydn-javascript] Re: Textbox Focus Issue with Modal Panels (w/ Code Example)

Expand Messages
  • Satyen Desai
    Hi, See if the following thread helps: http://tech.groups.yahoo.com/group/ydn-javascript/message/31859 It has a link to the following example, which shows how
    Message 1 of 6 , Jul 1, 2008
    View Source
    • 0 Attachment
      Hi,
      See if the following thread helps:
      http://tech.groups.yahoo.com/group/ydn-javascript/message/31859

      It has a link to the following example, which shows how you can handle modality when nesting modal containers...
      http://yuiblog.com/sandbox/yui/v252/examples/container/nestedModalityJS.html

      I just updated the example slightly, so that select boxes lying outside of either container are handled correctly in IE6 [ which wasn't the case when I posted the example for the above thread ]

      Regards,
      Satyen

      ________________________________________
      From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Mike Butler
      Sent: Thursday, June 26, 2008 10:12 AM
      To: ydn-javascript@yahoogroups.com
      Subject: [ydn-javascript] Re: Textbox Focus Issue with Modal Panels (w/ Code Example)

      Thanks for the heads-up, but I believe this is actually a different
      issue altogether. It's not that the second modal Panel's textbox is
      simply lacking a caret, the problem is that you can't even type in
      the textbox at all. The first modal Panel also has a textbox inside
      of it that works perfectly, caret and all.

      I did try the suggested fix in what you referred me to and it doesn't
      change the behavior of the second Panel's textbox at all.

      If you could please try running my code example, I'm sure you'd see
      exactly what the problem is for yourself.

      Thank you!

      --- In ydn-javascript@yahoogroups.com, "Steve" <kelsey69@...> wrote:
      >
      > Search for "Text input/Textarea caret not displayed in Firefox"
      >
      > on http://developer.yahoo.com/yui/container/
      >
      >
      >
      >
      > --- In ydn-javascript@yahoogroups.com, "Mike Butler" <madpony@>
      > wrote:
      > >
      > > Hi,
      > >
      > > I am new to the YUI and have really been enjoying its wealth of
      > > functionality. However, I have run into an issue with version
      > 2.5.2
      > > that prevents textbox input controls from holding focus in modal
      > > Panels.
      > >
      > > The problem occurs when I open a modal Panel containing a textbox
      > on
      > > top of another modal Panel. At first I thought that this issue
      > > would be resolved by registering both Panels to an
      OverlayManager,
      > > but that doesn't seem to help.
      > >
      > > Below is my page code that demonstrates this problem. Have I
      > > uncovered a bug? Or am I just doing something wrong? Any help
      > > would be greatly appreciated!
      > >
      > > <html>
      > > <head>
      > > <title>Textbox Focus Issue</title>
      > > </head>
      > > <body class="yui-skin-pgo">
      > > <link type="text/css" rel="stylesheet"
      > > href="/script/yui/build/container/assets/container.css" />
      > >
      > > <script type="text/javascript" src="/script/yui/build/yahoo-
      dom-
      > > event/yahoo-dom-event.js"></script>
      > > <script type="text/javascript"
      > > src="/script/yui/build/dragdrop/dragdrop-min.js"></script>
      > > <script type="text/javascript"
      > > src="/script/yui/build/container/container-min.js"></script>
      > >
      > > <script type="text/javascript">
      > > var overlay1;
      > > var overlay2;
      > > var manager;
      > >
      > > YAHOO.util.Event.onDOMReady(function() {
      > > overlay1 = new YAHOO.widget.Panel("Overlay1", {
      > > width: "400px",
      > > constraintoviewport: true,
      > > modal: true,
      > > close: true,
      > > visible: false,
      > > draggable: true,
      > > fixedcenter: true
      > > });
      > > overlay2 = new YAHOO.widget.Panel("Overlay2", {
      > > width: "400px",
      > > constraintoviewport: true,
      > > modal: true,
      > > close: true,
      > > visible: false,
      > > draggable: true,
      > > fixedcenter: true
      > > });
      > >
      > > overlay1.render();
      > > overlay2.render();
      > >
      > > manager = new YAHOO.widget.OverlayManager();
      > > manager.register([overlay1, overlay2]);
      > > });
      > >
      > > </script>
      > >
      > > <div>
      > > <input type="button" onclick="overlay1.show();"
      value="Open
      > > 1" />
      > > </div>
      > >
      > > <div id="Overlay1">
      > > <div class="hd">
      > > Overlay 1
      > > </div>
      > > <div class="bd">
      > > You Can Type Here: <input type="text" /><p />
      > > <input type="button" onclick="overlay2.show();"
      > > value="Open 2" />
      > > </div>
      > > <div class="ft">
      > > </div>
      > > </div>
      > > <div id="Overlay2">
      > > <div class="hd">
      > > Overlay 2
      > > </div>
      > > <div class="bd">
      > > But You Can't Type Here: <input type="text" />
      > > </div>
      > > <div class="ft">
      > > </div>
      > > </div>
      > > </body>
      > > </html>
      > >
      > > -----
      > >
      > >
      > > Mike Butler
      > >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.