Menu bar class=active bootstrap theme not working properly - javascript

I have a site and i am working in php html css javascript/jquery
i am using bootstrap theme for the first time. Its so good using bootstrap but i have a problem in menu bar navigation active link
even if i add a jquery changing a active class it doesnot work .
<!DOCTYPE html>
<html lang="en">
<head>
<title>Real Estate</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="assets/style.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/script.js"></script>
<!-- Owl stylesheet -->
<link rel="stylesheet" href="assets/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="assets/owl-carousel/owl.theme.css">
<script src="assets/owl-carousel/owl.carousel.js"></script>
<!-- Owl stylesheet -->
<!-- slitslider -->
<link rel="stylesheet" type="text/css" href="assets/slitslider/css/style.css" />
<link rel="stylesheet" type="text/css" href="assets/slitslider/css/custom.css" />
<script type="text/javascript" src="assets/slitslider/js/modernizr.custom.79639.js"></script>
<script type="text/javascript" src="assets/slitslider/js/jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="assets/slitslider/js/jquery.slitslider.js"></script>
<!-- slitslider -->
<script>
$(document).ready(function(e) {
$('#username').hover(
function (){
$('#submenu').css("display", "block");
/*$('#submenu').css("background-color", "#999");
$('#submenu').css("color", "#000");*/
$('#submenu').css("z-index", "1");
},
function () {
$('#submenu').css("display", "none");
}
);
});
</script>
</head>
<body>
<!-- Header Starts -->
<div class="navbar-wrapper">
<div class="navbar-inverse" role="navigation">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Agents</li>
<li>Contact Us</li>
<li>About Us</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Your Name<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Edit Profile</li>
<li>Log Out</li>
</ul>
</li>
<li>Log in</li>
<li>Register</li>
</div>
</nav>
</div>
</div>
</div>
<!-- #Header Starts -->
<div class="container">
<!-- Header Starts -->
<div class="header">
<img src="images/logo.png" alt="Realestate">
<ul class="pull-right" style="margin-top:10px;">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Home
</a>
<?php if (!empty($_SESSION['uname'])) { ?>
<ul class="dropdown-menu">
<li>Add Property</li>
<li>Edit Property</li>
</ul>
<?php } ?> </li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Land
</a>
<?php if (!empty($_SESSION['uname'])) { ?>
<ul class="dropdown-menu">
<li>Add Property</li>
<li>Edit Property</li>
</ul>
<?php } ?></li>
</ul>
<!-- <div id ="salesBranch" style="display:none">
<div> Add Property </div> <div> Edit Property </div> -->
</div>
</div>
<!-- #Header Starts -->
</div>
i added following jquery to change the active class but also its not working properly
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});


I think it might be because your menu loads different pages than the one you are on. You need to set the active class on the appropriate nav link on page load. For example you could test if the href of the link is the same as the current page name and add class "active" if it is.

Related

Why isn't my Hamburger menu example code working?

I'm trying to get this hamburger menu to work
Here is the example code source
https://www.jqueryscript.net/menu/responsive-multi-level-hamburger-nav.html
I'm using Visual Studio 2019 and am not sure why this is giving me so much trouble? The menu either is expanded completely as text at code launch or it is 3 lines that do not respond when I click on it. The example seems pretty simplistic, but I haven't been able to get it to work like shown in the example.
[
$(document).ready(function () {
//alert("Menu");
var display_width = $(window).width();
var hamburger = $("#hambuger_menu");
var menu = $("#menubody");
$(hamburger).click(function (e) {
menu.toggleClass("open");
hamburger.toggleClass("open");
});
$(".menu_body__item_wrapper li.has_child").each(function (index) {
$(this).click(function (event) {
$('.sub-menu').eq(index).slideToggle();
event.preventDefault();
event.stopImmediatePropagation();
});
$('.sub-menu').click(function (e) {
e.stopPropagation();
e.stopImmediatePropagation();
})
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body {
/*background-image: url('../../images/grandOpening1.jpeg');*/
}
/*<script type="text/javascript" >
$(document).ready(function() {
alert("ready");
});
</script >*/
/*<script type="text/javascript" src="/wherever/whatever.js" / >*/
</style>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/main.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/style.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.8.3.js"></script>
<div class="humburger" id="hambuger_menu">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<section class="menu_body" id="menubody">
<div class="menu_body__item_wrapper">
<!-- menu list-->
<ul class="menu_list">
<li>Home</li>
<!-- have submenu-->
<li class="has_child">
About
<ul class="sub-menu">
<li>Who We Are</li>
<li>Managment</li>
</ul>
</li>
<!-- have submenu-->
<li class="has_child">
Projects
<ul class="sub-menu">
<li>Ongoing</li>
<li>Complete</li>
</ul>
</li>
<li>Brochure</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
</section>
#*<script src="/path/to/cdn/jquery.min.js"></script>*#
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/JavaScript.js"></script>
#*<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
<p>Learn more ยป</p>
</div>

For anyone else that is having a hard time getting this to work in a project, here is what I did to get it to work in Visual Studio 2019, you'll of course need to match my file/folder structure for the links and scripts, or alter those to match your own file/folder structure inside your project.
The index.cshtml file contents
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Responsive Multi-level Hamburger Nav Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.css">
<link href="~/Content/style.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<style>
body {
background: #f7f7f7;
}
.lead {
font-size: 1.5rem;
font-weight: 300;
}
.container {
margin: 0 auto;
max-width: 960px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Responsive Multi-level Hamburger Nav Example</h1>
<p class="lead">A responsive, mobile-friendly, multi-level hamburger navigation system (also called offcanvas menu) written in JavaScript (jQuery) and CSS/CSS3.</p>
</div>
<!-- hamburger section-->
<div class="humburger" id="hambuger_menu">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<!--main menu body-->
<section class="menu_body" id="menubody">
<div class="menu_body__item_wrapper">
<!-- menu list-->
<ul class="menu_list">
<li>Home</li>
<!-- have submenu-->
<li class="has_child">
About
<ul class="sub-menu">
<li>Who We Are</li>
<li>Managment</li>
</ul>
</li>
<!-- have submenu-->
<li class="has_child">
Projects
<ul class="sub-menu">
<li>Ongoing</li>
<li>Complete</li>
</ul>
</li>
<li>Brochure</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/modernizr-2.8.3.js"></script>
<script src="~/Scripts/JavaScript.js"></script>
</body>
</html>
And in the local javascript file
$(document).ready(function () {
//alert("Menu");
console.log("in (document).ready function");
var display_width = $(window).width();
var hamburger = $("#hambuger_menu");
var menu = $("#menubody");
$(hamburger).click(function (e) {
menu.toggleClass("open");
hamburger.toggleClass("open");
});
$(".menu_body__item_wrapper li.has_child").each(function (index) {
$(this).click(function (event) {
$('.sub-menu').eq(index).slideToggle();
event.preventDefault();
event.stopImmediatePropagation();
});
$('.sub-menu').click(function (e) {
e.stopPropagation();
e.stopImmediatePropagation();
})
})
});

Grab this, it may help.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test 3</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

JSTree isnt showing node

I used the document from jstree page.I want to use it in my laravel project so when i click on a root node it will show the child of that node but when i insert this here i dont know why the button doesnt work.It works if i do it just the html form but not when i use extends (layouts.master).It shows the child node and the root node but not with their styles and the button doesnt work.Thanks in advance
masters.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>
#yield('title')
</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="../assets/css/now-ui-dashboard.css?v=1.5.0" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('assets/css/dataTables.min.css') }}">
<!--jstree-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body class="">
<div class="wrapper ">
<div class="sidebar" data-color="orange">
<div class="logo">
<a href="#" class="simple-text logo-normal">
Company
</a>
</div>
<div class="sidebar-wrapper" id="sidebar-wrapper">
<ul class="nav">
<li class=" {{ 'dashboard' == request()->path() ? 'active' : '' }} ">
<a href="/dashboard">
<i class="now-ui-icons design_app"></i>
<p>Dashboard</p>
</a>
</li>
<li class=" {{ 'role-register' == request()->path() ? 'active' : '' }} ">
<a href="/role-register">
<i class="now-ui-icons users_single-02"></i>
<p>Employee Profile</p>
</a>
</li>
<li class=" {{ 'department' == request()->path() ? 'active' : '' }} ">
<a href="/department">
<i class="now-ui-icons design_bullet-list-67"></i>
<p>Department</p>
</a>
</li>
<li>
<a href="/home">
<i class="now-ui-icons text_caps-small"></i>
<p>Your Profile</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel" id="main-panel">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent bg-primary navbar-absolute">
<div class="container-fluid">
<div class="navbar-wrapper">
<div class="navbar-toggle">
<button type="button" class="navbar-toggler">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<a class="navbar-brand" href="#">Dashboard</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navigation">
<form>
<div class="input-group no-border">
<input type="text" value="" class="form-control" placeholder="Search...">
<div class="input-group-append">
<div class="input-group-text">
<i class="now-ui-icons ui-1_zoom-bold"></i>
</div>
</div>
</div>
</form>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/home">
<i class="now-ui-icons users_single-02"></i>
<p>
<span class="d-lg-none d-md-block">Account</span>
</p>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="panel-header panel-header-sm">
</div>
<div class="content">
#yield('content')
</div>
<footer class="footer">
</footer>
</div>
</div>
<!--jstree-->
<!-- 4 include the jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<!-- 5 include the minified jstree source -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script>
$(function () {
// 6 create an instance when the DOM is ready
$('#jstree').jstree();
// 7 bind to events triggered on the tree
$('#jstree').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
// 8 interact with the tree - either way is OK
$('button').on('click', function () {
$('#jstree').jstree(true).select_node('child_node_1');
$('#jstree').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree').select_node('child_node_1');
});
});
</script>
<!--jstree-->
<!-- Core JS Files -->
<script src="../assets/js/core/jquery.min.js"></script>
<script src="../assets/js/core/popper.min.js"></script>
<script src="../assets/js/core/bootstrap.min.js"></script>
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<script src="{{ asset('assets/js/dataTables.min.js') }}"></script>
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Chart JS -->
<script src="../assets/js/plugins/chartjs.min.js"></script>
<!-- Notifications Plugin -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Now Ui Dashboard: parallax effects, scripts for the example pages etc -->
<script src="../assets/js/now-ui-dashboard.min.js?v=1.5.0" type="text/javascript"></script><!-- Now Ui Dashboard DEMO methods, don't include it in your project! -->
<script src="../assets/demo/demo.js"></script>
#yield('scripts')
</body>
</html>
page.blade.php
#extends ('layouts.master')
#section('title')
Employee Management | Admin
#endsection
#section('content')
<!-- 3 setup a container element -->
<div id="jstree">
<!-- in this example the tree is populated from inline HTML -->
<ul>
<li>Root node 1
<ul>
<li id="child_node_1">Child node 1</li>
<li>Child node 2</li>
</ul>
</li>
<li>Root node 2</li>
</ul>
</div>
<button>demo button</button>
<!-- 4 include the jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<!-- 5 include the minified jstree source -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script>
$(function () {
// 6 create an instance when the DOM is ready
$('#jstree').jstree();
// 7 bind to events triggered on the tree
$('#jstree').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
// 8 interact with the tree - either way is OK
$('button').on('click', function () {
$('#jstree').jstree(true).select_node('child_node_1');
$('#jstree').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree').select_node('child_node_1');
});
});
</script>
#endsection
#section('scripts')
$(document).ready( function () {
$('#dataTable').DataTable();
} );
#endsection

<button> not recognized in Bootstrap4

I'm trying to achieve a 'collapse icon' that's floated left followed by Copyright &copy using Bootstrap4.
I've seen other questions about this topic but none seem to actually answer the question. Other questions have different code with obvious typos, my code doesn't. Why is it that data-toggle & data-target aren't recognized when you do include all the dependencies?
.titleText{
font-size:230%;
color:green;
font-weight:heavy;
letter-spacing:1px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar-nav navbar-expand-sm navbar-fixed-top text-success">
<a class="navbar-brand titleText">Copyright &copy </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseNavBar">
<span class="navbar-toggler-icon"></span>
</button>
<div="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="link-nav" href="#">Map</a>
</li>
<li class="nav-item">
<a class="link-nav" href="#">Cart</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
The button isn't showing up, just the map & cart text. If you have a workaround I would appreciate a vanilla JS solution apposed to JQuery, since I'm not that experienced with JQuery and would rather use Javascript. Button

Fixed the typo and updated HTML to show collapsible navBar
.titleText{
font-size:230%;
color:green;
font-weight:heavy;
letter-spacing:1px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-fixed-top text-success">
<a class="navbar-brand titleText">Copyright &copy </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseNavBar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="link-nav" href="#">Map</a>
</li>
<li class="nav-item">
<a class="link-nav" href="#">Cart</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>

if you use class text-success in your code, so you cant see navigation bar background-color and default link color so i replace text-sucesss to navbar-light bg-light.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-fixed-top navbar-light bg-light">
<a class="navbar-brand titleText">Copyright &copy </a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapseNavBar" >
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cart</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>

I have made some typo corrections, the toggle functionality now works with this code. But additional modifications are needed to align the elements correctly.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> .
</script>
<!-- Popper JS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
> </script>
<!-- Latest compiled JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> .
</script>
<style>
.titleText{
font-size:230%;
color:green;
font-weight:heavy;
letter-spacing:1px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-fixed-top text-success">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#collapseNavBar">
<span class="navbar-toggler-icon">Menu</span>
</button>
<div class="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="link-nav" href="#">Map</a>
</li>
<li class="nav-item">
<a class="link-nav" href="#">Cart</a>
</li>
</ul>
</div>
<a class="navbar-brand titleText">Copyright &copy </a>
</nav>
</div>
</body>
</html>
I will construct the complete aligned html if need be. Hope this helps!

why sideNav function is not working in bootstrap

I am implementing Bootstrap navbar but it's not displaying fine and displaying an error on my console saying
I tried to change the orders of my script sin head section but didn't get rid of this problem.
Anyone help me in finding out my mistake?
Code
<head>
<meta charset="UTF-8">
<title></title>
<!-- Ajax Library 1.11.3 -->
<script src="assets/js/ajax_1.11.3.js"></script>
<!-- Tether for Bootstrap -->
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<!-- Including js file for Animations Effects-->
<script type="text/javascript" src="assets/js/jquery_2.1.3_animation.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui_1.11.3.js"></script>
<!--Including both these files from Html_respond master-->
<script src="assets/js/html5shiv.min.js"></script>
<script src="assets/js/respond.min.js"></script>
<!-- Including js file for Fonts-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<!-- Including Files for Bootstrap Form Validations -->
<script src="assets/js/form_Validation.js"></script>
<script src="assets/js/formvalidation_bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.button-collapse').sideNav();
}); // end of document ready
</script>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-dark bg-primary">
<!--Collapse button-->
<i class="fa fa-bars white-text"></i>
<!--Content for large and medium screens-->
<div class="navbar-desktop">
<!--Navbar Brand-->
<a class="navbar-brand" href="#">Navbar</a>
<!--Links-->
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<!--Search form-->
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
<!-- Content for mobile devices-->
<div class="navbar-mobile">
<ul class="side-nav" id="mobile-menu">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
<!--/.Navbar-->
</body>

Double Navigation Menu Demo (SideNav slide-out button)
// Initialize collapse button
$(".button-collapse").sideNav();
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
$('.collapsible').collapsible();
body {
background: url("http://mdbootstrap.com/images/regular/nature/img%20(23).jpg") no-repeat center center fixed;
background-size: cover;
}
<!-- Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="http://mdbootstrap.com/live/_doc/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="http://mdbootstrap.com/live/_doc/css/mdb.min.css" rel="stylesheet">
<!-- SideNav slide-out button -->
<i class="material-icons">menu</i>
<!--/. SideNav slide-out button -->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/bootstrap.min.js"></script>
<!-- Material Design Bootstrap -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/mdb.min.js"></script>
<!-- Sidebar navigation -->
<ul id="slide-out" class="side-nav admin-side-nav dark-side-nav">
<!-- Side navigation links -->
<ul class="collapsible collapsible-accordion">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-money"></i> Sales</li>
<li><i class="fa fa-line-chart"></i> Conversion</li>
<li><i class="fa fa-users"></i> Website Traffic</li>
<li><i class="fa fa-search"></i> SEO</li>
<li><i class="fa fa-share-alt"></i> Social</li>
</ul>
<!--/. Side navigation links -->
</ul>
<!--/. Sidebar navigation -->
<!--Navbar-->
<nav class="double-navbar navbar navbar-fixed-top unique-color z-depth-1" role="navigation">
<div class="container-fluid">
<div class="navbar-header pull-left">
<!-- SideNav slide-out button -->
<i class="fa fa-bars"></i>
<!--/. SideNav slide-out button -->
</div>
<!-- Navbar Icons -->
<ul class="list-inline pull-right text-center">
<li><i class="fa fa-question"></i><br><span>Help</span></li>
<li><i class="fa fa-cogs"></i><br><span>Settings</span></li>
<li><i class="fa fa-sign-out"></i><br><span>Logout</span></li>
</ul>
<!--/. Navbar Icons -->
</div>
</nav>
<!--/.Navbar-->
<div class="container">
<div class="space-50" style="height: 300px"></div>
<h1 class="white-text">Scorll Down</h1>
<div class="space-50" style="height: 900px"></div>
</div>
Toggle Navigation Demo.
// Initialize collapse button
$(".button-collapse").sideNav();
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
$('.collapsible').collapsible();
body {
background: url("http://mdbootstrap.com/images/regular/nature/img%20(4).jpg") no-repeat center center fixed;
background-size: cover;
}
.top-nav-collapse {
background-color: #3F729B !important;
}
/* Small Devices, Tablets */
#media only screen and (max-width: 768px) {
.navbar {
background-color: #3F729B !important;
}
}
<!-- Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="http://mdbootstrap.com/live/_doc/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="http://mdbootstrap.com/live/_doc/css/mdb.min.css" rel="stylesheet">
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/bootstrap.min.js"></script>
<!-- Material Design Bootstrap -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/mdb.min.js"></script>
<!--Navbar-->
<nav class="navbar primary-color">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<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 waves-effect waves-light" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group waves-effect waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</div>
</div>
</nav>
<!--/.Navbar-->

TypeError: $element.epoch is not a function

I'm using AngularJS and Epoch with ng-epoch directive wrapper.
Here is my module file
angular.module('RDash', ['ui.bootstrap', 'ui.router', 'ngCookies','ng-oboe','ng.epoch'])
.config(function (oboeProvider) {
/* If we were so inclined, we could change the oboe defaults here - headers, etc. */
// oboeProvider.defaults = {};
});
I didn't make any changes in controller. Because I want to show just chart outline without data at page.
Here is my template file:
<div class="row" ng-controller="StatsCtrl">
<div class="col-lg-12">
<rd-widget>
<rd-widget-header icon="fa fa-line-chart" title="Cpu">
</rd-widget-header>
<rd-widget-body classes="medium no-padding">
<epoch-live-line chart-height="200" chart-data="" chart-stream=""> </epoch-live-line>
</rd-widget-body>
</rd-widget>
</div>
<div class="col-lg-12">
<rd-widget>
<rd-widget-header icon="fa fa-area-chart" title="Memory">
</rd-widget-header>
<rd-widget-body classes="medium no-padding">
</rd-widget-body>
</rd-widget>
</div>
</div>
Also here is my index
<!doctype html>
<html lang="en" ng-app="RDash">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RDash AngularJS</title>
<!-- STYLES -->
<!-- build:css lib/css/main.min.css -->
<link rel="stylesheet" type="text/css" href="components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="components/rdash-ui/dist/css/rdash.min.css">
<link rel="stylesheet" type="text/css" href="components/epoch/epoch.min.css" />
<!-- endbuild -->
<!-- SCRIPTS -->
<!-- build:js lib/js/main.min.js -->
<script type="text/javascript" src="components/angular/angular.min.js"></script>
<script type="text/javascript" src="components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="components/oboe/dist/oboe-browser.min.js"></script>
<script type="text/javascript" src="components/ng-oboe/dist/ng-oboe.js"></script>
<script type="text/javascript" src="components/d3/d3.min.js"></script>
<script type="text/javascript" src="components/epoch/epoch.min.js"></script>
<script type="text/javascript" src="components/ng-epoch/ng-epoch.js"></script>
<!-- endbuild -->
<!-- Custom Scripts -->
<script type="text/javascript" src="js/dashboard.min.js"></script>
</head>
<body ng-controller="MasterCtrl">
<div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar">
<li class="sidebar-main">
<a ng-click="toggleSidebar()">
Dashboard
<span class="menu-icon glyphicon glyphicon-transfer"></span>
</a>
</li>
<li class="sidebar-title"><span>NAVIGATION</span></li>
<li class="sidebar-list">
Dashboard <span class="menu-icon fa fa-tachometer"></span>
</li>
<li class="sidebar-list">
Tables <span class="menu-icon fa fa-table"></span>
</li>
</ul>
<div class="sidebar-footer">
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular" target="_blank">
Github
</a>
</div>
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular/README.md" target="_blank">
About
</a>
</div>
<div class="col-xs-4">
<a href="#">
Support
</a>
</div>
</div>
</div>
<!-- End Sidebar -->
<div id="content-wrapper">
<div class="page-content">
<!-- Header Bar -->
<div class="row header">
<div class="col-xs-12">
<div class="user pull-right">
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<img src="img/avatar.jpg">
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Joe Bloggs
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Profile
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Logout
</a>
</li>
</ul>
</div>
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<i class="fa fa-bell-o"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Notifications
</li>
<li class="divider"></li>
<li>
Server Down!
</li>
</ul>
</div>
</div>
<div class="meta">
<div class="page">
Dashboard
</div>
<div class="breadcrumb-links">
Home / Dashboard
</div>
</div>
</div>
</div>
<!-- End Header Bar -->
<!-- Main Content -->
<div ui-view></div>
</div><!-- End Page Content -->
</div><!-- End Content Wrapper -->
</div><!-- End Page Wrapper -->
</body>
</html>
Why I am getting this error? I can't figure out.
TypeError: $element.epoch is not a function
at h.$scope.renderEpoch (http://localhost:4444/lib/js/main.min.js:434:28)
at liveLineFunction (http://localhost:4444/lib/js/main.min.js:504:28)
at http://localhost:4444/lib/js/main.min.js:65:60
at K (http://localhost:4444/lib/js/main.min.js:55:142)
at g (http://localhost:4444/lib/js/main.min.js:47:397)
at http://localhost:4444/lib/js/main.min.js:47:17
at http://localhost:4444/lib/js/main.min.js:48:359
at w (http://localhost:4444/lib/js/main.min.js:52:291)
at za.link (http://localhost:4444/lib/js/main.min.js:206:239)
at K (http://localhost:4444/lib/js/main.min.js:55:142) <div class="epoch ng-scope ng-isolate-scope" chart-height="200" chart-data="" chart-stream="">

As per the preparation section here, you need to load jQuery first and then epoch.js like below.
If you do not already have jQuery and AngularJS included:
<script src="[PATH_TO_BOWER_COMPNENTS]/jquery/dist/jquery.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/angular/angular.min.js"></script>
After you load those two libraries, include:
<script src="[PATH_TO_BOWER_COMPNENTS]/d3/d3.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/epoch/epoch.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/ng-epoch/ng-epoch.js"></script>

Categories

Resources