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>
Related
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!
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">
I've been trying to build my website and I'd really like to have some font awesome glyphs on my page that fade in when I scroll. The thing is that I do not really understand Spyscroll or how to use it.
Here is my code, perhaps anyone could help me out.
#section2{
position: absolute;
top: 105%;
}
html {
}
p{
color: white;
}
.servicetitle{
color: white;
}
.btn-light{
color:white;
}
#onzespecialiteiten {
text-align: center;
margin-top: -5%;
}
<!DOCTYPE html>
<html lang="en" style="height: 200%">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>Exodius Webdesign</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js.js"></script>
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: transparent; border: none;" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a style="color: #ffffff" class="navbar-brand" href="#myPage">Exodius Webdesign</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class=""><a style="color: #ffffff" href="#about">ABOUT</a></li>
<li class=""><a style="color: #ffffff" href="#services">SERVICES</a></li>
<li class=""><a style="color: #ffffff" href="#portfolio">PORTFOLIO</a></li>
<li class=""><a style="color: #ffffff" href="#pricing">PRICING</a></li>
<li class=""><a style="color: #ffffff" href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
</head>
<body id="myPage" data-spy="scroll" data-target="col-md-3 col-sm-6" data-offset="60" style="background-color: #293B4D; height: 200%">
<!-- Content van home -->
<h1 style="margin-top: 15%; margin-left: 55%; color: white; font-family: 'Titillium Web', sans-serif;" >Exodius Webdesign</h1>
<p style="margin-top: 1%; margin-left: 30%; text-align: center; color: white; font-family: 'Dosis', sans-serif;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<img src="images/logotransparant.png" alt="logo" height="560" width="960" style="margin-left: -5%; margin-top: -12%">
<!-- Dit is de button en de section waarnaar die naartoe scrollt -->
Lees meer
<div id="section2">
<section></section>
</div>
<!-- Dit is het blauwe vlak -->
<div class="jumbotron" style="margin-top: 5%; height: 790px; background-color: #3692D0">
<div style="margin: 10%; text-align: center" class="row">
<p id="onzespecialiteiten">Onze Specialiteiten</p>
<hr width="25%" style="margin-left: 38%; margin-top: 2%"><br><br><br><br>
<div class="col-md-3 col-sm-6" >
<div class="w3-container w3-center w3-animate-zoom" >
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-cloud fa-stack-1x text-primary"></i>
</span>
<h4 class="servicetitle">
<strong>Webdesign</strong>
</h4>
<p>Wij bouwen binnen één week een website met Wordpress of Bootstrap</p>
Lees Meer
</div>
</div>
<div class="col-md-3 col-sm-6" >
<div class="w3-container w3-center w3-animate-zoom" style="animation-delay: 0.1s;">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-compass fa-stack-1x text-primary"></i>
</span>
<h4 class="servicetitle">
<strong>Photoshop</strong>
</h4>
<p>Wij kunnen vrijwel met alle Photoshop opdrachten overweg</p>
Lees Meer
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="w3-container w3-center w3-animate-zoom" style="animation-delay: 0.12s;">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flask fa-stack-1x text-primary"></i>
</span>
<h4 class="servicetitle">
<strong>Webshops</strong>
</h4>
<p>Wij kunnen met Wordpress CMS complete Webshops bouwen</p>
Lees Meer
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="w3-container w3-center w3-animate-zoom" style="animation-delay: 0.13s;">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-shield fa-stack-1x text-primary"></i>
</span>
<h4 class="servicetitle">
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$("#buttonn").click(function() {
$('.transform').toggleClass('transform-active');
});
</script>
</body>
</html>
Check this one link and the next videos, you will get the idea
https://www.youtube.com/watch?v=K2qjgCRkmt8&index=47&list=PL6n9fhu94yhXd4xnk-j5FGhHjUv1LsF0V
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.
I tried to use a template HTML5 web site as view of my ASP.NET MVC 4 application. This template is here: http://html5up.net/helios/
Unfortunately I have some problem with this. I tried to put the main frame of these templates on my _layout page. Also I put other parts in index.chtml.
The problem is when I run the program, Visual Studio says there is an unhandled exception in skel.min.js which is:
this.insertBefore(b,a.me)
My _layout page is here:
<head>
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="#Url.Content("~/Scripts/js/jquery.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/jquery.dropotron.js")"type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/skel.min.js")"type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/skel-panels.min.js")"type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/init.js")"type="text/javascript"></script>
<noscript>
<link rel="stylesheet" href="#Url.Content("~/Content/skel-noscript.css")" type="text/css"/>
<link rel="stylesheet" href="#Url.Content("~/Content/style.css")" type="text/css"/>
<link rel="stylesheet" href="#Url.Content("~/Content/style-desktop.css")" type="text/css"/>
<link rel="stylesheet" href="#Url.Content("~/Content/style-noscript.css")" type="text/css"/>
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body class="homepage">
<!-- Header -->
<div id="header">
<!-- Inner -->
<div class="inner">
<header>
<h1>Helios</h1>
<hr />
<span class="byline">Another fine freebie by HTML5 UP</span>
</header>
<footer>
Start
</footer>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li>Home</li>
<li>
<span>Dropdown</span>
<ul>
<li>Lorem ipsum dolor</li>
<li>Magna phasellus</li>
<li>Etiam dolore nisl</li>
<li>
<span>And a submenu …</span>
<ul>
<li>Lorem ipsum dolor</li>
<li>Phasellus consequat</li>
<li>Magna phasellus</li>
<li>Etiam dolore nisl</li>
</ul>
</li>
<li>Veroeros feugiat</li>
</ul>
</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>No Sidebar</li>
</ul>
</nav>
</div>
<div>
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<!-- Footer -->
<div id="footer">
<div class="container">
<div class="row">
<!-- Tweets -->
<section class="4u">
<header>
<h2 class="icon icon-twitter circled"><span>Tweets</span></h2>
</header>
<ul class="divided">
<li>
<article class="tweet">
Amet nullam fringilla nibh nulla convallis tique ante sociis accumsan.
<span class="timestamp">5 minutes ago</span>
</article>
</li>
<li>
<article class="tweet">
Hendrerit rutrum quisque.
<span class="timestamp">30 minutes ago</span>
</article>
</li>
<li>
<article class="tweet">
Curabitur donec nulla massa laoreet nibh. Lorem praesent montes.
<span class="timestamp">3 hours ago</span>
</article>
</li>
<li>
<article class="tweet">
Lacus natoque cras rhoncus curae dignissim ultricies. Convallis orci aliquet.
<span class="timestamp">5 hours ago</span>
</article>
</li>
</ul>
</section>
<!-- Posts -->
<section class="4u">
<header>
<h2 class="icon icon-file circled"><span>Posts</span></h2>
</header>
<ul class="divided">
<li>
<article class="post stub">
<header>
<h3>Nisl fermentum integer</h3>
</header>
<span class="timestamp">3 hours ago</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3>Phasellus portitor lorem</h3>
</header>
<span class="timestamp">6 hours ago</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3>Magna tempus consequat</h3>
</header>
<span class="timestamp">Yesterday</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3>Feugiat lorem ipsum</h3>
</header>
<span class="timestamp">2 days ago</span>
</article>
</li>
</ul>
</section>
<!-- Photos -->
<section class="4u">
<header>
<h2 class="icon icon-camera circled"><span>Photos</span></h2>
</header>
<div class="row quarter no-collapse">
<div class="6u">
<img src="../../images/pic10.jpg" alt="" />
</div>
<div class="6u">
<img src="../../images/pic11.jpg" alt="" />
</div>
</div>
<div class="row quarter no-collapse">
<div class="6u">
<img src="../../images/pic12.jpg" alt="" />
</div>
<div class="6u">
<img src="../../images/pic13.jpg" alt="" />
</div>
</div>
<div class="row quarter no-collapse">
<div class="6u">
<img src="../../images/pic14.jpg" alt="" />
</div>
<div class="6u">
<img src="../../images/pic15.jpg" alt="" />
</div>
</div>
</section>
</div>
<hr />
<div class="row">
<div class="12u">
<!-- Contact -->
<section class="contact">
<header>
<h3>Nisl turpis nascetur interdum?</h3>
</header>
<p>Urna nisl non quis interdum mus ornare ridiculus egestas ridiculus lobortis vivamus tempor aliquet.</p>
<ul class="icons">
<li><span>Twitter</span></li>
<li><span>Facebook</span></li>
<li><span>Google+</span></li>
<li><span>Pinterest</span></li>
<li><span>Dribbble</span></li>
<li><span>Linkedin</span></li>
</ul>
</section>
<!-- Copyright -->
<div class="copyright">
<ul class="menu">
<li>© Untitled. All rights reserved.</li>
<li>Design: HTML5 UP</li>
<li>Demo images: Michael Domaradzki</li>
</ul>
</div>
</div>
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
And the files are in the link I put above.
I tried to contact the programmer of this template (which bases it on an engine, “skelJS”). There isn't any answer yet. How can I fix this problem?
Error details:
Exception was thrown at line 5288, column 6 in http://localhost:1572/Scripts/jquery-1.8.2.js
0x800a139e - JavaScript runtime error: SyntaxError
Exception was thrown at line 4, column 13743 in http://localhost:1572/Scripts/jquery.min.js
0x800a139e - JavaScript runtime error: SyntaxError
Exception was thrown at line 4, column 13957 in http://localhost:1572/Scripts/jquery.min.js
0x800a139e - JavaScript runtime error: SyntaxError
Unhandled exception at line 12, column 444 in http://localhost:1572/Scripts/skel.min.js
0x800a139e - JavaScript runtime error: NotFoundError
The program '[10048] iisexpress.exe: Managed (v4.0.30319)' has exited with code 0 (0x0).
The program '[10048] iisexpress.exe: Program Trace' has exited with code 0 (0x0).
You are testing in IE? :) And yes everybody has that mistake from jquery-1.10.2.min.js.
Put it on a blank page and it is still there. The fault was also there in "jquery-1.8.2"