Programmatically invoke rippleJs

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.js"></script>
<button class="btn btn-primary btn-lg" id="click" >Invoke Ripple on other button</button>
<button class="btn btn-info btn-lg" id="info" >More Info</button>











<div id="hud"></div>

<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
  Fork here:
  <a href='https://stackoverflow.com/q/48713857/1366033'>
    Programatically invoke ripplejs
  </a>
</div>

CSS

body {
  padding: 15px;
}

#hud {
  position:fixed;
  bottom:0;
  right:0;
  background:rgba(211, 211, 211, 0.7);
  padding:3px;
  text-align:right;
  opacity:  .95;
  z-index: 1;
}

JavaScript

$.ripple(".btn", {
  on: 'mousedown ripple', // The event to trigger a ripple effect
  opacity: 0.4,    // The opacity of the ripple
  color: "auto",   // Set the background color. "auto" will use the text color
  duration: 0.7,   // The duration of the ripple
  easing: 'linear' // The CSS3 easing function of the ripple
});

$("#click").click(function() {
  InvokeRipple($("#info"))
});

function InvokeRipple($el) {
	var event = jQuery.Event("ripple");
  event.pageX = $el.offset().left + $el.outerWidth() / 2;
  event.pageY = $el.offset().top + $el.outerHeight() / 2;
  $($el).trigger(event)
}














// just extra on-screen logging for demo  
$(document).mousemove(function(e){
  var hud = "e.pageX: "+ e.pageX + "px <br/>" +
            "e.pageY: "+ e.pageY + "px";
  $("#hud").html(hud);
}).mousemove();