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

Re: Modal Panels and mask divs

Expand Messages
  • Ramesh Natarajan
    Hi Stevan, I earlier had problems reusing panels. Whenever I changed the header or body, it was not displaying the new data. After exploring the groups and
    Message 1 of 6 , May 26, 2006
    • 0 Attachment
      Hi Stevan,

      I earlier had problems reusing panels. Whenever I changed the
      header or body, it was not displaying the new data. After exploring
      the groups and documentation, I tried re-rendering the panel when
      I change the header/body/footer and it started working..
      So there should be no reason why I shouldn't reuse the panel.
      Thanks for the advise.

      thanks
      Ramesh

      --- In ydn-javascript@yahoogroups.com, "Steven Peterson"
      <peterson@...> wrote:
      >
      > Ramesh,
      >
      >
      >
      > Is there a reason that you need to destroy the Panel instead of
      reusing it?
      > The overhead of destroying the Panel and recreating it is certainly
      greater
      > than reusing it (and modifying the content if necessary). I agree
      that the
      > mask, as a supplemental element, should be destroyed as well. I will log
      > this issue. However, I also want to make sure that you're using the
      existing
      > Panel if possible. If you still decide that you don't want to reuse the
      > Panel, and you want to destroy the mask when you destroy the Panel, I
      > recommend adding this code to your source:
      >
      >
      >
      > YAHOO.widget.Panel.prototype.destroy = function() {
      >
      > if (this.mask) {
      >
      > this.mask.parentNode.removeChild(this.mask);
      >
      > }
      >
      >
      >
      > this.mask = null;
      >
      >
      >
      > this.superclass.destroy.call(this);
      >
      > };
      >
      >
      >
      > Steven Peterson
      >
      > Web Developer, Platform Engineering
      >
      > Yahoo!
      >
      > From: ydn-javascript@yahoogroups.com
      [mailto:ydn-javascript@yahoogroups.com]
      > On Behalf Of Ramesh Natarajan
      > Sent: Thursday, May 25, 2006 3:37 PM
      > To: ydn-javascript@yahoogroups.com
      > Subject: [ydn-javascript] Re: Modal Panels and mask divs
      >
      >
      >
      > Thanks for the detailed response. I understand why it was designed
      > this way and I agree with the rationale behind the decision.
      > The problem I am facing with the existing behavior is that it is
      > creating multiple of these mask divs if I open and close a modal panel.
      >
      > Assuming I have a panel with id ContextWindow, when I first
      > launch the panel, I see a div inserted as ContextWindow_mask.
      > When I destroy the panel, the inserted div is not removed
      > from the document.body. So when I again open the same
      > panel with id ContextWindow, I see a new div getting inserted as
      > ContextWindow_mask. The current code does not remove the
      > ContextWindow_mask when the panel is destroyed.
      >
      > --- In ydn-javascript@yahoogroups.com, "Steven Peterson"
      > <peterson@> wrote:
      > >
      > > Ramesh,
      > >
      > >
      > >
      > > Glad you asked. I originally considered only implementing one per
      > document,
      > > but there is the possibility that you will want to have multiple
      > masks if
      > > you launch a second modal Panel from within another Panel that is
      > already
      > > modal. While technically you could move the mask's zIndex if you
      launch
      > > another modal Panel, that would also require moving the mask back
      > into the
      > > proper stacking order after the second modal Panel is dismissed. By
      > creating
      > > more than one mask, you have the ability to easily associate a mask
      > (and its
      > > behavior) with a specific Panel without the other Panels needing to
      > be aware
      > > of it.
      > >
      > >
      > >
      > > I appreciate the feedback. Are you having an issue with implementation
      > > because of the multiple-mask behavior? If so, I'd be more than
      happy to
      > > assist in any way that I can.
      > >
      > >
      > >
      > > Thanks!
      > >
      > >
      > >
      > > Steven Peterson
      > >
      > > Web Developer, Platform Engineering
      > >
      > > Yahoo!
      > >
      > > From: ydn-javascript@yahoogroups.com
      > [mailto:ydn-javascript@yahoogroups.com]
      > > On Behalf Of Ramesh Natarajan
      > > Sent: Thursday, May 25, 2006 5:33 AM
      > > To: ydn-javascript@yahoogroups.com
      > > Subject: [ydn-javascript] Re: Modal Panels and mask divs
      > >
      > >
      > >
      > > Hi,
      > >
      > > I was looking at the container.js and I see the div gets created
      > > once per panel. Shouldn't this be one per document? Is this a bug?
      > >
      > > YAHOO.widget.Panel.prototype.buildMask = function() {
      > > if (! this.mask) {
      > > this.mask = document.createElement("DIV");
      > > this.mask.id = this.id + "_mask";
      > > this.mask.className = "mask";
      > > this.mask.innerHTML = " ";
      > > ................
      > > ................
      > >
      > > Thanks
      > > Ramesh
      > >
      > > --- In ydn-javascript@yahoogroups.com, "Ramesh Natarajan"
      > > <rameshme_in@> wrote:
      > > >
      > > > Hi,
      > > >
      > > > I am trying to create a Modal panel to display some information.
      > > > I use the javascript below to create and display them.
      > > >
      > > > I am having a problem when I close the panel. I see the {id}_mask
      > > > divs still floating around.
      > > >
      > > > Is there anything I should do to clean them up?
      > > >
      > > > Thanks
      > > > Ramesh
      > > >
      > > > --------------------------------------------------------------------
      > > > function DisplayContextWindow(id,hdr,body)
      > > > {
      > > >
      > > > ContextWindow = new YAHOO.widget.Panel("ContextWindow",
      > > > { width:"700px",
      > > > height:"400px",
      > > > constraintoviewport: true,
      > > > underlay:"shadow",
      > > > close:true,
      > > > visible:true,
      > > > draggable:true,
      > > > modal:true} );
      > > >
      > > > ContextWindow.setHeader(hdr);
      > > > ContextWindow.setBody(body);
      > > > ContextWindow.render(document.body);
      > > > ContextWindow.cfg.setProperty("context", [id, "tl", "br"]);
      > > > ContextWindow.hideEvent.subscribe(
      > > > ContextWindow.destroy,ContextWindow,true);
      > > >
      > > > }
      > > >
      > > >
      ----------------------------------------------------------------------
      > > >
      > > >
      > > > <div tabindex="-1" style="height: 1085px; width: 1265px; display:
      > > > none;" class="mask" id="ContextWindow_mask"> </div>
      > > >
      > >
      > >
      > >
      > >
      > >
      > >
      > >
      > >
      > > SPONSORED LINKS
      > >
      > >
      > > C
      > >
      > <http://groups.yahoo.com/gads?t=ms
      >
      <http://groups.yahoo.com/gads?t=ms&k=C+programming+language&w1=C+programming
      > > &k=C+programming+language&w1=C+programming
      > >
      >
      +language&w2=Computer+programming+languages&w3=Java+programming+language&w4=
      > >
      >
      The+c+programming+language&w5=C+++programming+language&w6=Concept+of+program
      > > ming+language&c=6&s=194&.sig=lC1PxfzvANy_Br-nPkXYTA> programming
      > language
      > >
      > > Computer
      > >
      > <http://groups.yahoo.com/gads?t=ms
      >
      <http://groups.yahoo.com/gads?t=ms&k=Computer+programming+languages&w1=C+pro
      > > &k=Computer+programming+languages&w1=C+pro
      > >
      >
      gramming+language&w2=Computer+programming+languages&w3=Java+programming+lang
      > >
      >
      uage&w4=The+c+programming+language&w5=C+++programming+language&w6=Concept+of
      > > +programming+language&c=6&s=194&.sig=7XFXh-0Mon1IfLuOVlwvdg>
      > programming
      > > languages
      > >
      > > Java
      > >
      > <http://groups.yahoo.com/gads?t=ms
      >
      <http://groups.yahoo.com/gads?t=ms&k=Java+programming+language&w1=C+programm
      > > &k=Java+programming+language&w1=C+programm
      > >
      >
      ing+language&w2=Computer+programming+languages&w3=Java+programming+language&
      > >
      >
      w4=The+c+programming+language&w5=C+++programming+language&w6=Concept+of+prog
      > > ramming+language&c=6&s=194&.sig=UITodqn0qTCUcae_mpRQog> programming
      > > language
      > >
      > >
      > > The
      > >
      > <http://groups.yahoo.com/gads?t=ms
      >
      <http://groups.yahoo.com/gads?t=ms&k=The+c+programming+language&w1=C+program
      > > &k=The+c+programming+language&w1=C+program
      > >
      >
      ming+language&w2=Computer+programming+languages&w3=Java+programming+language
      > >
      >
      &w4=The+c+programming+language&w5=C+++programming+language&w6=Concept+of+pro
      > > gramming+language&c=6&s=194&.sig=xnZC2-BzDSLhhir3MLtssg> c
      programming
      > > language
      > >
      > > C
      > >
      > <http://groups.yahoo.com/gads?t=ms
      >
      <http://groups.yahoo.com/gads?t=ms&k=C+++programming+language&w1=C+programmi
      > > &k=C+++programming+language&w1=C+programmi
      > >
      >
      ng+language&w2=Computer+programming+languages&w3=Java+programming+language&w
      > >
      >
      4=The+c+programming+language&w5=C+++programming+language&w6=Concept+of+progr
      > > amming+language&c=6&s=194&.sig=RTzTl3BOJWbWK14CdUrO0w> programming
      > language
      > >
      > >
      > > Concept
      > >
      > <http://groups.yahoo.com/gads?t=ms
      >
      <http://groups.yahoo.com/gads?t=ms&k=Concept+of+programming+language&w1=C+pr
      > > &k=Concept+of+programming+language&w1=C+pr
      > >
      >
      ogramming+language&w2=Computer+programming+languages&w3=Java+programming+lan
      > >
      >
      guage&w4=The+c+programming+language&w5=C+++programming+language&w6=Concept+o
      > > f+programming+language&c=6&s=194&.sig=x4ueM0tA417JDq3ckdJ9CQ> of
      > > programming language
      > >
      > >
      > >
      > > _____
      > >
      > > YAHOO! GROUPS LINKS
      > >
      > >
      > >
      > > * Visit your group "ydn-javascript
      > > <http://groups.yahoo.com/group/ydn-javascript> " on the web.
      > >
      > > * To unsubscribe from this group, send an email to:
      > > ydn-javascript-unsubscribe@yahoogroups.com
      > >
      <mailto:ydn-javascript-unsubscribe@yahoogroups.com?subject=Unsubscribe>
      > >
      > > * Your use of Yahoo! Groups is subject to the Yahoo! Terms of
      Service
      > > <http://docs.yahoo.com/info/terms/> .
      > >
      > >
      > >
      > > _____
      > >
      >
      >
      >
      >
      >
      >
      >
      >
      > SPONSORED LINKS
      >
      >
      > C
      >
      <http://groups.yahoo.com/gads?t=ms&k=C+programming+language&w1=C+programming
      >
      +language&w2=Computer+programming+languages&w3=Java+programming+language&w4=
      >
      The+c+programming+language&w5=C+++programming+language&w6=Concept+of+program
      > ming+language&c=6&s=194&.sig=lC1PxfzvANy_Br-nPkXYTA> programming
      language
      >
      > Computer
      >
      <http://groups.yahoo.com/gads?t=ms&k=Computer+programming+languages&w1=C+pro
      >
      gramming+language&w2=Computer+programming+languages&w3=Java+programming+lang
      >
      uage&w4=The+c+programming+language&w5=C+++programming+language&w6=Concept+of
      > +programming+language&c=6&s=194&.sig=7XFXh-0Mon1IfLuOVlwvdg>
      programming
      > languages
      >
      > Java
      >
      <http://groups.yahoo.com/gads?t=ms&k=Java+programming+language&w1=C+programm
      >
      ing+language&w2=Computer+programming+languages&w3=Java+programming+language&
      >
      w4=The+c+programming+language&w5=C+++programming+language&w6=Concept+of+prog
      > ramming+language&c=6&s=194&.sig=UITodqn0qTCUcae_mpRQog> programming
      > language
      >
      >
      > The
      >
      <http://groups.yahoo.com/gads?t=ms&k=The+c+programming+language&w1=C+program
      >
      ming+language&w2=Computer+programming+languages&w3=Java+programming+language
      >
      &w4=The+c+programming+language&w5=C+++programming+language&w6=Concept+of+pro
      > gramming+language&c=6&s=194&.sig=xnZC2-BzDSLhhir3MLtssg> c programming
      > language
      >
      > C
      >
      <http://groups.yahoo.com/gads?t=ms&k=C+++programming+language&w1=C+programmi
      >
      ng+language&w2=Computer+programming+languages&w3=Java+programming+language&w
      >
      4=The+c+programming+language&w5=C+++programming+language&w6=Concept+of+progr
      > amming+language&c=6&s=194&.sig=RTzTl3BOJWbWK14CdUrO0w> programming
      language
      >
      >
      > Concept
      >
      <http://groups.yahoo.com/gads?t=ms&k=Concept+of+programming+language&w1=C+pr
      >
      ogramming+language&w2=Computer+programming+languages&w3=Java+programming+lan
      >
      guage&w4=The+c+programming+language&w5=C+++programming+language&w6=Concept+o
      > f+programming+language&c=6&s=194&.sig=x4ueM0tA417JDq3ckdJ9CQ> of
      > programming language
      >
      >
      >
      > _____
      >
      > YAHOO! GROUPS LINKS
      >
      >
      >
      > * Visit your group "ydn-javascript
      > <http://groups.yahoo.com/group/ydn-javascript> " on the web.
      >
      > * To unsubscribe from this group, send an email to:
      > ydn-javascript-unsubscribe@yahoogroups.com
      > <mailto:ydn-javascript-unsubscribe@yahoogroups.com?subject=Unsubscribe>
      >
      > * Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service
      > <http://docs.yahoo.com/info/terms/> .
      >
      >
      >
      > _____
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.