CODEWITHSUNDEEP
jqueryhtmlcss
TheYaXxE
TheYaXxE

Reputation: 4294

Prevent elements in hidden div to be 'clickable'

I am creating a site, where you can click a button, and a little panel will show. (Like the notification/message panel on facebook)

The function works fine, but when the panel is hidden, you can still hover the links, where they are supposed to be, when visible. I am using opacity instead display to hide my div, so I can make a nice fade-in-out-animation.

Here's all my code with a working example of the function:

http://jsfiddle.net/S5LvY/

I have tried to put in a height: 0; overflow: hidden; when not visible, and height: auto; overflow: visible; when visible, and leave them out of the animation by doing this: transition: top 0.15s, opacity 0.15s

It works fine, when the panel is shown, but when you want to hide it agian it does not. See this example:

http://jsfiddle.net/S5LvY/2/

So my question is basicly; How do I prevent the elements in my hidden div to be 'clickable' and still keep my fade-in-out animations?

Hope someone can help me :D

Upvotes: 1

Views: 1423

Answers (6)

Kunj
Kunj

Reputation: 2018

Opacity does not remove an object from elements list. Hence, the hover remains on it. Use callback function of toggleClass e.g.: 

$(".notify-box").toggleClass('show').promise().done(function()
{  
     // your code to hide
});

or use some other methods of animation like animate of jQuery.

Upvotes: 0

pwdst
pwdst

Reputation: 13745

If you want or have to stick to CSS 3 transitions for performance or other reasons, then you could use window.setTimeout to add a class after the timeout period that sets the display property to none. This should prevent the links from being clickable, remove the hover effects and prevent screen readers from reading the hidden content.

The obvious flaw in this is that the setTimeout period would need to be the same as the period used in your transition, which introduces a maintenance cost.

Update:

Thanks to DoXicK, I have created a JSFiddle which uses the transitionEnd event to add the 'hide' class to the notification box if the standard transition property is available in the browser. It falls back to the setTimeout as described above.

// Notify Box
(function() {
    var $notifyBox = $(".notify-box");
    var supportsStandardTransition = ($notifyBox[0].style['transition'] !== undefined);

    if (supportsStandardTransition) {
        $notifyBox.on('transitionEnd', function() {
            $(this).addClass('hide');
        });
    }

$(".notify-icon").on('click', function(){
    if ($notifyBox.hasClass('show')) {
        $notifyBox.removeClass('show');
        if (!supportsStandardTransition) {
            window.setTimeout(function () {
                $notifyBox.addClass('hide');
            }, 150);
        }
    } else {
        $notifyBox.addClass('show').removeClass('hide');
    }       
    });
})();

CSS-

.notify-box {
    background: #FFF;
    position: absolute;
    top: 50px;
    left: 0;
    opacity: 0;
    top: 70px;
    -ms-transition: opacity 0.15s ease-in-out;    
    -moz-transition: opacity 0.15s ease-in-out;
    -o-transition: opacity 0.15s ease-in-out;
    -webkit-transition: opacity 0.15s ease-in-out;
    transition: opacity 0.15s ease-in-out;
    width: 200px;
    z-index: 9998;
}

.notify-box.show {
    opacity: 1; 
     -ms-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -webkit-transition: none;
    transition: none;
}

.notify-box.hide {
    display: none;
}

I have also modified the HTML to initially add the 'hide' class to the notify box, added a class definition in the CSS and tweaked the transition styles to be specific to opacity, and removed the transition when the 'show' class is applied - to make the notification box appear 'instantly' (as quickly as the browser can render it) and only transition when hiding. I have also moved the top property to the .notify-box class so it doesn't move as it is being hidden, which looked odd.

Upvotes: 0

Zainul Abdin
Zainul Abdin

Reputation: 835

Solution is inside CSS section not in jQuery

use following CSS and it will work

.notify-box {
    width: 200px;
    background: #FFF;
    position: absolute;
    height: 0;
    top: 50px;
    left: 0;
    opacity: 0;
    z-index: 9998;
    -webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    -o-transition: all 0.15s;
    -ms-transition: all 0.15s;
    transition: all 0.15s;
}
.notify-box.show {
    top: 70px;
    opacity: 1;
   height: auto;
}

.notify-box .content {
    width: 100%;
    height: inherit;
    overflow: auto;
}

solution comes from height of notify-box when it is hidden height should be 0 and when it is visible then height should be auto

the most important part is make .content height as inherit so that it's height should get changed according to notify-box height

fiddle link

Upvotes: 0

DoXicK
DoXicK

Reputation: 4812

A couple of pointers:

You could make something like:

$('.notify-box').fadeToggle().toggleClass('show');

// either hide the box using css OR on initialization:
$('.notify-box').fadeOut(0).removeClass('show');

Upvotes: 2

Bram Vanroy
Bram Vanroy

Reputation: 28505

Why not use a simple slideToggle()? Like so: http://jsfiddle.net/S5LvY/4/

$(".notify-icon").click(function () {
    $(".notify-box").slideToggle("fast");
});

Upvotes: 0

Yabada
Yabada

Reputation: 1758

"I am using opacity instead display to hide my div, so I can make a nice fade-in-out-animation."

This is wrong.

You can make a "nice fade-in-out-animation" when switching the div from hide to show.

So what you need to do is to realy hide the div, this way it won't be clickable, and apply your animation when you show it. Look at jquery animate (http://api.jquery.com/animate/).

You could also use plugins to have nice animations realy easy. For this look at jQueryUI (http://jqueryui.com/effect)

Upvotes: 0

Related Questions