Link to home
Start Free TrialLog in
Avatar of axnst2
axnst2Flag for United States of America

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:

User generated image
and I'd like to change it to look like this:

User generated image
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
Avatar of Shaun Vermaak
Shaun Vermaak
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
See @Html.Partial("_LoginPartial")
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Open in new window

Avatar of axnst2

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.
Avatar of axnst2

ASKER

Is this hard to do or something?  I am horrible with formatting specially in CSS
Just need to see your html ....
Avatar of axnst2

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>
}

Open in new window

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
Avatar of axnst2

ASKER

I figured out what I needed to do.  I'm awarding the points for the effort nonetheless!  Thank you!