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?
Where's my material button effect?
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
I'm working on this issue.
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please try the following ripple-effect.js;
And please add;
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");
});
};
Code: Select all
.ui-buttonset,
.ui-button {
overflow: hidden !important;
}
.ui-buttonset .ui-button {
overflow: visible !important;
}
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 2 guests