I've looked through a bunch of tutorials, and I've read a bunch of answers to questions on here. I can't figure out what's going on. I am linking to bootstrap.css, bootstrap-responsive.css, bootstrap.js, jquery, and bootstrap-dropdown.js, in that order. When I click on each from the page source, it shows up correctly. When I click the dropdown, however, nothing happens. Here's the html code for that:
<!--begin bootstrap navbar-->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>Sign Up</li>
<li class="dropdown">
Login<b class="caret"></b>
<ul class="dropdown-menu">
<li>my page</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!--/end bootstrap navbar-->
If anyone has any ideas, let me know.
A very common issue is the order that you load the javascript files. You have to load jquery before bootstrap javascript file. CSS file order doesn't matter.
EDIT
It worked when I copy-pasted your code, and changed the href in this line from "/signup/index" to "#"...
<li class="dropdown">Login<b class="caret"></b>
See...
Bootstrap menus activate with a click (rather than hovering), and if the link actually leads somewhere it'll skip dropping the menu down and navigate instead.
You should only link EITHER bootstrap.js or bootstrap-dropdown.js. Apparently, it can create some conflicts, because this is the only thing I had to change. I have done this previously without issues, however.
I had a similar issue, where the navbar dropdown wouldn't react when I clicked on it. I was trying to adopt http://twitter.github.io/bootstrap/examples/starter-template.html to my design.
Ultimately the issue missing jquery.js.
Here's the piece of code looking for jquery.js.
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
After I copied in the missing jquery.js to proper folder, everything worked fine.
Bootstrap Nav-Bar Template with React:
Similar issues with the drop down on mobile view not clicking the drop down..Just missing lines I took from w3c.. ajax was missing.:
Reference____
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h
CODE BELOW GOES IN YOUR HTML HEADER
<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>
Related
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Tutorial</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
I have the above nav bar in my website, which includes couple pages.
The thing is, whenever I create new page, I manually have to enter all nav bar stuff over and over again.
So was wondering, if there are any sort of template I can wrap my nav, and use that template for other pages, so I just need to change the one template file, instead of changing whole stuff in each pages.
I found sth called template tag, but not sure how I'm suppose to use it.
You can do this using jQuery. Create separate page for NAV. Ex: header.html.
Then include your header nav in header.html page. Then create and 'id' in the page you want to get the menu. Here I am using a div that id called main-menu. Then using jQuery you can add your html menu to relevant page.
$("#main-menu").load("header.html");
Here is a code snippet. Use loading script always below the jQuery.
// Get nav to the page
$('#main-menu').load('header.html');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-menu"></div>
Quick and easy way would be to save that code as something like header.html and then inlcude it in all the other pages. Which can be done using jQuery or JavaScript, see this SO question for how.
I would like to create a tooltip containing an unodered list using bootstrap v2.3.2. I am currently using the following html as the content of the tooltip:
<p align='left'><b>This alert would have fired:</b></p>
<ul align='left'>
<li align='left'>1 time in the past week</li>
<li align='left'>8 times in the past two weeks</li>
<li align='left'>20 times in the past month</li>
</ul>
The current output looks like this:
I would like the 3 list items to be bulleted and have the natural indent of an unordered list but for some reason the tooltip does not behave like this. I am relatively new to html and css so please assume very little css and bootstrap knowledge in any explanations. I will create css classes for this once I have it working correctly so please be easy on my bad practices (if I have any) but do point them out.
Tooltips aren't really designed for displaying HTML code within them (unless you use a tooltip plug-in like Tooltipster (http://iamceege.github.io/tooltipster/). I would think of a more clever way to incoporate what you want displayed onto the page without using a tooltip. I put some code below which is easy to read, that shows the error of trying to use HTML within a tooltip.
<!doctype html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
<p align='left' data-toggle="tooltip" title = "'<br>'One'<br>'Two">This alert would have fired:</p>
</body>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Edit: Here's a good reference on Bootstrap's tooltips. Nothing wrong with saying you're "new" to web development by the way. We all have to start somewhere :-)
-> http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp
Sorry as this may be a very open ended question... I am wondering if it is at all possible to display different text when a link is clicked. For example on my personal website if I was to have an "About" or "Contact" link could I switch the text of the body without reloading the page.
In the body of my index.html file I have:
<div class="nav-bar">
<ul class="nav">
<li id="other"><a>About</a></li>
<li id="other"><a>Contact</a></li>
<li id="other"><a>Other</a></li>
</ul>
</div>
And in was wondering if I could using a:active or a:target in a separate CSS style sheet to perform the task as described above or if I need to use JS.
The idea of switching the text of the body without reloading the page is what is commonly known as “single page application”, a rather trendy thing with many benefits and some disadvantages or challenges. It is normally implemented using JavaScript, often using a library or framework, since that’s how we handle programming on web pages.
However, it is possible to achieve the very basic functionality of a single-page application using HTML and CSS only. This functionality means that the page has the content of an entire site and only a selected part of it is visible. You would use :target, which refers to the element that was the target of the most recent link that was followed. (The :active pseudo-class is something very different: it refers to a link or equivalent when it has been activated, typically by clicking on it, and before it has actually been followed – normally, a short time.)
Minimal example:
<!doctype html>
<meta charset=utf-8>
<style>
.section { display: none }
.section:target { display: block }
</style>
<div class="nav-bar">
<ul class="nav">
<li><a href=#About>About</a></li>
<li><a href=#Contact>Contact</a></li>
<li><a href=#Other>Other</a></li>
</ul>
</div>
<div id=About class=section>
About us
</div>
<div id=Contact class=section>
Contact us
</div>
<div id=Other class=section>
Other stuff
</div>
This does not work e.g. on IE 8 and older (which do not support :target), which is one of the reasons why this is a rather theoretical approach.
You are going to need to use Javascript to change things dynamically without page refresh ... This is crude, but will show you how to do what you are expecting ...
NOTE: You must include the <script src="http://code.jquery.com/jquery-1.9.1.js"></script> since I have used a bit of jQuery (A JavaScript library)
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="nav-bar">
<ul class="nav">
<li id="other1" onClick="changeText('other1');"><a>About</a></li>
<li id="other2" onClick="changeText('other2');"><a>Contact</a></li>
<li id="other3" onClick="changeText('other3');"><a>Other</a></li>
</ul>
</div>
<div id="page_content">
PAGE CONTENT!!
</div>
<script>
function changeText(text){
if (text === 'other1'){
$('#page_content').html('About Us!!');
}
if (text === 'other2'){
$('#page_content').html('Contact Us!!');
}
if (text === 'other3'){
$('#page_content').html('Other!!');
}
}
</script>
</body>
</html>
I know this is a common issue many have struggled with (I have listed similar questions below). I cannot get a dropdown menu to show its contents when clicked. I am attempting to use bootstrap.
<link href="css/bootstrap.css" rel="stylesheet">
...
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Courses <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Office Hours</li>
</ul>
</li>
...
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
There are plenty of similar questions on stackoverflow, but none of the marked answers works for me.
I have tried (in many combinations):
following the bootstrap components page: bootstrap components
ensuring js files are imported in correct order (jquery.js and then bootstrap.js)
removing duplicate (remove bootstrap-dropdown.js as I already had bootstrap.js)
updating versions
It is entirely possible (probable) that I'm missing something obvious, but I cannot for the life of me figure it out. Any help would be appreciated.
Links I've tried:
StackOverflow1, stackOverflow2, stackOverflow3, stackOverflow4, stackOverflow5, stackoverflow6
I was overlooking the obvious, I was missing the actual jquery file as Stano was kind enough to point out. Once I downloaded it, it worked fine.
i have a working tabs instance here and prepared a jsfiddle (somehow the tabs don't work correctly here, but the link issue is still present):
http://jsfiddle.net/Gyrga/6/
The links in the tab panes don't work anymore and don't go to the URL http://somewhere.com at all.. Why? What did I overlook?
Thanks!
When you use the tabs, you need to do the following (according to the doc)
Home
<!-- etc -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<!-- etc -->
</div>
But in your example, you put the data-toggle="tab" on the .tab-pane which breaks the links inside.
Just remove this attribute and put it on the link which actually toggles the tab. That way you won't even need the JavaScript to activate them.
Working demo (jsfiddle)