ExpressJs: using Navbar on views - css

I'm using ExpressJS and EJS as my Views.
in my navbar I have links that need to have a class="active" when the user is on that current page. put if I use partials in my views. how am I going to do it?
sample
Index.ejs
<ul class="nav navbar-nav navbar-right">
<li><a class="active" href="/Index">Home</a></li>
<li>About</li>
<li>Work</li>
</ul>
About.ejs
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li><a class="active" href="/About">About</a></li>
<li>Work</li>
</ul>
Work.ejs
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li><a class="active" href="/Work">Work</a></li>
</ul>
that is my way of doing it!.. by making a navbar everytime I make a new page
how should I make it that when i render a new page is doesn't need to render the navbar again?

You could pass the value of the "active" route as a local var to the partial..
<%- include('partial/nav', {active: "About"}); %>
Then, check the active var to set the "active" class in the nav partial template:
<ul class="nav navbar-nav navbar-right">
<li><a <%if(active=="Home"){%>class="active"<%}%> href="/Index">Home</a></li>
<li><a <%if(active=="About"){%>class="active"<%}%> href="/About">About</a></li>
<li><a <%if(active=="Work"){%>class="active"<%}%> href="/Work">Work</a></li>
</ul>
Here's a similar approach

You should load your navigation like this--
<script>
$("#header").load("header.ejs");
</script>
Then retrieve the url of the current page and from that retrieve the active page name . Then use this function to add the active class to the current page,
$(document).ready(function($){
var url = window.location.href;
$('.nav li a[href="'+url+'"]').addClass('active');
});
NOTE: you need to retrieve the page name from your url through some function as it would be the full page url.
You will have to write the header.ejs only once and include it on every page.
Hope this helps!

Related

Accessibility - make dropdown (sub) menu keyboard accessible as well

I am trying to make the dropdown menu of my navigation bar keyboard accessible as well. However, unsuccessfully. I have read WAI instructions and applied them but it doesn't seem to work. I don't want to use javascript (if possible)! The following is the code:
<nav id="main-menu" role="navigation" aria-label="Main navigation" role="navigation"class="fixed">
<ul class="sf-menu fixed" id="menu">
<li class="dropdown"> Υπουργείο
<ul role="menubar" aria-label="Main Menu" >
<li>Όραμα και Αποστολή</li>
<li>Υπουργός</li>
<li>Γενικός Διευθυντής</li>
<li>Προηγούμενοι Υπουργοί</li>
<li>Οργανωτική Δομή</li>
<li>Συμβούλια / Επιτροπές</li>
</ul>
</li>
<li class="dropdown"> Επιδόματα και Παροχές
<ul>
<li>Ελάχιστο Εγγυημένο Εισόδημα και Δημόσιο Βοήθημα</li>
<li class="dropdown">Οικογένειας και Παιδιού
<ul>
<li>Ειδικό Βοήθημα Τοκετού σε Άγαμες Μητέρες
<li>Επίδομα Τέκνου, Επίδομα Μονογονεϊκής Οικογένειας
<li>Τιμητικό Επίδομα Πολύτεκνης Μάνας
<li>Επίδομα Πατρότητας
<li>Σχέδιο Παραχώρησης Ωφελημάτων σε Οικογένειες που Αποκτούν Τρίδυμα και Άνω </ul>
</li>
<li>Εργασίας/Ανεργίας</li>
</ul>
</li>
</ul>
Also, I would like to add a small arrow which changes accordingly when the menu is expanded/collapsed. How can I do that with CSS and for it to be keyboard accessible as well?
Thanks in advance.

The page does not load when I press the tab link

The page does not load when I first click on the 'All' tab. Blank page loading. It comes when clicked for the second time. How can I get it to load on the first click?
<ul class="nav nav-tabs"></ul>
<li><a asp-action="OverTimeRequest" asp-controller="FazlaMesai">Fazla Mesai Talebi</a></li>
<li><a data-toggle="tab" href="#home">All</a></li>
<li><a data-toggle="tab" onclick="getAllOvertimeListFilter(durum='Beklemede')" href="#menu1">Waiting</a></li>
<li><a data-toggle="tab" onclick="getAllOvertimeListFilter(durum='Reddedildi')" href="#menu2">Cancel</a></li>
</ul>

No link to controller/action when using tag helper

I have the following in my _layout.cshtml:
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
</ul>
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="User" asp-action="Index">User</a></li>
</ul>
And I have both controllers and both actions - neither have any attributes. The first link works as expected and I can step into the index action on the home controller when clicked.
Intellisense in the _layout page can see the controllers and actions and I can F12 to both.
But the second link is failing and all I get is localhost:12345/.
I've tried the full asp-route="User/Index" with the same result. I can navigate directly to localhost:12345/User/Index and hit the break point in the controller. This must be something silly, but for the life of me (and two others) we can't see it. Any help much appreciated.
From Startup.cs:
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=User}/{action=Index}/{id?}"
);
});

How to dynamically set a menu item class name with MVC4?

For a new application we are using Bootstrap v3.0, which has the navigation menu defined as follows:
<div id="sidebar">
<ul>
<li class="active"><i class="icon-home"></i> <span>Dashboard</span></li>
<li class="submenu">
<i class="icon-beaker"></i> <span>UI Lab</span> <i class="arrow icon-chevron-right"></i>
<ul>
<li>Interface Elements</li>
<li>jQuery UI</li>
<li>Buttons & icons</li>
</ul>
</li>
<li class="submenu">
<i class="icon-th-list"></i> <span>Form elements</span> <i class="arrow icon-chevron-right"></i>
<ul>
<li>Common elements</li>
<li>Validation</li>
<li>Wizard</li>
</ul>
</li>...
This is currently sitting in a shared _Layout.cshtml, and don't currently see a need to move this into its own shared view.
The layout template consists of several static files with <li class="active"> hard coded for the corresponding menu item within that file.
Since I'm building this with MVC4, I would like to know how to dynamically set this, based on the view being displayed.
Not sure best practice on this. You could try something like this:
<li class="#( RouteVariable.CurrentController.Equals("Home") ? "active" : "")">
Or RouteVariables.CurrentAction may be of use.

Traversing back to parent node in xpath

Below is my HTML
<ul><li class="section">BROADCASTING</li>
<ul>
<li class="subsection"></li>
<li class="circle">STATION BREAK</li>
<li class="circle">Labor pains, hunger pangs</li>
<li class="circle">Wake-up call for Dream Team</li>
<li class="circle">News crew turns rescuer</li>
<li class="circle">Chopper safety had been challenged</li>
<li class="circle">Nielsen adds Dayton..</li>
<li class="circle">Mondale watch</li>
<li class="circle">Those 70s clearances</li>
<li class="circle">Oscar goes to ABC</li>
<li class="circle">Hearst-Argyle gives a green light</li>
<li class="circle">Finding Geena Davis</li>
<li class="circle">Syndication Wrap-up</li>
<li class="circle">CBS TV news pioneer dies at 86</li>
<li class="circle">New York anchor remembered</li>
<li class="circle">News sharing in West Virginia</li>
<li class="circle">News dropping in Orlando</li>
<li class="subsection">Null</li>
<li class="circle">GET WITH THE PROGRAM</li>
<li class="subsection">PEOPLE'S CHOICE</li>
<li class="circle">Syndication as branding</li>
</ul>
</ul>
Now i want to seperate sections and subsections and get the url inside subsections.
i have go to the each sections
Now as per the HTML structure, section is in seperate li which closes before subsection opens, so once i have reached section, i have to move back to ul and then have to continue to get subsection
However when i try ../ to go back to the ul (the one before section), it says ivalid token
This is what i tried to come back to the parent one.
HtmlNodeCollection sections = doc.DocumentNode.SelectNodes("//ul/li[#class='section'][contains(text(), 'BROADCASTING')]../ul");
but this does not works
Can anyone tell me where i am going wrong, it will be a kind help.
You need to change your xpath expression a bit:
var subsections = doc.DocumentNode.SelectNodes("//ul/ul[preceding-sibling::li[#class='section' and .='BROADCASTING']]/li[#class='subsection']");
It searches for <ul> inside <ul> that has <li class="section">BROADCASTING</li> as a previous sibling, and then searches for <li class="subsection"> inside it.
So the code above selects all the subsections under BROADCASTING section.
Hope this helps.

Resources