How do I write a notification bar in JavaScript similar to the one that you see on Stack Overflow?
In my project they are asking for one just the same as this website I wrote the code for this for this but I am not getting the exact one .,
I want to know about the cookie logic and vertical slidiing and fadeout and any modifications in the code.
<html>
<head>
<script type="text/javascript">
function UpgradeToIE(){
location.href = "http://sp.uk.ask.com/en/docs/about/ieak8/download.shtml";
}
function UpgradeOptOut(){
//call a10.anim.fadeIn(notification_bar,2)
//update cookie to set the notificationOptOut to yes.
}
</script>
<style type="text/css">
#notification_bar{
padding:10px;
background-color:#F7EB61;
text-align:left;
font:Bold 13px Arial;
}
#notification_upgrade{
}
#notification_msg{
}
#notification_close{
float:right;
}
</style>
</head>
<body>
<c:if test="${elf:isLocaleUK(model.request.locale)}">
<c:if test="${(model.request.parameters.browser.isIE and model.request.browser.version < 8.0)}>
// get cookie values - if not use cookie.getcooke(name) method
<c:set var="notificationCount" value="${model.request.parameters.myJeevesNotificationCount}" />
<c:set var="notificationOptOut" value="${model.request.parameters.myJeevesNotificationOptOut}" />
<c:when test="${empty notificationCount and empty notificationOptOut}">
// set the above two values to cookie(how) with default values of 1 for count and No for optout
<script type="text/javascript> </script>
<c:set var="showMessage" value="Yes" />
</c:when>
<c:otherwise>
<c:if test="${notificationOptOut eq 'No' and notificationCount lt 3}>
//need to increase the notification counter and set it to cookie
<c:set var="showMessage" value="Yes" />
</c:if>
</c:otherwise>
<c:if test="${showMessage eq 'Yes'>
<div id="notification_bar" >
<span> Jeeves has noticed that you are running <fmt:message var="notification_msg" key="message.a10.mystuff.notification_msg"/> </span>
<span ><input type="image" src="C:\Documents and Settings\Desktop\clickHere.gif" onclick="UpgradeToIE()"/> </span>
<span id="notification_close"><input type="image" src="C:\Documents and Settings\Desktop\close.gif" onclick="UpgradeHide()"</span>
</div>
</c:if>
</c:if>
</c:if>
</body>
</html>
Any suggestions?