Develop Reference

Mobile menu do not collapse on click

The menu is working fine on desktop using hover property. But the same is not closing using on-click on mobile and tabs.
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<nav class=" navbar navbar-expand-lg navbar-light bg-primary">
<div class="container">
<div class="col-md-2 sec-menu-button mobile-vw navbar-brand">
Browse Journals
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7"
aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
<ul class="nav navbar-nav">
<li class="dropdown active">
<span class="nav-label">RESOURCES</span>
<ul class="dropdown-menu">
<li>GUIDE FOR EDITIORS</li>
<li>GUIDE FOR REVIEWERS</li>
<li>GUIDE FOR EDITION IN CHIEF</li>
</ul>
</li>
<li class="dropdown">
<span class="nav-label">AUTHORS GUIDE</span>
<ul class="dropdown-menu">
<li>EDITIORIALS WORK FLOW</li>
<li class="dropdown-submenu">
<span class="nav-label">EDITORIAL AND PUBLISHING POLICIES</span>
<ul class="dropdown-menu">
<li>SUBMISSION POLICIES</li>
<li>TRANSFERS</li>
<li>LICENSE AGREEMENT AND AUTHORS COPYRIGHT</li>
<li>USE OF EXPERIMENTAL ANIMAL & HUMAN SUBJECTS</li>
<li>COMPETING INTERESTS</li>
<li>DIGITAL IMAGES INTEGRITY AND STANDARDS</li>
<li>BIOSECURITY CONCERNS</li>
<li>DUPLICATE PUBLICATIONS</li>
<li>CONFIDENTIALITY , PRE-PUBLICTY AND PREPRINTS</li>
<li>PLAGIARISM AND FABRICATION</li>
</ul>
</li>
<li>PUBLICATION FEES</li>
<li>ARTICLE PREPARATIONS INSTRUCTIONS</li>
<li>PEER REVIEW</li>
<li>ARTICLE TYPES</li>
</ul>
</li>
<li>OPEN ACCESS</li>
<li>PUBLICATIONS ETHICS</li>
<li>FAQS</li>
</ul>
<div class="col-md-2 sec-menu-button desktop-vw">
Browse Journals
</div>
</div>
</div>
</nav>
I am aware that these kind of questions has already been answered. But, I tried using them and got no luck. Please look into the issue and help me out.

How can I collapse div and open tab with bootstrap or js

I want when I click link and smoot-scrool to down then collapse div and open tab with Javascript.
This code is scrolled
<a data-scroll href="#smootScrool" onclick="callMyFunction('tab-1')"><h4 >Scrool, collapse and open tab authomatic</h4></a>
to here and with handle I can collapse and open tap, but I wan't do it authomatic with Javascript. How can I do it?
<div class="panel-heading"><span id="smootScrool" "> Scrolled Here!</span>
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapse-9" class="collapsed" aria-expanded="false">
<i class="fa fa-angle-down control-icon"></i>
<i class="fa fa-universal-access"> Qeydiyyatsız müraciət</i>
</a>
</h4>
</div>
<div id="collapse-9" class="panel-collapse collapse" aria-expanded="false">
<div class="panel-body">
<div class="row">
<div class="col-md-12 page-content ">
<div class="hr1 margin-top"></div>
<div class="tabs-section">
<!-- Nav Tabs -->
<ul class="nav nav-tabs center-block">
<li class="active"><i class="fa fa-question"></i>TAB 1</li>
<li><i class="fa fa-envelope"></i>TAB 2</li>
<li><i class="fa fa-briefcase"></i>TAB 3</li>
<li><i class="fa fa-legal"></i>TAB 4</li>
</ul>
<!-- Tab panels -->
<div class="tab-content">
<!-- Tab Content 1 -->
<div class="tab-pane fade in active" id="tab-1">
<div class="row">
</div>
</div>
1. Scrool to div (this working)
2. Authomatic collapse div (How can I do?)
3. Authomatic open tab (How can I do?)
Please suggestion best way and code example. Thanks

See the official bootstrap documentation about that, could be helpful or at least give you an better idea how to find a solution: http://getbootstrap.com/javascript/#tabs
Also Jquery UI: https://jqueryui.com/tabs/#mouseover
I hope that these links can be useful

How to add delay on Bootstrap dropdown menu

<div class="collapse navbar-collapse navbar-responsive-collapse">
<div class="menu-container">
<ul class="nav navbar-nav">
<!-- Shortcodes -->
<li class="dropdown mega-menu-fullwidth">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Vad gör vi?
</a>
<ul class="dropdown-menu">
<li>
<div class="mega-menu-content disable-icons">
<div class="container">
<div class="row equal-height">
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>Drift</h3></li>
<!-- Typography -->
<li><i class="glyphicon glyphicon-cloud"></i> Kapacitetstjänst</li>
<li><i class="glyphicon glyphicon-flash"></i> Kommunikation</li>
<li><i class="glyphicon glyphicon-road"></i> Managed server</li>
<li><i class="glyphicon glyphicon-eye-open"></i> Övervakning</li>
<!-- End Components -->
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<!-- End Shortcodes -->
<ul class="nav navbar-nav">
I´ve seen a few other questions in this topic, but the don´t answer mine.
Is it possible to put a delay to the dropdown when the marker is not in the dropdown area. (Just to prevent clients to fall of the menu).
Thankful for answers.

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!

Putting a dropdown panel in the navbar Bootstrap 3.0.3

I'm trying to put a panel with a few form elements and a dropdown category selection into a collapsible navbar in bootstrap. Currently I have
<div class="collapse navbar-collapse" style="z-index:5;">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<img class="headerToolbarIcon2" src="img/configuration.png"> Configuration<b class="caret"></b>
<form class="dropdown-menu" style="width:425%; padding-top:1px;">
<li>
<div class="container" id="configurationPanel" style="height:140px;">
<div class="panel-body panel-default" style="float:left;">
<p><strong> Article <br/> Properties:</strong></p>
</div>
<div class="panel-body panel-default" style="float:left; margin-left:20px;" >
<p style="border-bottom:1px solid black;"><strong>Category</strong></p>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data>
Personal <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Weather</li>
<li>Military</li>
<li>International</li>
<li class="divider"></li>
<li>Uncategorized</li>
</ul>
</div>
</div>
</div>
</li>
</form>
</li>
</ul>
</div>
</div>
I stopped event propagation on the panel, and the radio buttons work great, but whenever I click the "Personal" button to select from categories, the panel shuts. I'm sure it has something to do with having the data target of the parent dropdown, but I'm not sure how to fix that.

Bootstrap 3.0.3 can't show 2 dropdown-menu class with data-toggle="dropdown" because first click show class="dropdown-menu" and second click hide first class="dropdown-menu" and show the second . this your problem .
try this solution :
<div class="collapse navbar-collapse" style="z-index:5;">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a id="dp1" class="dropdown-toggle" data-toggle="dropdown" href="#" ><img class="headerToolbarIcon2" src="vbnet.PNG" width="20px" height="20px"> Configuration<b class="caret"></b></a>
<form class="dropdown-menu" style="width:425%; padding-top:1px;">
<li>
<div class="container" id="configurationPanel" style="height:140px;">
<div class="panel-body panel-default" style="float:left;">
<p><strong> Article <br/> Properties:</strong></p>
</div>
<div class="panel-body panel-default" style="float:left; margin-left:20px;" >
<p style="border-bottom:1px solid black;"><strong>Category</strong></p>
<div class="btn-group">
<button id="dp2" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Personal <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Weather</li>
<li>Military</li>
<li>International</li>
<li class="divider"></li>
<li>Uncategorized</li>
</ul>
</div>
</div>
</div>
</li>
</form>
</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$(function(){
$("#dp2").click(function(){
$("#dp1").attr("data-toggle","");
$("#dp1").one("click",function(){
$("#dp1").attr("data-toggle","dropdown");
});
});
});
</script>