I'm doing my view based on a template, but there are some areas where I want to enter fragments.
Template : base.html
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>HELLO</title>
</head>
<body>
<div layout:fragment="content"></div>
<footer>
Year Template
</footer>
</body>
</html>
view: list.html
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="base">
<head th:replace="fragments/init :: head">
<title>Title</title>
</head>
<div layout:fragment="content">
<h1> <remove>List</remove> <small></small> </h1>
</div>
<footer th:replace="fragments/init :: footer">
Year List
</footer>
</html>
Fragments : fragment/init.html
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
<title>Title of Fragment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body>
<footer th:fragment="footer">
2004
</footer>
</body>
</html>
With the head fragment, it works correctly. But in the footer, But in the footer, the code of the template is displayed.
Output:
<html lang="en"><head>
<title>Title of Fragment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body screen_capture_injected="true">
<div>
<h1> <remove>List</remove> <small></small> </h1>
</div>
<footer>
Year Template
</footer>
</body>
</html>
I hope you can help me. Thanks in advance.
UPDATE
base.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>Template title</title>
</head>
<body>
<header>
<h1>Template Title</h1>
</header>
<section layout:fragment="content">
<p>Text Template</p>
</section>
<footer layout:fragment="footer">
<p>Footer template</p>
</footer>
</body>
</html>
list.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="base">
<head th:replace="fragments/init :: head">
<title>Title List</title>
</head>
<body>
<section layout:fragment="content">
<p>Content List page</p>
</section>
<footer layout:fragment="footer">
<div layout:include="fragments/init :: extra" th:remove="tag">
<p>Footer List page</p>
</div>
</footer>
</body>
</html>
init.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head layout:fragment="head">
<title>Title of Fragment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body>
<div layout:fragment="extra">
<p>Extra Content Fragment </p>
</div>
</body>
</html>
Output:
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Title of Fragment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body screen_capture_injected="true">
<header>
<h1>Template Title</h1>
</header>
<section>
<p>Content List page</p>
</section>
<footer>
<p>Extra Content Fragment </p>
</footer>
</body></html>
I managed to include the code fragment in the footer, but my goal is to replace it.
Solution:
<footer layout:fragment="footer" layout:include="fragments/init :: extra" th:remove="tag">
<p>Footer List Page</p>
</footer>
The footer in your layout page doens't contain an fragment element, so the footer doesn't change.
The content page was 'decorated' by the elements of Layout.html, the
result being a combination of the decorator page, plus the fragments
of the content page (<head> elements from both pages with the <title>
element from the content page taking place of the decorator's, all
elements from the decorator, but replaced by all content page
fragments where specified).
https://github.com/ultraq/thymeleaf-layout-dialect#decorators-and-fragments
Related
I downloaded demo version of particles.js and am trying to modify it using basic HTML . But none of the changes are getting reflected on the webpage. Is there any obvious thing which I am missing ? TIA
<!DOCTYPE html> <html lang="en" >
<head><meta charset="UTF-8"> <title>particles.js demo</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- particles.js container --> <div id="particles-js"></div>
<!-- stats - count particles --> <div class="count-particles">
<span class="js-count-particles">--</span> particles </div>
<!--particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- stats.js lib -->
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="./script.js"></script>
<h1 class="main-title">Hello all </h1>
<p class="text-content">Welcome to my website! Click on a link to get started.</p>
</body>
</html>
please use position: relative to your overall container
below code will works for you ...
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>particles.js demo</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- particles.js container -->
<div id="particles-js" class="tt"></div>
<!-- stats - count particles -->
<div class="count-particles">
<span class="js-count-particles">--</span> particles </div>
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- stats.js lib -->
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="./script.js"></script>
<div class="body-container" style="position: relative;">
<h1 class="main-title">Hgdfgdfello all </h1>
<p class="text-content">Welcome to my website! Click on a link to get started.</p>
</div>
</body>
</html>
I am trying to divide my page into three parts using thymeleaf fragments/layouts.
Lets say I have following page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Demo Title</title>
</head>
<body>
<div class="container">
<div class="content">Some content goes here</div>
</div>
</body>
</html>
And I am trying to divide it into following three fragments.
top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Demo Title</title>
</head>
<body>
<div class="container">
bottom.html
</div>
</body>
</html>
page-content.html
<div class="content">Some content goes here</div>
I DID TRY AS BELLOW BUT DID NOT WORK:
top.html
<div th:fragment="top">
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Demo Title</title>
</head>
<body>
<div class="container">
</div>
page-content.html
<div th:replace="/top :: top"></div>
<div class="content">Some content goes here</div>
</div>
</body>
</html>
Please suggest me possible direction to look into.
I want to build a semantic html page with a two column layout. Which is the correct way to structure the page. Please take note of where the aside is placed.
Option 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header></header>
<main>
<section class="col-1"></section>
<aside class="col-2"></aside>
</main>
<footer></footer>
</body>
</html>
Option 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header></header>
<main class="col-1">
<section></section>
<aside></aside>
</main>
<aside class="col-2"></aside>
<footer></footer>
</body>
</html>
Which option is correct?
Instead of rendering the second section, like it should, it just renders all of them. Anyone know why? The platform is not letting me post the question unless I write some more stuff, so here it is. Stuff written by me. I would just like to know about the core-pages issue.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="import" href="bower_components/webcomponentsjs/webcomponents.js">
<meta charset="utf-8">
<meta name="viewport" content="device-width, initial-scale=1.0">
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/core-pages/core-pages.html">
</head>
<body unresolved>
<core-pages selected="1">
<section>
<h1>hola</h1>
<p>this is the first section</p>
</section>
<section>
<h1>hello</h1>
<p>this is the second section</p>
</section>
<section>
<h1>ciao</h1>
<p>third</p>
</section>
</core-pages>
</body>
</html>
Hello friends i have created two page one is index.html and second is about.html . I just want to add back button on about.html using jQuery mobile . i have tried it but back button is not working in my code i dont know what is the problem
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="data-add-back-btn ">Back</div>
<div><h1>Page title</h1>
About us</div>
</div>
</body>
</html>
Please help me. Thanks in advance...
You may try creating your back button by using data-rel="back" as follows:
<a data-role="button" data-rel="back">Back</a>
Full HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<a data-role="button" data-rel="back">Back</a>
<div>
<h1>Page title</h1>
About us
</div>
</div>
</body>
</html>
Check the section "Back" button links of the online doc for more information: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html