Configurable delay before opening dropdown

[AlistairB]

Can there be a configurable delay before opening a dropdown?

1. Hover over menu item.
2. Keep mouse hovered until X milliseconds.
3. Dropdown appears.

[jrchamp]

Here's what I'm using in one example so that multiple menus are not fighting.

    return this.each(function() {
        var $this = $(this),
            $parent = $this.parent(),
            defaults = {
                delay: 500,
                delayShow: 300,
                instantlyCloseOthers: true
            },
            data = {
                delay: $(this).data('delay'),
                delayShow: $(this).data('delay-show'),
                instantlyCloseOthers: $(this).data('close-others')
            },
            settings = $.extend(true, {}, defaults, options, data),
            delayHide,
            delayShow;

        $parent.hover(function(event) {
            // so a neighbor can't open the dropdown
            if(!$parent.hasClass('open') && !$this.is(event.target)) {
                return true;
            }

            if(shouldHover) {
                window.clearTimeout(delayHide);
                delayShow = window.setTimeout(function() {
                    if(settings.instantlyCloseOthers === true) {
                        $allDropdowns.removeClass('open');
                    }

                    $parent.addClass('open');
                }, settings.delayShow);
            }
        }, function() {
            if(shouldHover) {
                window.clearTimeout(delayShow);
                delayHide = window.setTimeout(function() {
                    $parent.removeClass('open');
                }, settings.delay);
            }

        });

        // handle submenus
        $parent.find('.dropdown-submenu').each(function(){
            var $this = $(this),
                subDelayHide,
                subDelayShow;
            $this.hover(function() {
                if(shouldHover) {
                    window.clearTimeout(subDelayHide);
                    subDelayShow = window.setTimeout(function() {
                        $this.children('.dropdown-menu').show();
                        // always close submenu siblings instantly

$this.siblings().children('.dropdown-menu').hide(); }, settings.delayShow); } }, function() { var $submenu = $this.children('.dropdown-menu'); if(shouldHover) { window.clearTimeout(subDelayShow); subDelayHide = window.setTimeout(function() { $submenu.hide(); }, settings.delay); } else { // emulate Twitter Bootstrap's default behavior $submenu.hide(); } }); }); });

On Thu, Aug 22, 2013 at 8:38 PM, Alistair Burrowes <notifications@github.com

wrote:

Can there be a configurable delay before opening a dropdown?

1. Hover over menu item.
2. Keep mouse hovered until X milliseconds.
3. Dropdown appears.

— Reply to this email directly or view it on GitHubhttps://github.com/CWSpear/twitter-bootstrap-hover-dropdown/issues/30 .

[CWSpear]

I am not sure what @jrchamp means by by "fighting."

But "hover intent" (a delay before a nav item opens) is not a current feature, and not one I have time/interest in adding. From what I've seen, it's not particularly trivial to implement.

[AlistairB]

No worries. I got it working in the end by just changing the .hover lines to .hoverIntent (using the jquery plugin).

Cheers

[CWSpear]

Yeah, that's a good solution.

That jQuery hover intent is larger than my plugin (comparing both minified versions)… so it would seem silly to more than double the size of my plugin for that one feature!

On Aug 26, 2013, at 10:57 PM, Alistair Burrowes notifications@github.com wrote:

No worries. I got it working in the end by just changing the .hover lines to .hoverIntent (using the jquery plugin).

Cheers

— Reply to this email directly or view it on GitHub.