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>
Related
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.
I am trying to add a bootstrap menu to my angular 6 project. This is the code
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">User</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Customer</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">OL User</a>
</div>
</li>
</ul>
The issue is, when I click customer link, URL redirect to the localhost:4200/#
and submenu is not opening. below code techniques, I used to project:
app.component.ts
import {HashLocationStrategy, LocationStrategy} from '#angular/common';
app.routing.module.ts
#NgModule({
imports: [RouterModule.forRoot(routes,{useHash: true})],
exports: [RouterModule],
})
Local redirects in Angular are usually done by using routerLink:
From the DOCS
<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" queryParamsHandling="merge">
link to user component
</a>
More information about Angular routing
You can use href if you want. But the biggest issue is that you haven't associated a component with a route.
Take a look at this example
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!
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.
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.