I want to use AngularJS to include a header in every html i use. here is the header.html:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container-fluid" id="container-fluid1">
<div class="navbar-header" id="websiteName">
<a class="navbar-brand" href="#">Richazon</a>
</div>
<div id="theLinks">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Navbar Color <b class="caret"></b>
<ul class="dropdown-menu" id="dropdown-menu1">
<li class="greenBg">NB1</li>
<li id="greenBg">NB2</li>
<li id="greenBg">NB3</li>
</ul>
</li>
<li class="dropdown">
Page 2 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Page 2.0.0 </li>
<li class="divider"></li>
<li>Page 2.0.1 </li>
<li class="divider"></li>
<li>AngularJS List Removal </li>
</ul>
</li>
<li class="dropdown">
Page 3 <b class="caret"></b>
<ul class="dropdown-menu" id="dropdown-menu">
<li>Page 3.0.0 </li>
<li class="divider"></li>
<li>Page 3.0.1 </li>
<li class="divider"></li>
<li>Page 3.0.3 </li>
<li class="divider"></li>
<li>Page 3.0.4 </li>
<li class="divider"></li>
<li>Page 3.0.5 </li>
<li class="divider"></li>
<li>Page 3.0.6 </li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
in my index1.html file I have this:
<html lang="en" ng-app="myApp">
then inside the body tag
<div appheader></div>
i understand this question has already been asked, hence my implementation. but i keep getting this error in the console: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=myApp&p1=Error%3A%…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)
this is the code at the top of my index1.html file which might be causing issues:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<link href="css/index1.css" rel="stylesheet">
and here is my main.js:
angular.module('myApp')
.directive('appheader', function() {
return {
templateUrl: 'header.html'
};
});
If this is your main.js
angular.module('myApp')
.directive('appheader', function() {
return {
templateUrl: 'header.html'
};
});
you need to create module
angular.module('myApp',[])
Related
At w3schools.com I found this example, just to keep it simple:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
It works fine, when I navigate using a keyboard. But when I add some further level - I cant reach next level:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<!-- next level -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1-2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-2A</li>
<li>Page 1-2B</li>
<li>Page 1-2C</li>
</ul>
</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
In my project, I have tried to write a jquery-keyboard handler for dropdown, but the sub-level, still wont toggle.
/* Dropdown */
li.dropdown{position: relative;}
ul.dropdown-menu{
position: absolute;
min-width: 120px;
}
ul.dropdown-menu li{
display: block !important;
white-space: nowrap;
}
<!DOCTYPE html>
<html>
<title>Bahrain Bourse</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="Fonts.css">
<link rel="stylesheet" href="Style.css">
<link rel="stylesheet" href="Site.css">
<link rel="stylesheet" href="Slideshow.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: "Lato", sans-serif}
.mySlides {display: none}
</style>
<body>
<!-- Navbar -->
<div class="w3-container w3-black w3-top">
<ul class="nav navbar-nav">
<li><a class="w3-button" style="font-size:24px" href="#"><i class="fa fa-home"></i></a></li>
<li class="dropdown"><a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">Corporate Profile</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">Quotes & Markets</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
<li class="dropdown"><a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">Prodcuts & Services</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
<li class="dropdown"><a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">Investors</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
<li class="dropdown"><a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">Rules & Regulations</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
<li class="dropdown"><a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">Brokers</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
<li class="dropdown"><a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">Bahrain Clear</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
<li class="dropdown"><a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">Publications</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
<li class="dropdown"><a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">News & Events</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</ul>
</div>
</body>
</html>
I am working on a page that has top-bar navigation, and below it a slideshow div with images.
Anyways, when I click on one of the options from top-bar, it somehow display the children options behind the slideshow. I don't what is the reason, so please help!
I attached 2 images to clarify the thing for you.
Thanks!
enter image description here
<div class="w3-container w3-black w3-top">
<ul class="nav navbar-nav">
<li>
<a class="w3-button" style="font-size:24px" href="#">
<i class="fa fa-home"></i>
</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">Corporate Profile</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
</div>
you are missing end tag of parent list </ul> before end tag of </div>
change your code to this
<div class="w3-container w3-black w3-top">
<ul class="nav navbar-nav">
<li>
<a class="w3-button" style="font-size:24px" href="#">
<i class="fa fa-home"></i>
</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle w3-button" data-toggle="dropdown" href="#">Corporate Profile</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
</ul> <!--this was missing-->
</div>
I have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Right Aligned Navbar</h3>
<p>The .navbar-right class is used to right-align navigation bar buttons.</p>
</div>
</body>
</html>
If you run the code you can notice all the buttons (e.g. WebsiteName, Page1,2,3, signup and login) are all grey. Except HOME. How can I deactivate the grey buttons?
See below.
But this is not the best case to go. Better to do global changes in CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="active dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="active">Page 1-1</li>
<li class="active">Page 1-2</li>
<li class="active">Page 1-3</li>
</ul>
</li>
<li class="active">Page 2</li>
<li class="active">Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li class="active"><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Right Aligned Navbar</h3>
<p>The .navbar-right class is used to right-align navigation bar buttons.</p>
</div>
</body>
</html>
You need to override the default gray color to white. The active state you are referring to is irrelevant here as it is a functionality rather than presentation. The changes need to be done to the CSS.
.navbar.navbar-inverse .navbar-brand {
color: #fff;
}
.navbar.navbar-inverse .navbar-nav > li > a {
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1
</li>
<li>Page 1-2
</li>
<li>Page 1-3
</li>
</ul>
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up
</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Right Aligned Navbar</h3>
<p>The .navbar-right class is used to right-align navigation bar buttons.</p>
</div>
</body>
</html>
I am having some trouble making the dropdown menus in twitter bootstrap work. Here is what I have for the navbar code.
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<a class="brand">Title of website</a>
<li class="divider-vertical"></li>
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Link 1<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Link 2<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
I have seen many different tutorials/examples on this, and I am not to sure what I am doing wrong, I have included jquery and the bootstrap-dropdown.js files at the end of the document.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap-dropdown.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
Any help on this matter would be greatly appreciated.
Thanks in advance,
try this
//use bootstrap css
//latest jquery
//add bootstrap.js
//and paste your html
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<style>
.box
{
border: 1px solid red;
height: 100%;
}
</style>
<script src="Scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<a class="brand">Title of website</a>
<li class="divider-vertical"></li>
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Link 1<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Link 2<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I've just tested the code and it should work. See this DEMO with your code
One minor update. The .brand element should be the child of navbar and not of ul, since that is invalid:
<div class="navbar">
<a class="brand">Title of website</a>
<div class="navbar-inner">
<ul class="nav">
<li class="divider-vertical"></li>
You don't event have to call $('.dropdown-toggle').dropdown(); - as you can see the demo above
I don't find any error in your code, seems like you are
missing or not being loaded bootstrap-dropdown.js file
moreover please add bootstrap.js core file (as added in jsfiddle in below link)
check this jsfiddle, http://jsfiddle.net/mastermindw/kbzxV/
Your code seems to run.
Check out this example: http://jsfiddle.net/vZQ7S/
You could try to check the developer console for any error messages there.
Maybe you are not linking the javascript libraries to the correct file path?
Also try to run
$('.dropdown-toggle').dropdown()
in the developer console and watch for error messages.
Hi I have a page for which I have four different style sheets like this
<link rel="Stylesheet" href="fancydropdown.css" title="style-1" type="text/css" />
<link rel="Alternate" href="fancydropdown_1.css" title="style-2" type="text/css" />
<link rel="Alternate" href="fancydropdown_2.css" title="style-3" type="text/css" />
<link rel="Alternate" href="fancydropdown_3.css" title="style-4" type="text/css" />
And this is my HTML
<div id="menu">
<ul class="tabs">
<li><h4>In the blog »</h4></li>
<li class="hasmore"><span>Styles</span>
<ul class="dropdown">
<li>style-1</li>
<li>style-2</li>
<li>style-3</li>
<li>style-4</li>
<li class="last">Menu item 6</li>
</ul>
</li>
<li class="hasmore"><span>Topics</span>
<ul class="dropdown">
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
<li class="last">Topic 4</li>
</ul>
</li>
<li><h4>Elsewhere »</h4></li>
<li><span>About</span></li>
<li class="hasmore"><span>Networks</span>
<ul class="dropdown">
<li>Twitter</li>
<li>posterous</li>
<li>SpeakerSite</li>
<li>LinkedIn</li>
<li class="last">See more…</li>
</ul>
</li>
<li><span>Bookmarks</span></li>
this my dropdown class
<ul class="dropdown">
<li>style-1</li>
<li>style-2</li>
<li>style-3</li>
<li>style-4</li>
<li class="last">Menu item 6</li>
</ul>
when I click on style-1 and so on the style sheets shoud be change .....How can I do this using jquery? Can any one help me?
And please provide me the library's to be used to?
You just change the HREF of your stylesheet.
... HEAD
<link rel="Stylesheet" href="style1.css" >
... BODY
<ul class="dropdown">
<li><a data-stylesheet="style1.css">style 1</a></li>
<li><a data-stylesheet="style2.css">style 2</a></li>
<li><a data-stylesheet="style3.css">style 3</a></li>
</ul>
... SCRIPT
$('.dropdown a').click(function(ev){
ev.preventDefault();
$('link').attr('href',$(this).data('stylesheet'));
});
Please try following which works fine. See demo here http://jsfiddle.net/fLzck/
<ul class="dropdown">
<li>style-1</li>
<li>style-2</li>
<li>style-3</li>
<li>style-4</li>
<li class="last">Menu item 6</li>
</ul>
$(".dropdown a").click(function() {
var thisRel = $(this).attr('rel');
//alert(thisRel);
$("link[rel='stylesheet']").attr('href', thisRel);
})