i am new in Java EE development.
My problem is to set the bootstrap navbar class to active, if the user will go to another side.
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>
Sign Up</a></li>
<li id="login" class="active"><a href="/login.do">
<span class="glyphicon glyphicon-log-in">
</span> Login</a>
</li>
</ul>
Actual i have set the "Login" Button in the "navbar" to active.
Now i would like to make it possible, that the active Button in the navbar will switch if the user goes to another site. I tried it with javascript but it does not work in my java-ee project.
You did not specify which UI framework you are using. For JSF you can do something like the followin:
You can check the current view id with the EL expression #{view.viewId} and add the styleClass if it matches your expectations:
<ul class="nav navbar-nav navbar-right">
<li styleClass="#{view.viewId == 'login' ? 'active' : ''">
<a href="#">
<span class="glyphicon glyphicon-user"></span>Sign Up
</a>
</li>
<li id="login" styleClass="#{view.viewId == 'login' ? 'active' : ''">
<a href="/login.do">
<span class="glyphicon glyphicon-log-in"></span> Login
</a>
</li>
</ul>
Related
I am trying to change glyphicon on click event. From console I found out that classes are not set properly.
From Inspect Element
<span _ngcontent-c2="" class="glyphicon-menu-up" ng-reflect-klass="glyphicon glyphicon-menu-up ar" ng-reflect-ng-class="[object Object]"></span>
This is the code I did in HTML part.
CODE:
<ul class="nav third-nav">
<li appExpandMenu (click)="isCollapsedA=!isCollapsedA">
<a>
<span [ngClass] = "{'glyphicon glyphicon-menu-up arrow': !isCollapsedA, 'glyphicon glyphicon-menu-right arrow': isCollapsedA}" class="glyphicon glyphicon-menu-{{sign}} arrow"></span>
<span class="third-menu-title">Docs</span>
</a>
</li>
<ul class="nav third-nav">
<li appExpandMenu (click)="isCollapsedA=!isCollapsedA">
<a>
<span [ngClass] = "{'glyphicon glyphicon-menu-up arrow': !isCollapsedA, 'glyphicon glyphicon-menu-right arrow': isCollapsedA}" class="glyphicon glyphicon-menu-{{sign}} arrow"></span>
<span class="third-menu-title">Docs</span>
</a>
</li>
you should apply [ngClass] like this:
[ngClass] ="isCollapsedA ? 'glyphicon glyphicon-menu-right arrow' : 'glyphicon glyphicon-menu-up arrow'"
This is perhaps the code you need .
https://stackblitz.com/edit/angular-ngclass-u5bzma?file=app%2Fapp.component.html
I need to display the name of the user next to the logout option on my navbar. The way I did this was as follows:
<ul class="nav navbar-nav navbar-right">
<li>${userName}</li>
<li repeat.for="row of router.navigation" if.bind="row.settings.pos == 'right'" class="${ row.isActive ? 'link-active' : '' }">
<a href.bind="row.href" if.bind="!row.settings.nav">${ row.title }</a>
I thought that if I added another list item it in the nav navbar-nav it would display as all the other menu items do. Instead I got:
I have highlighted the name admin as, if I didnt it would be black on black. Its not receiving the correct styling as the other menu items have.
How do I render the admin list item so it displays like all the other list items?
EDIT
Looking at the question it was pointed out it was light on on background. It was late at night.
Yes I am using bootstrap version 3.
Here is the full html of the navbar view model:
<template>
<require from="./navmenu.css"></require>
<div class="main-nav">
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/home">Jobsledger</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li repeat.for="row of routes" if.bind="row.settings.pos == 'left'" class="${ row.isActive ? 'link-active' : '' }">
<a href.bind="row.href" if.bind="!row.settings.nav">${ row.title }</a>
<a href.bind="row.href" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
if.bind="row.settings.nav">
${row.title}
<span class="caret"></span>
</a>
<ul if.bind="row.settings.nav" class="dropdown-menu">
<li repeat.for="menu of row.settings.nav">
<a href.bind="menu.href">${menu.title}</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>${userName}</li> //HERE - THIS LINE DOESNT RENDER PROPERLY.
<li repeat.for="row of routes" if.bind="row.settings.pos == 'right'" class="${ row.isActive ? 'link-active' : '' }">
<a href.bind="row.href" if.bind="!row.settings.nav">${ row.title }</a>
<a href.bind="row.href" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
if.bind="row.settings.nav">
${row.title}
<span class="caret"></span>
</a>
<ul if.bind="row.settings.nav" class="dropdown-menu">
<li repeat.for="menu of row.settings.nav">
<a href.bind="menu.href">${menu.title}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
${userName}
</template>
Here is the typescript file behind it:
import { autoinject, bindable, bindingMode } from "aurelia-framework";
import { Router } from 'aurelia-router'
import { AuthService } from '../../auth/auth-service'
#autoinject
export class Navmenu {
public userName: string = 'anonymous';
private userRole = localStorage.getItem("user_role");
constructor(public authService: AuthService, public router: Router) {
this.userName = authService.getUserName();
}
get routes() {
return this.router.navigation.filter(r => r.settings.roles.indexOf(this.userRole) > -1);
}
}
I wanted to separate the left menu items with the right menu items so there are two sections. This is the right side where you have the user name and the option to logout. The display of the user name is done as a list item in the unordered list tag but before repeat for the right menu items.
I am writing testcase on logout functionality. When the code is executed it show element is notclickable at point.
element.all(by.css('.dropdown-user a')).then(function(items) {
items[0].click();
ptor.sleep(500);
});
view.html
<li class="dropdown dropdown-user">
<a href="#" class="dropdown-toggle" id="logout" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<img alt="" class="img-circle" src="../../assets/admin/layout/img/avatar3_small.jpg"/>
<span class="username username-hide-on-mobile">
</span>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<i class="icon-user"></i> My Profile
</li>
<li>
<i class="icon-calendar"></i> My Calendar
</li>
<li>
<i class="icon-envelope-open"></i> My Inbox <span class="badge badge-danger">3 </span>
</li>
<li>
<i class="icon-rocket"></i> My Tasks <span class="badge badge-success">7 </span>
</li>
<li class="divider">
</li>
<li>
<i class="icon-lock"></i> Lock Screen
</li>
<li ng-click="logout()">
<i class="icon-key"></i> Log Out
</li>
</ul>
</li>
Is there any way to oprn this dropdown? Could you please let me know how to write the code to test it?
You can try the xpath way
//li[contains(#class, 'dropdown')]/ul[contains(#class, 'dropdown')].
I am not sure if this is what you are looking for
When I use the find element by ID it is not working in my code.
--This is the HTML where the 4 tabs appears. Under each option there is nav option which has the id. Each of the 4 tabs also has ids. But identifying using those are not working.
HTML:
<nav id="monitoring-tab" class="pure-menu pure-menu-open pure-menu-horizontal ng-scope">
<ul>
<li id="now-tab" ui-sref-active="pure-menu-selected" ng-hide="hideTab.now" class="ng-hide">
<a ui-sref="app.monitoring.real-time" href="#/monitoring/real-time">
Now</a>
</li>
<li id="day-tab" ui-sref-active="pure-menu-selected" class="pure-menu-selected">
<a ui-sref="app.monitoring.historical.day" href="#/monitoring/historical/day">
Day</a>
</li>
<li id="month-tab" ui-sref-active="pure-menu-selected">
<a ui-sref="app.monitoring.historical.month" href="#/monitoring/historical/month">
Month</a>
</li>
<li id="year-tab" ui-sref-active="pure-menu-selected">
<a ui-sref="app.monitoring.historical.year" href="#/monitoring/historical/year">
Year</a>
</li>
<li id="lifetime-tab" ui-sref-active="pure-menu-selected">
<a ui-sref="app.monitoring.historical.lifetime" href="#/monitoring/historical/lifetime">
Lifetime</a>
</li>
</ul>
</nav>
<div id="date-range" ng-hide="stateName =='app.monitoring.historical.lifetime'" class="ng-scope">
<span>
<a id="historical-nav-prev" ui-sref="app.monitoring.historical.day({date:'2014-10-16'})" href="#/monitoring/historical/day?date=2014-10-16">
<i class="fa fa-chevron-left"></i>
</a>
</span>
<span class="ng-binding">Fri, Oct 17, 2014</span>
<span ng-show="historicalNav.nextDateBtnShown" class="ng-hide">
<a id="historical-nav-next" ui-sref="app.monitoring.historical.day({date:''})" href="#/monitoring/historical/day?date=">
<i class="fa fa-chevron-right"></i>
</a>
</span>
</div>
MyCode:
it('Should click on the previous day', function() {
element(by.id('historical-nav-prev')).click();
});
Error:
NoSuchElementError: No element found using locator: By.id("historical-nav-p
rev")
What is wrong here? Most of the id's I am using are not working.
I am using bootstrap 3 dropdown toggle menu in my angularjs project and everything seems to be working fine but after using angular ui bootstrap (angular-ui-bootstrap.min.js) the bootstrap 3 dropdown toggle menu is not working (meaning its not opening). Does anyone had the same issue? Please help me on how to solve this.
Index.html
<ul class="nav nav-list">
<li>
<a href="index.html">
<i class="icon-dashboard"></i>
<span class="menu-text"> Dashboard </span>
</a>
</li>
<li>
<a href="#" class="dropdown-toggle">
<i class="icon-building"></i>
<span class="menu-text"> Projects </span>
<b class="arrow icon-angle-down"></b>
</a>
<ul class="submenu">
<li>
<a href="#">
<i class="icon-double-angle-right"></i>
Find Project
</a>
</li>
<li>
<a href="#">
<i class="icon-double-angle-right"></i>
Create Project
</a>
</li>
<li>
<a href="#">
<i class="icon-double-angle-right"></i>
Update Project
</a>
</li>
</ul>
</li>
<ul>
You need to do it the Angularjs way:
Make sure to include:
Index:
<ul class="nav nav-list">
<li>
<a href="index.html">
<i class="icon-dashboard"></i>
<span class="menu-text"> Dashboard </span>
</a>
</li>
<li class="dropdown" ng-controller="DropdownCtrl">
<a class="dropdown-toggle">
<i class="icon-building"></i>
<span class="menu-text"> Projects </span>
<b class="arrow icon-angle-down"></b>
</a>
<ul class="dropdown-menu">
<li ng-repeat="choice in items">
<i class="icon-double-angle-right"></i>
<a>{{choice}}</a>
</li>
</ul>
</li>
<ul>
JS:
angular.module('plunker', ['ui.bootstrap']);
function DropdownCtrl($scope) {
$scope.items = [
"Find Project",
"Create Project",
"Update Project"
];
}