Where's my material button effect?

Locked
wembernard
Posts: 2
Joined: 08 Jul 2016, 18:17

11 Jul 2016, 10:56

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
Posts: 2
Joined: 08 Jul 2016, 18:17

13 Jul 2016, 16:37

Any update on this ?

mert.sincan
Posts: 4318
Joined: 29 Jun 2013, 12:38

15 Jul 2016, 15:59

I'm working on this issue.

mert.sincan
Posts: 4318
Joined: 29 Jun 2013, 12:38

17 Jul 2016, 12:36

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

Locked

Return to “Rio”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest