Mystery of the Unresponsive MD Ripple Button

Question

Mystery of the Unresponsive MD Ripple Button

While working on creating a CSS button, I wanted to incorporate the Material Design ripple or wave effect into it. I came across a simple script on codepen that works well by adding the class "ripple" to various elements such as divs, buttons, images, and links. However, I encountered an issue where it would not open the link associated with the button I had created. As someone who isn't very experienced in jQuery or JavaScript, I suspect that this problem might be related to the JS code. The link opens fine when the "ripple" class is removed from the button, but the button fails to function properly in launching the link when the class is added even though the ripple animation works perfectly.

I would appreciate any guidance on resolving this dilemma. You can find the codepen demo I'm using here.

I understand your explanation that it may need to be one or the other, but I'm a bit confused about the best approach. I managed to make the link open in the original or "same" window by eliminating the target="_blank", but I was hoping to retain the target option without both tabs opening the new link if possible.

(function (window, $) {

  $(function() {


$('.ripple').on('click', function (event) {
  window.location = $(this).attr('href');
   /* event.preventDefault(); */

/*HTML Button Code*/
<div class="media__body tagline overtext"><a href="http://www.google.com" class="media-btn-bottom-blue ripple" target="new">Learn More</a></div>

javascript jquery html css material-design

Answer 1

Answer №1

Thank you ochi for highlighting the solution - make sure to delete line

window.location = $(this).attr('href');

in your code.

For a practical demonstration, you can check out this link: http://codepen.io/anon/pen/ZOYrmx (By clicking on the login button on the left, Google should open in a new tab)

Answer 2

Thank you ochi for highlighting the solution - make sure to delete line

window.location = $(this).attr('href');

in your code.

For a practical demonstration, you can check out this link: http://codepen.io/anon/pen/ZOYrmx (By clicking on the login button on the left, Google should open in a new tab)

Answer 3

Answer №2

By including the line event.preventDefault();, the default behavior of the link is stopped.

To further enhance the click handler, consider adding this code snippet at the end:

window.location.href=$(this).data('href'); // **

** It is assumed that the link contains a data-href attribute, like in the example below:

<a href="#" data-href="http://www.google.com"class="ripple" >Login</a>

$(function() {
  $('.ripple').on('click', function(event) {
    event.preventDefault();

    var $div = $('<div/>'),
      btnOffset = $(this).offset(),
      xPos = event.pageX - btnOffset.left,
      yPos = event.pageY - btnOffset.top;

    $div.addClass('ripple-effect');
    var $ripple = $(".ripple-effect");

    $ripple.css("height", $(this).height());
    $ripple.css("width", $(this).height());
    $div
      .css({
        top: yPos - ($ripple.height() / 2),
        left: xPos - ($ripple.width() / 2),
        background: $(this).data("ripple-color")
      })
      .appendTo($(this));

    window.setTimeout(function() {
      $div.remove();
    }, 2000);

    //add this
    alert($(this).attr('href'));

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="media__body tagline overtext">
  <a href="http://www.google.com" class="media-btn-bottom-blue ripple" target="_blank">Learn More</a>
</div>

Answer 4

By including the line event.preventDefault();, the default behavior of the link is stopped.

To further enhance the click handler, consider adding this code snippet at the end:

window.location.href=$(this).data('href'); // **

** It is assumed that the link contains a data-href attribute, like in the example below:

<a href="#" data-href="http://www.google.com"class="ripple" >Login</a>

$(function() {
  $('.ripple').on('click', function(event) {
    event.preventDefault();

    var $div = $('<div/>'),
      btnOffset = $(this).offset(),
      xPos = event.pageX - btnOffset.left,
      yPos = event.pageY - btnOffset.top;

    $div.addClass('ripple-effect');
    var $ripple = $(".ripple-effect");

    $ripple.css("height", $(this).height());
    $ripple.css("width", $(this).height());
    $div
      .css({
        top: yPos - ($ripple.height() / 2),
        left: xPos - ($ripple.width() / 2),
        background: $(this).data("ripple-color")
      })
      .appendTo($(this));

    window.setTimeout(function() {
      $div.remove();
    }, 2000);

    //add this
    alert($(this).attr('href'));

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="media__body tagline overtext">
  <a href="http://www.google.com" class="media-btn-bottom-blue ripple" target="_blank">Learn More</a>
</div>

Answer 5

Answer №3

Inspired by Craig Tuttle's CodePen project, I have enhanced it to support fixed position buttons by incorporating the ripple-fixed class to the element. Additionally, I have updated it to ES6 so that it can be easily imported and used as an external module.

const bindRipples = () => {

  $('.ripple').on("click", event => {
    event.preventDefault()

    let $this = $(event.currentTarget)
    let $div = $('<div/>')
    let btnOffset = $this.offset()
    let xPos
    let yPos

    $div.addClass('ripple-effect')
    let $ripple = $(".ripple-effect")

    $ripple.css("height", $this.height())
    $ripple.css("width", $this.height())

    if(!$this.hasClass('ripple-fixed')) {
      xPos = event.pageX - btnOffset.left
      yPos = event.pageY - btnOffset.top

      $div.css({
        top: yPos - ($ripple.height()/2),
        left: xPos - ($ripple.width()/2),
        background: $this.data("ripple-color")
      })

    } else {
      xPos = event.clientX - $this.offset().left
      yPos = event.clientY - $this.offset().top + $('body').scrollTop()

      $div.css({
        background: $this.data("ripple-color"),
        top: yPos,
        left: xPos,
        position: 'absolute'
      })
    }
    $div.appendTo($this)

    window.setTimeout(() => {
      $div.remove();
    }, 4000)
  })
}

module.exports = bindRipples

Credit goes to Craig Tuttle for the original script available at http://codepen.io/Craigtut/pen/dIfzv. I have made necessary adjustments to make it compatible with fixed position elements and converted it to ES6 syntax.

Answer 6

Inspired by Craig Tuttle's CodePen project, I have enhanced it to support fixed position buttons by incorporating the ripple-fixed class to the element. Additionally, I have updated it to ES6 so that it can be easily imported and used as an external module.

const bindRipples = () => {

  $('.ripple').on("click", event => {
    event.preventDefault()

    let $this = $(event.currentTarget)
    let $div = $('<div/>')
    let btnOffset = $this.offset()
    let xPos
    let yPos

    $div.addClass('ripple-effect')
    let $ripple = $(".ripple-effect")

    $ripple.css("height", $this.height())
    $ripple.css("width", $this.height())

    if(!$this.hasClass('ripple-fixed')) {
      xPos = event.pageX - btnOffset.left
      yPos = event.pageY - btnOffset.top

      $div.css({
        top: yPos - ($ripple.height()/2),
        left: xPos - ($ripple.width()/2),
        background: $this.data("ripple-color")
      })

    } else {
      xPos = event.clientX - $this.offset().left
      yPos = event.clientY - $this.offset().top + $('body').scrollTop()

      $div.css({
        background: $this.data("ripple-color"),
        top: yPos,
        left: xPos,
        position: 'absolute'
      })
    }
    $div.appendTo($this)

    window.setTimeout(() => {
      $div.remove();
    }, 4000)
  })
}

module.exports = bindRipples

Credit goes to Craig Tuttle for the original script available at http://codepen.io/Craigtut/pen/dIfzv. I have made necessary adjustments to make it compatible with fixed position elements and converted it to ES6 syntax.

Mystery of the Unresponsive MD Ripple Button

Answer №1

Answer №2

Answer №3

Similar questions

Filtering data in Asp.net MVC 3 and converting it to JSON format

If the width is divisible by a certain value

The middleware is causing disruptions in the configuration of redis and express

Distributing JWT to the recipient using Express

Displaying numerous information panels on Google Maps by extracting data from MySQL

Difficulty encountered in getting html email signature to appear correctly on Outlook

Utilizing AJAX POST requests from JavaScript to a Rails 4 controller while implementing Strong Parameters

Tips for integrating Redux toolkit with the latest version of Next.js

Achieving consistent alignment for text on a curved path

Can we leverage Angular service styles in scss?

PHP ajax handling multiple requests

Program does not display the expected alert message when using if/else statement

Trouble with displaying days on the Datepicker

Obtain the child's identification number and include it in the parent element as an ARIA

Discovering ways to showcase JSON response in JavaScript or PHP

What is the accurate user agent for Windows Phone?

Oops! Looks like you forgot to include the "reducer" argument. It is necessary and should be either a function or an object of functions that can be passed to combineReducers

I am in need of a datepicker for my project that will display the END date as the current date and set the START date as 7 days before the END date

CSS Navigation Bar Fails to Function Properly on Mobile Devices

What is the benefit of using an IIFE in this particular way when constructing a JavaScript library?