API

Waves.init(config)

Initialise Waves with an optional config.

Arguments

• config - (optional) Configuration object for displaying Waves effect.

{{#code class="lang-javascript"}} var config = { // How long Waves effect duration // when it's clicked (in milliseconds) duration: 500, // Delay showing Waves effect on touch // and hide the effect if user scrolls // (0 to disable delay) (in milliseconds) delay: 200 }; // Initialise Waves with the config Waves.init(config); {{/code}}

---

Waves.attach(elements, classes)

Attach ripple effect by adding .waves-effect to HTML element. Make sure you call Waves.init() to activated the ripple.

Arguments

• elements - A string selector, DOM element, or array of DOM elements to add .waves-effect and other classes to.
• classes - (optional) Waves classes to add to theses elements, for example: 'waves-light waves-classic'. Accepts a single string, or array of classes.

{{#code class="lang-javascript"}} // Adds .waves-effect and .waves-light to elems Waves.attach('button', 'waves-light'); // Make .box ripple when user moves the mouse over it // with no additional classes Waves.attach('.box', null); {{/code}}

---

Waves.ripple(elements, options)

Create a ripple effect in HTML element programmaticaly.

Arguments

• elements - A string selector, DOM element, or array of DOM elements. Note: the elements must have the .waves-effect class already applied, it can be added via Waves.attach(elements)
• options - (optional) Specify how long to wait between starting and stopping the ripple, and it's position inside the element.

{{#code class="lang-javascript"}} // Default values for options var options = { wait: 0, // null = infinite position: null // null = centre }; {{/code}} {{#code class="lang-javascript"}} // Cause a ripple to occur on .box Waves.ripple('.box'); // Ripple with a 1s delay between starting // and stopping the ripple, centred at // (20px, 20px) inside .box var options = { wait: 1000, //ms position: { // This position relative to HTML element. x: 20, //px y: 20 //px } }; Waves.ripple('.box', options); {{/code}}

---

Waves.calm(elements)

Remove all ripples from inside an element immediately.

Arguments

• elements - A string selector for elements to remove ripples from.

{{#code class="lang-javascript"}} // Cause a non-terminating ripple at centre of .box Waves.ripple('.box', {wait: null}); // ... // Clear all ripples from .box Waves.calm('.box'); // Ripple on hover $('button').mouseenter(function() { Waves.ripple(this, {wait: null}); }).mouseleave(function() { Waves.calm(this); }); {{/code}}