I have 3 div's and 3 buttons each button on click reveals one div but what im trying to achieve is to set div-nr1 to be by default displayed
this is the angular code that im using...
var app = angular.module('app',[]);
app.controller('Test',function($scope){
$scope.show = 1;
});
this are buttons
<ul>
<li class="has-subnav" ng-click="show = 1">
<a routerLink="/dashboard">
<i class="fa fa-home fa-2x"></i>
</a>
</li>
<li class="has-subnav" ng-click="show = 2">
<a routerLink="/projects">
<i class="fa fa-laptop fa-2x"></i>
</a>
</li>
<li class="has-subnav"ng-click="show = 3" >
<a routerLink="/teams" >
<i class="fa fa-users" aria-hidden="true"></i>
</a>
</li>
</ul>
and this is one of the div's
<div class="information-boxes" ng-show="show==1">
<ul class="box-docs" >
<li>
<div class="docImages">
<img src="../assets/images/lp.png" alt="">
</div>
Couldn't you just init the show variable in the markup like below?
<div ng-controller="MyController" ng-init="show=1">
Related
I'm trying to change the active class of menu when I click on 'a' tag using jquery. I've searched a lot but none of them worked for me. when I click on a tag it redirects to 'href' attribute of the a tag and doesn't change the active menu.when I use 'e.preventDefult' it doesn't go to the 'href' but the active menu changes as I want.
What should I do?
This is the jquery I used:
<script>
$(document).ready(function(e) {
$('.navigation-menu-body ul li a').click(function (e) {
$('.navigation-menu-body ul li a.active').removeClass('active');
$(this).addClass('active');
$('.navigation-menu-body ul.navigation-active').removeClass('navigation-active');
$(this).parent().parent().addClass('navigation-active');
$('.navigation-icon-menu ul li.navigation-active').removeClass('active');
$('.navigation-icon-menu ul li').addClass('active');
window.location.href = $(this).attr('href');
console.log("href:", $(this).attr('href'));
e.preventDefault();
});
})
This is the html:
<div class="navigation">
<div class="navigation-icon-menu">
<ul>
<li data-toggle="tooltip" title="داشبورد">
<a href="#navigationDashboards" title="داشبوردها">
<i class="icon ti-pie-chart"></i>
</a>
</li>
<li data-toggle="tooltip" title="جشنواره های من">
<a href="#festivals" title="جشنواره های من">
<i class="icon ti-package"></i>
</a>
</li>
<li data-toggle="tooltip" title="کدهای جشنواره">
<a href="#serialNumbers" title="کدهای جشنواره">
<i class="icon ti-layers"></i>
</a>
</li>
<li data-toggle="tooltip" title="سوابق خرید">
<a href="#invoices" title="سوابق خرید">
<i class="icon ti-agenda"></i>
</a>
</li>
</ul>
</div>
<div class="navigation-menu-body">
<ul id="navigationDashboards" class="navigation-active">
<li class="navigation-divider">داشبورد</li>
<li>
<a class="active" href="/dashboard/index">فروش و مدیریت مشتری</a>
</li>
</ul>
<ul id="festivals">
<li class="navigation-divider">جشنواره ها</li>
<li>
جشنواره های من
</li>
</ul>
<ul id="serialNumbers">
<li class="navigation-divider">کدهای جشنواره</li>
<li>ثبت کد جدید </li>
<li>امتیازات من در هر اپلیکیشن </li>
</ul>
<ul id="invoices">
<li class="navigation-divider">سوابق خرید</li>
<li>خریدهای من </li>
</ul>
</div>
</div>
When clicking on an anchor tag, you goes to a different page, so in order for you to add an active class check the URL against the hrefs on document.ready and then add the class if the argument matches.
$document.ready(function() {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,''));
$('.navigation-menu-body ul li a').each(function(){
if(urlRegExp.test(this.href)){
$(this).addClass('active');
}
});
});
I don't know much about jQuery but you can do it pretty easy in vanilla js.
First you specify an id for each li you got. then you need to check url so you can add active class for li tag of url you're currently in.for example:
<ul onload="checkUrl()">
<li id="tab1" data-toggle="tooltip" title="داشبورد">
<a href="#navigationDashboards" title="داشبوردها">
<i class="icon ti-pie-chart"></i>
</a>
</li>
<li id="tab2" data-toggle="tooltip" title="جشنواره های من">
<a href="#festivals" title="جشنواره های من">
<i class="icon ti-package"></i>
</a>
</li>
<li id="tab3" data-toggle="tooltip" title="کدهای جشنواره">
<a href="#serialNumbers" title="کدهای جشنواره">
<i class="icon ti-layers"></i>
</a>
</li>
<li id="tab4" data-toggle="tooltip" title="سوابق خرید">
<a id="tab4" href="#invoices" title="سوابق خرید">
<i class="icon ti-agenda"></i>
</a>
</li>
</ul>
then the js:
function checkUrl() {
if (document.location.href === "https://example.com/url-of-first-tab") {
document.getElementById("tab1").classList.add("active");
}
if (document.location.href === "https://example.com/url-of-second-tab") {
document.getElementById("tab2").classList.add("active");
}
if (document.location.href === "https://example.com/url-of-third-tab") {
document.getElementById("tab3").classList.add("active");
}
if (document.location.href === "https://example.com/url-of-forth-tab") {
document.getElementById("tab4").classList.add("active");
}
}
Also keep it in mind that none of your a tags shoud have active class in html!
Consider the following component sidebar.component.html:
<div class="sidebar">
<ul>
<li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Go to the dashboard">
<a href="#">
<i class="material-icons">home</i>
<span>Home</span>
</a>
</li>
<li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Manage your times">
<a href="#">
<i class="material-icons">watch_later</i>
<span>Times</span>
</a>
</li>
<li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Go to settings">
<a href="#">
<i class="material-icons">settings</i>
</a>
</li>
</ul>
</div>
In app.component.html, I use the sidebar using its tags (<sidebar>). However, now I want to make it so that the <li> elements are given inside the <sidebar> tags so that they are no longer inside sidebar.component.html to make the component re-usable.
I'm not sure what this is called and I am having trouble finding it.
Thanks in advance.
Create a sidebar component with an <ng-content> where the passed children should be displayed
#Component({
selector: 'sidebar',
template: '<ul><ng-content></ng-content></ul>'
})
export class SidebarComponent {
}
and use it like
<sidebar>
<li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Go to the dashboard">
<a href="#">
<i class="material-icons">home</i>
<span>Home</span>
</a>
</li>
<li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Manage your times">
<a href="#">
<i class="material-icons">watch_later</i>
<span>Times</span>
</a>
</li>
<li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Go to settings">
<a href="#">
<i class="material-icons">settings</i>
</a>
</li>
</sidebar>
My html look's like this below and I am also using Bootstrap. I would like the menu to stay open on my sidebar, after i have selected it.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="treeview-menu" id="submenu_toggle">
<li>
<a href="tickets.php">
<i class="fa fa-circle-o sub_menu_fa"></i>Inbox
</a>
</li>
<li>
<a href="tickets.php?status=assigned">
<i class="fa fa-circle-o sub_menu_fa"></i>Mine
</a>
</li>
<li>
<a href="tickets.php?status=overdue">
<i class="fa fa-circle-o sub_menu_fa"></i>Overdue
</a>
</li>
<li>
<a href="tickets.php?status=closed">
<i class="fa fa-circle-o sub_menu_fa"></i>Closed
</a>
</li>
</ul>
Since it's not a one page application, consider using this. You are required to load this js & css on every page in menu item.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="treeview-menu" id="submenu_toggle">
<li>
<a href="tickets.php">
<i class="fa fa-circle-o sub_menu_fa"></i>Inbox
</a>
</li>
<li>
<a href="tickets.php?status=assigned">
<i class="fa fa-circle-o sub_menu_fa"></i>Mine
</a>
</li>
<li>
<a href="tickets.php?status=overdue">
<i class="fa fa-circle-o sub_menu_fa"></i>Overdue
</a>
</li>
<li>
<a href="tickets.php?status=closed">
<i class="fa fa-circle-o sub_menu_fa"></i>Closed
</a>
</li>
</ul>
<script>
$( document ).ready(function() {
var url = window.location.href; //get current page url
$(".treeview-menu i").each(function() {
if (url == (this.href)) {
$(this).addClass("active"); //add active class to matched LIst item
}
});
});
</script>
<style>
.active{
border-bottom:1px solid red;
}
<script>
$(function() {
// for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// save the latest tab; use cookies if you like 'em better:
localStorage.setItem('lastTab', $(this).attr('href'));
});
// go to the latest tab, if it exists:
var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
$('[href="' + lastTab + '"]').tab('show');
}
});
</script>
Here is my HTML code
.wrapper.mini-menu .sidebar-nav li > span{
display: none;
}
<div class="wrapper mini-menu">
<div class="header"></div>
<div class="sidebar">
<ul class="sidebar-nav">
<li>
<a href="#">
<i class="fa fa-home"></i>
<span>Hide Item1</span>
<i class="fa arrow pull-right"></i>
</a>
<ul class="sub-menu">
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 1</span>
</a>
</li>
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 2</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#item1">
<i class="fa fa-dashboard"></i>
<span>Hide Item2</span>
</a>
</li>
<li>
<a href="#item1">
<i class="fa fa-cogs"></i>
<span>Hide Item3</span>
</a>
</li>
</ul>
</div>
</div>
I want to hide hide item1, hide item2 and hide item3. But I don't want to hide show items. If I don't use > selector it hides all span elements. How to select only those item by CSS > selector?
What your current CSS selector is saying is:
Hide all spans that are children of li that are descendants of .sidebar-nav. If you only want to target first level li elements do this instead:
.wrapper.mini-menu .sidebar-nav > li > a > span {
display: none;
}
Look:
.wrapper.mini-menu .sidebar-nav > li > a{
display: none;
}
<div class="wrapper mini-menu">
<div class="header"></div>
<div class="sidebar">
<ul class="sidebar-nav">
<li>
<a href="#">
<i class="fa fa-home"></i>
<span>Hide Item1</span>
<i class="fa arrow pull-right"></i>
</a>
<ul class="sub-menu">
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 1</span>
</a>
</li>
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 2</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#item1">
<i class="fa fa-dashboard"></i>
<span>Hide Item2</span>
</a>
</li>
<li>
<a href="#item1">
<i class="fa fa-cogs"></i>
<span>Hide Item3</span>
</a>
</li>
</ul>
</div>
You select a span standing right after the .fa-user-plus icon with the + selector , but not so sure this what you look for ?
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
span {
display:none;
}
.fa.fa-user-plus + span{
display: inline-block;
}
<div class="wrapper mini-menu">
<div class="header"></div>
<div class="sidebar">
<ul class="sidebar-nav">
<li>
<a href="#">
<i class="fa fa-home"></i>
<span>Hide Item1</span>
<i class="fa arrow pull-right"></i>
</a>
<ul class="sub-menu">
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 1</span>
</a>
</li>
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 2</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#item1">
<i class="fa fa-dashboard"></i>
<span>Hide Item2</span>
</a>
</li>
<li>
<a href="#item1">
<i class="fa fa-cogs"></i>
<span>Hide Item3</span>
</a>
</li>
</ul>
</div>
</div>
I'm a bit stumped with a problem with the bootstrap.ui module for AngularJS.
This is my HTML:
<nav id="sidebar">
<ul id="main-nav" class="open-active">
<li ng-controller="CollapseCtrl" class="dropdown">
<a ng-click="isCollapsed = !isCollapsed" href="javascript:;">
<i class="fa fa-wrench"></i>
Verktøy
<span class="caret"></span>
</a>
<ul ng-show="isCollapsed" class="sub-nav">
<li>
<a href="#/vernerunde">
<i class="fa fa-th-list"></i>
Ny Vernerunde
</a>
</li>
<li>
<a href="#/interaksjon">
<i class="fa fa-gears"></i>
Ny Interaksjon
</a>
</li>
<li>
<a href="#/brukerstyring">
<i class="fa fa-user"></i>
Brukerstyring
</a>
</li>
</ul>
</li>
<li ng-controller="CollapseCtrl" class="dropdown">
<a ng-click="isCollapsed = !isCollapsed" href="javascript:;">
<i class="fa fa-search"></i>
Lister
<span class="caret"></span>
</a>
<ul ng-show="isCollapsed" class="sub-nav">
<li>
<a href="#/list">
<i class="fa fa-desktop"></i>
Alle
</a>
</li>
</ul>
</li>
</ul>
</nav>
And this is the controller responsible for the isCollapsed model:
controllers.controller('CollapseCtrl', function ($scope) {
$scope.isCollapsed = false;
});
I've also made a small gif which I'm going to throw in that shows my actual problem. Now, I'm not too sure whether or not it's present in the gif, but it seems if I click the first element in the list, it works. Then when that first element has been toggled, and I click the element underneath, it totally breaks apart.
EDIT1:
Okay, I changed the directive from ng-show="" to collapse="", still using "isCollapsed". Now it's working, but the height of the box that's collapsed is too small.
Though I don't have much insight into the problem I strongly suspect that the issue is in here:
<a ng-click="isCollapsed = !isCollapsed" href="javascript:;">
<i class="fa fa-wrench"></i>
Verktøy
<span class="caret"></span>
</a>
Mind that the ng-click is executed once , but once a variable changes, the scope lifecycle will recalculate the scope several times. And once a variable which depends on isCollapsed will change, the scope is re-calculated again, and so forth. This might explain the unusual openings and closings of the title panes. Although I don't see exactly why isCollapse is recalculated.
Solution: Move it as a method inside the controller.