bootstrap 3 toggle button not working - javascript

Yes i know this question has been asked previously on Stackoverflow millions of time,i looked over them but still unable to find what's wrong.Any help would be appreciated,thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>front page</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="mainNavbar"> <!--Main menu starts-->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Career</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>


jQuery file should be loaded first in order to achieve that.
So it should be like this.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

Related

<button> not recognized in Bootstrap4

I'm trying to achieve a 'collapse icon' that's floated left followed by Copyright &copy using Bootstrap4.
I've seen other questions about this topic but none seem to actually answer the question. Other questions have different code with obvious typos, my code doesn't. Why is it that data-toggle & data-target aren't recognized when you do include all the dependencies?
.titleText{
font-size:230%;
color:green;
font-weight:heavy;
letter-spacing:1px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar-nav navbar-expand-sm navbar-fixed-top text-success">
<a class="navbar-brand titleText">Copyright &copy </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseNavBar">
<span class="navbar-toggler-icon"></span>
</button>
<div="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="link-nav" href="#">Map</a>
</li>
<li class="nav-item">
<a class="link-nav" href="#">Cart</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
The button isn't showing up, just the map & cart text. If you have a workaround I would appreciate a vanilla JS solution apposed to JQuery, since I'm not that experienced with JQuery and would rather use Javascript. Button

Fixed the typo and updated HTML to show collapsible navBar
.titleText{
font-size:230%;
color:green;
font-weight:heavy;
letter-spacing:1px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-fixed-top text-success">
<a class="navbar-brand titleText">Copyright &copy </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseNavBar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="link-nav" href="#">Map</a>
</li>
<li class="nav-item">
<a class="link-nav" href="#">Cart</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>

if you use class text-success in your code, so you cant see navigation bar background-color and default link color so i replace text-sucesss to navbar-light bg-light.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-fixed-top navbar-light bg-light">
<a class="navbar-brand titleText">Copyright &copy </a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapseNavBar" >
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cart</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>

I have made some typo corrections, the toggle functionality now works with this code. But additional modifications are needed to align the elements correctly.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> .
</script>
<!-- Popper JS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
> </script>
<!-- Latest compiled JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> .
</script>
<style>
.titleText{
font-size:230%;
color:green;
font-weight:heavy;
letter-spacing:1px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-fixed-top text-success">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#collapseNavBar">
<span class="navbar-toggler-icon">Menu</span>
</button>
<div class="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="link-nav" href="#">Map</a>
</li>
<li class="nav-item">
<a class="link-nav" href="#">Cart</a>
</li>
</ul>
</div>
<a class="navbar-brand titleText">Copyright &copy </a>
</nav>
</div>
</body>
</html>
I will construct the complete aligned html if need be. Hope this helps!

Menu content does not collapse on click - Bootstrap

I am pretty new to bootstrap. I am currently working on Navbar. want to make it responsive on collapse. it works perfectly fine when i am working locally. But i see that menu bar does not close contents on click. I tried to use the CSS link and script link from CDN. also made use of the folders. But i suspect somewhere script is not loading as expected.
here is my code
<html>
<!-- New: report inputs using textarea instead of single text line
-->
<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> NB Sep 2016</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="css/menubarStyle.css">
<link rel="stylesheet" href="css/NB_GUI2.css">
<link rel="stylesheet" href="css/awsModal.css">
<link rel="stylesheet" href="css/PAmodal.css">
<link rel="stylesheet" href="css/eventTable.css">
<link rel="stylesheet" href="css/reportModal.css">
<link rel="stylesheet" href="css/textModal2.css">
</head>
<body>
<!-- ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
<!--<nav class="navbar navbar-default "> -->
<nav class="navbar navbar-default navbar-fixed-top">
<!--<div class="container-fluid">-->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menuItems" aria-expanded="false">
<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="#">Brand</a>-->
</div>
<div class="navbar-collapse" id="menuItems">
<ul class="nav navbar-nav">
<!--<li><span class="glyphicon glyphicon-align-left" ></span></li>-->
<li> </li>
<li>XYZ</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a style="color:white"><span>Welcome,Dr.David Yang </span></a></li>
<li> <span class="glyphicon glyphicon-user" style="color:brown"></span></li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.flot.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/d3.min.js"></script>
<script src="js/fili.min.js"></script>
<!--<script src="js/bootstrap.js"></script>-->
<script src="js/MyJS34-webviewer1-test7.js" type="text/javascript"></script>
<script src="js/teechart.js" type="text/javascript"></script>
<script src="js/teechart-extras.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/downloadify.min.js"></script>
<script type="text/javascript" src="js/jspdf.debug.js"></script>
<script type="text/javascript" src="js/basic.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/aws-sdk.js"></script>
<!-- <script src="js/PreAnnotationModal6.js" type="text/javascript"></script> -->
<script src="js/PreAnnotationModal7-webviewer1-test4.js" type="text/javascript"></script>
<script src="js/AWSmodal3-webviewer1-test1.js" type="text/javascript"></script>
<script src="js/bootstrap.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

I just modified your code it's working fine now
<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.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>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default row">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Welcome</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-left-sm">
<li> </li>
<li>XYZ</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a style="color:#000"><span>Welcome,Dr.David Yang </span></a></li>
<li> <span class="glyphicon glyphicon-user" style="color:brown"></span></li>
</ul>
<hr class="visible-xs visible-sm row"/>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
</body>
</html>

Here in this line <div class="navbar-collapse" id="menuItems"> add collapse class because the data-toggle = "collapse" is written on the button which is supposed to close.

drop down menu bootsrap 3 wont work

I want to create a navbar with a drop down menu for mobile phones.
I've did this for some other websites and it always worked fine.
Now all of a sudden it stopped working and I wonder why..
This is the code:
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Marco Koopman
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>About me</li>
<li>My school</li>
<li>My skills</li>
<li>More info</li>
</ul>
</div>
</div>
</nav>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"/>
</body>

jQuery must come first in order and proper close script tags as your 2nd script tag is not properly closed.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Marco Koopman
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>About me</li>
<li>My school</li>
<li>My skills</li>
<li>More info</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>

Bootstrap navbar doesn't collapse when visit from mobile device, works fine when I shrink desktop browser

I have an index.html and require bootstrap.css and bootstrap.js.When I shrink desktop browser on my desktop, the navbar collapses properly. When I visit the site on my mobile device,everything is responsive EXCEPT the navbar,it doesn't collapse
here is my code
in head
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Sylhet International University</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/loaders.min.css" />
<link rel="stylesheet" href="css/jquery.bxslider.css" />
<link rel="stylesheet" href="css/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/jquery.akordeon.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
in body
<!--Navigation Starts-->
<div class="navigation">
<nav class="navbar navbar-default navigation_bar scroll_border navbar-fixed-top">
<div class="container ">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
<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" id="main-nav">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>NEWS</li>
<li>BLOG</li>
<li>ADMISSION</li>
<li>COURSES</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
</div>
<!--Navigation Ends-->
in footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/bootstrap.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

You need to have bootstrap.min.js in your scripts:
<script src="path/to/bootstrap.min.js"></script>

Well, You inserted required files(jquery.min.js, bootstrap.css, bootstrap.js).
I test your body code in bootstrap template. That's right. It works in Desktop and Mobile devices correctly.
I think some other files Caused this problem. First Remove other .CSS and .JS files to check it, and then You can find problem better.

You forgot to insert : bootstrap.min.js
<script src="js/bootstrap.min.js"></script>
Also double String around js/bootstrap.min.js""

Why isn't FullCalendar showing here?

I'm attempting to get a simple, empty calendar to show up on a page. I have followed the documentation at http://arshaw.com/fullcalendar/docs/usage/ and the below code seems ok so should be showing a calendar.
Am I doing something wrong here?
Updated code
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Calendar</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="navbar.css">
<link rel="stylesheet" href="js/fullcalendar-2.0.2/fullcalendar.css">
<link rel="stylesheet" href="js/fullcalendar-2.0.2/fullcalendar.print.css">
<script src="js/fullcalendar-2.0.2/lib/jquery.min.js"></script>
<script src="js/fullcalendar-2.0.2/lib/moment.min.js"></script>
<script src="js/fullcalendar-2.0.2/fullcalendar.min.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script type='text/javascript'>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
</script>
</head>
<body>
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<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>
<a class="navbar-brand" href="#">Calendar</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Bookings <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Add</li>
<li>Delete</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Admin</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div>
<!-- Main component to show the calendar-->
<div id="calendar"></div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Screenshot
http://i.stack.imgur.com/WMUzA.png

You are calling the fullCalendar() plugin on the element with id #calendar, while you have created a DOM element with the class .calendar.
So either change this line:
$('#calendar').fullCalendar();
to
$('.calendar').fullCalendar()
OR change this line:
<div class="calendar"></div>
to
<div id="calendar"></div>

Categories

Resources