I have problem when I'm trying to access file from assets directory.
I'm trying to serve an image from navbar component which is located in components/navbar. Image is located in assets/img directory.
Browser throws an error http://localhost:4200/assets/img/test.png (404) not found
I'm using angular 5,Angular CLI 1.5 and Node: 6.10.3
Here you can see code and project structure.
Screenshot
navbar.component.html
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" routerLink="/">No Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a routerLink="#">Pitanja<span class="sr-only">(current)</span></a></li>
<li><a routerLink="#">Oznake</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" *ngIf="isLoggedIn == true">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{user.username}} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a routerLink="/user/{{user.username}}">My profile</a></li>
<li><a routerLink="#">Settings</a></li>
<li role="separator" class="divider"></li>
<li><a routerLink="#" (click)="logout()">Logout</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" *ngIf="isLoggedIn == false">
<li><a routerLink="/login">Login</a></li>
<li><a routerLink="/register">Register</a></li>
</ul>
</div>
</div>
</nav>
<img src="assets/img/test.png" />
try to play with the location.
I think it should work.
<img src="../../assets/img/test.png" />
app-|
|
-components-|(../)
| |-navbar-|(../)
| |-navbar.comp.html
|
-assets-|
| |-img-|
| |-test.png
Related
Hi i want to change the active tab with jquery
this is my code
so what is the solution please
<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="#top-navbar-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 visible-xs" href="index.html">Titel</a>
</div>
<div class="collapse navbar-collapse" id="top-navbar-1">
<ul id="collapsablenav" class="nav navbar-nav navbar-right">
<li class="active dropdown hidden-xs">
<a data-toggle="dropdown" href="#" class="dropdown-toggle"> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li id="CDCDC">
<a data-toggle="tab" href="#ABAB"></a>
</li>
<li class="divider"></li>
<li class="active" id="testclocalisation"><a data-toggle="tab" href="#hometab">AZ</a></li>
</ul>
</li>
<li class="active visible-xs"><a data-toggle="tab" href="#FFFF">F</a></li>
<li id="testFFFFFF"><a data-toggle="tab" href="#DDDDD">D</a></li>
<li id="testCCCCCC"><a data-toggle="tab" href="#CCCCCC">C</a></li>
<li id="testBBBBB"><a data-toggle="tab" href="#BBBBB">B</a></li>
<li id="testAAAAAA"><a data-toggle="tab" href="#AAAAA">A</a></li>
</ul>
</div>
</div>
</nav>
so what is the solution please
function changeTab( newID ) {
$('.navbar li').removeClass('active');
$('#' + newID ).addClass('active');
}
Now call this function on some event and pass the Id of the li you want to make active.
I am trying to create a dropdown menu with responsive feature but the dropdown menu does not work when I click on them then nothing is open here is the code
<div class="navbar-header">
<button type="button" class="navbar-toggel" data-toggel="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">RG_ACADEMY</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggel" data-toggel="dropdown" href="#">About us <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>About Academy</li>
<li>Faculty Team</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggel" data-toggel="dropdown" href="#">Courses <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS+ADVANCED</li>
<li>JEE MAINS</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
and the output is and also the sign I do not understand why it is the show
Just fix your spelling. Bootstrap can't target your classes correctly if they're spelled wrong. Bootstrap uses the spelling toggle, not toggel -
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">RG_ACADEMY</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About us <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>About Academy</li>
<li>Faculty Team</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Courses <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS+ADVANCED</li>
<li>JEE MAINS</li>
</ul>
</li>
</ul>
</div>
</div>
It works. Your error is that you mis-spelled toggle to toggel everywhere in your code. Correct that and it all works perfectly fine.
<nav>
<div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">RG_ACADEMY</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About us <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>About Academy</li>
<li>Faculty Team</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Courses <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS+ADVANCED</li>
<li>JEE MAINS</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Include bootstrap classes along with jquery.
JSFIDDLE
You have errors in the code "toggel is TOGGLE" for example.
It does not make you add functionality javascript should bootstrap the catch automatically if you have well the call to your JS
Example dropdown menu
Try This code for your problem
<script src="content/js/jquery.min.js"></script>
<script src="content/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
Change : dropdown-toggel to dropdown-toggle and data-toggel="dropdown" to data-toggle="dropdown"
Partially corrected output : Demo
try this before body:
<script>
$(function () {
$('.dropdown-toggle').dropdown();
});
</script>
I can't get a bootstrap vertical menu to collapse when using media queries.
There is too much code to put it all in here so I created a fiddle -
https://jsfiddle.net/DTcHh/
I don't mind re-writing the menu however it was the only way I could get this kind of menu. I am basing my technology off this website as this was the clients demand -
http://www.rhiwbeinaprm.co.uk/
I am trying to create their home page menu but in bootstrap so it is responsive. any help is greatly appreciated.
<div class="navbar">
<nav class="navbar navbar-default">
<div class="container-fluid"><div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="root">
</li><li class="dropdown-submenu"> <a tabindex="-1" href="#">Welcome</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Headteacher</a>
</li>
<li><a tabindex="-1" href="#">School Motto</a>
</li>
</ul>
</li>
</ul>
</div>
</div
The issue is, when scrolling below around 750px and below, the whole thing just disappears.
Where is the navigation button?
Add an id to: <div class="navbar-collapse collapse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="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="#">Bootstrap 3</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
...
</div>
Update fiddle: https://jsfiddle.net/wZVanG/DTcHh/8623/
you have the following issues with your code:
You are duplicating something here by using a div and a nav both
with class navbar. I don't know why but that's weird.
Your collapsing div doesn't have id. the id will allow the button to target it for dropdown
The button that is supposed to hold the toggle for dropdown isn't in your code.
Since your collapsing div doesn't have an Id, your dropdown button wouldn't be pointing to anything
Your jsFiddle is different from the code posted here.... The following code is based on the one from your jsfiddle.
Working bootply
Your website takes a lot of time to load, to improve the user experience you might consider loading the js files after or creating a loading screen. The following code is for the navbar.
<div class="container">
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap 3</a>
<button type="button" class="navbar-toggle collapsed" 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>
</div>
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown active">
Getting started <b class="caret"></b>
<ul class="dropdown-menu">
<li>Download Bootstrap</li>
<li class="divider"></li>
<li class="dropdown-header">Examples</li>
<li>Basic template</li>
<li>Starter template</li>
<li>Grids</li>
<li>Jumbotron</li>
<li>Navbar</li>
<li>Sign-in page</li>
<li>Sticky footer</li>
<li>Offcanvas</li>
<li>Carousel</li>
<li>Theme</li>
<li class="divider"></li>
<li class="dropdown-header">Compatibility</li>
<li>Migrating from 2.x to 3.0</li>
<li>Browser support</li>
<li>Third party support</li>
</ul>
</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Customize</li>
</ul>
</div>
</div>
<div class="jumbotron">
<h1>Twitter Bootstrap 3.0</h1>
<p class="lead">Starter template with CSS and JS included.</p>
<p><a class="btn btn-lg btn-primary" href="#fork">Fork this fiddle</a></p>
</div>
</div>
As you can see the content stays out of the = box on mobile and when the page is rescaled
My current HTML
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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" title="Index" href="http://www.example.com">MP3Jungle</a>
<a class="navbar-brand" title="Singles" href="http://www.example.com/category/singles/">Singles</a>
<a class="navbar-brand" title="Singles" href="http://www.example.com/category/videos/">Videos</a>
<a class="navbar-brand" title="Singles" href="http://www.example.com/category/albums/">Albums</a>
<a class="navbar-brand" title="Singles" href="http://www.example.com/category/mixtapes/">Mixtapes</a>
</div>
<form class="navbar-form navbar-right" action="/" method="post" accept-charset="utf-8" role="search">
<div class="form-group">
<input type="text" name="s" id="s" class="form-control" placeholder="Search..."/>
</div>
</form>
</div>
</nav>
How can I get the content into the collapsed box? Thanks!
Bootstrap expects menu links to be a <ul> that you specify in the data-target of your collapsed button. It'll then take that UL and place it "under" the button in mobile version. Also, make sure that you're loading both the css and js for Bootstrap.
Compare to this working example:
Fiddle
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</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 class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
I have an external Bootstrap navbar header which I include in every page as
<?php include("header.html");?>
The external header html file is given below:
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="homepage.php" >Home</a></li>
<li >About Us</li>
<li>Events</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Members<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>4th Year</li>
<li>3rd Year</li>
<li>2nd Year</li>
<li>1st Year</li>
</ul>
</li>
<li>Gallery</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="register"><span class="glyphicon glyphicon-user"></span>Register</li>
<li><span class="glyphicon glyphicon-log-in"></span>Login</li>
</ul>
</div>
</div>
</nav>
The problem I am facing is changing the active menu. I tried various ways but no success yet.
Please help if you have any idea.
You can either send a variable through POST/GET using php and set the class accordingly, or you can try using jquery to find specific elements that exist in each page and add a class accordingly, for example
if ($('#specific-page-element-1').length) {
$('menuelement-1').addClass('active');
}