In this code there is some error, which I could not get it. Js code not working properly, any advice to change it so that it works properly.
Web link.
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Main Navigation -->
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<nav class="main_nav">
<ul class="d-flex flex-row align-items-start justify-content-start">
<li class="active">
<a class="page-scroll" href="#home">Home</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#team">Team</a>
</li>
<li>
<a class="page-scroll" href="#gallery">Gallery</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
<!-- navbar-collapse -->
</nav>
JS code
$(document).ready(function()
{
"use strict";
var main_menu = $(".main-menu ul.d-flex li ");
main_menu.on('click', function() {
main_menu.removeClass("active");
$(this).addClass("active");
});
});
Class name is wrong in your js code.
use var main_menu = $(".main_nav ul.d-flex li"); in place of var main_menu = $(".main-menu ul.d-flex li");
$(document).ready(function()
{
"use strict";
var main_menu = $(".main_nav ul.d-flex li");
main_menu.on('click', function() {
main_menu.removeClass("active");
$(this).addClass("active");
});
});
.active,.active a {
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Main Navigation -->
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<nav class="main_nav">
<ul class="d-flex flex-row align-items-start justify-content-start">
<li class="active">
<a class="page-scroll" href="#home">Home</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#team">Team</a>
</li>
<li>
<a class="page-scroll" href="#gallery">Gallery</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
<!-- navbar-collapse -->
</nav>
Related
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. When static data push on '.sidebar' class without ajax, menu open/hide working. But using ajax call treeview 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');
My jquery code does not perform active sidebar action. where did I mistake, can anyone tell us?
Where should I have to change..? should I have make somechange in html code..?
This is my jquery code
$(function() {
$(".sidebar-menu li").removeClass("active");
$("#liaccounts").addClass("active");
$("#selectAll").click(function() {
// $(".checkAll").prop('checked', $(this).prop('checked'));
var checked = ($(".checkAll").prop('checked') == false) ? true : false;
$(".checkAll").prop('checked', checked);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar-menu">
<!-- Sidebar user panel (optional) -->
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!--
Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library
-->
<li class="nav-item">
<a href="{{url('dashboard')}}" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('contact')}}" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>Contact</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('accounts')}}" class="nav-link">
<i class="nav-icon fas fa-user"></i>
<p>Accounts</p>
</a>
</li>
</ul>
</nav>
</div>
My sidebar menu has the ability to expand and reveal the subsections of a section as shown below. The open section has the open active class and the clicked link has the active class.
All of my links has a different #url.So this will determine the classes.
How can I automatically place the open active and active classes based on the opened link? I can also use PHP.
<ul class="menu-items scroll-content">
<li class="open active">
<a href="javascript:;"><span class="title">first section</span>
<span class="open arrow"></span></a>
<span class="icon-thumbnail">LV</span>
<ul class="sub-menu">
<li class="active">
First Section 1
<span class="icon-thumbnail">au</span>
</li>
<li class="">
First Section 2
<span class="icon-thumbnail">ou</span>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;"><span class="title">Second section</span>
<span class="arrow"></span></a>
<span class="icon-thumbnail">LV</span>
<ul class="sub-menu">
<li class="">
Second Section 1
<span class="icon-thumbnail">au</span>
</li>
</ul>
</li>
</ul>
Try like this:
HTML:
<ul>
<li class="">
<a href="javascript:;"><span class="title">first section</span>
<ul class="sub-menu">
<li class="">
First Section 1
<span class="icon-thumbnail">au</span>
</li>
<li class="">
First Section 2
<span class="icon-thumbnail">ou</span>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;"><span class="title">Second section</span>
<ul class="sub-menu">
<li class="">
Second Section 1
<span class="icon-thumbnail">au</span>
</li>
</ul>
</li>
</ul>
JS:
var href = location.pathname+location.hash;
$('.sub-menu > li > a').each(function() {
if ($(this).attr("href") == href) {
$(this).parent('li').addClass('active');
$(this).parent().parent().parent('li').addClass('open active');
}
});
The following is a standard jQuery scroll function for nav-bar collapsing that I found on sof. For some reason, when I try to change the default speed of the header-wrap, it isn't changing. I can't figure out why. Is this a bug or am I doing something wrong?
$(document).ready(function() {
$('#header-wrap').hide();
})
var previousScroll = 0, headerOrgOffset = $('#header').height();
$('#header-wrap').height($('#header').height());
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > headerOrgOffset) {
if (currentScroll > previousScroll) {
$('#header-wrap').slideDown( "slow", function() {
// Animation complete.
});
} else {
$('#header-wrap').slideUp();
}
}
previousScroll = currentScroll;
});
<!-- Navigation Scroll Bar-->
<div id="header-wrap">
<div id="header" class="clear">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li class="dropdown">
Portfolio <b class="caret"></b>
<ul class="dropdown-menu">
<li>
1 Column Portfolio
</li>
<li>
2 Column Portfolio
</li>
<li>
3 Column Portfolio
</li>
<li>
4 Column Portfolio
</li>
<li>
Single Portfolio Item
</li>
</ul>
</li>
<li class="dropdown">
Blog <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Blog Home 1
</li>
<li>
Blog Home 2
</li>
<li>
Blog Post
</li>
</ul>
</li>
<li class="dropdown">
Other Pages <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Full Width Page
</li>
<li>
Sidebar Page
</li>
<li>
FAQ
</li>
<li>
404
</li>
<li>
Pricing Table
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
</div>
can anyone tell me why this funcion drop's me to the top of the page ?
any ideas how to solve this problem?
Or any suggestion's of a better code to use?
P.S. this is for ebay template, quite a big menu section.
<script type="text/javascript">
startList = function() {
if (document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onclick=function() {
this.className = (this.className == "on") ? "off" : "on";
}
}
}
}
}
window.onload=startList;
</script>
I have a basic markup:
<ul id="nav">
<li>Home </li>
<li>About >
<ul>
<li>History </li>
<li>Team </li>
<li>Offices </li>
</ul>
</li>
<li>Services >
<ul>
<li>Web Design </li>
<li>Internet Marketing </li>
<li>Hosting </li>
<li>Domain Names </li>
<li>Broadband </li>
</ul>
</li>
<li>Contact Us >
<ul>
<li>United Kingdom</li>
<li>France</li>
<li>USA</li>
<li>Australia</li>
</ul>
</li>
</ul>
Why don't you just simplify it? You could just try:
<li>Home </li>
and change your JS to:
function List(element)
{
element.parentNode.className = (element.parentNode.className == "on") ? "off" : "on";
}
That's much simpler.
EDIT: Or you just replace href="#" with href="javascript:return(false);". As # is a reference to an anchor which does not exist, it will take you to the top of the page.
Here i have done bin using jQuery:
1) Include latest jquery.js file in html header tag first.
2) HTML:
<ul id="nav">
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
About >
</a>
<ul>
<li>
<a href="#">
History
</a>
</li>
<li>
<a href="#">
Team
</a>
</li>
<li>
<a href="#">
Offices
</a>
</li>
</ul>
</li>
<li>
<a href="#">
Services >
</a>
<ul>
<li>
<a href="#">
Web Design
</a>
</li>
<li>
<a href="#">
Internet Marketing
</a>
</li>
<li>
<a href="#">
Hosting
</a>
</li>
<li>
<a href="#">
Domain Names
</a>
</li>
<li>
<a href="#">
Broadband
</a>
</li>
</ul>
</li>
<li>
<a href="#">
Contact Us >
</a>
<ul>
<li>
<a href="#">
United Kingdom
</a>
</li>
<li>
<a href="#">
France
</a>
</li>
<li>
<a href="#">
USA
</a>
</li>
<li>
<a href="#">
Australia
</a>
</li>
</ul>
</li>
</ul>
3) CSS Styles:
ul#nav{
background-color:#445566;
}
ul li{
list-style:none;
}
ul li ul{
background-color:#558888;
}
ul li a{
color:#fff;
text-decoration:none;
}
.off ul{
display:none;
}
.on ul{
display:block;
}
4) JQuery in Script Tag:
$(function() {
$("ul li ul").each(function() {
$(this).parent().addClass('off');
});
$("ul li").mouseenter(function() {
if ($(this).hasClass('off')) {
$(this).removeClass('off');
$(this).addClass('on');
}
});
$("ul li").mouseleave(function() {
if ($(this).hasClass('on')) {
$(this).removeClass('on');
$(this).addClass('off');
}
});
});
Try it on bin : http://codebins.com/bin/4ldqpal