I'm using Modern Admin Bootstrap template in my Angular project and put all the files in Angular Assets.
But the javascript, hiding the side nav, maximizing the table, closing the table and etc. in Modern Admin template does not run when the component is loaded for the first time, only when I reload the page then the javascript runs. I am new in using the bootstrap template. Could you check my code.
<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<head>
<!-- <meta charset="utf-8"> -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sample project</title>
<base href="/">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="assets/mod_btsrp4/font/opensansfamly.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/mod_btsrp4/app-assets/css/vendors.min.css">
<!-- END VENDOR CSS-->
<!-- BEGIN MODERN CSS-->
<link rel="stylesheet" type="text/css" href="assets/mod_btsrp4/app-assets/css/app.min.css">
<!-- END MODERN CSS-->
<!-- BEGIN Page Level CSS-->
<link rel="stylesheet" type="text/css" href="assets/mod_btsrp4/app-assets/css/core/menu/menu-types/vertical-menu-modern.css">
<link rel="stylesheet" type="text/css" href="assets/mod_btsrp4/app-assets/css/core/colors/palette-gradient.min.css">
<link rel="stylesheet" type="text/css" href="assets/mod_btsrp4/app-assets/vendors/css/charts/jquery-jvectormap-2.0.3.css">
<link rel="stylesheet" type="text/css" href="assets/mod_btsrp4/app-assets/vendors/css/charts/morris.css">
<link rel="stylesheet" type="text/css" href="assets/mod_btsrp4/app-assets/fonts/simple-line-icons/style.min.css">
<link rel="stylesheet" type="text/css" href="assets/mod_btsrp4/app-assets/css/core/colors/palette-gradient.min.css">
<!-- END Page Level CSS-->
<!-- BEGIN Custom CSS-->
<link rel="stylesheet" type="text/css" href="assets/mod_btsrp4/assets/css/style.css">
<!-- END Custom CSS-->
</head>
<body class="vertical-layout vertical-menu-modern 2-columns menu-expanded fixed-navbar" data-open="click"
data-menu="vertical-menu-modern" data-col="2-columns">
<!-- BEGIN VENDOR JS-->
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/vendors/js/vendors.min.js"></script>
<!-- BEGIN VENDOR JS-->
<!-- BEGIN PAGE VENDOR JS-->
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/vendors/js/charts/chart.min.js"></script>
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/vendors/js/charts/raphael-min.js"></script>
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/vendors/js/charts/morris.min.js"></script>
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/vendors/js/charts/jvector/jquery-jvectormap-2.0.3.min.js"></script>
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/vendors/js/charts/jvector/jquery-jvectormap-world-mill.js"></script>
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/data/jvector/visitor-data.js"></script>
<!-- END PAGE VENDOR JS-->
<!-- BEGIN MODERN JS-->
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/js/core/app-menu.min.js"></script>
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/js/core/app.min.js"></script>
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/js/scripts/customizer.min.js"></script>
<!-- END MODERN JS-->
<!-- BEGIN PAGE LEVEL JS-->
<script type="text/javascript" src="assets/mod_btsrp4/app-assets/js/scripts/pages/dashboard-sales.min.js"></script>
<!-- END PAGE LEVEL JS-->
<app-root></app-root>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->
This is my side navigation
<!-- fixed-top-->
<nav
class="p-0 header-navbar navbar-expand-md navbar navbar-with-menu navbar-without-dd-arrow fixed-top navbar-semi-dark navbar-shadow">
<div class="navbar-wrapper">
<div class="navbar-header">
<ul class="nav navbar-nav flex-row position-relative">
<li class="nav-item mobile-menu d-md-none mr-auto"><a
class="nav-link nav-menu-main menu-toggle hidden-xs" href="#"><i
class="ft-menu font-large-1"></i></a></li>
<li class="nav-item mr-auto"><a class="navbar-brand" href="index.html"><img class="brand-logo"
alt="modern admin logo" src="../../assets/picture/logo-black.png">
<h3 class="brand-text">Admin</h3>
</a>
</li>
<li class="nav-item d-none d-md-block nav-toggle">
<a class="nav-link modern-nav-toggle pr-0" data-toggle="collapse">
<i class="toggle-icon ft-toggle-right font-medium-3 white" data-ticon="ft-toggle-right"></i>
</a>
</li>
</ul>
</div>
<div class="navbar-container content">
<div class="collapse navbar-collapse" id="navbar-mobile">
<ul class="nav navbar-nav mr-auto float-left">
</ul>
<ul class="nav navbar-nav float-right">
<li class="dropdown dropdown-user nav-item"><a class="dropdown-toggle nav-link dropdown-user-link"
href="#" data-toggle="dropdown"><span class="mr-1">Hello,<span
class="user-name text-bold-700">John Doe</span></span><span
class="avatar avatar-online"><img
src="../../assets/mod_btsrp4/app-assets/images/portrait/small/avatar-s-19.png"
alt="avatar"><i></i></span></a>
<div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#"><i
class="ft-user"></i> Edit Profile</a><a class="dropdown-item" href="#"><i
class="ft-mail"></i> My Inbox</a><a class="dropdown-item" href="#"><i
class="ft-check-square"></i> Task</a><a class="dropdown-item" href="#"><i
class="ft-message-square"></i> Chats</a>
<div class="dropdown-divider"></div><a class="dropdown-item" href="#"><i
class="ft-power"></i> Logout</a>
</div>
</li>
<li class="dropdown dropdown-notification nav-item"><a class="nav-link nav-link-label" href="#"
data-toggle="dropdown"><i class="ficon ft-bell"></i><span
class="badge badge-pill badge-default badge-danger badge-default badge-up badge-glow">5</span></a>
<ul class="dropdown-menu dropdown-menu-media dropdown-menu-right">
<li class="dropdown-menu-header">
<h6 class="dropdown-header m-0"><span class="grey darken-2">Notifications</span>
</h6><span class="notification-tag badge badge-default badge-danger float-right m-0">5
New</span>
</li>
<li class="scrollable-container media-list w-100"><a href="javascript:void(0)">
<div class="media">
<div class="media-left align-self-center"><i
class="ft-plus-square icon-bg-circle bg-cyan"></i></div>
<div class="media-body">
<h6 class="media-heading">You have new order!</h6>
<p class="notification-text font-small-3 text-muted">Lorem ipsum dolor
sit amet, consectetuer elit.</p><small>
<time class="media-meta text-muted"
datetime="2015-06-11T18:29:20+08:00">30 minutes
ago</time></small>
</div>
</div>
</a><a href="javascript:void(0)">
<div class="media">
<div class="media-left align-self-center"><i
class="ft-download-cloud icon-bg-circle bg-red bg-darken-1"></i>
</div>
<div class="media-body">
<h6 class="media-heading red darken-1">99% Server load</h6>
<p class="notification-text font-small-3 text-muted">Aliquam tincidunt
mauris eu risus.</p><small>
<time class="media-meta text-muted"
datetime="2015-06-11T18:29:20+08:00">Five hour
ago</time></small>
</div>
</div>
</a><a href="javascript:void(0)">
<div class="media">
<div class="media-left align-self-center"><i
class="ft-alert-triangle icon-bg-circle bg-yellow bg-darken-3"></i>
</div>
<div class="media-body">
<h6 class="media-heading yellow darken-3">Warning notifixation</h6>
<p class="notification-text font-small-3 text-muted">Vestibulum auctor
dapibus neque.</p><small>
<time class="media-meta text-muted"
datetime="2015-06-11T18:29:20+08:00">Today</time></small>
</div>
</div>
</a><a href="javascript:void(0)">
<div class="media">
<div class="media-left align-self-center"><i
class="ft-check-circle icon-bg-circle bg-cyan"></i></div>
<div class="media-body">
<h6 class="media-heading">Complete the task</h6><small>
<time class="media-meta text-muted"
datetime="2015-06-11T18:29:20+08:00">Last week</time></small>
</div>
</div>
</a><a href="javascript:void(0)">
<div class="media">
<div class="media-left align-self-center"><i
class="ft-file icon-bg-circle bg-teal"></i></div>
<div class="media-body">
<h6 class="media-heading">Generate monthly report</h6><small>
<time class="media-meta text-muted"
datetime="2015-06-11T18:29:20+08:00">Last month</time></small>
</div>
</div>
</a></li>
<li class="dropdown-menu-footer"><a class="dropdown-item text-muted text-center"
href="javascript:void(0)">Read all notifications</a></li>
</ul>
</li>
<li class="dropdown dropdown-notification nav-item"><a class="nav-link nav-link-label" href="#"
data-toggle="dropdown"><i class="ficon ft-mail"> </i></a>
<ul class="dropdown-menu dropdown-menu-media dropdown-menu-right">
<li class="dropdown-menu-header">
<h6 class="dropdown-header m-0"><span class="grey darken-2">Messages</span></h6>
<span class="notification-tag badge badge-default badge-warning float-right m-0">4
New</span>
</li>
<li class="scrollable-container media-list w-100"><a href="javascript:void(0)">
<div class="media">
<div class="media-left"><span
class="avatar avatar-sm avatar-online rounded-circle"><img
src="../../assets/mod_btsrp4/app-assets/images/portrait/small/avatar-s-19.png"
alt="avatar"><i></i></span></div>
<div class="media-body">
<h6 class="media-heading">Margaret Govan</h6>
<p class="notification-text font-small-3 text-muted">I like your
portfolio, let's start.</p><small>
<time class="media-meta text-muted"
datetime="2015-06-11T18:29:20+08:00">Today</time></small>
</div>
</div>
</a><a href="javascript:void(0)">
<div class="media">
<div class="media-left"><span
class="avatar avatar-sm avatar-busy rounded-circle"><img
src="../../assets/mod_btsrp4/app-assets/images/portrait/small/avatar-s-2.png"
alt="avatar"><i></i></span></div>
<div class="media-body">
<h6 class="media-heading">Bret Lezama</h6>
<p class="notification-text font-small-3 text-muted">I have seen your
work, there is</p><small>
<time class="media-meta text-muted"
datetime="2015-06-11T18:29:20+08:00">Tuesday</time></small>
</div>
</div>
</a><a href="javascript:void(0)">
<div class="media">
<div class="media-left"><span
class="avatar avatar-sm avatar-online rounded-circle"><img
src="../../assets/mod_btsrp4/app-assets/images/portrait/small/avatar-s-3.png"
alt="avatar"><i></i></span></div>
<div class="media-body">
<h6 class="media-heading">Carie Berra</h6>
<p class="notification-text font-small-3 text-muted">Can we have call in
this week ?</p><small>
<time class="media-meta text-muted"
datetime="2015-06-11T18:29:20+08:00">Friday</time></small>
</div>
</div>
</a><a href="javascript:void(0)">
<div class="media">
<div class="media-left"><span
class="avatar avatar-sm avatar-away rounded-circle"><img
src="../../assets/mod_btsrp4/app-assets/images/portrait/small/avatar-s-6.png"
alt="avatar"><i></i></span></div>
<div class="media-body">
<h6 class="media-heading">Eric Alsobrook</h6>
<p class="notification-text font-small-3 text-muted">We have project
party this saturday.</p><small>
<time class="media-meta text-muted"
datetime="2015-06-11T18:29:20+08:00">last month</time></small>
</div>
</div>
</a></li>
<li class="dropdown-menu-footer"><a class="dropdown-item text-muted text-center"
href="javascript:void(0)">Read all messages</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<div class="main-menu menu-fixed menu-dark menu-accordion menu-shadow" data-scroll-to-active="true">
<div class="main-menu-content">
<ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation">
<li class=" nav-item">
<a routerLink="/dashboard/user-account">
<i class="la la-user"></i>
<span class="menu-title"> Admin account </span>
</a>
<ul class="menu-content"></ul>
</li>
<li class=" nav-item">
<a routerLink="/dashboard/tapload-account">
<i class="la la-credit-card"></i>
<span class="menu-title"> Tapload account </span>
</a>
<ul class="menu-content"></ul>
</li>
</ul>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<div class="app-content content">
<router-outlet></router-outlet>
</div>
Some data were remove because of the limit. Thank you in advance
Related
I'm new to this. I have a working navbar with dropdown that has 3 links. After expansion, the dropdown links display a card upon clicking (cards show contact info), and all works fine...except for when I go to mobile view below <576px.
I've used a template with CDNs directly from Boostrap for CSS, Javascript bundle, and Icons.
Why does this work, but it becomes not responsive once below <576px ????
Soon as I go greater than >576px it works again. This is driving me nuts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap CSS CDN -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<!-- Bootstrap Icons CDN -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css"
/>
<style>
.bg-dark-transparent {
background-color: rgba(0, 0, 0, 0.5);
}
</style>
<title>Bio Website</title>
</head>
<body class="vh-100 bg-dark text-light">
<!-- NAVIGATION -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container-fluid">
<span class="badge bg-danger shadow">Joe Noobie</span>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarMain"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMain">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" style="z-index: 10">
<li class="nav-item">
<a
href=""
class="nav-link active"
data-bs-toggle="collapse"
data-bs-target=".multi-collapse"
aria-expanded="false"
aria-controls="about contact"
>Info</a
>
</li>
<li class="nav-item">
<a
href="#about"
role="button"
class="nav-link"
data-bs-toggle="collapse"
aria-expanded="false"
aria-controls="about"
>About</a
>
</li>
<li class="nav-item">
<a
href="#contact"
role="button"
class="nav-link"
data-bs-toggle="collapse"
aria-expanded="false"
aria-controls="contact"
>Contact</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- HEADER -->
<header class="container fixed-top text-end mt-5">
<!-- HEADER > About & Contact dropdown content -->
<div class="row mt-3">
<!-- About -->
<div class="col-md-6 mt-3">
<div class="collapse multi-collapse" id="about">
<div class="card card-body text-start shadow bg-dark-transparent">
<h5 class="card-title text-danger">About</h5>
<div class="card-text">
<h3 class="text-white-50 ms-3">Joe Noobie</h3>
<ul class="list-unstyled ms-5">
<li>CEO of Noobie Media</li>
<li>Web Developer</li>
<li>Tech Support</li>
<li>Graphic Designer</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Contact -->
<div class="col-md-6 mt-3">
<div class="collapse multi-collapse" id="contact">
<div class="card card-body text-start shadow bg-dark-transparent">
<h5 class="card-title text-danger">Contact</h5>
<div class="card-text">
<h3 class="text-white-50 ms-3">Get in touch:</h3>
<ul class="list-unstyled ms-5">
<li><i class="bi bi-house me-2 text-danger"></i>City: The City</li>
<li><i class="bi bi-signpost me-2 text-danger"></i>Street: 21 Jump Str.</li>
<li><i class="bi bi-telephone me-2 text-danger"></i>Phone: +555-555-555</li>
<li>
<i class="bi bi-envelope me-2 text-danger"></i>Email: JoeNoobie#Noobalicious.com
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
Remove the "fixed-top" class from nav and header tags, removing this class makes the tags rendered one-after the other in the default "static" positioning way.
<nav class="navbar navbar-expand-md navbar-dark">
<header class="container text-end mt-5">
I am including header and footer file in home.ejs file in my project but I want to pass a string that will be a CSS stylesheet file name , like I am including that header file in my home.ejs file so when I include I want to pass a string to include() and add it to href of my link tag in header.ejs file in that way I can add diff stylesheet for diff ejs files
the link tag above which I have commented // custom stylesheet that's the link tag
code for header.ejs file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Reggae+One&display=swap" rel="stylesheet">
<!-- boostrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- custom CSS stylesheet -->
<link rel="stylesheet" href="/css/styles.css" >
<title>Yuvraj</title>
</head>
<body>
<nav class="navbar navbar-expand-lg ">
<div class="container-fluid">
<a class="navbar-brand" href="#">Yuvraj Agarkar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<img class="navbar-toggler-icon" src="../images/More.svg" alt="not found" style="height: 50px; width: 50px;">
<!-- <span class="navbar-toggler-icon"></span> -->
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/newsletter">Newsletter</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Posts</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">fundamentals</a></li>
<li><a class="dropdown-item" href="#">top iOS tips</a></li>
<li><a class="dropdown-item" href="#">General programmic habbits</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
code for home.ejs file , here I want to pass that string name
<%- include('partials/header') -%>
<div class="introDiv">
<div class="intro">
<h2 class="introLine">I am a aspiring <span class="profSpan"> </span> <span class="cur">|</span></h2>
</div>
<div class="imageDiv">
<img class="svgImages" src="/images/catSleeping.svg" alt="Not found">
<h4 class="hustle">**Keep Hustling**</h4>
</div>
</div>
<div class="container">
<div class="row color">
<div class="col-sm-12 col-lg-6 article">
<img src="/images/laptop-code.jpg" alt="article-image" class="article-img">
<h3>
Foundation of programming
</h3>
<h5>
lorem ipsm is the dummy rext rerbsite the dummy rext rerbsite the dummy rext rerbsite
</h5>
</div>
<div class="col-sm-12 col-lg-6 article">
<img src="/images/man-code.jpg" alt="article-image" class="article-img">
<h3>
Basics of programming
</h3>
<h5>
lorem ipsm is the dummy rext rerbsite the dummy rext rerbsite the dummy rext rerbsite
</h5>
</div>
</div>
</div>
<%- include('partials/footer') -%>
**Hi, I am trying to display a dashboard view with Codeigniter, but when I load, some of the design such as the design of header and containers are missing here is my code, I'm new in this filed, can someone please help me? what am I missing? there is no error but I'm getting a warning: DevTools failed to load SourceMap: Could not load content for http://localhost:8080/ASGB/assets/js/bootstrap.min.js.map: **
<!DOCTYPE html>
<html>
<head runat="server">
<title>ASGB Ticketing Tool</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="<?php echo site_url ('assets/image/favicon.png');?>"/>
<link rel="stylesheet" href="<?php echo site_url ('assets/css/bootstrap.min.css');?>">
<link rel="stylesheet" href="<?php echo site_url ('assets/css/bootstrap.min.css.map');?>">
<link rel="stylesheet" href="<?php echo site_url ('assets/css/mystyle.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo site_url ('assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo site_url ('assets/css/datatables.min.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo site_url ('assets/css/bootstrap-multiselect.css');?>">
<!-- <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> -->
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-cus navbar-light bg-faded">
<a class="navbar-brand waves-light" href="#">
<img src="<?php echo site_url ('assets/image/logo.png');?>" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-mob-bar" id="navbarNav">
<ul class="nav navbar-nav ml-auto nav-head-font">
<li class="nav-item active"><a class="nav-link" href="#"><i class="fa fa-cog" aria-hidden="true"></i></a></li>
<li class="nav-item active"><a class="nav-link" href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
<li class="nav-item dropdown dropdown-mob" id="dropdown-mob-hide">
<i class="fa fa-user" aria-hidden="true"></i>
<div class="dropdown-menu dropdown-menu-right">
<i class="fa fa-address-book-o" aria-hidden="true"></i>My Profile
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>Edit Profile
<i class="fa fa-key" aria-hidden="true"></i>Change Password
<i class="fa fa-handshake-o" aria-hidden="true"></i>Account Ledger
<div class="dropdown-divider"></div>
<i class="fa fa-sign-out" aria-hidden="true"></i>Sign Out
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid container-fluid-cus">
<div class="fixed-nav">
<div class="fixed-nav-inner open-nav">
<ul class="text-center">
<a href="home.html" id="menu-toggle" class="waves-light menu-toggle" data-toggle="offcanvas">
<li>
<i class="fa fa-dashboard"></i></li>
<li>Menu</li>
</a>
<a href="company.html" class="waves-light">
<li><i class="fa fa-briefcase"></i></li>
<li>Company</li>
</a>
<a href="staff.html" class="waves-light">
<li><i class="fa fa-user-circle"></i></li>
<li>Staff</li>
</a>
<a href="projects.html" class="waves-light">
<li><i class="fa fa-product-hunt"></i></li>
<li>Projects</li>
</a>
<a href="#" class="waves-light">
<li><i class="fa fa-ticket"></i></li>
<li>Incidents</li>
</a>
<a href="settings.html" class="waves-light">
<li><i class="fa fa-cogs"></i></li>
<li>Settings</li>
</a>
</ul>
</div>
</div>
</div>
<div class="main-sec">
<div class="">
<div class="row">
<div class="col-md-3">
<div class="card-block">
<div class="media">
<div class="mr-3 card-icon-1">
<i class="fa fa-newspaper-o font-l-1"></i>
</div>
<div class="media-body ml-3">
<h3 class="font-l-1 mb-1">06</h3>
<span>Projects</span>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card-block">
<div class="media">
<div class="card-icon-2 mr-3 card-icon-1">
<i class="fa fa-users font-l-1"></i>
</div>
<div class="media-body ml-3">
<h3 class="font-l-1 mb-1">72</h3>
<span>Staff</span>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card-block">
<div class="media">
<div class="card-icon-3 mr-3 card-icon-1">
<i class="fa fa-universal-access font-l-1"></i>
</div>
<div class="media-body ml-3">
<h3 class="font-l-1 mb-1">10</h3>
<span>Teams</span>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card-block">
<div class="media">
<div class="card-icon-4 mr-3 card-icon-1">
<i class="fa fa-user-circle font-l-1"></i>
</div>
<div class="media-body ml-3">
<h3 class="font-l-1 mb-1">5</h3>
<span>Clients</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="<?php echo site_url ('assets/js/jquery.min.js');?>"></script>
<script src="<?php echo site_url('assets/js/popper.min.js');?>"></script>
<script src="<?php echo site_url('assets/js/bootstrap.min.js');?>"></script>
<script type="text/javascript" src="<?php echo site_url('assets/js/datatables.min.js');?>"></script>
<script type="text/javascript" src="<?php echo site_url('assets/js/bootstrap-multiselect.js');?>"></script>
<script src="<?php echo site_url('assets/js/jquery.steps.js');?>"></script>
<script src="<?php echo site_url('assets/js/jquery.validate.js');?>"></script>
<script src="<?php echo site_url('assets/js/myscript.js');?>"></script>
</body>
</html>
“Could not load content for ... *.map” is a Google Chrome setting issue.
View your website in Chrome
Press F12 to launch Google DevTools
Click the Setting gear icon (top right)
See ... Preferences -> Sources section
uncheck [ ] Enable CSS source maps
I was trying to repeat what was done in angular template at https://www.coursera.org/learn/angular-js/supplement/aVtFp/exercise-instructions-angular-templates. However, something has gone wrong and I couldn't figured out what it is.
It just looks like
menu.html
<div class="container">
<div class="row row-content" ng-controller="MenuController ">
<div class="col-xs-12">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"
ng-class="{active:isSelected(1)}">
<a ng-click="select(1)"
aria-controls="all menu"
role="tab">The Menu</a></li>
<li role="presentation"
ng-class="{active:isSelected(2)}">
<a ng-click="select(2)"
aria-controls="appetizers"
role="tab">Appetizers</a></li>
<li role="presentation"
ng-class="{active:isSelected(3)}">
<a ng-click="select(3)"
aria-controls="mains"
role="tab">Mains</a></li>
<li role="presentation"
ng-class="{active:isSelected(4)}">
<a ng-click="select(4)"
aria-controls="desserts"
role="tab">Desserts</a></li>
</ul>
<div class="tab-content">
<ul class="media-list tab-pane fade in active">
<ul class="media-list">
<li class="media" ng-repeat="dish in dishes | filter:filtText">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
and index.html
<!DOCTYPE html>
<html lang="en" ng-app="confusionApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Ristorante Con Fusion</title>
<!-- Bootstrap -->
<!-- build:css styles/main.css -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
<!-- endbuild -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<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="#/"><img src="images/logo.png" height=30 width=41></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#/">
<span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a href="#/aboutus">
<span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span> About</a></li>
<li><a href="#/menu">
<span class="glyphicon glyphicon-list-alt"
aria-hidden="true"></span>
Menu</a></li>
<li><a href="#/contactus">
<i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row row-header">
<div class="col-xs-12 col-sm-8">
<h1>Ristorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best cuisines, and create
a unique fusion experience. Our lipsmacking creations will
tickle your culinary senses!</p>
</div>
<div class="col-xs-12 col-sm-2">
<p style="padding:20px;"></p>
<img src="images/logo.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-2">
</div>
</div>
</div>
</header>
<ng-include src="'menu.html'"></ng-include>
<footer class="row-footer">
<div class="container">
<div class="row">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone"></i>: +852 1234 5678<br>
<i class="fa fa-fax"></i>: +852 8765 4321<br>
<i class="fa fa-envelope"></i>:
<a href="mailto:confusion#food.net">
confusion#food.net</a>
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="nav navbar-nav" style="padding: 40px 10px;">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align=center>© Copyright 2015 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- build:js scripts/main.js -->
<script src="../bower_components/angular/angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
<!-- endbuild -->
</body>
</html>
They are in the same folder. And I am using "''".
Thanks for the help!
Try running it on a server. It should work. Use Brackets like the instructor is doing.
The reason why you're not getting anything loaded is because you are facing an XMLHttpRequest problem, your browser cannot load cross-origin requests.
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>