Where's my material button effect?

[wembernard]

Hi there,

We've just bought Rio theme and after succeeding the installation, I realized my buttons don't animate as expected. After some research, I found 2 different demo links:
- http://www.primefaces.org/rio/forms.xhtml
- http://www.primefaces.org/rio-primeng/#/forms

The first one behaves like my project. The second one is the behavior I was expecting. Why those differences? How to fix?

[wembernard]

Any update on this ?

[mert.sincan]

I'm working on this issue.

[mert.sincan]

Please try the following ripple-effect.js;

Code: Select all

// Ripple Effect like Google Material Buttons Effect

var rippleEffect = function(){
    
    // escape from ripple effect for IE 9
    if($.browser.msie && parseInt($.browser.version, 10) === 9) {
        return;
    }
   
	var ink, d, x, y;
    
    $(document.body).off('click.ripple','.ripplelink,.ui-button > span').on('click.ripple','.ripplelink,.ui-button > span', null, function(e){
        console.log('click');
    });
    
	$(document.body).off('mousedown.ripple','.ripplelink,.ui-button > span').on('mousedown.ripple','.ripplelink,.ui-button > span', null, function(e){
        console.log('mousedown');
        if($(this).find(".ink").length === 0){
            $(this).prepend("<span class='ink'></span>");
        }

        ink = $(this).find(".ink");
        ink.removeClass("animate");

        if(!ink.height() && !ink.width()){
            d = Math.max($(this).outerWidth(), $(this).outerHeight());
            ink.css({height: d, width: d});
        }

        x = e.pageX - $(this).offset().left - ink.width()/2;
        y = e.pageY - $(this).offset().top - ink.height()/2;

        ink.css({top: y+'px', left: x+'px', 'pointer-events': 'none'}).addClass("animate");
    });
};

And please add;

Code: Select all

.ui-buttonset, 
.ui-button {
    overflow: hidden !important;
}
.ui-buttonset .ui-button {
    overflow: visible !important;
}