The ripple effect on the iPad Native app is malfunctioning.
- The effect is mistakenly applied to all buttons in the navigation instead of just the
lielements.
Please identify the error and provide a solution.
(function (window, $) {
$(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('circle')
.css({
top: yPos - 15,
left: xPos - 15
})
.appendTo($(this));
window.setTimeout(function(){
$div.remove();
}, 1000);
});
});
})(window, jQuery);nav {
position: relative;
width: 1024px;
background-color: #25518b;
bottom: 0;
height: 60px;
}
#home-btn {
position: absolute;
width: 79px;
height: 60px;
left: 0;
background: url(../images/home.png) no-repeat center center;
background-size: 28px 27px;
}
ul.navi {
margin: 0;
padding: 0;
list-style-type: none;
width: 945px;
position: absolute;
left: 79px;
}
ul.navi li {
float: left;
width: 188px;
height: 60px;
border-left: 1px #959595 solid;
font-size: 16.5px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: white;
text-align: center;
display: table;
}
ul.navi li a {
display: table-cell;
vertical-align: middle;
text-decoration: none;
color: white;
}
/* Ripple Effect for navigation */
.circle {
position: absolute;
width: 30px;
height: 30px;
background: white;
border-radius: 50%;
-webkit-animation: scale-circle 2.5s;
animation: scale-circle 2.5s;
}
@-webkit-keyframes scale-circle {
from {
-webkit-transform: scale(0.2);
transform: scale(0.2);
opacity: 0.6;
}
to {
-webkit-transform: scale(100);
transform: scale(100);
opacity: 0;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id="home-btn"></div>
<ul class="navi">
<li class=""><a href="#" class="ripple active">Link1</a></li>
<li><a class="ripple" href="#">Link2</a></li>
<li><a class="ripple" href="#">Link3</a></li>
<li><a class="ripple" href="#">Link4</a></li>
<li><a class="ripple" href="#">Link5</a></li>
</ul>
</nav>View the code here: http://codepen.io/Ashish9342/pen/wzqEdO