javascript - MaterializeCss - WaveRipple effect manually trigger

I am building my site using MaterializeCSS (/)

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 (/) , but when I try to use the mands, 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.

()

So in the Browser Console I get this error:

Uncaught TypeError: Waves.ripple is not a function

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

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 mands, 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

Share Improve this question edited Dec 15, 2017 at 7:26 Cœur 38.8k26 gold badges205 silver badges277 bronze badges asked Apr 12, 2016 at 21:18 user695800

1 Can you update your question with the errors that appear. – odannyc Commented Apr 12, 2016 at 21:22
Done, question edited – user695800 Commented Apr 12, 2016 at 21:32
I understand ... that Waves object does not have a ripple function .... but ... I am lost – user695800 Commented Apr 12, 2016 at 21:33
Try to include the API from the waves library in your html. – odannyc Commented Apr 12, 2016 at 21:50
The Wave Effect (Ripple) , DOES work ... but only when my button is clicked .... I want to reproduce the same effect by code. – user695800 Commented Apr 12, 2016 at 21:51

| Show 3 more ments

3 Answers 3

Sorted by: Reset to default 5

I found a Solution !!!

Steps:

Download the latest version of Waves.js , link https://github./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./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 ments)

<!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

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.

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');

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - MaterializeCss - WaveRipple effect manually trigger - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)