I have successfully implemented a notification feature where the backend is seamlessly integrated with the front end.
The Notification HTML code looks like this:
<span id="notification_count" style="display: none"></span>
<a href="#" id="notificationLink"><img alt="" src="assets/img/notification-icon.jpg"></a>
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody">
<table style="text-align: center;">
<tr>
<a href="www.google.com">123</a>
</tr>
<hr>
<tr>
<a href="#">123</a>
</tr>
<hr>
<tr>
<a href="#">123</a>
</tr>
<hr>
<tr>
<a href="#">123</a>
</tr>
<hr>
<tr>
<a href="#">123</a>
</tr>
<hr>
<tr>
<a href="#">123</a>
</tr>
<hr>
</table>
</div>
<div id="notificationFooter"></div>
</div>
And here is the CSS styling for it:
#nav{list-style:none;margin: 0px;padding: 0px;}
#nav li {
float: left;
margin-right: 20px;
font-size: 14px;
font-weight:bold;
}
#nav li a{color:#333333;text-decoration:none}
#nav li a:hover{color:#006699;text-decoration:none}
#notification_li
{
position:relative
}
#notificationContainer
{
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
color : #ffffff;
position: absolute;
top: 30px;
margin-left: -170px;
width: 400px;
z-index: -1;
display: none; // Enable this after jquery implementation
}
// Popup Arrow
#notificationContainer:before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
border: 10px solid black;
border-color: transparent transparent white;
margin-top: -20px;
margin-left: 188px;
}
#notificationTitle
{
text-align: center;
font-weight: bold;
padding: 8px;
font-size: 12px;
background-color: #ffffff;
border-bottom: 1px solid #dddddd;
color: #555;
}
#notificationsBody
{
padding: 33px 0px 0px 0px !important;
min-height:300px;
}
#notificationFooter
{
background-color: #e9eaed;
text-align: center;
font-weight: bold;
padding: 8px;
font-size: 12px;
border-top: 1px solid #dddddd;
}
#notification_count
{
padding: 3px 7px 3px 7px;
background: #cc0000;
color: #ffffff;
font-weight: bold;
margin-left: 25px;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
position: absolute;
margin-top: -11px;
font-size: 11px;
}
However, there seems to be an issue with the clickable links within the notificationsBody. Clicking on the links does not trigger any action. It's possible that the problem lies within the z-index. Any assistance in resolving this would be greatly appreciated.