axnst2
asked on
Change CSS to show Notification Bar
Hi Experts,
I need help changing the attached CSS (MVC5) so that I may show a notification bar in the header. So the header currently looks like this:
and I'd like to change it to look like this:
and I want to be able to set both the notification image and number at runtime.
Any help would be greatly appreciated!
bootstrap-cerulean.css
I need help changing the attached CSS (MVC5) so that I may show a notification bar in the header. So the header currently looks like this:
and I'd like to change it to look like this:
and I want to be able to set both the notification image and number at runtime.
Any help would be greatly appreciated!
bootstrap-cerulean.css
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
My problem is that I soon as I start adding things to the header the height of the header keeps growing and growing and growing. I just want to add something next to the login information.
ASKER
Is this hard to do or something? I am horrible with formatting specially in CSS
Just need to see your html ....
ASKER
What I have works, functionally, I just can't get it to look like it does on my picture mockups on my original post...
<script src="/Scripts/jquery-1.9.1.js"></script>
<script>
var notificationInfo;
$(document).ready(
function() {
setInterval(function() {
$.getJSON
(
"/Home/GetAlerts?t=" + (new Date()).getTime(),
function (dataResponse) {
notificationInfo = dataResponse;
if (notificationInfo == null) { return; }
var link = '@Html.ActionLink("NumOfNotifications", "ViewAllNotificationsForCurrentUser", "Notification")';
link = link.replace('NumOfNotifications', notificationInfo.NumberOfNotifications);
var myUL = document.getElementById('myUL');
var li1 = document.getElementById('myLI1');
var li2 = document.getElementById('myLI2');
var li3 = document.getElementById('myLI3');
var li4 = document.getElementById('myLI4');
if (li3 != null)
{
myUL.removeChild(li3);
}
if (li4 != null) {
myUL.removeChild(li4);
}
myUL.removeChild(li1);
myUL.removeChild(li2);
li3 = document.createElement('LI');
li3.setAttribute("id", "myLI3");
li3.innerHTML = link;
li4 = document.createElement('LI');
li4.setAttribute("id", "myLI4");
li4.innerHTML = "<img src='" + notificationInfo.NotificationImage + "' alt='i'/>";
myUL.appendChild(li4);
myUL.appendChild(li3);
myUL.appendChild(li1);
myUL.appendChild(li2);
}
);
}, 5000);
});
</script>
@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
{
@Html.AntiForgeryToken()
<ul class="nav navbar-nav navbar-right" id="myUL">
<li id="myLI1">
@Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
</li>
<li id="myLI2"><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
</ul>
}
}
else
{
<ul class="nav navbar-nav navbar-right">
<li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
<li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
</ul>
}
Can we see the rendered HTML - do a view source on the page and copy / paste that.
Also can you post the JSON that GetAlerts returns
Also can you post the JSON that GetAlerts returns
ASKER
I figured out what I needed to do. I'm awarding the points for the effort nonetheless! Thank you!
Open in new window