So, I want to have the same default bootstrap navbar on every page on my website. If I change the name of one page (eg: Page 1), I want to have it changed across all my pages. From what I understand, I can just use jQuery to load the header separately. However, this doesn't seem to pull the "active" class for the page which is currently active. How would I have the "active" class only on the page which is currently active.
FYI, I'm using the AngularJS framework.
<!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-default">
<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> <!-- Change this ".active" class-->
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
EDIT: Also, the links to the other pages would change. For example, if I were on page1, the link to home would be "../", link to page2 would be "../page2", link to itself would be "".
I don't know AngularJS, but I use this javascript for my web site:
$('.navbar').find('a').each(function()
{
if (window.location.href.indexOf($(this).attr('href')) > -1)
{
$(this).parent().addClass('active');
}
});
Related
This question already has answers here:
jQuery is not defined and could not find why
(2 answers)
Closed 8 months ago.
I was just trying to test out this responsive nav bar, but it seems that the javascript is not connecting. I put the script tag at the bottom of the body as I've heard that it is the best place to put it, yet it fails to work.
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Omnii</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<section class="navigation">
<div class="nav-container">
<div class="brand">
Omnii
</div>
<nav>
<div class="nav-mobile"><a id="navbar-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Devs
</li>
<li>
Docs
</li>
<li>
Sign in
</li>
</ul>
</nav>
</div>
</section>
<section>
<center><h1>Reality, enhanced</h1></center>
</section>
<script src="index.js"></script>
</body>
</html>
index.js
(function ($) {
$(function () {
// open and close nav
$("#navbar-toggle").click(function () {
$("nav ul").slideToggle();
});
// Hamburger toggle
$("#navbar-toggle").on("click", function () {
this.classList.toggle("active");
});
});
})(jQuery);
What do I do?
I can see you are using the dollar($) sign which means jQuery needs to be included first before add the index.js file.
NB: The order should be jQuery first then follows by your custom index.js file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js"></script>
links on the page
Hi!
The above picture is the links on the page I want to build (T&C is the active link and has its own content below it), wherein whenever someone clicks on another link, for instance, FAQ, the text should move from right to left smoothly and occupy t&C current position and display its own content.
I was trying this via bootstrap tabs but no luck, is there any different approach to it?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tabs With Dropdown Menu</h3>
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu 1-1</li>
<li>Submenu 1-2</li>
<li>Submenu 1-3</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</body>
</html>
(I can't comment yet, so I put it in an answer)
Please add the HTML and CSS (and maybe JS) source code to get help.
I have been trying to use MateralizeCSS; only designed and created by Google; as an alternative for Bootstrap as a test and to see the differences by myself. However there is something that is weird with Materalize. The HTML Setup stated on their official website is simple, but when I try to resize the window and press the hamburger icon nothing happens. This means that the JavaScript is not loaded correctly, but it's actually included in my HTML file. First I tried to use the CDNs and it's not working. So I decided to download the files and link them in the file, but it's still not working.
My HTML:
<!DOCTYPE html>
<html lang="en-US" class="gr__materializecss_com">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Template</title>
<!-- Import Google Icon Font -->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="materialize/css/materialize.css">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"> -->
</head>
<body>
<nav role="navigation" class="light-green">
<div class="nav-wrapper container">
Brand
<ul class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
<ul class="side-nav" id="nav-mobile">
<li>Home</li>
<li>About</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<!-- Import jQuery before materialize.js -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script type="text/javascript" src="materialize/js/materialize.js"></script>
<!--<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
-->
</body>
</html>
I opened the Inspector to see the Starter Template structure for the navbar and it's the same as mine. I can't figure out the problem. So any logical explanation is appreciated.
You just need to initialize the jQuery plugin for the sideNav method to work. Hope this helps!
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Template</title>
<!-- Import Google Icon Font -->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
</head>
<body>
<nav role="navigation" class="light-green">
<div class="nav-wrapper container">
Brand
<ul class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
<ul class="side-nav" id="nav-mobile">
<li>Home</li>
<li>About</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<script>
$(".button-collapse").sideNav();
</script>
</body>
</html>
I want to have a dropdown menu on my site. I got it working fine when storing the files on my server. However, I'd like to load them from a CDN. What happens when I try this though is that the CSS aspects work fine, but the JavaScript aspects don't, which means that the following HTML:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>
Dropdown menu
<ul class="menu vertical">
<li>
First dropdown link
</li>
<li>
Second dropdown link
</li>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.js"></script>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>
just produces this:
Any ideas what's wrong with this code?
A quick check at https://github.com/zurb/foundation-sites/blob/v6.3/bower.json shows that Foundation 6 supports jquery version ~ 2.2.0 so changing your JQuery version should solve your issue
$(document).foundation();
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.js"></script>
<div class="top-bar">
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>
Dropdown menu
<ul class="menu vertical">
<li>
First dropdown link
</li>
<li>
Second dropdown link
</li>
</ul>
</li>
</ul>
</div>
</div>
Following on from this question, I am still struggling with the Twitter Bootstrap. I've managed to get my navigation bar to appear and I'm trying to add a drop down menu to it. No matter what I try, I can't actually get the drop down part of the menu to work! Here is a screenshot of my menu.
As you can see, I have "Account Settings" which should be a drop down menu but when I click on it, no drop down options appear. Below is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<a class="brand" href="#">Present Ideas</a>
<li class="active">Home</li>
<li>Blog</li>
<li>About</li>
<li>Help</li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Register</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
#RenderBody()
</div>
</body>
</html>
As you can see, I'm referencing the dropdown Javascript file from Twitter. I have also tried referencing this locally which made no difference. I've also included the Javascript that I believe should hook-up the drop down menu and call into Twitter's Javascript file.
I'm at a loss as to why this isn't working
I can't see where you are including jQuery in your code. You have to include it before all your other scripts for the dropdown to work.
Here is the jQuery script from the google CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Mind it is also redundant to use this code in your example:
<script type="text/javascript" language="javascript" >
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
Because it isn't doing anything.