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

Appending additional functions for a panel opening event (howto)

Expand Messages
  • Jon Trelfa
    I ve got several panels on the screen and wanted to have a keylistener on each element rather than the whole document. The trouble was that the element needed
    Message 1 of 1 , Dec 10, 2006
    • 0 Attachment
      I've got several panels on the screen and wanted to have a keylistener on each element rather than the whole document.

      The trouble was that the element needed focus first and I couldn't see any sort of property where you can assign to an "onOpen" or something to that effect.

      To add focus to the element - for those instances where the user hasn't clicked anything after the panel opens - I did this:

      Just a note: I'm using a stripped down version of prototype so I can use the helper $() functions, etc:

      var opts = { width:"300px",visible:false,constraintoviewport:true,draggable:true,effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25}};
      // Instantiate a Panel from markup
      opts.context = ['help_qty_button',"bl","tr"];
      YAHOO.sell.help_qty = new YAHOO.widget.Panel("help_qty", opts );

      YAHOO.util.Event.addListener("help_qty_button", "click", function() { YAHOO.sell.help_qty.show();$('help_qty').focus();}, YAHOO.sell.help_qty, true);
      YAHOO.util.Event.addListener("help_qty_close", "click", YAHOO.sell.help_qty.hide, YAHOO.sell.help_qty, true);
      var kl = new YAHOO.util.KeyListener("help_qty",{ keys:27 },{fn:YAHOO.sell.help_qty.hide,scope:YAHOO.sell.help_qty,correctScope:true});
      YAHOO.sell.help_qty.cfg.queueProperty("keylisteners", kl);
      YAHOO.sell.help_qty.render();
       
      While this isn't perfect, it at least gives the user the keyboard method to close the panel right after it comes up without having to give it focus.  At the same time, I'm able to assign the ESC key closing effect to each panel on the page.  Optionally, I could have a generic function where I pass the ID of the element as an argument instead of spelling it out within the keyListener.
       
      Hope this helps someone,
       
      Jon


      Any questions? Get answers on any topic at Yahoo! Answers. Try it now.
    Your message has been successfully submitted and would be delivered to recipients shortly.