Good day all,
I have the following code in my onLoad event for my menu
$count = 0;
$check_sql = “SELECT COUNT(*) AS COUNT_0 FROM tickets WHERE currAssign = ‘5’”;
sc_lookup(rs, $check_sql);
if ( {rs[0][0]} > 0 ) // Row found
{
$count = {rs[0][0]};
echo "
<style>
.navbar {
width: 50%;
position:absolute;
margin-right: -8px;
}
.button__badge {
background-color: #fa3e3e;
border-radius: 2px;
color: white;
padding: 1px 3px;
font-size: 12px;
position: relative;
float:right;
margin-top: 16px;
margin-right: 30px;
z-index: 9999;
}
</style>
<div class=‘navbar’>
<div class=‘button__badge’ id=‘count_notif’>".$count."</div>
</div>
";
}
This works fine but I am trying to add animation to the button_badge and nothing I do seems to work. If I create a blank application with the style and key frame settings below, I am able to see the animation. Is what I am doing possible with Scriptcase? If so what am I missing here?
?>
<style>
.ring-container {
position: relative;
}
.circle {
width: 15px;
height: 15px;
background-color: #62bd19;
border-radius: 50%;
position: absolute;
top: 23px;
left: 23px;
}
.ringring {
border: 3px solid #62bd19;
-webkit-border-radius: 30px;
height: 25px;
width: 25px;
position: absolute;
left: 15px;
top: 15px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0
}
@-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
</style>
<div class=“ring-container”>
<div class=“ringring”></div>
<div class=“circle”></div>
</div>
<?php