I am using server side includes for my navigation bar on my website. The bootstrap navigation bar works just fine in its own file: the dropdown opens and closes on mobile, but once I include it on the page I want it on ( ), the dropdown only will dropdown and won't go back up.
I'm not sure what I am doing wrong, or if anyone can figure out what is going wrong.
Here is the code to just the navigation bar that works correctly by itself.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="../_css/main.css" rel="stylesheet" type="text/css">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/index.asp">O<span>NE</span> HEALTH <small>Nebraska One Health Resource Portal</small></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse">
<li>Health Resources</li>
<li class="active">Around the Globe</li>
<form class="navbar-form navbar-right search" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Then I here is where I try and include the file, where the dropdowns no longer work....
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="../_css/main.css" rel="stylesheet" type="text/css">
<!-- NAVIGATION -->
<!--#include virtual="/navigation/navigation.asp" -->
<div class="index-main">
<div class="container">
<div class="col-md-10 col-md-offset-1">
<h1 style="text-align: center">One Health</h1>
<h4 style="text-align: center; line-height: 35px; font-weight: 300">One Health is a comprehensive approach to public health which recognizes that the health of the environment, animals (wild and domestic), and humans are interconnected. To have long-term success against diseases, we have to address all three areas because diseases in one group frequently spill over and affect the others. The Nebraska One Health Program is a grant-funded program to network, research, and educate producers, pest control operators, educators, public health officals, and other interested parties about addressing diseases in nature that affect humans and their animals.</h4>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
download the files and include them to your html page locally and check once.
Related
Upon making the screen a smaller size, my navigation toggle button is not showing the navigation menu when I click on it. I have racked my brains to solve this and think JavaScript is not active. Despite this, I still cant make it work properly.
JQuery is working and has been placed before JavaScript.
I've tried the web link to JS but this does not seem to work.
I've tried moving the JS files in my folder about and this again doesn't seem to work.
Code is below,
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.navbar-brand {font-size:180%;}
.myImage {width:100%;
height:600px;
background-size:cover;}
.background {background-color:black;}
</style>
</head>
<body>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand"></div>
<!--Nav toggle button on mobile-->
<button class="navbar-toggle"
data-toggle="collapse"
datatarget=".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">
<ul class="nav navbar-nav">
<li class="active">Home
<li class="">About
<li class="">Download
</ul>
<!--log in section-->
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="email"
placeholder="Email"
class="form-control">
</div>
<div class="form-group">
<input type="password"
placeholder="Password"
class="form-control">
</div>
<button type="button" class="btn btn-success">Log In</button>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Thanks for your help.
You've made a typo on data-target:
<button class="navbar-toggle"
data-toggle="collapse"
datatarget=".navbar-collapse">
Instead it should be:
<button class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">
I am using Bootstrap Version 3.3.5 from getbootstrap.com. I copied the navbar code from their website (https://getbootstrap.com/components/#navbar). I adjusted this code so that it looks how I want it to look. This is how it looks right now:
<?php
/**
* Created by PhpStorm.
* User: Olivier
* Date: 2/10/2016
* Time: 10:41 AM
*/
?>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="dropdown" 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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
I include JQuery and the bootstrap stylesheet in this piece of code:
<?php
/**
* Created by PhpStorm.
* User: Olivier
* Date: 2/10/2016
* Time: 10:30 AM
*/
?>
<html>
<head>
<title>EquiRent</title>
<!-- Latest compiled and minified JavaScript -->
<!-- <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>-->
<!--
**Including bootstrap
-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap-theme.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
The navbar looks just fine and everything works but as soon as I make the page small enough so that the hamburger menu will automatically show and I click it, nothing happens.
I want the navbar to work just like it works on https://getbootstrap.com/components/#navbar . So that when I make the window smaller, the hamburger menu atually does something when you click it.
Hi the following code should be.
data-toggle="collapse" instead of data-toggle="dropdown"
I'm having trouble loading an HTML file into a div using Jquery. From what I know, this should work, and the html file i'm loading has a simple tag in it saying "Hello World!" However, when I click the link that should trigger the event and load the HTML into the div, nothing happens, and "Hellow World!" doesn't display anywhere on the screen. Here's the code:
<html>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"> <script src="js/bootstrap.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<head>
</head>
<script src="js/funstuff.js"></script>
<body background="images/home_cooking.jpg" height="1000px">
<div class="navbar navbar-default navbar-fixed-top" role="Navigation" style="margin-bottom: 0">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Cookbook
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li> About us <li>
<li> Contact us</li>
</ul>
<form action="userlogin.html" class="navbar-form navbar-right" method="post">
<div class="form-group">
<input type="text" class="form-control col-lg-8" placeholder="Username" name="user">
<br> <input type="checkbox" name="check"> Remember me
</div>
<div class="form-group">
<input type="password" class="form-control col-lg-8" placeholder="Password" name="pass"> <br>
Forgot your password?
</div>
<button type="submit" class="btn btn-primary" style="margin-bottom: 20px">Login</button>
</form>
</div>
</div>
</div>
</div>
<div id="content">
</div>
<script>
$(document).ready( function() {
$("#load_home").on("click", function() {
$("#content").load("test.html");
});
});
</script>
</body>
</html>
I apologize if the indentation an everything is sloppy, i'm just trying to get something functional right now! Any help would be greatly appreciated!
EDIT: It's also worth noting that everything is based locally on my computer. test.html is located in the same folder as index.html.
You need to return false to cancel the default action of the anchor tag
$(document).ready( function() {
$("#load_home").on("click", function() {
$("#content").load("test.html");
return false;
});
});
You can also write the script in this way:
$(document).ready( function() {
$("a").on("click", function() {
var id=$(this).attr('id');
if(id=="load_home"){
$("#content").load('test.html');
}
});
});
My page, containing a bootstrap navbaar, shows a togglebutton for the menulinks when viewed in smal window. Hiiting this buttons shows the dropdown containing the menuitems but after pressing the togglebutton again it won't close...
Anyone know why?
<html>
<head>
<title>Loket BWL Rapportage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="bwl.css" type="text/css"/>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="imgLogo" src="Images/arnhemlogo.png" alt="arnhem" />
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>
testlink 1
</li>
<li>
testlink 2
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
<div class="container">
<table class="table table-bordered">
<tr>
<td class = "header">Onderwerp</td>
<td class = "header">Gegevens</td>
</tr>
<xsl:apply-templates/>
</table>
<!--<br/>
<div style="font-size:12px"><b>Meta-informatie</b></div>-->
</div>
</body>
<script language="JavaScript" src="https://code.jquery.com/jquery.js" />
<script language="JavaScript" src="../Scripts/bootstrap.js" />
</html>
Changing the .js references to:
<script src="https://code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js" />
did the trick.
I am probably missing something quite small and it's frustrating me as I have been sitting here for a few hours now trying to work this out. The Navbar will not link with the Javascript. The button appears when the window is resized correctly however will not collapse the menu when clicked.
Quick look at my Links in my Header (Just in case they are in the wrong order)
<link rel="stylesheet" href="/assets/css/bootstrap.css">
<link rel="stylesheet" href="/assets/css/bootstrap-responsive.css">
<link rel="stylesheet" href="/assets/css/style.css?v=2">
<script src="/assets/js/bootstrap.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<!-BootStrap--><script src="/assets/js/jquery-1.7.1.min.js"></script>
<script src="/assets/js/jquery.validate.min.js"></script>
<script src="/assets/js/script.js"></script>
<script src="/assets/js/bootstrap-fileupload.js"></script>
Quick look at my HTML -
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!--<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">-->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="span4">
<a href="{site_url}" title="People Team">
<img src="/assets/img/logo.png" alt="People Team Logo" />
</a>
</div>
<nav>
<div class="nav-collapse">
<ul class="nav">
<li{if segment_1 == ""} class="active"{/if}>
Home
</li>
<li{if segment_1 == "services"} {/if}>
Services
</li>
<li{if segment_1 == "about"} {/if}>
About the team
</li>
<li{if segment_1 == "contact"} {/if}>
Contact Us
</li>
</ul>
</div>
I assumed the Javascript is within the Bootstrap.min.js or Bootstrap.js files which are required for the navbar to work. I am just about stumped. Any help would be appreciated.
Cheers,
Change the order that your JS loads in. jQuery first, bootstrap plugins second.
<script src="/assets/js/jquery-1.7.1.min.js"></script>
<script src="/assets/js/bootstrap.js"></script> -- remove, as it is not really needed when including the minified version
<script src="/assets/js/bootstrap.min.js"></script>