Menu
I have next code ( the borders should be shown, i don't know why they dissapeared in demo ), the screen is separated in 8 equal parts and on each part should be ripple effect. All works fine in Chrome, Mozzila, Opera, Safari, but ripple overflows the element in IE. How can i fix it?
$(document).ready(function () {
$(".button_line").on('click', ".menu_button", function (e) {
DoRipple($(this), e);
});
});
var parent, ink, d, x, y;
function DoRipple(parent, e) {
if (parent.find(".ink").length == 0) {
parent.prepend("<span class='ink'></span>");
}
ink = parent.find(".ink");
ink.removeClass("animate");
if (!ink.height() && !ink.width()) {
d = Math.max(parent.outerWidth(), parent.outerHeight());
ink.css({ height: d, width: d });
}
x = e.pageX - parent.offset().left - ink.width() / 2;
y = e.pageY - parent.offset().top - ink.height() / 2;
ink.css({ top: y + 'px', left: x + 'px' }).addClass("animate");
function removeAnimationClass() {
ink.removeClass("animate");
}
setTimeout(
function () {
ink.removeClass("animate");
}, 650);
}html, body{
height:100%;
width:100%;
margin:0;
padding:0;
}
.equal, .equal > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex: 1 0 auto;
}
.button_line {
height: 25%;
width: 100%;
}
a.menu_button {
width: 50%;
height: 100%;
float: left;
background-color: white;
display: table;
border-collapse: collapse;
text-decoration: none;
color: black;
position:relative;
overflow:hidden;
cursor:pointer;
}
a.menu_button > .menu_button_content {
display: table-cell;
vertical-align: middle;
}
a.menu_button > .border_overlay {
height:100%;
width:100%;
position:absolute;
border-right: 1px solid #E6F0F0;
border-bottom: 1px solid #E6F0F0;
}
a.menu_button > .menu_button_content > h2 {
text-align: center;
font-size: 1.1em;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle {
padding: 0;
width: 40px;
height: 3px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#residence {
background-color: #74dbce;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#citizenship {
background-color: #509194;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#forillegals {
background-color: #ff7662;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#soonillegals {
background-color: #ffd869;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#fastsearch {
background-color: #7b8dd8;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#cooperation {
background-color: #bb5b91;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#aboutapp {
background-color: #a29994;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#settings {
background-color: #f47b50;
}
.ink {
display: block;
position: absolute;
background: #006064;
border-radius: 100%;
transform: scale(0);
}
/*animation effect*/
.ink.animate {
animation: ripple 0.65s linear;
}
@keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
transform: scale(2.5);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="button_line">
<a class="ol-md-6 menu_button" id="Residence">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="ResidenceText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, Residence %>" />
</h2>
<div class="menu_button_color_rectangle" id="residence"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="#">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="CitizenshipText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, Citizenship %>" />
</h2>
<div class="menu_button_color_rectangle" id="citizenship"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="#">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="FastSearchText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, FastSearch %>" />
</h2>
<div class="menu_button_color_rectangle" id="fastsearch"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="#">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="CooperationText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, Cooperation %>" />
</h2>
<div class="menu_button_color_rectangle" id="cooperation"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="#">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="ForIllegalsText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, ForIllegals %>" />
</h2>
<div class="menu_button_color_rectangle" id="forillegals"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="#">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="SoonIllegalsText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, SoonIllegals %>" />
</h2>
<div class="menu_button_color_rectangle" id="soonillegals"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="#">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="AboutAppText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, AboutApp %>" />
</h2>
<div class="menu_button_color_rectangle" id="aboutapp"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="Settings">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="SettingsText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, Settings %>" />
</h2>
<div class="menu_button_color_rectangle" id="settings"></div>
</div>
</a>
</div>
821
it is because your have a display:table on your a.menu_buttom. replace this by display:block. works fine for me with ie
$(document).ready(function () {
$(".button_line").on('click', ".menu_button", function (e) {
DoRipple($(this), e);
});
});
var parent, ink, d, x, y;
function DoRipple(parent, e) {
if (parent.find(".ink").length == 0) {
parent.prepend("<span class='ink'></span>");
}
ink = parent.find(".ink");
ink.removeClass("animate");
if (!ink.height() && !ink.width()) {
d = Math.max(parent.outerWidth(), parent.outerHeight());
ink.css({ height: d, width: d });
}
x = e.pageX - parent.offset().left - ink.width() / 2;
y = e.pageY - parent.offset().top - ink.height() / 2;
ink.css({ top: y + 'px', left: x + 'px' }).addClass("animate");
function removeAnimationClass() {
ink.removeClass("animate");
}
setTimeout(
function () {
ink.removeClass("animate");
}, 650);
}html, body{
height:100%;
width:100%;
margin:0;
padding:0;
}
.equal, .equal > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex: 1 0 auto;
}
.button_line {
height: 25%;
width: 100%;
}
a.menu_button {
width: 50%;
height: 100%;
float: left;
background-color: white;
display: block;
border-collapse: collapse;
text-decoration: none;
color: black;
position:relative;
overflow:hidden;
cursor:pointer;
}
a.menu_button > .menu_button_content {
vertical-align: middle;
}
a.menu_button > .border_overlay {
height:100%;
width:100%;
position:absolute;
border-right: 1px solid #E6F0F0;
border-bottom: 1px solid #E6F0F0;
}
a.menu_button > .menu_button_content > h2 {
text-align: center;
font-size: 1.1em;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle {
padding: 0;
width: 40px;
height: 3px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#residence {
background-color: #74dbce;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#citizenship {
background-color: #509194;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#forillegals {
background-color: #ff7662;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#soonillegals {
background-color: #ffd869;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#fastsearch {
background-color: #7b8dd8;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#cooperation {
background-color: #bb5b91;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#aboutapp {
background-color: #a29994;
}
a.menu_button > .menu_button_content > .menu_button_color_rectangle#settings {
background-color: #f47b50;
}
.ink {
display: block;
position: absolute;
background: #006064;
border-radius: 100%;
transform: scale(0);
}
/*animation effect*/
.ink.animate {
animation: ripple 0.65s linear;
}
@keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
transform: scale(2.5);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="button_line">
<a class="ol-md-6 menu_button" id="Residence">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="ResidenceText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, Residence %>" />
</h2>
<div class="menu_button_color_rectangle" id="residence"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="#">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="CitizenshipText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, Citizenship %>" />
</h2>
<div class="menu_button_color_rectangle" id="citizenship"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="#">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="FastSearchText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, FastSearch %>" />
</h2>
<div class="menu_button_color_rectangle" id="fastsearch"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="#">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="CooperationText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, Cooperation %>" />
</h2>
<div class="menu_button_color_rectangle" id="cooperation"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="#">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="ForIllegalsText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, ForIllegals %>" />
</h2>
<div class="menu_button_color_rectangle" id="forillegals"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="#">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="SoonIllegalsText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, SoonIllegals %>" />
</h2>
<div class="menu_button_color_rectangle" id="soonillegals"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="#">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="AboutAppText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, AboutApp %>" />
</h2>
<div class="menu_button_color_rectangle" id="aboutapp"></div>
</div>
</a>
<a class="ol-md-6 menu_button" id="Settings">
<div class="border_overlay"></div>
<div class="menu_button_content">
<h2 id="SettingsText">
<asp:Literal runat="server" Text="<%$ Resources: Strings, Settings %>" />
</h2>
<div class="menu_button_color_rectangle" id="settings"></div>
</div>
</a>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
