jinja2.exceptions.TemplateSyntaxError: expected token ',', got 'static' - javascript

Im writing a project with flask (for python) and when I run from the pycharm the project (which included html files), it gives me the following error:
the error is about line 192 in home.html...
jinja2.exceptions.TemplateSyntaxError: expected token ',', got 'static'
And... this is the html file, that makes problems :-(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Stylish Portfolio - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="{{ url_for('static', filename='vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
<!-- Custom Fonts -->
<link href="{{ url_for('static', filename='vendor/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link href="{{ url_for('static', filename='vendor/simple-line-icons/css/simple-line-icons.css') }}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{ url_for('static', filename='css/stylish-portfolio.min.css') }}" rel="stylesheet">
</head>
<body id="page-top">
<!-- Navigation -->
<a class="menu-toggle rounded" href="#">
<i class="fa fa-bars"></i>
</a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a class="js-scroll-trigger" href="#page-top">Start Bootstrap</a>
</li>
<li class="sidebar-nav-item">
<a class="js-scroll-trigger" href="#page-top">Home</a>
</li>
<li class="sidebar-nav-item">
<a class="js-scroll-trigger" href="#about">About</a>
</li>
<li class="sidebar-nav-item">
<a class="js-scroll-trigger" href="#services">Services</a>
</li>
<li class="sidebar-nav-item">
<a class="js-scroll-trigger" href="#portfolio">Portfolio</a>
</li>
<li class="sidebar-nav-item">
<a class="js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</nav>
<!-- Header -->
<header class="masthead d-flex">
<div class="container text-center my-auto">
<h1 class="mb-1">Timely</h1>
<h3 class="mb-5">
<em>A Free Time Management App</em>
</h3>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a>
</div>
<div class="overlay"></div>
</header>
<!-- About -->
<section class="content-section bg-light" id="about">
<div class="container text-center">
<div class="row">
<div class="col-lg-10 mx-auto">
<h2>Stylish Portfolio is the perfect theme for your next project!</h2>
<p class="lead mb-5">This theme features a flexible, UX friendly sidebar menu and stock photos from our friends at
Unsplash!</p>
<a class="btn btn-dark btn-xl js-scroll-trigger" href="#services">What We Offer</a>
</div>
</div>
</div>
</section>
<!-- Services -->
<section class="content-section bg-primary text-white text-center" id="services">
<div class="container">
<div class="content-section-heading">
<h3 class="text-secondary mb-0">Services</h3>
<h2 class="mb-5">What We Offer</h2>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 mb-5 mb-lg-0">
<span class="service-icon rounded-circle mx-auto mb-3">
<i class="icon-screen-smartphone"></i>
</span>
<h4>
<strong>Responsive</strong>
</h4>
<p class="text-faded mb-0">Looks great on any screen size!</p>
</div>
<div class="col-lg-3 col-md-6 mb-5 mb-lg-0">
<span class="service-icon rounded-circle mx-auto mb-3">
<i class="icon-pencil"></i>
</span>
<h4>
<strong>Redesigned</strong>
</h4>
<p class="text-faded mb-0">Freshly redesigned for Bootstrap 4.</p>
</div>
<div class="col-lg-3 col-md-6 mb-5 mb-md-0">
<span class="service-icon rounded-circle mx-auto mb-3">
<i class="icon-like"></i>
</span>
<h4>
<strong>Favorited</strong>
</h4>
<p class="text-faded mb-0">Millions of users
<i class="fa fa-heart"></i>
Start Bootstrap!</p>
</div>
<div class="col-lg-3 col-md-6">
<span class="service-icon rounded-circle mx-auto mb-3">
<i class="icon-mustache"></i>
</span>
<h4>
<strong>Question</strong>
</h4>
<p class="text-faded mb-0">I mustache you a question...</p>
</div>
</div>
</div>
</section>
<!-- Callout -->
<section class="callout">
<div class="container text-center">
<h2 class="mx-auto mb-5">Welcome to
<em>your</em>
next website!</h2>
<a class="btn btn-primary btn-xl" href="https://startbootstrap.com/template-overviews/stylish-portfolio/">Download Now!</a>
</div>
</section>
<!-- Call to Action -->
<section class="content-section bg-primary text-white">
<div class="container text-center">
<h2 class="mb-4">The buttons below are impossible to resist...</h2>
Click Me!
Look at Me!
</div>
</section>
<!-- Map -->
<section id="contact" c0lass="map">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe>
<br/>
<small>
</small>
</section>
0
<!-- Footer -->
<footer class="footer text-center">
<div class="container">
<ul class="list-inline mb-5">
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="#">
<i class="icon-social-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="#">
<i class="icon-social-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-link rounded-circle text-white" href="#">
<i class="icon-social-github"></i>
</a>
</li>
</ul>
<p class="text-muted small mb-0">Copyright © Taeer Mayzels</p>
</div>
</footer>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded js-scroll-trigger" href="#page-top">
<i class="fa fa-angle-up"></i>
</a>
<!-- Bootstrap core JavaScript -->
<script src="{{ url_for('static', filename='vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="{{ url_for('static', filename='vendor/jquery-easing/jquery.easing.min.js') }}"></script>
<!-- Custom scripts for this template -->
<script src="{{ url_for('static', filename='js/stylish-portfolio.min.js') }}"></script>
</body>
</html>
Also, the files in the project ordered so:
I couldn't understand what the problem is, so I hope that one of the genius here can expose my error.


Near the end of your code,
<script src="{{ url_for('static', filename='vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
should be
<script src="{{ url_for('static', filename='vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
You missed a ', a ), and a }}


Go through the call stack and look when the stack changes from a call to jinja2 vs a call to one of your HTML pages, eg:
File "C:\Program Files (x86)\Python37-32\lib\site-packages\jinja2\_compat.py", line 37, in reraise
raise value.with_traceback(tb)
File "c:\DEV\a-flask\base\templates\base.html", line 55, in template
<script src="{{url_for('static', filename='js/jquery-ui.min.js"></script>
File "C:\Program Files (x86)\Python37-32\lib\site-packages\jinja2\environment.py", line 1005, in render
return concat(self.root_render_func(self.new_context(vars)))
I went to line 55 in base.html:
<script src="{{ url_for('static', filename='js/jquery-ui.min.js }}"></script>
The fix was to include the last quote and missing bracket:
<script src="{{ url_for('static', filename='js/jquery-ui.min.js') }}"></script>


The only problem is in syntax of 'url_for' function.
Check for the ' ' marks and filenames.
<script src="{{ url_for('static', filename='vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
change the above code to this-
<script src="{{ url_for('static', filename='vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>


Change " " to ' '.
This one doesn't work:
{{ post["title"] }}
This one should work:
{{ post['title'] }}

Related

Bootstrap brand image overlapping container below the nav bar

I am trying to include a 400 x 100 png logo as a Navbar Brand image in Bootstrap 5. However, The logo appears to be a bit too big and even if I reduce the size of the logo, it still overlaps the black container and text input box underneath the Navbar in desktop view. In mobile devices, the logo and associated navbar overlaps even more. Also, the toggle button on the right is not aligned horizontally with the brand image on the left. I would like them to be on the same line. Attaching some screenshots for clarity. Can someone please help?
Desktop View
Mobile View
I would also want the brand image to be more aligned to the left in the mobile view. I am atatching the HTML code for review.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Localhost Site - Classroom Attendance</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Testing HTML 5 and Bootstrap 5">
<meta name="keywords" content="html5,bootstrap5">
<meta name="author" content="classroom">
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<!-- Navbar Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="media/fadmeter-logo.png" alt="Classroom Logo" width="250" height="62.5">
</a>
</div>
<!-- Toggler/Collapsible Button -->
<div class="container-fluid">
<button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav ms-2 align-items-end">
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
<li>
<a class="nav-link" href="#">Login</a>
</li>
<li>
<form action="#">
<input type="submit" class="btn btn-primary" value="Register">
</form>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br>
<!-- Code Input Area -->
<div class="container rounded mt-5 pt-3 pb-1 bg-dark text-white" style="width:400px">
<form action="#">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" placeholder="Enter Code">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Go</button>
</div>
</div>
</form>
</div>
<br>
<!-- Headline and Description -->
<div class="container">
<h3>My Headline Text</h3>
<p><span style="color:blue">Localhost</span> is a test page for HTML 5 and Bootstrap 5.</p>
</div>
<!-- Headline and Description -->
<div class="row mx-5">
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/1.png" style="width: 96px" alt="1">
<div class="card-body">
<h5 class="card-title">Class 1</h5>
<p class="card-text">All students in class room 1.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/2.png" style="width: 96px" alt="2">
<div class="card-body">
<h5 class="card-title">Class 2</h5>
<p class="card-text">All students in class room 2.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/3.png" style="width: 96px" alt="3">
<div class="card-body">
<h5 class="card-title">Class 3</h5>
<p class="card-text">All students in class room 3.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/4.png" style="width: 96px" alt="4">
<div class="card-body">
<h5 class="card-title">Class 4</h5>
<p class="card-text">All students in class room 4.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

Remove the width height from image tag and use "img-fluid" class in image tag.
Or in mobile view you can use position absolute

Thanks for the suggestion provided by #Minhaj. I tweaked my code and it works fine now. I incorrectly placed the brand image in a separate div outside the navbar div. This is my new code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Localhost Site - Classroom Attendance</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Testing HTML 5 and Bootstrap 5">
<meta name="keywords" content="html5,bootstrap5">
<meta name="author" content="classroom">
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<!-- Navbar Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="media/fadmeter-logo.png" alt="Fadmeter Logo" width="200" height="50" style="position:absolute; top:0; left:0">
</a>
<!-- Toggler/Collapsible Button -->
<button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav ms-2 align-items-end">
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
<li>
<a class="nav-link" href="#">Login</a>
</li>
<li>
<form action="#">
<input type="submit" class="btn btn-primary" value="Register">
</form>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br>
<!-- Code Input Area -->
<div class="container rounded mt-5 pt-3 pb-1 bg-dark text-white" style="width:400px">
<form action="#">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" placeholder="Enter Code">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Go</button>
</div>
</div>
</form>
</div>
<br>
<!-- Headline and Description -->
<div class="container">
<h3>My Headline Text</h3>
<p><span style="color:blue">Localhost</span> is a test page for HTML 5 and Bootstrap 5.</p>
</div>
<!-- Headline and Description -->
<div class="row mx-5">
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/1.png" style="width: 96px" alt="1">
<div class="card-body">
<h5 class="card-title">Class 1</h5>
<p class="card-text">All students in class room 1.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/2.png" style="width: 96px" alt="2">
<div class="card-body">
<h5 class="card-title">Class 2</h5>
<p class="card-text">All students in class room 2.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/3.png" style="width: 96px" alt="3">
<div class="card-body">
<h5 class="card-title">Class 3</h5>
<p class="card-text">All students in class room 3.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/4.png" style="width: 96px" alt="4">
<div class="card-body">
<h5 class="card-title">Class 4</h5>
<p class="card-text">All students in class room 4.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

Dynamic Bootstrap list with collapse is not working properly

I have created dynamic list using bootstrap and thymeleaf, list also contains collapse functionality which is not working properly, aria-expanded = "false" is not working, I browsed a lot but not any solution for dynamically created list using thymeleaf.
When the page loads all collapsible panel should be closed for that I used aria-expanded="false", but it is not working.
As the list comes into from it takes few clicks to achieve collapse.
Below there is the code and image.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="/resources/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="/resources/css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="/resources/css/style.css" rel="stylesheet">
<link href="/resources/css/jquery.qtip.min.css" rel="stylesheet"/>
<link href="/resources/css/icheck.css" rel="stylesheet" />
<link href="/resources/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="/resources/css/sweet-alert.css" rel="stylesheet" />
<link href="/resources/css/custom-accordin.css" rel="stylesheet" />
</head>
<body>
<div class="container" th:fragment="content">
<header>
<!--Main Navigation-->
<nav class="navbar fixed-top scrolling-navbar navbar-expand-lg navbar-dark blue-grey darken-2">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="nav-link" href="EmployerDashboard.html"><i class="fa fa-chevron-left fa-2x"></i></a> </li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="navbar-brand" href="#">Submission status</a> </li>
</ul>
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item"><i class="fa fa-bars fa-2x"></i></li>
</ul>
</nav>
</header>
<!--Main Navigation-->
<div class="container-fluid">
<!--Grid row-->
<div class="row">
<div class="col-12">
<div class="mx-auto">
<div class="alert blue-grey lighten-4" role="alert" style="border-top: 2px solid #000;">
<div class="row">
<div class="col text-center">
<p class="h6"><strong th:text="${efiledHdrBean.payPeriod}"></strong><br/>
<small>Submission Period</small></p>
</div>
<div class="col text-center">
<p class="h6"><strong th:text="${#codeMapUtil.getCodeValue(efiledHdrBean.payFreq, 'PAY_FREQ_DESC').concat('ly')}"></strong><br/>
<small>Pay Frequency</small></p>
</div>
<div class="col text-center">
<p class="h6"><strong th:text="${efiledHdrBean.ppType}"></strong><br/>
<small>Pension Prov.</small></p>
</div>
</div>
</div>
<div class="alert alert-success alert-dismissible" role="alert">
<p class="text-center"><i class="fa fa-check fa-2x text-success"></i> Your Contribution data is accepted by NEST<br />
Amount Due to Pension provider: <strong>£ 40.72</strong></p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<ul class="list-group" >
<div class="accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- <li class="list-group-item" th:each="listBean,iterator: ${contributionStatus}"> -->
<li class="list-group-item">
<div class="card" th:each="listBean,iterator: ${contributionStatus}" >
<div class="card-header" role="tab" th:id="'heading' + ${iterator.index}"> <a class="collapsed black-text" data-toggle="collapse" th:href="'#collapse' + ${iterator.index}" aria-expanded="false" th:attr = "aria-controls='collapse' + ${iterator.index}"> <i class="fa fa-angle-down rotate-icon float-right"></i>
<div class="row">
<div class="col-7"> <span class="icon-round pull-left">
<p class="icon"><span th:text=" ${#strings.substring(listBean.eeSurname,0,1) + #strings.substring(listBean.eeFname,0,1)}"></span></p>
</span>
<p class="h5 list-group-item-heading"><strong><span th:text="${listBean.eeSurname}"></span> , <span th:text="${listBean.eeFname}"></span></strong></p>
<p class="list-group-item-text mb-2"><span th:text="${listBean.eeWksNo}"></span> <span class="badge grey lighten-2 black-text" th:text="${listBean.assessStatus}"></span></p>
</div>
<div class="col-4 pr-0">
<p class="h5 list-group-item-heading text-right"><span class="float-left">£</span><span th:text="${listBean.eePenEarnings}"></span></p>
</div>
</div>
</a> </div>
<div th:id="'collapse' + ${iterator.index}" class="collapse show" role="tabpanel" data-parent="#accordionEx" th:attr="aria-labelledby='heading' + ${iterator.index}">
<div class="card-body black-text">
<p class="h6">Pensionable Earnings: £ <span th:text="${listBean.eePenEarnings}"></span></p>
<ul class="list-group" >
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Employer</p>
</div>
<div class="col-4 p-0">
<p class="list-group-item-heading mb-0">Rate(%): <span th:text="${listBean.erContribRate}"></span></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.erDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Employee</p>
</div>
<div class="col-4 p-0">
<p class="list-group-item-heading mb-0">Rate(%): <span th:text="${listBean.eeContribRate}"></span></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.eeDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-heading mb-0">Additional Voluntary Contribution (AVC)</p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.eeAvcDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item grey lighten-4">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-heading mb-0"><strong>Total Contribution</strong></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><strong><span class="float-left">£</span><span th:text="${listBean.erContribution}"></span></strong></p>
</div>
</div>
</li>
</ul>
<ul class="list-group mt-4" aria-hidden="true">
<li class="list-group-item grey lighten-3">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-text mb-0"><strong>Partial / Non-Payment of Contribution</strong></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Reason</p>
</div>
<div>
<p class="list-group-item-heading text-right mb-0"><span th:text="${listBean.partialContribReason}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Effective Date</p>
</div>
<div>
<p class="list-group-item-heading text-right mb-0"><span th:text="${listBean.partialContribEffectiveDate}"></span></p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</div>
</ul>
</div>
<!--/.Card-->
</div>
</div>
</div>
<!--Main container-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" th:src="#{/resources/js/jquery.3.2.1.min.js}"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" th:src="#{/resources/js/popper.min.js}"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" th:src="#{/resources/js/bootstrap.min.js}"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" th:src="#{/resources/js/mdb.min.js}"></script><!--
<script type="text/javascript" th:src="#{/resources/js/thymol.js}"></script>
<script type="text/javascript" th:src="#{/resources/js/thymolconfig.js}"></script> -->
<script type="text/javascript" th:src="#{/resources/js/custom.js}"></script>
<script th:src="#{/resources/js/numericfield.js}"></script>
<script th:src="#{/resources/js/moment.2.10.6.min.js}"></script>
<!-- SCRIPTS -->
<!-- <!-- thymol JavaScript -->
<script th:src="#{/resources/js/main.js}"></script>
<script th:src="#{/resources/js/sweet-alert.min.js}"></script>
<script th:src="#{/resources/js/utils.js}"></script>
<script th:src="#{/resources/js/numericfield.js}"></script>
<script th:src="#{/resources/js/date.js}"></script>
<script th:src="#{/resources/js/icheck.min.js}"></script>
<script th:src="#{/resources/js/dynamicFormFields.js}"></script>
<script th:src="#{/resources/js/moment.js}"></script>
<script th:src="#{/resources/js/bootstrap-datetimepicker.min.js}"></script>
<script th:src="#{/resources/js/jquery.qtip.min.js}"></script>
<script th:src="#{/resources/js/bc-quicklink.js}"></script>
<script th:inline="javascript">
/*<![CDATA[*/
// SideNav Initialization
$(document).ready(function () {
$(".button-collapse").sideNav({
edge: 'right',
closeOnClick: true
});
var container = document.getElementById('slide-out');
Ps.initialize(container);
});
</script>
<script>
// Material Select Initialization
$(document).ready(function () {
$('.mdb-select').material_select();
});
/*]]>*/
</script>
</div>
</body>
</html>
Help me to solve the problem.

scroll down icon in center of page doesn't work as expected

I have a portfolio / landing page with a scroll down icon / link in center of page; however, the effect when the page scrolls down is not working as intended. if I click on any link on the top navbar I get the scroll up effect I want. If someone can point out what I'm missing. This was done using bootstrap framework. here's the link to the page
http://techgeorge.org/
index.html
<!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="portfolio, projects, Information Technology, Web Development, Android Development">
<meta name="author" content="George Louis">
<title>Techgeorge - This is my portfolio. A list of some of my projects. Web Development, and Android Development</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/grayscale.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=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" 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]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<i class="fa fa-play-circle"></i> <span class="light">Tech</span>George
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#myCarousel">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#map">Map</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Header -->
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2 id="sub-heading"><span class="light">Tech</span>George</h2>
<img src="img/mypic.png" class="mypic" alt="Smiley face" height="100" width="100">
<p>Here you'll find a list of my projects!</a>
</p>
<ul class="list-inline banner-social-buttons">
<li>
<i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span>
</li>
<li>
<i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span>
</li>
<li>
<i class="fa fa-youtube left fa-fw"></i> <span class="network-name">Youtube</span>
</li>
</ul>
<!-- scroll down button -->
<a href="#myCarousel" class="btn btn-circle js-scroll-trigger">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<br>
<!-- Page Content -->
<div class="container">
<!-- Page Header -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">My Projects
<small>Web Development & Android Applications</small>
</h1>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/sohotechnology.png" alt="">
</a>
<h3>sohotech</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/techgeorge.org.png" alt="">
</a>
<h3>
techgeorge
</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/calculator.png" alt="">
</a>
<h3>
Web Calculator
</h3>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/simon-game.png" alt="">
</a>
<h3>
Simon Game
</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/clock.png" alt="">
</a>
<h3>
Pomodoro Clock
</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/tictactoe.png" alt="">
</a>
<h3>
Tic Tac Toe
</h3>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="img/netDroid.png" alt="">
<h3>
Android: Netdroid
</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/jlanscan.png" alt="">
</a>
<h3>
JLanScan
</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/wiki-search.png" alt="">
</a>
<h3>
Wiki Search
</h3>
</div>
</div>
<!-- /.row -->
<hr>
<!-- /.row -->
</div><!-- /.carousel -->
<!-- About Section -->
<section id="about" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<img src="img/me.png" alt="Smiley face" height="100" width="100">
<h2>About Me</h2>
<p>My name is George and I'm a long time IT and Developer who venture in many areas of Information Technology. I am a certified Front End Web Developer from freecodecamp.org. And I hold several certification from Microsoft. I spend my days developing apps, making youtube video tutorials youtube channel, and writing for my blog PCtechtips.org</p>
<p>I have experience in Information Technology and Developing Web and Mobile Apps. You can contact me # georgelouis825#gmail.com</p>
<p>This site was developed using Bootstrap framework. And all pictures are mine!</p>
</div>
</div>
</section>
<!-- Download Section
<section id="download" class="content-section text-center">
<div class="download-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h2>Download Grayscale</h2>
<p>You can download Grayscale for free on the preview page at Start Bootstrap.</p>
Visit Download Page
</div>
</div>
</div>
</section> -->
<!-- Map Section -->
<div id="map"></div>
<!-- Footer -->
<footer>
<div class="container text-center">
<p>Copyright © techgeorge.org 2017</p>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<!-- Google Maps API Key - Use your own API key to enable the map feature. More information on the Google Maps API can be found at https://developers.google.com/maps/ -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=true"></script>
<!-- Custom Theme JavaScript -->
<script src="js/grayscale.js"></script>
</body>
</html>

I gave an extra class to the icon and removed href
<a class="btn btn-circle js-scroll-trigger scroll-down">
<i class="fa fa-angle-double-down animated"></i>
</a>
After that i wrote this JS
$(function() {
$('.scroll-down').click (function() {
$('html, body').animate({scrollTop: $('#myCarousel').offset().top }, 'slow');
return false;
});
});

javascript not working in flask

<title>TheSaaS - Responsive Bootstrap SaaS, Software & WebApp Template</title>
<script>if (top !== self) top.location.replace(self.location.href +'?utm_source=themeforest&utm_medium=preview&utm_campaign=thesaas');</script>
<!-- Styles -->
<link type="text/css" href="{{url_for('static',filename='assets/css/core.min.css')}}" rel="stylesheet">
<link type="text/css" href="{{url_for('static',filename='assets/css/thesaas.min.css')}}" rel="stylesheet">
<link type="text/css" href="{{url_for('static',filename='assets/css/style.css')}}" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" href="{{url_for('static',filename='assets/img/apple-touch-icon.png')}}">
<link rel="icon" href="{{url_for('static',filename='assets/img/favicon.png')}}">
<!-- Open Graph Tags -->
<meta property="og:title" content="TheSaaS">
<meta property="og:description" content="A responsive, professional, and multipurpose SaaS, Software, Startup and WebApp landing template powered by Bootstrap 4.">
<meta property="og:image" content="http://thetheme.io/thesaas/assets/img/og-img.jpg">
<meta property="og:url" content="http://thetheme.io/thesaas/">
<meta name="twitter:card" content="summary_large_image">
<!-- Topbar -->
<nav class="topbar topbar-inverse topbar-expand-md topbar-sticky">
<div class="container">
<div class="topbar-left">
<button class="topbar-toggler">☰</button>
<a class="topbar-brand" href="index.html">
<img class="logo-default" src="{{url_for('static',filename='assets/img/logo.png')}}" alt="logo">
<img class="logo-inverse" src="{{url_for('static',filename='assets/img/logo-light.png')}}" alt="logo">
</a>
</div>
</div>
</nav>
<!-- END Topbar -->
<!-- Header -->
<header class="header fadeout header-inverse pb-0 h-fullscreen" style="background-image: linear-gradient(to bottom, #243949 0%, #517fa4 100%);">
<canvas class="constellation"></canvas>
<div class="container">
<div class="row h-full">
<div class="col-12 text-center align-self-center">
<h1 class="fs-50 fw-600 lh-15 hidden-sm-down">Built for <span class="text-primary" data-type="Authors, Startups, Entrepreneurs, SaaS, WebApps"></span></h1>
<h1 class="fs-35 fw-600 lh-15 hidden-md-up">Built for<br><span class="text-primary" data-type="Authors, Startups, Entrepreneurs, SaaS, WebApps"></span></h1>
<br>
<p class="fs-20 hidden-sm-down"><strong>TheSaaS</strong> is an elegant, modern and fully customizable SaaS and WebApp template</p>
<p class="fs-16 hidden-md-up"><strong>TheSaaS</strong> is an elegant, modern and fully customizable SaaS and WebApp template</p>
<br>
<hr class="w-60 hidden-sm-down">
<br>
<a class="btn btn-xl btn-round btn-primary fs-20 fw-500 w-350 shadow-3 hidden-sm-down" href="https://themeforest.net/item/thesaas-responsive-bootstrap-saas-software-webapp-template/19778599?license=regular&open_purchase_for_item_id=19778599&purchasable=source&ref=thethemeio">Purchase Now - $19</a>
<a class="btn btn-lg btn-round btn-primary w-250 shadow-3 hidden-md-up" href="https://themeforest.net/item/thesaas-responsive-bootstrap-saas-software-webapp-template/19778599?license=regular&open_purchase_for_item_id=19778599&purchasable=source&ref=thethemeio">Purchase Now - $19</a>
<br>
<p class="mt-2 mt-md-4"><small>or purchase an Extended License</small></p>
</div>
<div class="col-12 align-self-end text-center pb-70">
<a class="scroll-down-2 scroll-down-inverse" href="#" data-scrollto="section-demo"><span></span></a>
</div>
</div>
</div>
</header>
<!-- END Header -->
<!-- Main container -->
<main class="main-content">
<!--
|‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
| Sample Landing Pages
|‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
!-->
<section class="section overflow-hidden" id="section-demo">
<div class="container">
<header class="section-header">
<small>Demo</small>
<h2>Sample Landing Pages</h2>
<hr>
<p class="lead">Apart from internal pages, we have designed several single sample pages to get start with.</p>
</header>
<div class="row gap-y text-center">
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-helpato-sm.jpg')}}" alt="demo helpato landing"></p>
<p><strong>Helpato</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="150">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-trello-sm.jpg')}}" alt="demo helpato landing"></p>
<p><strong>Trello</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-gmail-sm.jpg')}}" alt="demo helpato landing"></p>
<p><strong>Gmail</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-skype-sm.jpg')}}" alt="demo helpato landing"></p>
<p><strong>Skype</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="150">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-github-sm.jpg')}}" alt="demo github landing"></p>
<p><strong>GitHub</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-app-sm.jpg')}}" alt="demo app landing"></p>
<p><strong>Mobile App</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-bootstrap-sm.jpg')}}" alt="demo bootstrap landing"></p>
<p><strong>Bootstrap</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4 hidden-sm-down" data-aos="fade-up" data-aos-delay="150">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-slack-sm.jpg')}}" alt="demo slack landing"></p>
<p><strong>Slack</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4 hidden-sm-down" data-aos="fade-up" data-aos-delay="300">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-zendesk-sm.jpg')}}" alt="demo zendesk landing"></p>
<p><strong>Zendesk</strong></p>
</div>
</div>
</div>
</section>
</main>
<!-- END Main container -->
<!-- Footer -->
<footer class="site-footer">
<div class="container">
<div class="row gap-y align-items-center">
<div class="col-12 col-lg-3">
<p class="text-center text-lg-left">
<img src="{{url_for('static',filename='assets/img/logo.png')}}" alt="logo">
</p>
</div>
<div class="col-12 col-lg-6">
<ul class="nav nav-inline nav-primary nav-hero">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page-feature.html">Features</a>
</li>
<li class="nav-item hidden-sm-down">
<a class="nav-link" href="page-pricing.html">Pricing</a>
</li>
<li class="nav-item hidden-sm-down">
<a class="nav-link" href="page-contact.html">Contact</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-3">
<div class="social text-center text-lg-right">
<a class="social-facebook" href="https://www.facebook.com/thethemeio"><i class="fa fa-facebook"></i></a>
<a class="social-twitter" href="https://twitter.com/thethemeio"><i class="fa fa-twitter"></i></a>
<a class="social-instagram" href="https://www.instagram.com/thethemeio/"><i class="fa fa-instagram"></i></a>
<a class="social-dribbble" href="https://dribbble.com/thethemeio"><i class="fa fa-dribbble"></i></a>
</div>
</div>
</div>
</div>
</footer>
<!-- END Footer -->
<!-- Scripts -->
<script src="{{url_for('static',filename='assets/js/core.min.js')}}"></script>
<script src="{{url_for('static',filename='assets/js/thesaas.min.js')}}"></script>
<script src="{{url_for('static',filename='assets/js/script.js')}}"></script>
Hello,
This is a template which I have modified .. outside flask when I am running this, this works fine ( without url_for ). But when I am trying to use within flask, the javascript files are not working .. please help me

Make sure your directory structure is modified for the root of you flask application, otherwise you're requesting js files that aren't there

You don't have to use url_for. Instead try:
<link type="text/css" src="{static/assets/css/core.min.css}" rel="stylesheet">

Angular routing for Bootstrap content

I'm trying to use AngularJS mainly for seamless routing of an already functioning webpage. The idea is simple: / stands for the root (index.html), /detail stands for a detailed view (detail_zerohouse.html). However, even with the app and both controllers defined, all I can get is a weirdly layed out index.html and I can't even get to the detail view, all I get is an 404 Not Found. Here's my code:
----------------- main.js ----------------------------
var architectApp = angular.module("architectApp");
architectApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'index.html',
controller: 'indexCtrl'
}).
when('/detail', {
templateUrl: 'detail_zerohouse.html',
controller: 'detailCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
-------------- indexCtrl.js ----------------------------
architectApp.controller('indexCtrl', function($scope){
});
-------------- detailCtrl.js --------------------------
architectApp.controller('detailCtrl', function($scope){
});
-------------------------- root.html ---------------------
<!DOCTYPE html>
<html lang="en" ng-app="architectApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>AngularJS Root</title>
<!-- AngularJS-->
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="js/main.js"></script>
<script src="js/indexCtrl.js"></script>
<script src="js/detailCtrl.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Google Roboto Font-->
<link href='https://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>
<!-- Main user stylesheet-->
<link rel="stylesheet" href="css/style.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<!-- Media helper Fancybox-->
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<!-- Thumbs helper Fancybox-->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- SmoothScroll JS-->
<script src="js/smooth-scroll.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// initialize SmoothScroll
smoothScroll.init();
// set Fancybox properties
$(".fancybox").fancybox({
// fitToView : false, opens the image already in fullscreen
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
closeClick : true,
hideOnOverlayClick : true,
helpers : {
title : { type : 'inside' },
buttons : {}
}
});
});
</script>
</head>
<body class="container-fluid" ng-view>
</body>
</html>
------------------------ index.html ------------------------
<nav class="nav navbar-default" id="navigation">
<div class="container-fluid">
<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 class="navbar-brand" href="#">Peter Danko</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
architektúra <span class="caret"></span>
<ul class="dropdown-menu">
<li>budova</li>
<li>budova</li>
<li>budova</li>
<li>budova</li>
<li>budova</li>
</ul>
</li>
<li>interiér</li>
<li>o mne</li>
</ul>
</div>
</div>
</nav> <!-- end nav -->
<!--<div id="mainWrap" class="container-fluid">-->
<div class="row tileRow" id="firstRow" style="margin-top: 5px;">
<a href="detail.html">
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
</a>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
</div> <!-- row end -->
<div class="row tileRow">
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
</div> <!-- row end -->
----------------------- detail.html ------------------------------
<nav class="nav navbar-default navbar-top-offset" id="navigation">
<div class="container-fluid">
<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 class="navbar-brand" href="#">Peter Danko</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
architektúra <span class="caret"></span>
<ul class="dropdown-menu">
<li>budova</li>
<li>budova</li>
<li>budova</li>
<li>budova</li>
<li>budova</li>
</ul>
</li>
<li>interiér</li>
<li>o mne</li>
</ul>
</div>
</div>
</nav> <!-- end nav -->
<!--<div id="mainWrap" class="container-fluid">-->
<div class="row tileRow" id="firstRow" style="margin-top: 5px;">
<a href="index.html#navigation">
<div class="col-md-2 tile logoTile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
</a>
<div class="col-md-6 doubleTile">
<img src="img/zerohouse/7thumb.png" class="img-responsive" id="">
</div>
<div class="col-md-2 tile">
<img src="img/zerohouse/8text.png" class="img-responsive" id="">
</div>
<div class="col-md-2 tile">
<img src="img/zerohouse/8plan.png" class="img-responsive" id="">
</div>
</div> <!-- row end -->
<div class="row tileRow">
<div class="col-md-2 tile">
<img src="img/zerohouse/11thumb.png" class="img-responsive" id="">
</div>
<div class="col-md-2 tile">
<img src="img/zerohouse/12thumb.png" class="img-responsive" id="">
</div>
<div class="col-md-2 tile">
<img src="img/zerohouse/10thumb.png" class="img-responsive" id="">
</div>
<div class="col-md-6 doubleTile">
<img src="img/zerohouse/9thumb.png" class="img-responsive" id="">
</div>
</div> <!-- row end -->
Thanks for any help, I've tried everything I could think of but got nowhere.
/
-/css
-/fancybox
-/helpers
-/img
-/js
-detailCtrl.js
-indexCtrl.js
-main.js
-detail_zerohouse.html
-index.html
-root.html
All .html files are directly in the root folder

I think that you forgot the ngRoute dependency:
var architectApp = angular.module("architectApp",['ngRoute']);
Also to go to detail you should use
<a href="#/detail">
instead of
<a href="detail.html">
Also what you need to rename your file: root.html should be renamed index.html and index.html to root.html.
You need to have the index.html as your landing main page.

got it working, the links now work like '/#/detail'. Can somebody help where to link the fancybox.js? It does not work now. Missing [ ] braces

Categories