Java Script and CSS not loaded - javascript

Java Script and CSS is not loading when we navigate from home page.
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<servlet-mapping>
<servlet-name>solutionpages</servlet-name>
<url-pattern>/solution/*</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>solutionpages</servlet-name>
<jsp-file>/solution.html</jsp-file>
</servlet>
</web-app>
index.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="This Site Provides Interview Puzzles">
<meta name="author" content="Satish Pahuja">
<title>Portfolio Dedicated for Interview Puzzles</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/1-col-portfolio.css" rel="stylesheet" type="text/css">
</head>
<body ng-app="puzzle">
<!-- Navigation -->
<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="#">PUZZLERAYSE</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">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading -->
<!-- /.row -->
<!-- Project One -->
<div ng-controller="PuzzleList">
<div ng-repeat="puzzle in puzzlesList">
<div class="row">
<div class="col-md-7">
<h4>
{{puzzle.heading}}
</h4>
</div>
<div class="col-md-5"></div>
</div>
<div class="row">
<div class="col-md-7">{{puzzle.question}}</div>
<div class="col-md-5">
<!-- <h3>Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laudantium veniam exercitationem expedita laborum at voluptate.
Labore, voluptates totam at aut nemo deserunt rem magni pariatur
quos perspiciatis atque eveniet unde.</p>
<a class="btn btn-primary" href="#">View Project <span
class="glyphicon glyphicon-chevron-right"></span></a> -->
</div>
</div>
<hr>
</div>
</div>
<!-- /.row -->
<!-- Pagination -->
<div class="row text-center">
<div class="col-lg-12">
<ul class="pagination">
<li>«</li>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>»</li>
</ul>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Puzzlerayse 2017</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>
<script src="js/angular.min.js"></script>
<script>
angular.module('puzzle', [])
.controller('PuzzleList', function($scope, $http) {
$http.get('http://localhost:8081/foodorderingrestapp/getallpuzzles/').
then(function(response) {
$scope.puzzlesList = response.data;
});
});
</script>
</body>
</html>
solution.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="This Site Provides Interview Puzzles">
<meta name="author" content="Satish Pahuja">
<title>Portfolio Dedicated for Interview Puzzles</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/1-col-portfolio.css" rel="stylesheet" type="text/css">
</head>
<body ng-app="puzzle">
<!-- Navigation -->
<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="#">PUZZLERAYSE_SOLUTION</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">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading -->
<!-- /.row -->
<!-- Project One -->
<div ng-controller="PuzzleList">
<div ng-repeat="puzzle in puzzlesList">
<div class="row">
<div class="col-md-7">
<h4>
{{puzzle.heading}}
</h4>
</div>
<div class="col-md-5"></div>
</div>
<div class="row">
<div class="col-md-7">{{puzzle.question}}</div>
<div class="col-md-5">
<!-- <h3>Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laudantium veniam exercitationem expedita laborum at voluptate.
Labore, voluptates totam at aut nemo deserunt rem magni pariatur
quos perspiciatis atque eveniet unde.</p>
<a class="btn btn-primary" href="#">View Project <span
class="glyphicon glyphicon-chevron-right"></span></a> -->
</div>
</div>
<hr>
</div>
</div>
<!-- /.row -->
<!-- Pagination -->
<div class="row text-center">
<div class="col-lg-12">
<ul class="pagination">
<li>«</li>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>»</li>
</ul>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Puzzlerayse 2017</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>
<script src="js/angular.min.js"></script>
<script>
angular.module('puzzle', [])
.controller('PuzzleList', function($scope, $http) {
$http.get('http://localhost:8081/foodorderingrestapp/getallpuzzles/').
then(function(response) {
$scope.puzzlesList = response.data;
});
});
</script>
</body>
</html>
I am using bootstrap with angular js but when I get landed to home page using below URL it is working fine.
http://localhost:8081/puzzleworld/
but when I am navigate from home page and using URL like below
http://localhost:8081/puzzleworld/solution/xyz
CSS and Java Script is not loading.Please help me.
Note:- No Java Servlet is defined only html files are present.
Using Chrome Debugger I am getting below error
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8081/puzzleworld/solution/css/bootstrap.css"


It is to do with the link paths, so it looks like, if one page is working and the other isnt...
Try changing this;
<link href="css/1-col-portfolio.css" rel="stylesheet" type="text/css">
To this;
<link href="/css/1-col-portfolio.css" rel="stylesheet" type="text/css">

Related

Check and do something if all bootstrap accordions are open

I have a bootstrap accordion and also a "open all" , "close all" button which works fine but what I am trying to do is when the accordions are all opened manually and not by the open all, close all button have the button change to "close all". is there a way to check if all the accordions are open so I can add the button functionality? I know you can use shown.bs.collapse and hidden.bs.collapse to see if an accordion is open but how would you check if ALL are open?
<!-- panel -->
<div class="panel accordion-toggle" href="#panelOne" data-toggle="collapse">
<div class="panel-heading">
<div class="l-col-panel">
<div class="panel-title__wrapper">
<div class="accordion__text">
<!--panel title -->
<h3 class="title-3">Title</h3>
</div>
</div>
<div class="accordion-toggle__angle-icon">
<!-- angle icon -->
<i class="accordion__angle fa fa-angle-down"></i>
</div>
</div>
<!-- /.l-col-panel -->
</div>
<div id="panelOne" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
</div>
</div>
</div>
</div>
<!--end: panel -->
<!-- panel -->
<div class="panel accordion-toggle" href="#panelOne" data-toggle="collapse">
<div class="panel-heading">
<div class="l-col-panel">
<div class="panel-title__wrapper">
<div class="accordion__text">
<!--panel title -->
<h3 class="title-3">Title</h3>
</div>
</div>
<div class="accordion-toggle__angle-icon">
<!-- angle icon -->
<i class="accordion__angle fa fa-angle-down"></i>
</div>
</div>
<!-- /.l-col-panel -->
</div>
<div id="panelTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
</div>
</div>
</div>
</div>
<!--end: panel -->
<!-- panel -->
<div class="panel accordion-toggle" href="#panelOne" data-toggle="collapse">
<div class="panel-heading">
<div class="l-col-panel">
<div class="panel-title__wrapper">
<div class="accordion__text">
<!--panel title -->
<h3 class="title-3">Title</h3>
</div>
</div>
<div class="accordion-toggle__angle-icon">
<!-- angle icon -->
<i class="accordion__angle fa fa-angle-down"></i>
</div>
</div>
<!-- /.l-col-panel -->
</div>
<div id="panelThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
</div>
</div>
</div>
</div>
<!--end: panel -->
jQuery:
$('.panel-collapse').on('shown.bs.collapse', function () {
console.log('OPEN')
});
$('.panel-collapse').on('hidden.bs.collapse', function () {
console.log('CLOSED')
});

$('#panelOne').on('shown.bs.collapse', function () {
let itemsList = document.getElementsByClassName('panel-collapse');
let isOpen = [];
for (let item of itemsList) {
if (item.classList.contains('in')) {
isOpen.push(true)
} else {
isOpen.push(false)
}
}
let allOpen = !isOpen.includes(false)
console.log(allOpen)
})
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- panel -->
<div class="panel accordion-toggle" href="#panelOne" data-toggle="collapse">
<div class="panel-heading">
<div class="l-col-panel">
<div class="panel-title__wrapper">
<div class="accordion__text">
<!--panel title -->
<h3 class="title-3">Title</h3>
</div>
</div>
<div class="accordion-toggle__angle-icon">
<!-- angle icon -->
<i class="accordion__angle fa fa-angle-down"></i>
</div>
</div>
<!-- /.l-col-panel -->
</div>
<div id="panelOne" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
</div>
</div>
</div>
</div>
<!--end: panel -->
<!-- panel -->
<div class="panel accordion-toggle" href="#panelTwo" data-toggle="collapse">
<div class="panel-heading">
<div class="l-col-panel">
<div class="panel-title__wrapper">
<div class="accordion__text">
<!--panel title -->
<h3 class="title-3">Title</h3>
</div>
</div>
<div class="accordion-toggle__angle-icon">
<!-- angle icon -->
<i class="accordion__angle fa fa-angle-down"></i>
</div>
</div>
<!-- /.l-col-panel -->
</div>
<div id="panelTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
</div>
</div>
</div>
</div>
<!--end: panel -->
<!-- panel -->
<div class="panel accordion-toggle" href="#panelThree" data-toggle="collapse">
<div class="panel-heading">
<div class="l-col-panel">
<div class="panel-title__wrapper">
<div class="accordion__text">
<!--panel title -->
<h3 class="title-3">Title</h3>
</div>
</div>
<div class="accordion-toggle__angle-icon">
<!-- angle icon -->
<i class="accordion__angle fa fa-angle-down"></i>
</div>
</div>
<!-- /.l-col-panel -->
</div>
<div id="panelThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
</div>
</div>
</div>
</div>
<!--end: panel -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
You can check if the class in is exist or not.

$(document).ready does not fire on removing a section

I was looking at this template html file (below). When I comment out the div from lines 168 to 195 the Nav bar stops becoming sticky. On spending more than an hour on this I see that when I comment that section the $(document).ready function does not trigger anymore. All net search just says that probably jquery was not included properly but the file seems to be getting called since when I start I can trigger the breakpoint at the beginning of the jquery file.
Any help to figure out why this would be happening would be really helpful. The whole file structure is at this location
The file is:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="description" content="Flatfy Free Flat and Responsive HTML5 Template ">
<meta name="author" content="">
<title>Flatfy – Free Flat and Responsive HTML5 Template</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Google Web Font -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
<!-- Custom CSS-->
<link href="css/general.css" rel="stylesheet">
<!-- Owl-Carousel -->
<link href="css/custom.css" rel="stylesheet">
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="css/magnific-popup.css">
<script src="js/modernizr-2.8.3.min.js"></script> <!-- Modernizr /-->
<!--[if IE 9]>
<script src="js/PIE_IE9.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/PIE_IE678.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body id="home">
<!-- Preloader -->
<div id="preloader">
<div id="status"></div>
</div>
<!-- FullScreen -->
<div class="intro-header">
<div class="col-xs-12 text-center abcen1">
<h1 class="h1_home wow fadeIn" data-wow-delay="0.4s">Flatfy</h1>
<h3 class="h3_home wow fadeIn" data-wow-delay="0.6s">Clean & minimal Theme</h3>
<ul class="list-inline intro-social-buttons">
<li><span class="network-name">Twitter</span>
</li>
<li id="download" ><span class="network-name">Free Download</span>
</li>
</ul>
</div>
<!-- /.container -->
<div class="col-xs-12 text-center abcen wow fadeIn">
<div class="button_down ">
<a class="imgcircle wow bounceInUp" data-wow-duration="1.5s" href="#whatis"> <img class="img_scroll" src="img/icon/circle.png" alt=""> </a>
</div>
</div>
</div>
<!-- NavBar-->
<nav class="navbar-default" role="navigation">
<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>
<a class="navbar-brand" href="#home">Flatfy</a>
</div>
<div class="collapse navbar-collapse navbar-right navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="menuItem">What is?</li>
<li class="menuItem">Use It</li>
<li class="menuItem">Screenshot</li>
<li class="menuItem">Credits</li>
<li class="menuItem">Contact</li>
</ul>
</div>
</div>
</nav>
<!-- What is -->
<div id="whatis" class="content-section-b" style="border-top: 0">
<div class="container">
<div class="col-md-6 col-md-offset-3 text-center wrap_title">
<h2>What is?</h2>
<p class="lead" style="margin-top:0">A special thanks to Death.</p>
</div>
<div class="row">
<div class="col-sm-4 wow fadeInDown text-center">
<img class="rotate" src="img/icon/tweet.svg" alt="Generic placeholder image">
<h3>Follow Me</h3>
<p class="lead">Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. </p>
<!-- <p><a class="btn btn-embossed btn-primary view" role="button">View Details</a></p> -->
</div><!-- /.col-lg-4 -->
<div class="col-sm-4 wow fadeInDown text-center">
<img class="rotate" src="img/icon/picture.svg" alt="Generic placeholder image">
<h3>Gallery</h3>
<p class="lead">Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. </p>
<!-- <p><a class="btn btn-embossed btn-primary view" role="button">View Details</a></p> -->
</div><!-- /.col-lg-4 -->
<div class="col-sm-4 wow fadeInDown text-center">
<img class="rotate" src="img/icon/retina.svg" alt="Generic placeholder image">
<h3>Retina</h3>
<p class="lead">Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. </p>
<!-- <p><a class="btn btn-embossed btn-primary view" role="button">View Details</a></p> -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<div class="row tworow">
<div class="col-sm-4 wow fadeInDown text-center">
<img class="rotate" src="img/icon/laptop.svg" alt="Generic placeholder image">
<h3>Responsive</h3>
<p class="lead">Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. </p>
<!-- <p><a class="btn btn-embossed btn-primary view" role="button">View Details</a></p> -->
</div><!-- /.col-lg-4 -->
<div class="col-sm-4 wow fadeInDown text-center">
<img class="rotate" src="img/icon/map.svg" alt="Generic placeholder image">
<h3>Google</h3>
<p class="lead">Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. </p>
<!-- <p><a class="btn btn-embossed btn-primary view" role="button">View Details</a></p> -->
</div><!-- /.col-lg-4 -->
<div class="col-sm-4 wow fadeInDown text-center">
<img class="rotate" src="img/icon/browser.svg" alt="Generic placeholder image">
<h3>Bootstrap</h3>
<p class="lead">Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. </p>
<!-- <p><a class="btn btn-embossed btn-primary view" role="button">View Details</a></p> -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</div>
</div>
<div class="content-section-c ">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center white">
<h2>Get Live Updates</h2>
<p class="lead" style="margin-top:0">A special thanks to Death.</p>
</div>
<div class="col-md-6 col-md-offset-3 text-center">
<div class="mockup-content">
<div class="morph-button wow pulse morph-button-inflow morph-button-inflow-1">
<button type="button "><span>Subscribe to our Newsletter</span></button>
<div class="morph-content">
<div>
<div class="content-style-form content-style-form-4 ">
<h2 class="morph-clone">Subscribe to our Newsletter</h2>
<form>
<p><label>Your Email Address</label><input type="text"/></p>
<p><button>Subscribe me</button></p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/script.js"></script>
<!-- StikyMenu -->
<script src="js/stickUp.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$(document).ready( function() {
$('.navbar-default').stickUp();
});
});
</script>
<!-- Smoothscroll -->
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
<script src="js/classie.js"></script>
<script src="js/uiMorphingButton_inflow.js"></script>
<!-- Magnific Popup core JS file -->
<script src="js/jquery.magnific-popup.js"></script>
</body>
</html>

I finally figured out what was going wrong. Because I removed all morphing elements from the file the uiMorphingButton_inflow.js was throwing this error and preventing other events from happening. Once I removed the reference to this file. It works fine!

Including jQuery or JavaScript in a Bootstrap framework

I'm trying to implement the following functionality:
jQuery: Find word and change every few seconds
i.e. eliciting a word to change every few seconds on my site.
I've tried to incorporate the code from the above example- but I've not been able to get it to work.
There must be something wrong with the way that I'm configuring jQuery or JavaScript, but I can't tell why or how.
This is the code I'm using:
<!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>Heroic Features - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="assets/css/heroic-features.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- begin: navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<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="index.html">Bootstrap Kickstart</a>
</div>
<!-- begin: navbar-collapse -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="">
Demo Elements
</li>
<li class="">
Sticky footer
</li>
</ul>
</div>
<!-- end: navbar-collapse -->
</div>
</div>
<!-- end: navbar -->
<!-- Page Content -->
<div class="container">
<!-- Jumbotron Header -->
<header class="jumbotron hero-spacer">
<h1>A Warm Welcome!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, ipsam, eligendi, in quo sunt possimus non incidunt odit vero aliquid similique quaerat nam nobis illo aspernatur vitae fugiat numquam repellat.</p>
<p><a class="btn btn-primary btn-large">Call to action!</a>
</p>
</header>
<hr>
<!-- Title
<div class="row">
<div class="col-lg-12">
<h3>Latest Features</h3>
</div>
</div>
/.row -->
<!-- Page Features -->
<div class="row text-center">
<div class="col-md-3 col-sm-6 hero-feature">
<div class="thumbnail">
<img src="http://placehold.it/800x500" alt="">
<div class="caption">
<h3>Training</h3>
<p>Inspired by years of experience, programmes for developers and for non-technical enthusiasts, customized to your requirements </p>
<p>
More Info
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 hero-feature">
<div class="thumbnail">
<img src="http://placehold.it/800x500" alt="">
<div class="caption">
<h3>Building</h3>
<p>Creating value, realizing highly scalable products and services along the full pipeline, from ideation to implementation</p>
<p>
More Info
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 hero-feature">
<div class="thumbnail">
<img src="http://placehold.it/800x500" alt="">
<div class="caption">
<h3>Researching</h3>
<p>The best way to predict the future is to invent it, our original research initiatives position us at the forefront of blockchain expertise</p>
<p>
More Info
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 hero-feature">
<div class="thumbnail">
<img src="http://placehold.it/800x500" alt="">
<div class="caption">
<h3>Advising</h3>
<p>Wedding our fundamental technological insights to your domain-specific knowledge, creating the future together</p>
<p>
More Info
</p>
</div>
</div>
</div>
</div>
<!-- /.row -->
<hr>
<div>
<span>This is so</span>
<span id="changerificwordspanid">awesome</span>
</div>
<hr>
<div>
<span>This is so</span>
<span id="rotate-word">awesome</span>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="../libs/jquery/dist/jquery.js">
$(function() {
var words = ['cool', 'fantastic', 'incredible', 'awesome'],
index = 0,
$el = $('#rotate-word')
setInterval(function() {
index++ < words.length - 1 || (index = 0);
$el.fadeOut(function() {
$el.text(words[index]).fadeIn();
});
}, 3000);
});
</script>
<!--
Bootstrap Core JavaScript
<script src="/assets/js/bootstrap.min.js">
</script>
-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
(function(){
var words = [
'awesome',
'incredible',
'cool',
'fantastic'
], i = 0;
setInterval(function(){
$('#changerificwordspanid').fadeOut(function(){
$(this).html(words[i=(i+1)%words.length]).fadeIn();
});
}, 2000);
})();
</script>
</body>
</html>
Can anyone spot where I've gone wrong?
Second attempt:
---
home: active
---
{{> navbar }}
{{!-- begin: content container --}}
<div class="container">
{{!-- begin: content --}}
<h1>Your partner in blockchain!</h1>
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://lorempixel.com/200/100/technics/1" alt="Training">
<div class="caption">
<h3>Training</h3>
<p>Inspired by years of experience, programmes for developers and for non-technical enthusiasts, customized to your requirements</p>
<p>More Info</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://lorempixel.com/200/100/technics/2" alt="Training">
<div class="caption">
<h3>Training</h3>
<p>Inspired by years of experience, programmes for developers and for non-technical enthusiasts, customized to your requirements</p>
<p>More Info</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://lorempixel.com/200/100/technics/3" alt="Training">
<div class="caption">
<h3>Training</h3>
<p>Inspired by years of experience, programmes for developers and for non-technical enthusiasts, customized to your requirements</p>
<p>More Info</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://lorempixel.com/200/100/technics/4" alt="Training">
<div class="caption">
<h3>Training</h3>
<p>Inspired by years of experience, programmes for developers and for non-technical enthusiasts, customized to your requirements</p>
<p>More Info</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span>This is so</span>
<span id="rotate-word">awesome</span>
</div>
<script src="libs/jquery/dist/jquery.js"></script>
<script>
<script>
$(function() {
var words = ['cool', 'fantastic', 'incredible', 'awesome'],
index = 0,
$el = $('#rotate-word')
setInterval(function() {
index++ < words.length - 1 || (index = 0);
$el.fadeOut(function() {
$el.text(words[index]).fadeIn();
});
}, 3000);
});
</script>
{{!-- end: content --}}
</div>
{{!-- end: content container --}}

anything inside a script block <script></script> where the script tag has a src attribute, is ignored
<script src="../libs/jquery/dist/jquery.js">
// this is ignored
$(function() {
var words = ['cool', 'fantastic', 'incredible', 'awesome'],
index = 0,
$el = $('#rotate-word')
setInterval(function() {
index++ < words.length - 1 || (index = 0);
$el.fadeOut(function() {
$el.text(words[index]).fadeIn();
});
}, 3000);
});
</script>
what you want is
<script src="../libs/jquery/dist/jquery.js"></script>
<script>
// this will run
$(function() {
var words = ['cool', 'fantastic', 'incredible', 'awesome'],
index = 0,
$el = $('#rotate-word')
setInterval(function() {
index++ < words.length - 1 || (index = 0);
$el.fadeOut(function() {
$el.text(words[index]).fadeIn();
});
}, 3000);
});
</script>

How to add the same header and footer to all pages at once? HTML

I'm trying to figure out how to upload the same header and footer from my index to all pages, without having to edit all of them after that if I change/add something to the header and footer.
I'm using CSS and JS to my HTML pages.
you can check the main page here.
If it helps, those are the following codes:
<html>
<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>Da Montanha | Esporte e Aventura em Curitiba</title>
<!--[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]-->
<link href="css/custom.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/color.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="css/owl.carousel.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/datepicker.css" rel="stylesheet" type="text/css">
<link href="css/iconmoon.css" rel="stylesheet" type="text/css">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,600" rel="stylesheet" type="text/css">
</head>
<body class="campers-theme">
<div id="wrapper">
<header id="header">
<section class="topbar-section">
<div class="container">
<div class="col-md-6">
<div class="top-social">
<ul>
<li><i class="fa fa-instagram" target="_blank"></i></li>
<li><i class="fa fa-youtube-square" target="_blank"></i></li>
<li><i class="fa fa-facebook-f" target="_blank"></i></li>
</ul>
<i class="fa fa-envelope-o"></i><span class="__cf_email__" data-cfemail="">contato#damontanha.com.br</span> <script data-cfhash="f9e31" type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script></a> </div>
</div>
<div class="col-md-6">
<div class="register-login">
<ul>
<li><i class="fa fa-key"></i>Login</li>
<li><i class="fa fa-unlock"></i>Registrar-se</li>
</ul>
</div>
</div>
</div>
</section>
<section class="logo-section">
<div class="container">
<div class="col-md-6"><strong class="logo"><img src="images/logo.png" alt="logo"></strong></div>
<div class="col-md-6">
<div class="book-section"> Orçamentos
<div class="number-box"> <i class="fa fa-whatsapp"></i>
<div class="number-text"> <span>Entre em Contato</span> <strong>41 99613 6600</strong> </div>
</div>
</div>
</div>
</div>
</section>
<div id="cp-slide-search" class="cp_side-search">
<form method="get">
<input type="text" placeholder="Digite o que procura..." required>
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<section class="main-navigation">
<nav class="navbar navbar-inverse">
<div class="container">
<div class="col-md-12">
<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>
</div>
<div class="nav-outer">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="nav">
<li class="active">Início
</li>
<li>Aventuras<i class="fa fa-caret-down"></i></li>
<li>Eventos</i></li>
<li>Loja</i></li>
<li>Páginas<i class="fa fa-caret-down"></i>
<ul>
<li>Blog</i></li></li>
<li>Orçamento</li>
<li>Nosso Time</li>
<li>Galeria de fotos</li>
<li>Depoimentos</li>
</ul>
</li>
<li>Sobre Nós</li>
<li>Contato</li>
</ul>
</div>
<div class="nav-right-col">
<div class="cart-box-outer">
<div class="dropdown">
<button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <i class="fa fa-shopping-cart"></i> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<div class="cart-box"> <strong class="title">Você tem 1 item(s) no seu carrinho.</strong>
<div class="cart-row">
<div class="thumb"><img alt="img" src="images/cart-img.jpg"></div>
<div class="text-box"> <a class="close" href="#"><i class="fa fa-close"></i></a> BestWedding Camping Equipment <strong class="amount">1 x R$59.00</strong> </div>
</div>
<strong class="subtotal">Subtotal: <span>R$59.00</span></strong>
<div class="btn-row"> <a class="btn-checkout" href="products-detail.html">Checkout</a> </div>
</div>
</li>
</ul>
</div>
</div>
<div class="top-search"> <i class="fa fa-search"></i> </div>
</div>
</div>
</div>
</div>
</nav>
</section>
</header>
<footer id="footer">
<section class="instagram">
<div class="container">
<h2>We’re on Instagram</h2>
</div>
<ul>
<li><img src="images/instagram/instagram-img-1.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-2.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-3.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-4.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-5.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-6.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-7.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-8.jpg" alt="img"></li>
</ul>
</section>
<section class="footer-section-1">
<div class="container">
<div class="row">
<div class="col-md-4"> <strong class="footer-logo"><img src="images/footer-logo.png" alt="logo"></strong>
<p>Lorem ipsum dolor sit amet, consectetur adipis elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullam laboris nisi ut aliquip ex ea commodo conseque Duis aute irure dolor in reprehenderit</p>
Read More </div>
<div class="col-md-4">
<h3>More Services</h3>
<div class="row">
<div class="col-md-6">
<div class="footer-box">
<ul>
<li>Free Parking</li>
<li>Free Wifi Area</li>
<li>Restaurant</li>
<li>Free Hot Shower</li>
<li>Swimming Pool</li>
<li>Shaded Pitches</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="footer-box">
<ul>
<li>Laundry</li>
<li>Hairdresser</li>
<li>Digs Area</li>
<li>Barbecue Station</li>
<li>Ping Pong Table</li>
<li>Coffee Bar</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="footer-box">
<h3>Contact us</h3>
<address>
<ul>
<li> <span><i class="fa fa-home"></i></span>
<div class="text-box">
<p>123 Lorem Ipsum Avenue,<br>
Campers Road, NY, U.S.A.</p>
</div>
</li>
<li> <span><i class="fa fa-phone"></i></span>
<div class="text-box">
<p>Call us for any Query</p>
<strong>44 01234 5678</strong> </div>
</li>
<li> <span><i class="fa fa-envelope-o"></i></span>
<div class="text-box">
<p>Send us email for any Information</p>
<span class="__cf_email__" data-cfemail="caa3a4aca58aa9aba7baafb8b9e4a9a5a7">[email protected]</span><script data-cfhash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script> </div>
</li>
<li> <span><i class="fa fa-clock-o"></i></span>
<div class="text-box">
<p>Office Timings</p>
<strong>09:00 - 19:00</strong> </div>
</li>
</ul>
</address>
</div>
</div>
</div>
</div>
</section>
<section class="footer-section-2">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="footer-socila">
<ul>
<li><i class="fa fa-twitter"></i>twitter</li>
<li><i class="fa fa-facebook-f"></i>facebook</li>
<li><i class="fa fa-google-plus"></i>google plus</li>
<li><i class="fa fa-linkedin-square"></i>linkedin</li>
</ul>
</div>
</div>
<div class="col-md-6"><strong class="copy">2016 © Campers, Powered by: Crunchpress</strong></div>
</div>
</div>
</section>
</footer>
</div>
<script src="js/jquery-1.12.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.noconflict.js"></script>
<script src="js/theme-scripts.js"></script>
<script src="js/zebra_datepicker.js"></script>
<script src="js/function.js"></script>
<script src="../../cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/custom.js"></script>
<script type="text/javascript">/* <![CDATA[ */(function(d,s,a,i,j,r,l,m,t){try{l=d.getElementsByTagName('a');t=d.createElement('textarea');for(i=0;l.length-i;i++){try{a=l[i].href;s=a.indexOf('/cdn-cgi/l/email-protection');m=a.length;if(a&&s>-1&&m>28){j=28+s;s='';if(j<m){r='0x'+a.substr(j,2)|0;for(j+=2;j<m&&a.charAt(j)!='X';j+=2)s+='%'+('0'+('0x'+a.substr(j,2)^r).toString(16)).slice(-2);j++;s=decodeURIComponent(s)+a.substr(j,m-j)}t.innerHTML=s.replace(/</g,'<').replace(/>/g,'>');l[i].href='mailto:'+t.value}}catch(e){}}}catch(e){}})(document);/* ]]> */</script></body>
<!-- Mirrored from html.crunchpress.com/campers/blog-details.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 24 Nov 2016 12:21:10 GMT -->
</html>

you can put them in php files, header.php and footer.php
and then just include them wherever you want
<?php include('header.php') ?>
html code
<?php include('footer.php') ?>

You can use routing feature in angularJS. you can check the example below. Here you can have multiple contents which you can dynamically bind it to your page. So you will have a fixed header and footer content.
<body ng-app="myApp">
<p>header</p>
content1
content2
content3
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "content1.htm"
})
.when("/content1", {
templateUrl : "content1.htm"
})
.when("/content2", {
templateUrl : "content2.htm"
})
.when("/content3", {
templateUrl : "content3.htm"
});
});
</script>
<p>footer</p>
</body>

To do it without a server-side language, You will have to use JavaScript to load in your templates. See the several ways you can do that from answers to this question.
Include another HTML file in a HTML file
Basically, you would have to use jQuery or something like it to make an AJAX request to pull in the HTML.

Creating a Bootstrap form - Cannot submit?

I have made a bootstrap form that I have taken the code from bootsnipp.com
I have made the code function and appear as it should, but for whatever reason I cannot make it actually submit the form!
I have tried recalling scripts and ensured they all work, I have even made a new page called test.php with nothing but that code and it works wonderfully well.
Can I have some insight? Removed < head >< html > and < body > tags due to it causing issues
<div class="logo">Teacher: Log in here</div>
I hope you can help
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery.js"></script>
<script src="js/jqBootstrapValidation.js"></script>
<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="">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="js/login.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>PsyRevise - A Better Way To Learn</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/freelancer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<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="#page-top">PsyRevise</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 class="hidden">
</li>
<li class="page-scroll">
Student Login
</li>
<li class="page-scroll">
Teacher Login
</li>
<li class="page-scroll">
Pricing
</li>
<li class="page-scroll">
About Us
</li>
<li class="page-scroll">
Contact Us
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-text">
<span class="name">PsyRevise - Teacher Login!</span>
<hr class="star-light">
<div class="text-center">
<div class="logo">Teacher: Log in here</div>
<div class="login-form-1">
<form id="login-form" class="text-left" action="teacher_login_submit.php" method="post">
<div class="login-form-main-message"></div>
<div class="main-login-form">
<div class="login-group">
<div class="form-group">
<label for="username" class="sr-only">Username</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Username...">
</div>
<div class="form-group">
<label for="password" class="sr-only">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password...">
</div>
</div>
<button type="submit" class="login-button"><i class="fa fa-chevron-right"></i></button>
</div>
</form>
</div>
</div>
</div>
</header>
<!-- Footer -->
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4">
<h3>Location</h3>
<p>Gravesend<br>United Kingdom</p>
</div>
<div class="footer-col col-md-4">
<h3>Around the Web</h3>
<ul class="list-inline">
<li>
<i class="fa fa-fw fa-facebook"></i>
</li>
<li>
<i class="fa fa-fw fa-google-plus"></i>
</li>
<li>
<i class="fa fa-fw fa-twitter"></i>
</li>
<li>
<i class="fa fa-fw fa-linkedin"></i>
</li>
<li>
<i class="fa fa-fw fa-dribbble"></i>
</li>
</ul>
</div>
<div class="footer-col col-md-4">
<h3>About PsyReviser</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo nisl sed libero blandit mattis. Phasellus et nisl ac dui bibendum efficitur. Suspendisse mattis tempus porta. Curabitur quis velit non sem vulputate vulputate quis nec risus. Nam enim purus, molestie id tellus sed, bibendum tincidunt nib</a>.</p>
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright © PsyRevise 2015
</div>
</div>
</div>
</div>
</footer>
<!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
<div class="scroll-top page-scroll visible-xs visible-sm">
<a class="btn btn-primary" href="#page-top">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/freelancer.js"></script>
</body>

Add value in the input type of button as below and try.
<button type="submit" class="login-button" value="submit"><i class="fa fa-chevron-right"></i></button>

Categories