Page 1 of 1

Where's my material button effect?

Posted: 11 Jul 2016, 10:56
by 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?

Re: Where's my material button effect?

Posted: 13 Jul 2016, 16:37
by wembernard
Any update on this ?

Re: Where's my material button effect?

Posted: 15 Jul 2016, 15:59
by mert.sincan
I'm working on this issue.

Re: Where's my material button effect?

Posted: 17 Jul 2016, 12:36
by 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;
}