1

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
TheYaXxE
  • 4,196
  • 3
  • 22
  • 34

6 Answers6

2

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');
DoXicK
  • 4,784
  • 24
  • 22
  • The OP may be wishing to make use of CSS transitions as these can be hardware accelerated and perform better than those using JavaScript (jQuery) alone. – pwdst Dec 27 '13 at 11:24
  • hence the 'css3 pointer events' part and the fact i only put the 'fade' into a JS-animation. But since OP mentioned 'hovering', i don't think we are focussing on mobile here. The fact that OP asked this question, shows me he isn't making facebook2.0 or a webapp, but just needs some help to get this to work as simple as possible. – DoXicK Dec 27 '13 at 11:46
  • It wasn't a downvote, your answer is a good one - simply a point that there may be a reason the OP is choosing to do things this way. – pwdst Dec 27 '13 at 11:56
  • Was just an explanation of why i posted this way :-) – DoXicK Dec 27 '13 at 14:16
  • I got it fixed with the css3 pointer-events. Thank you! :D - http://jsfiddle.net/S5LvY/8/ – TheYaXxE Jan 09 '14 at 08:06
0

"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)

Yabada
  • 1,728
  • 1
  • 15
  • 36
0

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

$(".notify-icon").click(function () {
    $(".notify-box").slideToggle("fast");
});
Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
0

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.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Kunj
  • 1,980
  • 2
  • 22
  • 34
0

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.

pwdst
  • 13,909
  • 3
  • 34
  • 50
  • 1
    Check here for 'transition end events'. http://stackoverflow.com/questions/5023514/how-do-i-normalize-css3-transition-functions-across-browsers – DoXicK Dec 27 '13 at 11:50
  • @DoXicK That's extremely useful, and it makes perfect sense that such an event would be provided - I'd never heard of it before though. I will update the answer to test for support of this event and use it if available. – pwdst Dec 27 '13 at 11:55
  • it's a nice trick and i believe jQuery (or UI or Mobile) uses it to default to hardware acceleration where possible. – DoXicK Dec 27 '13 at 14:17
  • @DoXicK jQuery certainly seem to be paying a lot more attention to performance recently, and trying to work around to work around browser support takes a lot of effort if you are using jQuery anyway (if it is a dependency of other frameworks or tools for example), so it's good to know you can rely on the framework to do things the right way. – pwdst Dec 27 '13 at 14:54
0

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

Zainul Abdin
  • 835
  • 4
  • 10
  • It's a nice solution but, when I toggle to hide the box again, the height is instantly changing to 0, which kind of ruin the fadeout effect. is there a way to fix that? – TheYaXxE Dec 27 '13 at 17:39