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

Navigating to a specific div within a component in Vuejs 2: Steps for routing

Expand the <canvas> element to completely fill the flex item without any scrollbars

How can I customize the appearance of a checkbox button in JavaFX?

Navigating a JSON array using the Handlebars template engine

Use jQuery to swap out two div classes within a table cell (TD) if they are

Overriding the Ajax URL

Extracting the value of an attribute from an XML element and converting it into an HTML unordered list with

Browse through different states by clicking on the <a> </a> tag

Exploring the world of Javascript: The significance of variable scope and its

What is the best way to retrieve a value from a form and incorporate it into a controller?

I'm still searching for a proper solution on how to access JavaScript/jQuery functions within Colorbox

Tips for utilizing JavaScript getElementByClassName to retrieve all the elements within a ul without having to specify the class name in each li

AngularJS is not triggering the $watch function

AngularJS: Pause the data binding functionality temporarily

Techniques for retrieving elements from HTML using jQuery

Looking to verify the existence of a div using jQuery once other jQuery functions have executed and created HTML?

The CSS styles are not being applied to the PHP code

``There seems to be an issue with the jquery swipe function not allowing navigation through elements in the

Interactions between JavaScript and PHP scripts within a web application

Using asynchronous functions in React Native still generates a promise despite the presence of the 'await' keyword