I'm trying to improve the filtering code I have for filtering input.
The input I have looks like this:
<html>
<body>
<p>Page 1</p>
<p style="display: none">Pagebreak</p>
<p>Page 2</p>
<p style="display: none">Pagebreak</p>
<p>Page 3</p>
</body>
</html>
I use a filter like this in order to replace words "Pagebreak" with actual docx pagebreak XML piece:
function Para (el)
-- Turning paragraphs which contain nothing but a Pagebreak word
-- into line breaks.
if #el.content == 1 and el.content[1].text == "Pagebreak" then
return pandoc.RawBlock('openxml', '<w:p><w:r><w:br w:type="page"/></w:r></w:p>')
end
end
return {
{Para = Para}
}
I control the input HTML, and would like to simplify it by removing <p style="display: none">Pagebreak</p> in favor of an attribute on regular paragraph. What I'd like to have is this:
<html>
<body>
<p>Page 1</p>
<p class="pageBreak">Page 2</p>
<p class="pageBreak">Page 3</p>
</body>
</html>
What lua code should I write to achieve this?
From the "Creating a handout from a paper" example I see that it's possible to inspect the classes of incoming elements. But how do I modify the existing paragraph to have a page break in it?
Unfortunately, pandoc's document model currently doesn't support attributes on paragraphs. However, you can use a div instead:
<div class="pageBreak">Page 3</div>
I see you've already found the open issue about page breaks
Related
I'm creating a couple of thymeleaf fragments to use in other pages, and I was told they need to be inside a well-formed html page (with HTML, HEAD, BODY tags etc). Is this the case?
The fragments are only going to be used with th:include/th:replace in other places.
A fragment just needs to be a well formed html. You can start with a div
For e.g
<div th:fragment="formField (field, value, size)">
<div>
<label th:for="${#strings.toLowerCase(field)}"> <span
th:text="${field}">Field</span>
</label>
</div>
<div>
<input type="text" th:id="${#strings.toLowerCase(field)}"
th:name="${#strings.toLowerCase(field)}" th:value="${value}"
th:size="${size}">
</div>
Which you then include somewhere else
<body>
<header th:insert="fragments/general.html :: header"> </header>
<div th:replace="fragments/forms.html
:: formField(field='Name', value='John Doe',size='40')">
</div>
<div th:replace="fragments/general.html :: footer"></div>
I took these examples from here: https://www.baeldung.com/spring-thymeleaf-fragments
I have a common layout which, by default, should display a (basic) search form on each page excepted the search page itself which contains a (more advanced) search form already.
Is it possible to pass a parameter from my search page to the layout in order to not display the default search form?
Here is an example of what I would like to do:
layout.html
<html layout:???="displayShowForm = true">
...
<form action="search" th:if="${displayShowForm}">...</form>
...
<div layout:fragment="content">...</div>
home.html (show the default search form)
<html layout:decorator="layout">
...
<div layout:fragment="content">...</div>
search.html (hide the default search form)
<html layout:decorator="layout (displayShowForm = false)">
...
<div layout:fragment="content">
...
<form action="advancedSearch">...</form>
Yes, it's entirely possible, even though Thymeleaf's documentation doesn't clearly state it.
All you have to do is pass your param using the th:with attribute. There may be other methods, but this seems to be the most straight-forward.
Here's a stripped down version of my implementation:
Default decorator - fragments/layout/default.html
<!doctype html>
<html xmlns:layout="http://www.thymeleaf.org" xmlns:th="http://www.thymeleaf.org">
<body>
<div th:replace="fragments/header :: main"></div>
<div layout:fragment="content">
main content goes here
</div>
</body>
</html>
Header fragment - fragments/header.html
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="main">
<nav>
<ul>
<li>Home Page</li>
<li>About</li>
</ul>
</nav>
</div>
</body>
Home Page file - home.html
<!doctype html>
<html layout:decorator="layout/default" th:with="currentPage='home'"
xmlns:layout="http://www.thymeleaf.org/" xmlns:th="http://www.thymeleaf.org">
<body>
<div layout:fragment="content">
This is my home page content... thrilling, isn't it?
</div>
</body>
</html>
Here, in the home.html file, you can see I include the default decorator and pass my parameter using the th:with attribute. I don't actually use my parameter in my layout decorator, but I use it in header.html, which is included from the decorator. No need to pass it from the decorator to the header.html fragment, since it's already in scope.
There was also no need to do a NULL check on the currentPage variable in header.html. The active CSS class was simply not appended when removing the parameter from home.html.
If I were to render home.html, I would expect to see the following output:
<!doctype html>
<html>
<body>
<nav>
<ul>
<li>Home Page</li>
<li>About</li>
</ul>
</nav>
<div>
This is my home page content... thrilling, isn't it?
</div>
</body>
</html>
Yes, it is possible to pass parameters but you need to use layout:include instead of layout:decorator or layout:fragment.
Similar to Thymeleaf's th:include, but allows the passing of entire
element fragments to the included page. Useful if you have some HTML
that you want to reuse, but whose contents are too complex to
determine or construct with context variables alone.
Source : https://github.com/ultraq/thymeleaf-layout-dialect
You should take a look at this documentation which will give you details about the way to use it.
In your case, it could look like :
<div layout:include="form" th:with="displayShowForm=true"></div>
And in the layout page of form :
<div layout:fragment="form">
<div th:if="${displayShowForm} == true">
<form action="basicSearch"></form>
</div>
<div th:if="${displayShowForm} == false">
<form action="advancedSearch"></form>
</div>
</div>
My mobile website dynamically adds the header bar to reduce code redundancy.
However, I'm stuck with styling header section of a jquery mobile page.
When I see the generated HTML tags, it looks okay,
but its element is not decorated by jQuery Mobile.
After adding the content, I invoked
$(pageId).trigger('create');
Do you have any ideas?
This worked for me : http://jsfiddle.net/emBxx/2/
HTML:
<script type="text/javascript" src="js/main.js"></script>
...
<div data-role="page" data-theme="b">
<header></header>
<div data-role="content">
<div class="content-primary">
<br />
<ul data-role="listview" data-filter="true">
<li>Some</li>
<li>random</li>
<li>searchable</li>
<li>content</li>
<li>(list!)</li>
</ul>
</div><!--/content-primary -->
</div>
<footer></footer>
</div><!-- page end-->
<script>
appendJQMHeader('Injected header !');
appendJQMFooter('—Injected ftr!', 'JQM 1.3.1Beta');
</script>
JS, in js/main.js:
function appendJQMHeader(pageTitle) {
$('header').replaceWith(
'<header data-role="header" data-theme="f">'+
'<h1>'+pageTitle+'</h1>'+
'Home'+
'</header><!-- /header -->');
}
function appendJQMFooter(left, right) {
$('footer').replaceWith('<footer data-role="footer" data-theme="f" class="jqm-footer"><p>©'+left+'!</p><p class="jqm-version">—'+right+'</p></footer>');
}
Note: for JSfiddle, it require 'Framework & extension > No wrap - in <head>'
For stand alone version, it worked fine with html head calling js/main.js containing the JS. Then html body with appendJQMHeader() & appendJQMFooter(). See the fiddle :)
Instead of invoking the trigger method, I executed the below command, and it works well.
$('#pageHome').closest(":jqmData(role='page')").trigger('pagecreate');
I'm creating a ASP.NET application where shows you a quiz. This quiz should be show to the user displaying question by question.
I mean, appears the first question and when he press the button next, hide the current question element and show the next one until it has no elements to show.
By the moment, I just have accomplish show all of them in MVC4. I really have not to much experience using JQuery.
<div id="questions-container">
<div class="question">
...
</div>
<div class="question">
...
</div>
<div class="question">
...
</div>
<div class="question">
...
</div>
</div>
Can you orient about how can I implement this feature? Thanks
Default all questions to display: none;, show the first one when the page loads (or with another class .question.first that has display: block;, and then the next button can show the next question with:
$("#questions-container").find(":visible").hide().next().show();
I know you have already got an answer to this. I do something very close to this in one of my sites. This counts your divs and shows the next button until you reach the last div and then it removes the button. I rewrote it to include your code above.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
var Called = 1;
var TotalDiv = $(".question").length;
$(".question").filter(":first").css("display","block");
$(".reveal").click(function()
{
Called++;
$("#questions-container").find(":visible").hide().next().show();
if(Called == TotalDiv)
{
$(this).hide();
}
});
});
</script>
<style type="text/css">
.question{display:none;}
</style>
</head>
<body>
<div id="questions-container">
<div class="question">
division one
</div>
<div class="question">
division two
</div>
<div class="question">
division three
</div>
<div class="question">
division foor
</div>
</div>
<input type="button" class="reveal" value="NEXT" />
</body>
</html>
I've developed an app for ios and android using phonegap. It's a dictionary app and it will display result in multiple tab (the tab is a div, every div will display different content). I use my own code so that only one div is shown at any time. Now I want to include jquerymobile so that I can apply a animation/transition when switching to other div.
So I add the data-role="page" to each div, which I assume will work immediately(like sample code below). But something is not right.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<table id="headergroup">
<tr><td>
<input>.........
<img>.......
</table>
<wrapper>
<div data-role="page" id="tab1">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page1 content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
.........other div......
<div data-role="page" id="tabN">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>PageN content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</wrapper>
<div id="footer>
<img .......>
</div>
</body>
</html>
Supposely, my app should display the div(s) in the wrapper only. But the problem is, now my app will display the div with data-role=page in full screen and on top of other element (my app header and footer were not shown).
Is my implementation correct? How do I overcome this problem? Thanks.
You may get by with this on the first page, but on all other pages you are loading in via JQM-Ajax (default), you will only grab what's inside your first(!) div-data-role="page" from the page you are loading. Everything else (table, 2nd, 3rd page-div will not be loaded, because it's outside the page-div.
Have a look at the JQM docs on page anatomy and linking pages.
JQM is based on page-divs, so also in your code the page-div will get most "JQM attention" being set to fullscreen size and of cource hovering above everything else.
To use JQM you will either go with
Single page layout = page by page
Multi pape layout = multiple pages contained in one document.
Since you are using Phonegap, which I think bundles everything into a single file eventually, you may be better off with multipage. There is also a subpage widget or multiview, if you need to load documents with multiple "nested pages" from your initial page.