I try install this theme in my project but.

brunoa
Posts: 5
Joined: 27 May 2014, 02:53

19 Sep 2018, 16:02

I added the js needed. Now the button and other components a span "class="ink ripple-animate"" is added the first time is clicked. And an event is fire.
What do i need to do to(in ripple.js or ...) to add this effect to a specific div, by adding a class(ex:'special-effect-onClick')?

if i do this it works

Code: Select all

<a class="ui-button button"  href="./dashboard.xhtml" >Dashboard</a>
but i want something like this

Code: Select all

<a class="special-effect-onClick button"  href="./dashboard.xhtml" >Dashboard</a>

User avatar
aragorn
Posts: 3206
Joined: 29 Jun 2013, 12:38

26 Sep 2018, 15:05

Please add your custom class into ripple.js;

Code: Select all

/** Added ripple effect for the following class;
 * .ripplelink
 * .ui-button
 * .ui-selectlistbox-item
 * .ui-multiselectlistbox-item
 * .special-effect-onClick
 **/
$(function() {     
    var ink, d, x, y;
    $(document.body).off('mousedown.ripple','.ripplelink,.ui-button,.ui-selectlistbox-item,.ui-multiselectlistbox-item,.special-effect-onClick')
            .on('mousedown.ripple','.ripplelink,.ui-button,.ui-selectlistbox-item,.ui-multiselectlistbox-item,.special-effect-onClick', null, function(e){
        var element = $(this);
        
        if(element.find(".ink").length === 0){
            if(element.hasClass('ripplelink')) {
                if(element.hasClass('tabmenuitem-link')) {
                    element.append("<span class='ink'></span>");
                }
                else {
                    element.children('span').after("<span class='ink'></span>");
                }
            }
            else {
                element.append("<span class='ink'></span>");
            }
        }
             
        ink = $(this).find(".ink");
        ink.removeClass("ripple-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("ripple-animate");
    });
});

Post Reply

Return to “Serenity - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest