MaterializeCss - Wave/Ripple effect manually trigger

Question

I am building my site using MaterializeCSS (http://materializecss.com/)

I am wondering how can I trigger the Wave/Ripple effect manually to certain control , for example:

"Trigger the wave/ripple effect of certain button."

The MaterializeCSS team stands that they use a port of the "Waves.js" javascript library (http://fian.my.id/Waves/) , but when I try to use the commands, errors appear in the browser console.

Can someone point me out here?

Code used as example:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--Import materialize.css-->
        <link type="text/css" rel="stylesheet" href="css/materialize.css"  media="screen,projection"/>

        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <!--Import jQuery before materialize.js-->
        <script type="text/javascript" src="jquery/jquery.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>

        <title>My website title</title>
    </head>

    <body>
        <script type="text/javascript">
            $(document).ready(function() {              
                Waves.ripple('#but_1');
            });
        </script>

        <a id="but_1" class="waves-effect waves-light btn">button</a>

    </body>
</html>

According to the MaterializeCSS TEAM ...

"Waves is an external library that we've included in Materialize to allow us to create the ink effect outlined in Material Design"

... and according to Waves docs ....

Waves.ripple(elements, options) Create a ripple effect in HTML element programmaticaly.

(http://fian.my.id/Waves/#api)

So in the Browser Console I get this error:

Uncaught TypeError: Waves.ripple is not a function

I understand ... that Waves object does not have a ripple function .... but ... I am lost — , Apr 12 '16 at 21:33
The Wave Effect (Ripple) , DOES work ... but only when my button is clicked .... I want to reproduce the same effect by code. — , Apr 12 '16 at 21:51
Well it says that the ripple function doesn't exist so maybe materializecss doesn't include it. So include it through the actual library — odannyc, Apr 12 '16 at 21:53
Worked. ... half the way. I can reproduce the ripple effect manually ... BUT ... both MaterializeCSS and Waves.js use the "waves-light" class to specify with controls have the ripple effect ... SO .... When I attach the class "waves-light" to a control ... BOTH ... MaterializeCSS and Waves ... reproduce the ripple effect when the control is clicked ... and the site freezes for a little bit ... it looks horrible. — , Apr 12 '16 at 22:10

score 5 · Accepted Answer · answered Apr 13 '16 at 16:54

I found a Solution !!!

Steps:

Download the latest version of Waves.js , link https://github.com/fians/Waves/releases
Open the file named "materialize.js" from the materializeCSS files

Once opened, try to find the section that starts with something like ...

;/*!
  * Waves v0.6.4
  * http://fian.my.id/Waves
  *
  * Copyright 2014 Alfiana E. Sibuea and other contributors
  * Released under the MIT license
  * https://github.com/fians/Waves/blob/master/LICENSE
  */

  ;(function(window) {
  'use strict';

  var Waves = Waves || {};
  var $$ = document.querySelectorAll.bind(document);

  // Find exact position of element
  function isWindow(obj) {
      return obj !== null && obj === obj.window;
 }

That section belongs to the Waves library embedded inside materializeCSS .... Replace all that section of code with the new code of Waves.js .... how? .... COPY the code of the latest version of Waves.js, and replace (PASTE) inside the Waves SECTION inside materialize.js

Now ... inside your HTML file you should have something like this (check the comments)

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--ADD the CSS from materializeCSS -->
    <link type="text/css" rel="stylesheet" href="css/materialize.css"  media="screen,projection"/>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="jquery/jquery.min.js"></script>

    <!-- Add the file "materialize.js" ... the one you just modified -->
    <script type="text/javascript" src="js/materialize.js"></script>

    <!-- Add the CSS from Waves.js -->
    <link type="text/css" rel="stylesheet" href="waves/waves.css"  media="screen,projection"/>

    <!-- DO NOT ADD the Waves.js
    <script type="text/javascript" src="wave/waves.js"></script>
    -->

    <title>Your site</title>
</head>
 <body>
    <script type="text/javascript">
        function clickbut() {
            //Now you can use the Waves.ripple function!!!
            Waves.ripple('#but_1');
        };

        $(document).ready(function() {              
            //Initialize the Waves module
            Waves.init()
        });
    </script>


    <h2 class="left-align"><i class="left-align medium material-icons">touch_app</i>My website Header</h2>


    <button  onclick="clickbut()">click me</button>

    <a class="waves-effect waves-light btn ">button</a>

    <a id="but_1" class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>

    <a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>

</body>
</html>

If you click the "click me" button ... the ripple effec will be played in the #but_1 button

andrewcbass · Answer 2 · 2016-04-13T05:32:21.517

0

I have always added waves-effect as a class to the button. It triggers on the button click.

<a class="waves-effect waves-light btn">button</a>

This is from the first button example on the materialize css website. Buttons on MaterializeCSS

If it says the Waves.ripple function does not exist, try bringing in the Waves.js script from a CDN.

edited Apr 13 '16 at 05:32

answered Apr 12 '16 at 21:32

andrewcbass

1
3

Yes I just updated my question. I also use that as an example ... but I have to execute the Waves-Effect MANUALLY ... not when the button is clicked. I also do not want to execute the onClick function of the button – Apr 12 '16 at 21:35

score 0 · Answer 3 · answered Jun 08 '20 at 05:09

0

None of the above answers worked for me. Played around with this and managed to get it to trigger using the following

                Waves.attach('#refresh', ['waves-light']);
                Waves.ripple('#refresh');

answered Jun 08 '20 at 05:09

Ryan NZ

616
1
9
25

MaterializeCss - Wave/Ripple effect manually trigger

3 Answers3