CODEWITHSUNDEEP
javascriptjquery
alcoven
alcoven

Reputation: 321

Material Design and Jquery

http://codepen.io/alcoven/pen/XJeEQy

I'm trying to get each one of these circles to activate itself without changing the rest of the circles on click. I was using $(this)('button') and $this.children('blub') when clicked on $('button') Now not only are these not working, but the material circle growth from the center isn't working either. The script above the click function script that slides in content is supposed create a span that slowly fills the bg and fades out.

HTML

<button class="blup active">Define<div class="button-text">This is test copy this is test copy this its test copy this is test copy this is test copy.This is test copy this is test copy this its test copy this is test copy this is test copy.</div></button>

<button class="blup active">Describe</button>
<button class="blup active">Discover</button>
<button class="blup active">Design</button>
<button class="blup active">Develop</button>
<button class="blup active">Deliver</button>

JS

var addRippleEffect = function (e) {
    var target = e.target;
    if (target.tagName.toLowerCase() !== 'button') return false;
    var rect = target.getBoundingClientRect();
    var ripple = target.querySelector('.ripple');
    if (!ripple) {
        ripple = document.createElement('span');
        ripple.className = 'ripple';
        ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
        target.appendChild(ripple);
    }
    ripple.classList.remove('show');
    var top = e.pageY - rect.top - ripple.offsetHeight / 4 - document.body.scrollTop;
    var left = e.pageX - rect.left - ripple.offsetWidth / 4 - document.body.scrollLeft;
    ripple.style.top = top + 'px';
    ripple.style.left = left + 'px';
    ripple.classList.add('show');
    ripple.classList.add('grow');
    return false;
}

document.addEventListener('click', addRippleEffect, false);

function morph(){
  var morphSniff = $('button').css('border-radius'); 
  if(morphSniff == "100%"){
    $('button').css('border-radius':'0%');
    $('.button-text').slideToggle();
  }
  else{
    $('button').css('border-radius':'100%');
    $('.button-text').slideToggle();
  }
};
$('button').click(function(){
    morph();
    return false; 
  });

Upvotes: 0

Views: 696

Answers (1)

dfsq
dfsq

Reputation: 193261

Try to change only clicked circle by providing this context:

function morph() {
    var morphSniff = $(this).css('border-radius');
    if (morphSniff == "100%") {
        $(this).css('border-radius': '0%');
        $('.button-text').slideToggle();
    } else {
        $(this).css('border-radius': '100%');
        $('.button-text').slideToggle();
    }
};

$('button').click(morph);

Demo: http://codepen.io/anon/pen/myBLwm

Upvotes: 2

Related Questions