Develop Reference

Angular2 How to write an effective method to highlight the active menu in navbar

In my application, the navbar has upto 2 levels of submenu. My requirement is to change few features of a menu when either it is selected or any of its submenu (of any level) is selected. I have been given this code that does it in an ineffective way till date (ie) writing one function for every in navbar which will make all of its specific CSS/image changes. But I would like to find an effective way (mostly one method) which will perform all the CSS changes when required data is provided as input.
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 wrapper zeroPadding">
<nav id="sidebar">
<ul class="list-unstyled components">
<li class="firstEmptyDiv">
<div class="toggleBtnDiv" (click)="toggleBtn()">
<i class="fa fa-bars toggleButton" aria-hidden="true"></i>
</div>
</li>
<li>
<a routerLink="/dashboard" routerLinkActive="active">
<img class="iconImg" id="iconImg" src="/assets/images/dashboard_icon.svg" alt="Dashboard menu icon" />
<br>
<span class="textWrap" *ngIf="buttonColor">Dashboard</span>
</a>
</li>
<li class="nav nav-stacked" *ngIf="this.hasCompanyStructureAccess">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="dropdown-toggle" type="button" data-toggle="dropdown" [style.border-left]="borderColor"
[style.background-color]="color">
<img class="iconImg" id="iconImg" [src]="imgSrc" alt="Company structure menu icon" />
<span [style.color]="routerText" *ngIf="buttonColor" class="textWrap overflow-wrap">Company Structure</span>
<span [style.color]="caretColor" class="caret"></span>
</button>
<ul class="dropdown-menu slide">
<li *ngIf="this.dataService.hasViewLocationAccess">
<a routerLink="/location" routerLinkActive="active">Location</a>
</li>
<li *ngIf="this.dataService.hasViewBranchAccess">
<a routerLink="/branch" routerLinkActive="active">Branch</a>
<li *ngIf="this.dataService.hasViewRoleAccess">
<a routerLink="/role" routerLinkActive="active">Role</a>
</li>
<li *ngIf="this.dataService.hasViewDepartmentAccess">
<a routerLink="/department" routerLinkActive="active">Department</a>
</li>
<li *ngIf="this.dataService.hasViewDesignationAccess">
<a routerLink="/designation" routerLinkActive="active">Designation</a>
</li>
<li *ngIf="!needToShowFlag">
<a routerLink="ACL" (click)="ACL()" routerLinkActive="active">ACL</a>
</li>
</ul>
</div>
</li>
<li class="nav nav-stacked">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="dropdown-toggle" type="button" data-toggle="dropdown" [style.border-left]="leaveModuleborderColor"
[style.background-color]="leaveModulecolor">
<img class="iconImg" [style.padding]="iconImgPadding" id="iconImg" [src]="leaveModuleSrc" alt="Leave menu icon" />
<span class="textWrap" [style.color]="leaveRouterText" *ngIf="buttonColor">Leave</span>
<span [style.color]="caretColorLeave" class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="submenuList" (click)="openSecondList()" (mouseover)="openSecondList()" [style.display]="submenuListDisplay">
<a class="test" tabindex="-1" id="leaveManagementlist">Configuration<span class="caret"></span>
</a>
<ul class="dropdown-menu" *ngIf="openSecondListFlag">
<li *ngIf="this.dataService.hasViewGeneralConfigurationAccess">
<a tabindex="-1" routerLink="generalconfiguration" (click)="generalConfiguration()" routerLinkActive="active">General Configuration</a>
</li>
<li *ngIf="this.dataService.hasViewListLeaveAllocationAccess">
<a tabindex="-1" (click)="listLeaveAllocation()" routerLinkActive="active">Modify Leave Allocation</a>
</li>
</ul>
</li>
<li class="applyLeaveTab">
<a (click)="applyLeave()">Apply Leave</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11" id="content">
<router-outlet></router-outlet>
</div>
In this code excerpt, when I select a submenu say 'Location', then its main menu 'Company Structure' should be changed with the following CSS values.
1) A different image should be loaded for this menu
2) background color to be changed
3) Color of caret symbol to be changed
4) A different colored border-left to be included
5) Background color of 'Location' submenu should be changed.
Similar CSS change should happen when clicking on 2 level submenu too like 'General configuration' in the example.
Any suggestions to come up with an effective way to meet this requirement is welcome. Thank you!

Content Not Loading Into Div Upon Click (w. jQuery )

I've been staring at this issue all morning now, and I just cannot see where my problem is. I've looked at most other "load content into div upon click" posts, and all the jQuery scripts/div ID's seem to be same with what I have.
Essentially, I have a card on my page with 2 links as header, "Content A" and "Content B." I'd like the card-body to change dynamically as someone clicks between Content A and Content B.
I'm making the site with Django, if that makes any difference.
The card is from Bootstrap.
This is my code:
<div class="card text-center" style="width: 800px;">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link" href="#actionA" style="color:#1DA1F2" id="actionA">Show Content A</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#actionB" style="color:#1DA1F2" id="actionB">Show Content B</a>
</li>
</ul>
</div>
<div class="card-body" id="tweetcontent">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$("#actionA").on("click", function(){
$("#tweetcontent").load("top10pos.html");
});
</script>
</div>
</div>
All top10pos.html has inside is just <p>Content A</p> (testing), and it's in the same directory as the HTML file with the above card code.
What am I doing wrong? Everything seems to be following what most other posts said was a fix. Any help would be greatly appreciated. Thank you.

I think maybe the DOM is not fully loaded upon execution of this .load().
Try wrapping your code like this:
$(document).ready(function(){ });
Let me know your results - I'll keep thinking of other possibilities.

Here is Error As i Guess! The js will replace itself on the first click.
<div class="card-body" id="tweetcontent">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$("#actionA").on("click", function(){
$("#tweetcontent").load("top10pos.html");
});
</script>
</div>
Here is what solution will look like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card text-center" style="width: 800px;">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link" href="#actionA" style="color:#1DA1F2" id="actionA">Show Content A</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#actionB" style="color:#1DA1F2" id="actionB">Show Content B</a>
</li>
</ul>
</div>
<div class="card-body" id="tweetcontent">
<p>Anything Here will be replaced</p>
</div>
</div>
<script>
$("#actionA").on("click", function(){
$("#tweetcontent").load("https://enable-cors.org/");
});
$("#actionB").on("click", function(){
$("#tweetcontent").load("https://www.html5rocks.com/en/tutorials/cors/");
});
</script>
Run it here! For Fiddle go here
$("#actionA").on("click", function(){
$("#tweetcontent").load("https://enable-cors.org/");
});
$("#actionB").on("click", function(){
$("#tweetcontent").load("https://www.html5rocks.com/en/tutorials/cors/");
});
body {
background: #ffffff;
padding: 20px;
font-family: Helvetica;
}
.card-body{
background: #ddd;
padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card text-center" style="width: 800px;">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link" href="#actionA" style="color:#1DA1F2" id="actionA">Show Content A</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#actionB" style="color:#1DA1F2" id="actionB">Show Content B</a>
</li>
</ul>
</div>
<div class="card-body" id="tweetcontent">
<p>Anything Here will be replaced</p>
</div>
</div>

How to make slide effect for Sidebar

guys I need your assistance in my current project.
I want to give for my img button a "side effect" , which should be interactive.
For instance, it must listen an event on click and should be opened and closed by clicking on img. I was to hardly trying to make this thing happened. Unfortunately, something wrong in my coding. And it should hide all div id="left"elements, since I'm doing responsive design for this project.
Please guys I need your help. I might assume my approach is totally wrong maybe you have some another recommendations.
Here is my HTML code:
<div id="main">
<!-- This img "button" should do slide effect to the right side -->
<img class="door_open" src="/templates/shablon/images/door_open.png">
<div id="left">
<div class="moduletable">
<div class=" modtit">По материалу</div>
<ul class="nav menu">
<li class="item-118">Металлические двери</li>
<li class="item-119">Клееный брус</li>
<li class="item-121">Пластиковые двери</li>
<li class="item-122">Шпонированные двери</li>
<li class="item-157">Массив древесины</li>
</ul>
</div>
<div class="moduletable">
<div class=" modtit">Фурнитура</div>
<ul class="nav menu">
<li class="item-163">Каталог дверных ручек</li>
<li class="item-164">Замки и защелки</li>
<li class="item-165">Наличники и короба</li>
<li class="item-166">Арки</li>
<li class="item-167">Лестницы</li>
</ul>
</div>
<div class="moduletable diz">
<div class=" modtit">По дизайну</div>
<ul class="nav menu">
<li class="item-136">Барокко</li>
<li class="item-137">Классика</li>
<li class="item-158">Ампир</li>
<li class="item-159">Минимализм</li>
<li class="item-160">Поп-арт</li>
<li class="item-161">Эклектика</li>
<li class="item-162">Модерн</li>
</ul>
</div>
<div class="moduletable">
<div class=" modtit">По производителю</div>
<ul class="nav menu">
<li class="item-156">Бульдорс</li>
</ul>
</div>
</div>
and here is my jQuery:
$('#left').on('click', function(){
$('.moduletable').toggle('slide', { direction: 'left' }, 1000);
$('#main-content').animate({
'margin-left' : $('#main-content').css('margin-left') == '0px' ? '210px' : '0px'
}, 1000);
});
Here is how it's supposed to look like
enter image description here

Page jumps while scrolling page vertically

I have been encountering a problem from sometime now.Looked up with similar problems on stackoverflow.But none could help me.
Problem is that my html page is jumping, when i scroll it.
If the content is less than the total height of the page, it doesnt jump, but as the content go little bigger than the total height of the page it starts jumping
What are the possible solution, if anyone could help me a bit.
Thanks in advance.I am using bootstrap.
html
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" rel="home" href="/welcome">
<img src="/resources/images/senabLogo.jpg">
</a>
</div>
<!-- navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Offers</li>
<li>Settings</li>
<li class="dropdown menu-item">
Language
<ul class="dropdown-menu">
<li>EN</li>
<li>SV</li>
<li>NO</li>
</ul>
</li>
</ul>
<!-- nav navbar-nav -->
<div class="col-sm-3 col-md-3 pull-right">
<ul class="LoginDetailsH">
<li>Sales</li>
<li>Log out <span class="fa fa-sign-out"> </span></li>
<li class="dropdown menu-item pull-right">
<span class="fa fa-question-circle"> </span>
<ul class="dropdown-menu">
<li>View open and closed questions</li>
<li>Ask a new question</li>
</ul>
</li>
</ul>
<!-- LoginDetailsH -->
</div>
<!-- col-sm-3 col-md-3 pull-right -->
</div>
<!-- collapse navbar-collapse -->
</nav>
<div class="container">
</div>
</body>
CSS
.navbar-fixed-top {position:relative !important;}
I have referrd to the foloowing
Prevent page from jumping while changing position of element on scroll function
How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?

add class active in a complex menu

I saw many questions like mine but I can't write this JS.
I have a menu like this and I need to put the class="active" in the <li> tag of the page where the user is. This nav-bar is in a php file that I include in each page of the site. Sorry but after 28h of coding I am fuse!
<div class="componant-section" id="navbars">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2"><span class="fa fa-bars"></span></button>
<img class="logo" src="http://<?php echo $base_url ?>/images/logos.png" alt="" width="127">
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Clienti <span class="fa-chevron-down fa"></span>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li>Aggiungi nuovo...</li>
<li>Lista</li>
</ul>
</li>
<li class="dropdown">
Fornitori <span class="fa-chevron-down fa"></span>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li>Aggiungi nuovo...</li>
<li>Lista</li>
</ul>
</li>
<li>Fatture</li>
<li>DDT</li>
<li>Preventivi</li>
<li>NDC</li>
<li>Listini</li>
<li class="dropdown">
Controllo <span class="fa-chevron-down fa"></span>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li>Login</li>
<li>Causale</li>
<li>Mezzo Trasporto</li>
<li>IVA</li>
<li>Imballo</li>
<li>Articoli</li>
<li>Spese Aggiuntive</li>
<li>Pagamento</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-icons">
<li><a><span class="fa-user fa"></span>
<span class="hidden-lg"><?php echo $user; ?></span></a></li>
<li><a href="http://<?php echo $base_url ?>/function/logout.php">
<span class="fa-cog fa"></span>
<span class="hidden-lg">Logout</span>
<span class="navbar-new"></span></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>

I resolved with
<div class="componant-section" id="navbars">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2"><span class="fa fa-bars"></span></button>
<img class="logo" src="http://<?php echo $base_url ?>/images/logos.png" alt="" width="127">
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<ul class="nav navbar-nav">
<li id="home">Home</li>
<li class="agg_cliente lista_clienti dropdown">
Clienti <span class="fa-chevron-down fa"></span>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li id="agg_cliente">Aggiungi nuovo...</li>
<li id="lista_clienti">Lista</li>
</ul>
</li>
<li class="agg_fornitore lista_fornitori dropdown">
Fornitori <span class="fa-chevron-down fa"></span>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li id="agg_fornitore">Aggiungi nuovo...</li>
<li id="lista_fornitori">Lista</li>
</ul>
</li>
<li id="fatture">Fatture</li>
<li id="ddt">DDT</li>
<li id="preventivi">Preventivi</li>
<li id="ndc">NDC</li>
<li id="listini">Listini</li>
<li class="ck_login ck_causale ck_mezzo ck_iva ck_imb ck_art ck_spagg ck_pagam dropdown">
Controllo <span class="fa-chevron-down fa"></span>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li id="ck_login">Login</li>
<li id="ck_causale">Causale</li>
<li id="ck_mezzo">Mezzo Trasporto</li>
<li id="ck_iva">IVA</li>
<li id="ck_imb">Imballo</li>
<li id="ck_art">Articoli</li>
<li id="ck_spagg">Spese Aggiuntive</li>
<li id="ck_pagam">Pagamento</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-icons">
<li><a><span class="fa-user fa"></span>
<span class="hidden-lg"><?php echo $user; ?></span></a></li>
<li><a href="http://<?php echo $base_url ?>/function/logout.php">
<span class="fa-cog fa"></span>
<span class="hidden-lg">Logout</span>
<span class="navbar-new"></span></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
and javascript
window.onload=function(){
var Navid = document.getElementById(window.location.href.split('/').pop().split('.')[0]);
if(Navid){
Navid.setAttribute('class','active');
var father = Navid.parentNode,
grandFather = father.parentNode;
grandFather.setAttribute('class','active');
}
}

You can access the path accessed successfully most of the time in PHP by using the global server request URI variable $_SERVER['REQUEST_URI'].
Simply, you need to compare the value of $_SERVER['REQUEST_URI'] to the target of the links in your navigation, and apply a class if it matches. For example:
<li><a href="/ddt.php" <?php echo $_SERVER['REQUEST_URI'] === '/ddt.php' ? 'class="active"' : '' ?>>DDT</a></li>
As a sidenote, you need not use PHP to generate absolute links for your hrefs in HTML - just use relative paths, e.g. /listini.php instead of http://<?php echo $base_url ?>/listini.php.
Your life would be much easier if you looked into using a templating language such as Twig, that separates the logic that dictates how a page should be displayed from the actual layout code.

You could use something a simple as this Javascript solution.
window.onload=function(){
var Nav=document.getElementById(window.location.href.split('/').pop().split('.')[0]);
if(Nav){
Nav.setAttribute('class','active');
}}
How does it work?
Elements you wish to add the class to must have an ID matching the page name
Example
From: Fatture
To: <a id="fatture" href="http://<?php echo $base_url ?>/fatture.php">Fatture</a>
The javascript above will strip down the clients location www.something.com/fatture.php to fatture by splitting the string from / creating an array. The name of the file is last in the array so pop() is used to select the last item in the array leaving you with fatture.php the string is split once again at . creating a new array, the first item in that array is then used in the ID selector "fatture". document.getElementById('fatture')
URL Breakdown
1) window.location.href = www.something.com/fatture.php
2) .split('/') =>
array[0] = www.something.com
array[1] = fatture.php
3) .pop() = Last array/array[1] of .split('/') - fatture.php
4) .split('.')[0] = fatture
If you have any questions about the source code above please leave a comment below and I will reply as soon as possible.
I hope this helps. Happy coding!