TheYaXxE TheYaXxE - 7 months ago 19
HTML Question

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


  • Thanks


Answer

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');
Comments