I've done nearly everything I can think of, but I can't get my bootstrap elements (namely the nav collapse and the tabs) to work locally. They all work beautifully in fiddle, so I'm pretty confused.
the fiddle is here: http://jsfiddle.net/e4RZE/3/
and my code for bringing the js into my project is below the footer, like so:
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
my code for the header is as follows:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" 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>
</button> <a class="brand" href="http://howard.edu">Project</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home
</li>
<li class="active">Contact
</li>
<li>Now Playing
</li>
<li class="dropdown"> Public Resources <b class="caret"></b>
<ul class="dropdown-menu">
<li>Observatory
</li>
<li>Planetarium
</li>
<li class="divider"></li>
<li class="nav-header">For Teachers and Schools</li>
<li>Programs
</li>
<li>Host an Event
</li>
<li>Educational Initiatives
</li>
</ul>
</li>
<li class="dropdown"> Undergraduate Resources <b class="caret"></b>
<ul class="dropdown-menu">
<li>Observatory
</li>
<li>Planetarium
</li>
<li class="divider"></li>
<li class="nav-header">HU Physics</li>
<li>Physics Homepage
</li>
<li>Physics and Astronomy
</li>
</ul>
</li>
<li>Volunteer
</li>
<li>FAQ
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
EDIT: Bootstrap.css, bootstrap-responsive.css and my custom file (betterstrap2.css) are added like so:
<link href="css/bootstrap.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700 ' rel='stylesheet' type='text/css'>
<link href="css/betterstrap2.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
thanks in advance.
Make sure your jquery and bootstrap source files are located in the correct location to be loaded from those script tags.
Also, you should be loading the bootstrap.css file as well, if you want to actually see your bootstrapped elements looking pretty on the page :)
There are javascript errors or links to javascript files that are invalid. Hit F12 on the page and refresh to see what is failing.
Related
I have been trying for days.
What i want to do is use the options in the navigation menu that i have to trigger onload event in java script/jquery. However, the events just doesnt fire up. I have tried using onselect and onclick as well but with no avail.
The event should bring data into my template.
Maybe im making a mistake that i just cant see. or is there another better way to do this?
This is my Navigation bar. You can see the onselect functions that i was trying to use.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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" href="index.html">MEK Steel</a>
</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 navbar-right">
<li>
Home
</li>
<li class="dropdown" >
About <b class="caret"></b>
<ul class="dropdown-menu">
<li>
About Us
</li>
<li>
History
</li>
<li>
<a href="about.html#privacyPolicy" >Privacy Policy</a>
</li>
<li>
Terms and Conditions
</li>
<li>
Disclaimer
</li>
</ul>
</li>
<li class="dropdown" class="active">
Manufactured Products <b class="caret"></b>
<ul class="dropdown-menu">
<li onselect = "steelProducts()">
Steel Products
</li>
<li onselect = "steelDoors()">
Steel Doors
</li>
<li onselect="digitalSafes()">
Digital Safes
</li >
<li onselect="securityEq()">
Security Equipment
</li>
<li onselect="storageSol()">
Storage Solutions
</li>
<li onselect="steelFur()">
Steel Furniture
</li>
</ul>
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
This is my javascript. i have only written one for testing purposes
function showTemplate(template, data){
var html = template(data);
console.log(html);
$('#content').html(html);
}
function securityEq(){
source = $("#productsTemplate").html();
secEqTemp = Handlebars.compile(source);
showTemplate(secEqTemp, data);
}
$(document).ready(function () {
$('a').on('click', function (){
alert($(this).html());
});
});
You need to reference the anchor and not the list tag.
Fiddle
After you explained what you were trying to do
#Chax im trying for the onselect to work before the a tag does. like i want to load data and put it in my template and then show the page.
I came up with this code
$(document).ready(function(){
$('a').click(function(){ // Bind a click event to my <a> tag
var linkValue = $(this).attr('data-link'); // Retreive the value of data-link aka where we want to go
// Do something, your logic
window.location.href = linkValue; // Load the new page
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-link="http://www.google.com">I'm a link</a>
<!-- Notice that the tag below doesn't have a href attribute but does have a data-link attribute-->
What this code does is simple. We bind a click event onto every <a> tag in the DOM. When one of our tag is clicked, we execute the function. Note that you can differenciate button using a switch. Then we call the window object and make it call the call the page we want.
check this jsfiddle When i place the js code inside the html using <script> it works and events are fired
I have a group of tabs on the left of the navbar, and a button and dropdown on the far right. my paths seem to be correct and I followed the code as stated on getbootstrap docs. The problem is the dropdown menu does not open on click. nothing happens.
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<body>
<div id="MainWrap">
<div class="container">
<h1 href="#" c;ass="text-muted"></h1>
<div class="navbar navbar-default" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav nav-tabs">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Our Staff</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="</a></li>
<li class="dropdown">
Resources<b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.js"></script>
</body>
Console log errors I am getting:
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///C:/Users//Desktop/C%20Website/js/jquery-1.11.0.min
Uncaught Error: Bootstrap's JavaScript requires jQuery
<script src="js/jquery-1.11.0.min.js"></script>
Perhaps you should add ".js" to the src...
Just to add another suggestion... Try using CDN hosted versions of jQuery and Bootstrap. This will help path errors and also enhance the speed.
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Well, as the title said, my problem is that after add ajaxToolkit:SlideShowExtender to my Main.aspx, that page's Bootstrap dropdown menu stop working, and when i go to other page, drop down menu comeback to life itself. If i remove ajaxToolkit:SlideShowExtender from my Main.aspx, the Bootstrap dropdown menu begin to work again. So how can i put these 2 together?
I put my dropdown menu to my master page and all other pages is using that master page. Everything work fine unless i add ajaxToolkit:SlideShowExtender.
I also put these scripts on the head of the master page.
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
And these are the drop down menu code in the master page.
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Item</li>
<li class="dropdown">
Account<b class="caret"></b>
<ul class="dropdown-menu">
<li>Log in</li>
<li>Registration</li>
<li>Log out</li>
<li>Modify</li>
</ul>
</li>
<li class="dropdown">
Orders<b class="caret"></b>
<ul class="dropdown-menu">
<li>Cart</li>
<li>History</li>
</ul>
</li>
<li id="adminControl" runat="server" visible="false" class="dropdown">
Admins<b class="caret"></b>
<ul class="dropdown-menu">
<li>Item management</li>
<li>Order managerment</li>
<li>Article managerment</li>
</ul>
</li>
<li>Search</li>
<li>About</li>
<li>Contact</li>
</ul>
</div> <!--/.nav-collapse -->
</div> <!--/container -->
</div> <!--/navbar navbar-default navbar-fixed-top -->
Than you all for reading this question and for all your help.
I am using twitter-bootstrap-rails gem. I have following HTML:
<div id="scroll-nav">
<ul class="nav nav-pills">
<li class="active">
<a href="#somelink1">
<div>text1</div>
</a>
</li>
<li>
<a href="#somelink2">
<div>text2</div>
</a>
</li>
<li>
<a href="#somelink3">
<div>text3</div>
</a>
</li>
</ul>
</div>
I also have following javascript:
$('body').scrollspy({target: '#scroll-nav'});
Scrollspy does not work, I do not get any JS errors. Am I missing something?
the documentation says:
Navbar links must have resolvable id targets. For example, a home must correspond to something in the DOM like <div id="home"></div>.
I'm having an issue getting the collapsible navigation bar to load on a page - the button appears when you shrink the screen, but when I click on it, nothing happens. The console isn't throwing me any errors, so I'm assuming there must be something wrong with my css/javascript, but I don't really know what.
If it matters, I'm linking through with the Bootstrap CDN on my page - I don't know if that requires me to include the plugins manually or not (I don't think it would but I'm not sure).
The following is my HTML and Javascript link-ins:
<div class="navbar-header">
<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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Operation Pulse</li>
<li>Forum</li>
<li class="dropdown">
Media <b class="caret"></b>
<ul class="dropdown-menu">
<li>News & Updates</li>
<li>Indie Pulse</li>
<li>rec</li>
<li>Geeks and Giggles</li>
<li class="divider"></li>
<li>Podcasts</li>
</ul>
</li>
<li class="dropdown">
Info <b class="caret"></b>
<ul class="dropdown-menu">
<li>About Us</li>
<li>FAQ</li>
<li>Crew</li>
<li>Contact Us</li>
</ul>
</li>
</ul>
</div>
JS
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" type="text/javascript"></script>
Change the data-target= in the button to.. .navbar-collapse
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
Most of the time, boostrap.js file reference two times.
In our case, it was referenced twice, one in master and others by mistake in the inner pages (Page layout in SharePoint Case).