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;
}