I am developing a Spring Boot application and using Thymeleaf Templating. I am new to this and need a little guidance. I have a index.html file which is the main view which should be displayed. Inside the index.html file i have two fragments, a header and a footer which display as well. What i am having trouble with is inserting more fragments into the index.html file. I want to insert another fragment which displays a navigation top bar as well as a second fragment that displays a side navigation menu. I am looking to include the topnavbar right below the header fragment and the side nav menu on the left side of screen. How do i go about doing this? Thank you.
Index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head lang="en">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"/>
<link rel="stylesheet" href="../static/css/main.css"
th:href="#{css/main.css}" media="screen"/>
<title>Spring Boot | Web Application</title>
</head>
<body>
<div class="container">
<div class="row" th:include="header :: banner"></div>
<div class="row">
<div class="col-sm-3"><hr /></div>
<div class="col-sm-9 text-center">col-sm-8</div>
</div>
<div class="row">
<div class="col-sm-12"><hr /></div>
</div>
<div class="row" th:include="footer :: copy"></div>
</div>
<!-- jQuery, Popper.js, Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
Related
Can't figure out how to set this animated canvas as the website background of my portfolio page.
any help would be appreciated. or how do I place the div with text over the canvas?
so it sits nice and flush....................
<!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.0">
<title>Portfolio</title>
<link rel="icon" type="image/x-icon" href="image/favicon.ico">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js" crossorigin="anonymous"></script>
<nav>
<!-- De checkbox -->
<input type="checkbox" id="check">
<label for="check" id="checkbox">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<!-- logo en de Buttons in de nav bar -->
<img src="image/logo.png" alt="logo">
<ul>
<li>Home</li>
<li>Projects</li>
<li>About me</li>
<li>Contact</li>
</ul>
</nav>
</head>
<body>
<div id="particles-js">
<script>
particlesJS.load('particles-js', 'particles.json', function() {
console.log('particles.json loaded ...');
});
</script>
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hey, I'm makkerheineken.</div>
<div class="text-2">Front-End & Back-end Develeper.</div>
</div>
</div>
</section>
</div>
</body>
</html>
You could give the canvas the same size as the screen, add a div with the same size but positioned absolutely, and then put the rest of your elements inside this div.
I am working on a Spring MVC application that use FreeMarker for my views.
I am absolutly new in FreeMarker and I have the following problem: in my projct I have 3 files that have to be assemblet togheter into a single page.
So I have:
1) header.ftl representing the header of all my pages, somthing like:
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js is-ie8"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registrazione - MY WEBSITE</title>
<meta name="robots" content="noindex,nofollow">
<link rel="stylesheet" href="resources/css/webfont.css">
<link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="resources/plugins/bs-select/bootstrap-select.min.css">
<link rel="stylesheet" href="resources/plugins/bs-dialog/bootstrap-dialog.min.css">
<link rel="stylesheet" href="resources/css/style.css" />
</head>
<body id="main">
<!-- versione per popup. non prendere in considerazione -->
<!--
<div class="container page-header">
<h1>MY WEBSITE</h1>
</div>
2) footer.ftl representing the footer of all my pages:
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/bs-select/bootstrap-select.min.js"></script>
<script src="assets/plugins/bs-select/i18n/defaults-it_IT.min.js"></script>
<script src="assets/plugins/bs-dialog/bootstrap-dialog.min.js"></script>
<script src="assets/plugins/jq-form-validation/jquery.validation.js"></script>
<script src="assets/js/functions.lib.js"></script>
<script src="assets/js/form-validation.js"></script>
</body>
</html>
3) Then I have my specific page (named myPage.ftl that represent only the content, something like this:
<h1>This is the content</h1>
<p>Some inforamation</p>
The header.ftl and the footer.ftl are into this directory **\WEB-INF\freemarker\layout** of my project.
So my problem is: how can I import the header.ftl content above the content of the myPage.ftl and the footer.ftl under the content of myPage.ftl page?
I did this using user-defined macros for page layouts, e.g. let's call your layout standardPage.ftl:
<#macro standardPage title="">
<!DOCTYPE html>
<html lang="en">
<head>
<title>${title}</title>
</head>
<body>
<#include "/include/header.ftl">
<#nested/>
<#include "/include/footer.ftl">
</body>
</html>
</#macro>
Then you can call this macro in each of your pages, e.g. homePage.ftl:
<#include "/pages/standardPage.ftl" />
<#standardPage title="Home">
<h1>Home Page</h1>
<p>This bit replaces the nested tag in the layout</p>
</#standardPage>
i'm a web devoper from Italy...I have a problem with loading with href
example:
i have one.html with this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>dkrMobile</title>
<!--caricamento librerie-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
</head>
<body>
<!-- LOGIN -->
<div data-role="page" id="loginPage">
<div data-role="content">
<div style=" text-align:center">
<img style="width: 70%;" src="http://www.laboncloud.it/dkrmobile/css/images/logdkr.png">
</div>
<form action="#pageFile">
<div data-role="fieldcontain">
<label for="userNameLogin">
Username
</label>
<input name="" id="userNameLogin" placeholder="" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="passwordLogin">
Password
</label>
<input name="" id="passwordLogin" placeholder="" value="" type="password">
</div>
<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch="trues">
Login
</a>
</form>
</div>
</div>
</body>
</html>
and the two.html with this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>dkrMobile</title>
<!--caricamento librerie-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
<script type="text/javascript" src="js/tolito-1.0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/tolito-1.0.5.min.css" />
<!--css userinterface-->
<link rel="stylesheet" href="css/ui.css" />
</head>
<body>
<div data-role="page" id="loadingPage">
<div data-role="content">
<h1>caricamento di tutti i contenuti in corso</h1>
<a data-role="button" data-theme="a" data-transition="fade" href="#pageFile">skip</a>
</div>
</div>
<div data-role="page" id="pageFile">
<div data-role="content">
<h1>dueeee</h1>
</div>
</div>
<!-- FILE-->
</body>
</html>
now if tap on login - the two.html will no be loaded.
want a demo?
here the demo
if I click on skip in two.html dont show nothing (if I refresh the page it start work).
the only way is data-ajax="false" ? why?
This is not an error. To understand this problem you must understand how jQuery Mobile works.
Multi HTML template can't be mixed with multi page template. For example when working with several HTML pages, only first one can have more then one page. When jQuery Mobile loads other HTML files it will strip HEAD (we dont need it because first HTML HEAD content is already loaded into the DOM) and it will load ONLY first page it can find in a file, every other page will be discarded.
data-prefetch will not help you here. Also you are initializing it incorrectly, data-prefetch attribute don't have a value, it is just data-prefetch, example:
<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch>Login</a>
If you want to find out more how jQuery Mobile handles multiple HTML and multiple page templates or what are they take a look at this ARTICLE or THIS one. To be transparent they are my personal blog articles. Everything you need to know can be found there.
Basically solution to your problem would be to have all pages inside a single HTML file, or you should brake two.html into two separate HTML files. you decide what is a best solution for you.
I have to demonstrate the issue I'm experiencing on my Android phone a simple example:
<!doctype html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<script src="http://code.jquery.com/jquery-1.7.2.js"><\/script>')</script>
<script src="js/libs/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="login">
<div data-role="content">
This is a TEST
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Now when you load this in your android browser and tap somewhere on the page you will see the page highlight and a click sound.
How annoying is that, I definitely want to turn that off, but is that possible ?
Cheers
Luca
Put following in your head of HTML page.
<meta name="viewport" content="width=device-width, initial-scale=1">
I am trying to use jQuery Mobile with the Phonegap Windows Phone template.
The problem I am having is that the list item icons will not display.
My code is below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>test</title>
<link rel="stylesheet" href="jquery.mobile-1.0b2.css" />
<link rel="stylesheet" href="site.css" />
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
// As of Beta 2, jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
// when navigating from a mobile to a non-mobile page, or when clicking "back"
// after a form post), hence disabling it.
$.mobile.ajaxEnabled = false;
});
</script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.0b2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
</head>
<body>
<!-- Home Page -->
<div data-role="page" id="home" data-theme="b">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Map</li>
<li>Map page</li>
</ul>
</div>
</div>
<!-- Home Page End -->
</body>
</html>
If I browse the files in Chrome or Firefox the icons are visible. It only fails in Windows Phone emulator.
Has anyone found a solution?
Just found the answer here:
jquery mobile on Windows phone 7 images not loading
Doh!
Just need to set the build action of the icons to Content