Ripple effect wyjeżdża poza "swój" obszar

Założony przez  szymex71.

Dodałem tak zwany ripple effect korzystając z tego poradnika: https://codepen.io/thulstrup/pen/OVROEm no i generalnie działa ale problem w tym że efekt wyjeżdża poza "swój" obszar.

Efekt dodałem na przycisku na pasku nawigacji (ten niebieski kwadracik z domkiem w środku). Najlepiej samemu zobaczyć o co chodzi.



I tak przy okazji, kiedy dodaję kod js 
<script>
var links = document.querySelectorAll('.ripplelink');

for (var i = 0, len = links.length; i < len; i++) {
  links[i].addEventListener('click', function(e) {
    var targetEl = e.target;
    var inkEl = targetEl.querySelector('.ink');

    if (inkEl) {
      inkEl.classList.remove('animate');
    }
    else {
      inkEl = document.createElement('span');
      inkEl.classList.add('ink');
      inkEl.style.width = inkEl.style.height = Math.max(targetEl.offsetWidth, targetEl.offsetHeight) + 'px';
      targetEl.appendChild(inkEl);
    }

    inkEl.style.left = (e.offsetX - inkEl.offsetWidth / 2) + 'px';
    inkEl.style.top = (e.offsetY - inkEl.offsetHeight / 2) + 'px';
    inkEl.classList.add('animate');
  }, false);
}
</script>

do headerinclude (w ten sposób co podałem) to nie działa, kiedy dodam go jednak do szablonu nav (tam gdzie znajduje się przycisk) to wszystko działa. Problem w tym że chciałbym tym efektem objąć nieco więcej buttonów a do każdego szablonu dodawać kod js to chyba niezbyt dobry pomysł..
Dodaj do szablonu footer. Poza tym adres forum? :|
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
ok, dodam do footer. Adres forum ten sam od roku ;) www.citiesskylines.pl
Użyj ctrl+f5. U mnie działa poprawnie już.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
Nie, nie działa dobrze. Może na jasnym tle tego nie widać, ale jak przypatrzysz się chociażby napisom to będzie widać że na nich ten efekt też działa. Na koncie administratora jest to jeszcze bardziej widocznie z powodu powiadomienia o nieaktywowanych użytkownikach. Zresztą, niżej screen:
   

Plus to, że jak zgaduję, jeżeli dodam ten efekt gdziekolwiek indziej to również będzie wyjeżdżał a w innych miejscach może być akurat bardziej widoczny.


Odświeżam....
Ok, testowałem na innym przycisku. Na tym twoim się rozjeżdża bo nie posiada on display typu block, inline-block, etc (na domyślnym inline nie zadziała). Oczywiście wtedy będziesz musiał dostosować reszte swojego kodu, aby nic się nie popsuło.
Kwestia taka, że overflow nie zadziała ci na każdym sposobie wyświetlania.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.



Użytkownicy przeglądający ten wątek:

1 gości