Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ability to trigger Ripple effect without a Click #1515

Closed
petervanderwalt opened this issue Mar 27, 2020 · 2 comments
Closed

Ability to trigger Ripple effect without a Click #1515

petervanderwalt opened this issue Mar 27, 2020 · 2 comments
Labels
enhancement
Milestone
4.3.7

Comments

@petervanderwalt
Copy link

Hi Olton, hope you are better these days! Always in our thoughts here!

I have a UI where I want to trigger the Ripple effect on a button, from another function to draw attention to the button.

In the past I did $('button').click() to get the ripple (and in the other use case button didnt have an onclick event) but now it does have an Onclick, and I don't want to "click" the button, just want it to Ripple (:

Something like $(button).data(ripple).ripple()
@petervanderwalt
Copy link
Author

My temporary workaround: Extracted the ripple code from ripple.js:

function rippleEffect(el, color) {
  var timer = null;

  if (el.css('position') === 'static') {
    el.css('position', 'relative');
  }

  el.css({
    overflow: 'hidden'
  });

  $(".ripple").remove();

  var size = Math.max(el.outerWidth(), el.outerHeight());

  // Add the element
  var ripple = $("<span class='ripple'></span>").css({
    width: size,
    height: size
  });

  el.prepend(ripple);

  // Add the ripples CSS and start the animation
  ripple.css({
    background: color,
    width: size,
    height: size,
    top: 0 + 'px',
    left: 0 + 'px'
  }).addClass("rippleEffect");
  timer = setTimeout(function() {
    timer = null;
    $(".ripple").remove();
  }, 400);
}

Called like this:

rippleEffect($('#zPprobe'), "#1ba1e2")

Should carry me over for this pressing release (: but can't wait to see your more elegant solution in its place (;

olton added a commit that referenced this issue Apr 4, 2020
@olton
Ripple: added ripple call for any element, issue #1515
6f1065b
@olton
Copy link
Owner

olton commented Apr 4, 2020 •
edited

in 4.3.7 you can use call Metro.ripple(selector, color, alpha) for any elements.

  • Ripple: added ripple call for any element
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
    <title>% - Metro 4 :: Popular HTML, CSS and JS library</title>
    <script src="../metro/js/metro.js?ver=@@b-version"></script>
</head>
<body class="m4-cloak">
<div class="text-center">
    <button class="button" onclick="Metro.ripple('.box')">Ripple box</button>
</div>
    <div class="container mt-20">
        <div class="box" data-role="ripple"></div>
    </div>

    <script>
        $(function(){
            setInterval(function(){
                Metro.ripple('.box', "#FFE730")
            }, 500)
        })
    </script>
</body>
</html>

@olton olton added this to the 4.3.7 milestone Apr 4, 2020
@olton olton closed this as completed May 17, 2020
olton added a commit that referenced this issue Oct 28, 2023
@olton
Ripple: added ripple call for any element, issue #1515
d4fdbac
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
4.3.7
Development

No branches or pull requests
2 participants
@olton @petervanderwalt