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 -->
Related
I have a menu which has categories with subcategories. I want to show/hide the list elements but the catch is I need the first 2 elements to show all the time. I have tried to look for the solution everywhere and the closest I came was jQuery toggle show/hide elements after a certain number of matching elements
but this doesn't seem to be working for me as my filters are little more complicated. Can someone please help me with this. Clicking on 'Sub-Categories' shows/hides links.
Also i must add the default state must be collapsed.
My basic fiddle without any style
HTML code:
<li class="children level1">
<a href="https://dev.holmescustom.com/signage/office-signage">
<span>Office Signs</span>
</a>
<ul class="level1" style="display: block;">
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/wash-hands-hygiene">
<span>Wash Hands and Hygiene</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/entrance-and-exit">
<span>Entrance & Exit Signage</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/way-finding">
<span>Way-finding Signage</span>
</a>
</li>
</ul>
</li>
<li class="children level1">
<a href="https://dev.holmescustom.com/signage/shop-by-template">
<span>Shop by Template</span>
</a>
<ul class="level1" style="display: block;">
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/smoking-no-vaping-signs">
<span>Smoking & Vaping</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/parking-signs">
<span>Parking</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/store-hours">
<span>Store Hours</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/restrooms-signs">
<span>Restrooms</span>
</a>
</li>
</ul>
</li>
jQuery code:
jQuery('li.children.level1').each(function () {
if (jQuery(this).find('ul').length) {
jQuery(this).append('Sub-Categories');
}
});
jQuery('.subCat').click(function () {
jQuery(this).prev('ul:first.level1').slideToggle();
});
To achieve expected result, use below option
jQuery('.subCat').click(function () {
jQuery(this).parent().find('li:gt(1)').slideToggle();
});
Subcategories parent
Find li greater than 1 (li's index starts from 0 )
Hide by default, using jQuery(this).find('li:gt(1)').hide()
code sample for reference - https://codepen.io/nagasai/pen/omYKzv?editors=1010
jQuery('li.children.level1').each(function () {
if (jQuery(this).find('ul').length) {
jQuery(this).append('Sub-Categories');
}
jQuery(this).find('li:gt(1)').hide()
});
jQuery('.subCat').click(function () {
jQuery(this).parent().find('li:gt(1)').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="children level1">
<a href="https://dev.holmescustom.com/signage/office-signage">
<span>Office Signs</span>
</a>
<ul class="level 1" style="display: block;">
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/wash-hands-hygiene">
<span>Wash Hands and Hygiene</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/entrance-and-exit">
<span>Entrance & Exit Signage</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/way-finding">
<span>Way-finding Signage</span>
</a>
</li>
</ul>
</li>
<li class="children level1">
<a href="https://dev.holmescustom.com/signage/shop-by-template">
<span>Shop by Template</span>
</a>
<ul class="level1" style="display: block;">
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/smoking-no-vaping-signs">
<span>Smoking & Vaping</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/parking-signs">
<span>Parking</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/store-hours">
<span>Store Hours</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/restrooms-signs">
<span>Restrooms</span>
</a>
</li>
</ul>
</li>
Change your javascript that do the slideToggle as this;
jQuery('.subCat').click(function () {
var ul = jQuery(this).prev('ul:first.level1');
var li = ul.find('li:gt(1)');
li.slideToggle();
});
I have two sidebar menu Income and Expense. Under each menu there are some sub-menus. I want that whenever I click on Income menu the sub-menus will show under it. But whenever click on Expense the other sub-menus will show under it and Income menu's sub-menu become hide.
But in my website those are overlap each other.
Here is the html
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li>
<i class="fa fa-clock-o m-r-10" aria-hidden="true"></i>Title
</li>
<li class="nav-item-one">
<a href="" class="waves-effect"><i class="fa fa-user m-r-10" aria-hidden="true"></i>
<span class="menu-title">Income</span></a>
<ul class="menu-content">
<li>
<a href="/income" data-i18n="nav.cards.card_bootstrap" class="menu-item">
Add Income
</a>
</li>
<li>
<a href="/dailyIncomeReport" data-i18n="nav.cards.card_bootstrap" class="menu-item">
Daily Report
</a>
</li>
</ul>
</li>
<li class="nav-item-two">
<a href="" class="waves-effect"><i class="fa fa-table m-r-10" aria-hidden="true"></i>
<span class="menu-title">Expense</span></a></a>
<ul class="menu-content-two">
<li>
<a href="/expense" data-i18n="nav.cards.card_bootstrap" class="menu-item">
Add Expense
</a>
</li>
<li>
<a href="/dailyExpenseReport" data-i18n="nav.cards.card_bootstrap" class="menu-item">
Daily Report
</a>
</li>
</ul>
</li>
</ul>
</nav>
<script type="text/javascript">
$(document).ready(function($) {
//$('.menu-content').hide();
$(".nav-item-one:has(ul)").click(function(){
('.menu-content-two').hide();
$("ul",this).toggle('slow');
});
//$('.menu-content-two').hide();
$(".nav-item-two:has(ul)").click(function(){
$('.menu-content').hide();
$("ul",this).toggle('slow');
});
});
</script>
this is what you are looking for.
$(".nav-item-one").click(function(){
$('.menu-content-two').hide();
$("ul",this).toggle('slow');
});
//$('.menu-content-two').hide();
$(".nav-item-two").click(function(){
$('.menu-content').hide();
$("ul",this).toggle('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li>
<i class="fa fa-clock-o m-r-10" aria-hidden="true"></i>Title
</li>
<li class="nav-item-one">
<a href="javascript:;" class="waves-effect"><i class="fa fa-user m-r-10" aria-hidden="true"></i>
<span class="menu-title">Income</span></a>
<ul class="menu-content">
<li>
<a href="/income" data-i18n="nav.cards.card_bootstrap" class="menu-item">
Add Income
</a>
</li>
<li>
<a href="/dailyIncomeReport" data-i18n="nav.cards.card_bootstrap" class="menu-item">
Daily Report
</a>
</li>
</ul>
</li>
<li class="nav-item-two">
<a href="javascript:;" class="waves-effect"><i class="fa fa-table m-r-10" aria-hidden="true"></i>
<span class="menu-title">Expense</span></a>
<ul class="menu-content-two">
<li>
<a href="/expense" data-i18n="nav.cards.card_bootstrap" class="menu-item">
Add Expense
</a>
</li>
<li>
<a href="/dailyExpenseReport" data-i18n="nav.cards.card_bootstrap" class="menu-item">
Daily Report
</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- 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!
<li>
<a href="#">
<i class="entypo-tools"></i>
<span class="title">PHP-SDK</span>
<span class="badge badge-secondary">3</span>
</a>
<ul>
<li class="dropdown-submenu">
<a href="/mypage_v2/sdk/installation">
<i class="entypo-inbox"></i>
<span class="title">Installation</span>
</a>
</li>
<li class="dropdown-submenu">
<a href="/mypage_v2/sdk/getStarted">
<i class="entypo-docs"></i>
<span class="title">Getting Started</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-flash"></i>
<span class="title">API-Endpoints</span>
<span class="badge badge-info">3</span>
</a>
<ul>
<li>
<a href="#">
<i class="entypo-newspaper"></i>
<span class="title">sample1</span>
<span class="badge badge-success">4</span>
</a>
<ul>
<li>
<a href="/mypage_v2/sdk/newsletter">
<i class="entypo-newspaper"></i>
<span class="title">sample1</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/newsletterEmail">
<i class="entypo-newspaper"></i>
<span class="title">sample2</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/newsletteranalytics">
<i class="entypo-newspaper"></i>
<span class="title">sample2</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/sample2">
<i class="entypo-newspaper"></i>
<span class="title">NewslettersProcess</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
If you use php rendering and on menu item click page refreshes, you can add class for example "active" to parent li(s), and in styles add li.active {display:block} or something like that style to show hidden elements
Finally i am ok with the condition of laravel routes
<li #if(Request::path() == "mypage_v2/applications/lists" || Request::path() == "mypage_v2/applications/register") class="active opened")#endif>
I am bound by a menu embed in a CMS (dont have source code), so this is what the menu looks like
<li class="dir dgn-root Item-2">
<span>Menu1</span><div class="mega_submenu Column2 Column3" style="display: none;">
<ul class="mega_submenu_ul">
<li>
<ul>
<li class=" first-item SunItem-1">
<a href="#" title="Templates">
<span>Templates</span>
</a>
</li>
<li class=" SunItem-2">
<a href="#" title="Questions and Answers">
<span>Questions and Answers</span>
</a>
</li>
<li class=" SunItem-3">
<a href="#" title="Template Package">
<span>Template Package</span>
</a>
</li>
<li class=" SunItem-4">
<a href="#" title="Silver Package">
<span>Silver Package</span>
</a>
</li>
</ul>
</li>
<li>
<ul>
<li class=" SunItem-5">
<a href="#" title="Gold Package">
<span>Gold Package</span>
</a>
</li>
<li class=" SunItem-6">
<a href="#" title="Platinum Package">
<span>Platinum Package</span>
</a>
</li>
<li class=" SunItem-7">
<a href="#" title="Features">
<span>Features</span>
</a>
</li>
<li class=" last-item SunItem-8">
<a href="#" title="Portfolio">
<span>Portfolio</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
What I need to try and do is
This is what it looks like now:
<li class=" last-item SunItem-8"><a href="#><span>Blah</span></a></li>
But I need to have Jquery or javascript insert a few HTML elements before this, so it looks like:
</li></ul><li><ul>
so it will look like this:
</li></ul><li><ul><li class=" last-item SunItem-8"><a href="#><span>Blah</span></a></li>
Any help is appreciated, I have tried
$(document).ready(function(){
$("img").before("<ul><li><b>Before</b></li></ul>");
});
But this does not seem to work, I have also tried this
<script>
(function() {
var lastItem = $("li.SunItem-8");
var currentList = lastItem.closest('ul');
var newList = $("</ul></li><li><ul>");
newList.insertAfter(currentList);
newList.append(lastItem);
})();
</script>
This seem to duplicate the text and does not actually form the HTML tags as expected - the html output looks like this once inserting the above script.
<li>
<ul>
<li class=" SunItem-5">
<a href="http://gentex/website-packages/gold-package.aspx" title="Gold Package">
<span>Gold Package</span>
</a>
</li>
<li class=" SunItem-6">
<a href="http://gentex/website-packages/platinum-package.aspx" title="Platinum Package">
<span>Platinum Package</span>
</a>
</li>
<li class=" SunItem-7">
<a href="http://gentex/website-packages/cms-features.aspx" title="CMS Features">
<span>CMS Features</span>
</a>
</li>
</ul>
<li>
<ul>
</ul>
<li class=" last-item SunItem-8">
<a href="http://gentex/website-packages/portfolio.aspx" title="Portfolio">
<span>Portfolio</span>
</a>
</li>
<li class=" SunItem-8">
<a href="http://gentex/website-packages/portfolio.aspx" title="Portfolio">
<span>Portfolio</span>
</a>
</li>
<li class=" last-item SunItem-8">
<a href="http://gentex/website-packages/portfolio.aspx" title="Portfolio">
<span>Portfolio</span>
</a>
</li>
</li>
</li>
You are not working with html, you can not just insert tags. You will need to remove() the element and append a the new list with that element.
var lastItem = $("li.SunItem-8");
var parent = lastItem.parent();
lastItem.remove();
var newUL = $("<ul>").append(lastItem);
parent.after(newUL);