CODEWITHSUNDEEP
javascriptjqueryhtmlcssmaterial-design
user2407463
user2407463

Reputation: 23

MD Ripple Button Fails to Open Link

I was making a CSS button and wanted to add the Material Design ripple or wave effect to it. I found an easy script on codepen and it works great by applying the class "ripple" to any element like div, button, image, link and etc. It seems to work great except for some reason it won't actually open the link applied to the button I've made. I'm not a jquery or javascript expert but I'm guessing it has to do with the js. When I remove the "ripple" class from the button the link works fine, but when it's added the button fails to launch the link even if the ripple animation works fine.

Any help on how to fix this issue would be greatly appreciated thanks. The codepen demo I'm using can be found here Material Design Ripple Buttons

Hmmm... I get that you're saying it needs to be one or the other, but not sure I quite understand the your explanation. I can get it to open the link in the original or "same" window by removing the target="_blank" but I was kind of hoping to be able to have the target option without both tabs opening the new link if that's 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>

Upvotes: 1

Views: 250

Answers (3)

Nibblesh
Nibblesh

Reputation: 11

I've extended Craig Tuttle's CodePen to also work with fixed position buttons. by adding the class of ripple-fixed to the element. Also ported it to ES6 so that it can be imported and used as an external module.

let 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

Full credit to Craig Tuttle http://codepen.io/Craigtut/pen/dIfzv for making the script, I've just added small calculations to make it work on position fixed elements and have written it in ES6

Upvotes: 1

M_F
M_F

Reputation: 406

Just as ochi pointed out you have to remove the line window.location = $(this).attr('href'); from your code.

Example here: http://codepen.io/anon/pen/ZOYrmx (clicking on the left login button should open google.com in a new tab)

Upvotes: 1

blurfus
blurfus

Reputation: 14041

The default behaviour of the link is prevented by this line event.preventDefault();

Try adding this at the end of the click handler:

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

** Assuming the link has an data-href attribute, as in

<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>

Upvotes: 1

Related Questions