Hide Overlay when lost focus?

Board index » YUI 3.x: » Using YUI 3.x Components

Page 1 of 1

[ 7 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

Khoa Bui

Username: khoaminhbui
Joined: Tue Aug 09, 2011 6:11 am
Posts: 127
Location: Vietnam
Twitter: khoaminhbui
IRC: k_bui

Hide Overlay when lost focus?

Posted: Mon Jun 25, 2012 11:39 pm

+0-

I want to utilize the Overlay widget to implement an search option panel that:

- When user click on a button, a panel displayed with various options. User select some options.

- Then click a search icon, the option panel is hidden. Or user click elsewhere, the option panel is also hidden. That is to say, the panel is hidden when lost focus.

How can i receive the event that panel lost focus? trying a 'blur' event on the Overlay but no help.
Thanks.

John Mizliso

Username: abxccd
Joined: Sun Jan 22, 2012 11:20 pm
Posts: 48

Tags:

overlay

Re: Hide Overlay when lost focus?

Posted: Tue Jun 26, 2012 1:58 am

+0-

You can use the overlay-extras module which supports hiding the overlay when focus is lost or the escape key is pressed: http://yuilibrary.com/gallery/show/overlay-extras

Juan Ignacio Dopazo

YUI Contributor

Username: jdopazo
Joined: Fri Oct 02, 2009 5:39 am
Posts: 638
Location: Buenos Aires, Argentina
Twitter: juandopazo
GitHub: juandopazo
Gists: juandopazo

Tags:

Re: Hide Overlay when lost focus?

Posted: Tue Jun 26, 2012 6:12 pm

+0-

You can also create your own Overlay class using the WidgetAutoHide extension that will do just that and add support for the Escape key.

Khoa Bui

Username: khoaminhbui
Joined: Tue Aug 09, 2011 6:11 am
Posts: 127
Location: Vietnam
Twitter: khoaminhbui
IRC: k_bui

Re: Hide Overlay when lost focus?

Posted: Thu Jun 28, 2012 8:40 pm

+0-

Can you give me an example?

Khoa Bui

Username: khoaminhbui
Joined: Tue Aug 09, 2011 6:11 am
Posts: 127
Location: Vietnam
Twitter: khoaminhbui
IRC: k_bui

Tags:

Re: Hide Overlay when lost focus?

Posted: Thu Jun 28, 2012 11:27 pm

+0-

I create an AutohideOverlay follow your suggestion, as below:

Code:

YUI.add('autohide-overlay', function(Y) {
   Y.AutohideOverlay = Y.Base.create("autohide-overlay", Y.Widget, [
      Y.WidgetStdMod,
      Y.WidgetPosition,
      Y.WidgetAutohide,
      Y.WidgetStack,
      Y.WidgetPositionAlign,
      Y.WidgetPositionConstrain
   ]);
}, 'iss-1.0' ,{requires:['widget', 'widget-autohide', 'widget-stdmod', 'widget-position', 'widget-stack', 'widget-position-align', 'widget-position-constrain']});

Then use it:

Code:

YUI({
   modules: {
      'autohide-overlay': {
         fullpath: '{autohide_overlay_location}/autohide-overlay.js',
         requires: ['widget', 'widget-autohide', 'widget-stdmod', 'widget-position', 'widget-stack', 'widget-position-align', 'widget-position-constrain']
      }
   }
}).use('autohide-overlay', function (Y) {
      var autohideOverlay= new Y.AutohideOverlay({
         srcNode: '#containerId',
         zIndex: 1,
         width: 230,
         visible: false,
         hideOn: [
            {eventName: 'clickoutside'}
         ]
      });

      autohideOverlay.render();
});

I have 2 problems:
- Although I set visible to false, the overlay still displayed at start.
- The auto hide function does not work. Click outside won't make any affect.

I try the Y.Panel, which utilize 'widget-autohide' too, the result is good:

Code:

var autohidePanel = new Y.Panel({
         srcNode:"#containerId",
         width:400,
         centered:true,
         visible:false,
         modal:true,
         zIndex: 1,
         hideOn: [
            {eventName: 'clickoutside'}
         ]
      });
autohidePanel .render();

Click outside will hide the panel.

Any idea?
Thanks.

Juan Ignacio Dopazo

YUI Contributor

Username: jdopazo
Joined: Fri Oct 02, 2009 5:39 am
Posts: 638
Location: Buenos Aires, Argentina
Twitter: juandopazo
GitHub: juandopazo
Gists: juandopazo

Re: Hide Overlay when lost focus?

Posted: Fri Jun 29, 2012 8:11 am

+1-

You may have to declare a yui3-autohide-overlay-hidden class:

Code:

.yui3-autohide-overlay-hidden {
    visibility: hidden;
}

Khoa Bui

Username: khoaminhbui
Joined: Tue Aug 09, 2011 6:11 am
Posts: 127
Location: Vietnam
Twitter: khoaminhbui
IRC: k_bui

Re: Hide Overlay when lost focus?

Posted: Fri Jun 29, 2012 9:18 am

+0-

It works like a charm.
Thank you.

Page 1 of 1

[ 7 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum