<!-- BEGIN HEADER MENU -->
<div class="nav-collapse collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-fw dropdown-fw-disabled active open selected">
<a href="javascript:;" class="text-uppercase">
<i class="icon-home"></i> Home </a>
<ul class="dropdown-menu dropdown-menu-fw">
<li class="active">
<a href="{{ url('/externalphotoviewer') }}">
<i class="icon-bar-chart"></i> View Photo </a>
</li>
<li>
<a href="{{ url('about') }}">
<i class="icon-bulb"></i> About </a>
</li>
<li>
<a href="{{ url('contact') }}">
<i class="icon-graph"></i> Contact </a>
</li>
</ul>
</li>
<li class="dropdown dropdown-fw dropdown-fw-disabled ">
<a href="javascript:;" class="text-uppercase">
<i class="icon-home"></i> Upload </a>
<ul class="dropdown-menu dropdown-menu-fw">
<li class="active">
<a href="{{ url('picture/create') }}">
<i class="icon-bar-chart"></i> Upload Photo </a>
</li>
<li>
<a href="{{ url('about') }}">
<i class="icon-bulb"></i> View Photo List </a>
</li>
</ul>
</li>
</ul>
</div>
<!-- END HEADER MENU -->
Im trying to make the selected li tag active whenever a user click on it. It should be selected as the active tag. I tried the below code but it doesnt work. I am still very new to javascript. please help thank you
<script>
$(".li").on("click", function(){
$(".li").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
</script>
Try this code
li is element selector not a class selector
$(".dropdown-menu-fw li").on("click", function(e) {
e.preventDefault();//Remove this line to route to links
e.stopPropagation();
$(this).parents('.open').find("li").removeClass("active");
$(this).addClass("active");
});
$(".dropdown-menu-fw li").on("click", function(e) {
e.preventDefault();//Remove this line to route to links
e.stopPropagation();
$(this).parents('.open').find("li").removeClass("active");
$(this).addClass("active");
});
$(".dropdown-fw").on("click",function(){
$(".dropdown-fw").removeClass("open selected");
$(this).addClass("open selected");
})
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css');
.collapse {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="nav-collapse collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-fw dropdown-fw-disabled active open selected">
<a href="javascript:;" class="text-uppercase">
<i class="icon-home"></i> Home </a>
<ul class="dropdown-menu dropdown-menu-fw">
<li class="active">
<a href="{{ url('/externalphotoviewer') }}">
<i class="icon-bar-chart"></i> View Photo </a>
</li>
<li>
<a href="{{ url('about') }}">
<i class="icon-bulb"></i> About </a>
</li>
<li>
<a href="{{ url('contact') }}">
<i class="icon-graph"></i> Contact </a>
</li>
</ul>
</li>
<li class="dropdown dropdown-fw dropdown-fw-disabled ">
<a href="javascript:;" class="text-uppercase">
<i class="icon-home"></i> Upload </a>
<ul class="dropdown-menu dropdown-menu-fw">
<li class="active">
<a href="{{ url('picture/create') }}">
<i class="icon-bar-chart"></i> Upload Photo </a>
</li>
<li>
<a href="{{ url('about') }}">
<i class="icon-bulb"></i> View Photo List </a>
</li>
</ul>
</li>
</ul>
</div>
Hope this helps!
Related
I try to add class in li tag but it's not able to add via javascript function but it's just append on li tag while page is loading then it is disappeared. Can you ju help us how can i solve it?
active class is not set while we are selected to while we are click to one menu
html code
<div class="side-bar-wrap sidbr" id="sideBarsec">
<nav class="side-bar" style="width: 325px;background:linear-gradient(0deg, #37C4AA,#0B99A7);height:1382px;;">
<div class="logo-area">
<a href="{% url 'home' %}">
<img src="{% static 'website/vendors/images/Rectangle_33.png' %}" alt="" style="width: 176px; height:58px" />
</a>
</div>
<ul class="menu" id="navMenus">
<li class="homeicn nav-item">
<a href="{% url 'home' %}">
<span class="title menutitle">Client</span>
</a>
</li>
<li class="medicalicn nav-item">
<a href="#">
<span class="title menutitle">Medical</span>
</a>
</li>
<li class="socialicn nav-item">
<a href="#">
<span class="title menutitle">Social</span>
</a>
</li>
<li class="transporticn nav-item">
<a href="#">
<span class="title menutitle">Transportation</span>
</a>
</li>
<li class="activityicn nav-item">
<a href="#">
<span class="title menutitle">Activity</span>
</a>
</li>
<li class="foodicn nav-item">
<a href="#">
<span class="title menutitle">Food</span>
</a>
</li>
<li class="reportsicn nav-item">
<a href="#">
<span class="title menutitle">Reports</span>
</a>
</li>
<li class="scheduleicn">
<a href="{% url 'schedule' %}">
<span class="title menutitle">Schedule</span>
</a>
</li>
</ul>
</nav>
</div>
script code
<script>
$("#navMenus").on('click', 'li', function () {
alert("in navMenus click");
$("#navMenus li.active").removeClass("active");
// adding classname 'active' to current click li
$(this).addClass("active");
});
</script>
Try to write your jQuery code inside a document.ready
$(document).ready(function(){
$("#navMenus").on('click', 'li', function () {
alert("in navMenus click");
$("#navMenus li.active").removeClass("active");
// adding classname 'active' to current click li
$(this).addClass("active");
});
});
I want to draw dynamic sidebar menu data from database using AJAX in the adminlte 3 dashboard with bootstrap 4 dashboard. When I loaded sidebar menu data dynamically by using AJAX, sidebar open or collapse not working.My JSFiddle URL is given below. When static data push on '.sidebar' class without ajax, menu open/hide working. But using ajax call menu open/hide not working.
$(document).ready(function(){
var url = "";
$.ajax({
url: url,
}).done(function(resp){
//retrive data
var ret = '<nav class="mt-2"><ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="true"><li class="nav-item"><i class="nav-icon fas fas fa-user"></i><p>Admin<i class="right fas fa-angle-left"></i></p><ul class="nav nav-treeview"><li class="nav-item"><i class="far fa-circle nav-icon"></i><p>Rahim</p></li></ul><ul class="nav nav-treeview"><li class="nav-item"><i class="far fa-circle nav-icon"></i><p>Test</p></li></ul></li></ul></nav>';
$('.sidebar').html(ret);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="sidebar-mini sidebar-closed sidebar-collapse" style="height: auto;">
<!-- Site wrapper -->
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-primary navbar-dark">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<!--
<li class="nav-item d-none d-sm-inline-block">
Home
</li>
<li class="nav-item d-none d-sm-inline-block">
Contact
</li>
-->
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
<img src="public/images/login_man.png" class="user-image img-circle elevation-2" alt="User Image">
<span class="d-none d-md-inline">admin</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<!-- Menu Footer-->
<li class="user-footer">
<!--Profile-->
Sign out
</li>
</ul>
</li>
<!--
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
<i class="fas fa-th-large"></i>
</a>
</li>
-->
</ul>
</nav>
<!-- /.navbar --><aside class="main-sidebar main-sidebar-custom sidebar-dark-primary elevation-4">
<a href="#" class="brand-link">
<i class="brand-image fas fa-tachometer-alt" style="opacity: .8"></i>
<span class="brand-text font-weight-light">Dashboard</span>
</a>
<div class="sidebar">
</div>
</aside>
<div class="container-fluid">
<div class="content-wrapper" style="min-height: 549px;">
</div>
</div>
</div>
</body>
Just put the code after success function and it will work.
$('[data-widget="treeview"]').Treeview('init');
I have a sidebar with few <li> elements in it. as shown below
<div class="sidebar-wrapper">
<ul class="nav">
<li class="nav-item active ">
<a class="nav-link" href="/">
<i class="material-icons">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./overview.html">
<i class="material-icons">explore</i>
<p>Overview</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./user.html">
<i class="material-icons">person</i>
<p>User Profile</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./tables.html">
<i class="material-icons">content_paste</i>
<p>Table List</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./typography.html">
<i class="material-icons">library_books</i>
<p>Typography</p>
</a>
</li>
[
When I click on other tabs such as Overview , User Profile , i want that purple highlight to be active on that class.
How do i achieve that using jquery?
<script>
$(document).ready(function() {
$('.sidebar-wrapper a').click(function(e){
.....
});
});
</script>
Since the navigation is not client side. You should listen to document ready event; when the page loads find the link with current location and highlight it.
$(document).ready(function() {
var link = $('.nav').find('a[href=".' + window.location.pathname + '"]');
link.parent().addClass('active');
});
Also make sure you remove active class from other links :)
Try following. Firstly, remove the active class from all the li's and then apply active class to the li which is the parent of the clicked a.
Please note, just added e.preventDefault() for example here and may not be required in actual code.
$(document).ready(function() {
$('.sidebar-wrapper a').click(function(e) {
$('.sidebar-wrapper li').removeClass("active");
$(e.currentTarget).parent().addClass("active");
e.preventDefault();
});
});
.active > a {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar-wrapper">
<ul class="nav">
<li class="nav-item active ">
<a class="nav-link" href="/">
<i class="material-icons">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./overview.html">
<i class="material-icons">explore</i>
<p>Overview</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./user.html">
<i class="material-icons">person</i>
<p>User Profile</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./tables.html">
<i class="material-icons">content_paste</i>
<p>Table List</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./typography.html">
<i class="material-icons">library_books</i>
<p>Typography</p>
</a>
</li>
</ul>
</div>
I'm facing a trouble and I'm not understanding. I have a menu of configurations and a submenu when i click on it.
<li ui-sref-active="active">
<a ui-sref="javascript:;">
<i class="fa fa-cogs"></i>
<span>Configurations</span>
</a>
<ul class="sub-menu">
<li ui-sref-active="active">
<a ui-sref="app.configurations.inventory">
<span>Devices</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.users">
<span>Users</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.networks">
<span>Networks</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.alerts">
<span>Alerts</span>
</a>
</li>
</ul>
</li>
<!-- configurations -->
The problem is when I set a ng-if I just can see the configurations menu and when I click on it I got the error "Could not resolve 'javascript:;' from state 'app'".
I know that "javascript:;" this is not defined in my routes file. This means anything specific ? This code wasnt mine and I'm trying to make some changes to control who can see the menu by doing a ng-if like
<!-- configurations -->
<li ng-if="permissionGroup.views.configurations" ui-sref-active="active">
<a ui-sref="javascript:;">
<i class="fa fa-cogs"></i>
<span>Configurations</span>
</a>
<ul ng-if="permissionGroup.views.configurations" class="sub-menu">
<li ui-sref-active="active">
<a ui-sref="app.configurations.inventory">
<span>Devices</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.users">
<span>Users</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.networks">
<span>Networks</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.alerts">
<span>Alerts</span>
</a>
</li>
</ul>
</li>
<!-- configurations -->
To get the permission group on Controller I had this piece of code
var user = JSON.parse(window.localStorage.getItem("userKey"));
$http.get('/api/organization_permissions_groups/'+user.organization_permission_group_id).success(function (data) {
$scope.permissionGroup = data;
});
You should use ng-show instead of ng-if:
<!-- configurations -->
<li ng-show="permissionGroup.views.configurations" ui-sref-active="active">
<a ui-sref="javascript:;">
<i class="fa fa-cogs"></i>
<span>Configurations</span>
</a>
<ul ng-show="permissionGroup.views.configurations" class="sub-menu">
<li ui-sref-active="active">
<a ui-sref="app.configurations.inventory">
<span>Devices</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.users">
<span>Users</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.networks">
<span>Networks</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.alerts">
<span>Alerts</span>
</a>
</li>
</ul>
</li>
<!-- configurations -->
I'm working on an AngularJS app where I use Bootstrap 3 to style my navigation (Navbar) and this works perfectly.
My headder
<div class="navbar-header">
<button class="pull-right visible-xs" ui-toggle-class="show" data-target=".navbar-settings">
<i class="glyphicon glyphicon-cog"></i></button>
<a class="navbar-brand text-lt" href="#/dashboard">
<img class="m-mid" ng-src="{{ logo }}" alt="{{ user.organization.name }}">
<span class="hidden-folded m-l-xs hide">{{app.name}}</span>
</a>
</div>
<div class="collapse navbar-collapse navbar-settings navbar-right">
<ul class="nav navbar-nav">
<li class="dropdown" dropdown>
<a href class="dropdown-toggle" dropdown-toggle>
{{lang.name}} <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li ng-repeat="lang in langs">
<a class="p-t-sm p-b-sm" ng-click="setLang(lang.key)">
{{lang.name}}
</a>
</li>
</ul>
</li>
<li class="dropdown" dropdown>
<a href class="dropdown-toggle" dropdown-toggle>
<span class="thumb-sm avatar pull-right">
<img class="block" ng-src="{{ user.image_path }}" alt="...">
<i class="on md b-white bottom"></i>
</span>
{{name} <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</div>
Right now when on mobile device it is the button in the navbar-header that appears and behaves like a toggle, as expected using Bootstraps navigation. This means the user have to click on it to open it, and then click on it again whenever he wants to close it.
And on tablet/desktop it is two dropdowns (from navbar-collapse). Which I want to keep it that way.
My question is: Is there a way, on mobiles, to have the button behave as a dropdown instead of a toggle? So a user can click anywhere he wants and it closes instead of having to click on the button?
How about this example?
var app = angular.module('app', ['ui.bootstrap']);
app.controller('menu', function($scope) {
$scope.logo = 'http://i.stack.imgur.com/P1BHs.png';
$scope.user = {};
$scope.user.organization = {};
$scope.user.organization.name = "Org test";
$scope.user.image_path = "http://ionicframework.com/img/docs/venkman.jpg";
$scope.app = {name: "App test"};
$scope.lang = {name: "English"};
$scope.langs = [{key: "EN", name: "English"},{key: "IT", name: "Italian"}];
$scope.name = "user123";
$scope.setLang = function(key) {
}
$scope.containerClick = function($event) {
console.log("containerClick: "+$scope.navCollapsed)
$scope.navCollapsed = true;
}
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.1.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-controller="menu">
<div class="navbar-header">
<button class="pull-right visible-xs" ui-toggle-class="show" data-target=".navbar-settings" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<i class="glyphicon glyphicon-cog"></i></button>
<a class="navbar-brand text-lt" href="#/dashboard">
<img class="m-mid" style="width: 200px" ng-src="{{ logo }}" alt="{{ user.organization.name }}">
<span class="hidden-folded m-l-xs hide">{{app.name}}</span>
</a>
</div>
<div class="collapse navbar-collapse navbar-settings navbar-right" uib-collapse="navCollapsed">
<ul class="nav navbar-nav">
<li class="dropdown" uib-dropdown>
<a href class="dropdown-toggle" uib-dropdown-toggle>
{{lang.name}} <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li ng-repeat="lang in langs">
<a class="p-t-sm p-b-sm" ng-click="setLang(lang.key)">
{{lang.name}}
</a>
</li>
</ul>
</li>
<li class="dropdown" uib-dropdown>
<a href class="dropdown-toggle" uib-dropdown-toggle>
<span class="thumb-sm avatar pull-right">
<img class="block img-circle" ng-src="{{ user.image_path }}" alt="...">
<i class="on md b-white bottom"></i>
</span> {{name}} <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</li>
</ul>
</div>
<div class="container container-exp" ng-click="containerClick($event)"></div>
<footer>
<hr />
<center>2016 XYZ. All Rights reserved.</center>
</footer>
</body>
</html>