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

YUI Panel - To capture the panel close(X) event.

Expand Messages
  • dkarthikk
    Hi, I want to cature the panel close event or panel unLoad event.On click of close button(X)in panel, we have to trigger the javascript function to do the
    Message 1 of 6 , Nov 27, 2007
    • 0 Attachment
      Hi,

      I want to cature the panel close event or panel unLoad event.On
      click of close button(X)in panel, we have to trigger the javascript
      function to do the operation.
      How do i capture the close event of panel?

      Please refer the following code

      var myNewPanel = new YAHOO.widget.Panel("myNewPanel", {
      constraintoviewport:true, x:10, y:10, draggable:true, width:"990px",
      modal:true, effect:
      {effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );
      myNewPanel.cfg.queueProperty("visible",false);
      myNewPanel.setHeader("Overlay #3 from Script");
      myNewPanel.setBody("<iframe
      style='width:100%;height:400px;'></iframe>");
      myNewPanel.setFooter("© copyright Wipro");
      myNewPanel.render(document.body);
      myNewPanel.show();


      Thanks & Regards
      Karthik D
    • dunphey
      YUI provides custom events for nearly everything. Sounds like you re interested in the hideEvent.
      Message 2 of 6 , Nov 28, 2007
      • 0 Attachment
        YUI provides custom events for nearly everything.

        Sounds like you're interested in the hideEvent.

        http://developer.yahoo.com/yui/docs/YAHOO.widget.Module.html#hideEvent

        So in your example, consider this:

        function doSomething(){
        alert('success');
        }

        myNewPanel.hideEvent.subscribe(doSomething);

        Hope this is helpful to you.

        -Ryan Dunphey


        --- In ydn-javascript@yahoogroups.com, "dkarthikk" <dkarthikk@...> wrote:
        >
        > Hi,
        >
        > I want to cature the panel close event or panel unLoad event.On
        > click of close button(X)in panel, we have to trigger the javascript
        > function to do the operation.
        > How do i capture the close event of panel?
        >
        > Please refer the following code
        >
        > var myNewPanel = new YAHOO.widget.Panel("myNewPanel", {
        > constraintoviewport:true, x:10, y:10, draggable:true, width:"990px",
        > modal:true, effect:
        > {effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );
        > myNewPanel.cfg.queueProperty("visible",false);
        > myNewPanel.setHeader("Overlay #3 from Script");
        > myNewPanel.setBody("<iframe
        > style='width:100%;height:400px;'></iframe>");
        > myNewPanel.setFooter("© copyright Wipro");
        > myNewPanel.render(document.body);
        > myNewPanel.show();
        >
        >
        > Thanks & Regards
        > Karthik D
        >
      • mtorres253
        Hi, Useful thread but I wonder there is a way to attach an onclick action to the close icon itself. The hideEvent doesn t execute the script I need until after
        Message 3 of 6 , Nov 29, 2007
        • 0 Attachment
          Hi,

          Useful thread but I wonder there is a way to attach an onclick action to the close icon
          itself.

          The hideEvent doesn't execute the script I need until after the panel has faded out and I
          need my script to execute the instant the close(X) icon is clicked. Any ideas?

          --- In ydn-javascript@yahoogroups.com, "dunphey" <dunphey@...> wrote:
          >
          > YUI provides custom events for nearly everything.
          >
          > Sounds like you're interested in the hideEvent.
          >
          > http://developer.yahoo.com/yui/docs/YAHOO.widget.Module.html#hideEvent
          >
          > So in your example, consider this:
          >
          > function doSomething(){
          > alert('success');
          > }
          >
          > myNewPanel.hideEvent.subscribe(doSomething);
          >
          > Hope this is helpful to you.
          >
          > -Ryan Dunphey
          >
          >
          > --- In ydn-javascript@yahoogroups.com, "dkarthikk" <dkarthikk@> wrote:
          > >
          > > Hi,
          > >
          > > I want to cature the panel close event or panel unLoad event.On
          > > click of close button(X)in panel, we have to trigger the javascript
          > > function to do the operation.
          > > How do i capture the close event of panel?
          > >
          > > Please refer the following code
          > >
          > > var myNewPanel = new YAHOO.widget.Panel("myNewPanel", {
          > > constraintoviewport:true, x:10, y:10, draggable:true, width:"990px",
          > > modal:true, effect:
          > > {effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );
          > > myNewPanel.cfg.queueProperty("visible",false);
          > > myNewPanel.setHeader("Overlay #3 from Script");
          > > myNewPanel.setBody("<iframe
          > > style='width:100%;height:400px;'></iframe>");
          > > myNewPanel.setFooter("© copyright Wipro");
          > > myNewPanel.render(document.body);
          > > myNewPanel.show();
          > >
          > >
          > > Thanks & Regards
          > > Karthik D
          > >
          >
        • mtorres253
          Hi, Useful thread but I wonder there is a way to attach an onclick action to the close icon itself. The hideEvent doesn t execute the script I need until after
          Message 4 of 6 , Nov 29, 2007
          • 0 Attachment
            Hi,

            Useful thread but I wonder there is a way to attach an onclick action to the close icon
            itself.

            The hideEvent doesn't execute the script I need until after the panel has faded out and I
            need my script to execute the instant the close(X) icon is clicked. Any ideas?

            --- In ydn-javascript@yahoogroups.com, "dunphey" <dunphey@...> wrote:
            >
            > YUI provides custom events for nearly everything.
            >
            > Sounds like you're interested in the hideEvent.
            >
            > http://developer.yahoo.com/yui/docs/YAHOO.widget.Module.html#hideEvent
            >
            > So in your example, consider this:
            >
            > function doSomething(){
            > alert('success');
            > }
            >
            > myNewPanel.hideEvent.subscribe(doSomething);
            >
            > Hope this is helpful to you.
            >
            > -Ryan Dunphey
            >
            >
            > --- In ydn-javascript@yahoogroups.com, "dkarthikk" <dkarthikk@> wrote:
            > >
            > > Hi,
            > >
            > > I want to cature the panel close event or panel unLoad event.On
            > > click of close button(X)in panel, we have to trigger the javascript
            > > function to do the operation.
            > > How do i capture the close event of panel?
            > >
            > > Please refer the following code
            > >
            > > var myNewPanel = new YAHOO.widget.Panel("myNewPanel", {
            > > constraintoviewport:true, x:10, y:10, draggable:true, width:"990px",
            > > modal:true, effect:
            > > {effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );
            > > myNewPanel.cfg.queueProperty("visible",false);
            > > myNewPanel.setHeader("Overlay #3 from Script");
            > > myNewPanel.setBody("<iframe
            > > style='width:100%;height:400px;'></iframe>");
            > > myNewPanel.setFooter("© copyright Wipro");
            > > myNewPanel.render(document.body);
            > > myNewPanel.show();
            > >
            > >
            > > Thanks & Regards
            > > Karthik D
            > >
            >
          • Satyen Desai
            Hi, Does the beforeHideEvent not allow you to do what you need to? (it currently won t let you stop the panel from being hidden - is that what you re trying to
            Message 5 of 6 , Nov 30, 2007
            • 0 Attachment
              Hi,
              Does the beforeHideEvent not allow you to do what you need to?

              (it currently won't let you stop the panel from being hidden - is that
              what you're trying to achieve?)

              http://developer.yahoo.com/yui/docs/YAHOO.widget.Module.html#beforeHideE
              vent

              beforeHideEvent is the recommended approach. You can attach a click
              listener to the close icon itself, but you'll still need to deal with
              the default click listener which is attached, which will be invoked
              before yours.

              var panel = new YAHOO.widget.Panel("container");

              panel.beforeHideEvent.subscribe(function() {
              alert("Before Hide");
              });
              panel.render();

              var closeEl = YAHOO.util.Dom.getElementsByClassName(
              "container-close", null, panel.element)[0];

              YAHOO.util.Event.on(closeEl, "click", function(){
              alert("Click Added via DOM");
              });

              Regards,
              Satyen
            • mtorres253
              Thanks! That did the trick Michael
              Message 6 of 6 , Nov 30, 2007
              • 0 Attachment
                Thanks! That did the trick

                Michael
                --- In ydn-javascript@yahoogroups.com, "Satyen Desai" <sdesai@...> wrote:
                >
                > Hi,
                > Does the beforeHideEvent not allow you to do what you need to?
                >
                > (it currently won't let you stop the panel from being hidden - is that
                > what you're trying to achieve?)
                >
                > http://developer.yahoo.com/yui/docs/YAHOO.widget.Module.html#beforeHideE
                > vent
                >
                > beforeHideEvent is the recommended approach. You can attach a click
                > listener to the close icon itself, but you'll still need to deal with
                > the default click listener which is attached, which will be invoked
                > before yours.
                >
                > var panel = new YAHOO.widget.Panel("container");
                >
                > panel.beforeHideEvent.subscribe(function() {
                > alert("Before Hide");
                > });
                > panel.render();
                >
                > var closeEl = YAHOO.util.Dom.getElementsByClassName(
                > "container-close", null, panel.element)[0];
                >
                > YAHOO.util.Event.on(closeEl, "click", function(){
                > alert("Click Added via DOM");
                > });
                >
                > Regards,
                > Satyen
                >
              Your message has been successfully submitted and would be delivered to recipients shortly.