In my application, the user is allowed to define his own headers and margins for printing.
For the header, the user can provide the following two fields:
(a) Page Top Margin in mm (from top of the page)
(b) Header Margin in mm (from top of the page)
The fields (a) and (b) are as shown in the figure below:
For example, if the user provides (a) as 10mm and (b) as 100mm, then the height of the 'Header Region' would be 90mm.
Now the content within the header needs to be aligned at the top of the Header Region.
Is there a way to set the Header Region Height and to top-align the content within this header region.
At present, i am doing the following for the header-html option:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
body
{
border:0;
margin: 0;
padding: 0;
height: 90mm; //in actual program, this is set dynamically in PHP
}
</style>
<script type="text/javascript">
function subst()
{
//process the GET parameters and accordingly set the Header Region text info
}
</script>
</head>
<body onload="subst()">
<div>
//text
</div>
</body>
</html>
The margin-top option is being set as 100mm.
I have tried setting vertical-align: top for the body CSS, But that too did not work.
The final output that I achieve does not seem to have the Header Region content vertical aligned in either top or middle. It is somewhere a little above the middle of the Header Region.
Edit: This fix seems to be required only when wkhtmltopdf is installed in a Windows based system.
After lot of trial and error, I observed that the following logic seems to be work:
The body element of html-head needs to be set to an height 1.33 times the actual height of the Header Region. (Why? I do not know. This could be due to some QT or wkhtmltopdf way of rendering, but it actually works for all cases, irrespective of the lines in the Header Region content).
The immediate (and the only) child element of the body is set to 100% height and to hide the overflowing content
So, the changed code (for the above example) for html-head looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
body
{
border:0;
margin: 0;
padding: 0;
height: 120mm;
/*
In the actual program this height is calculated dynamically in PHP as
($headerMargin - $topMargin) * 1.33
*/
}
#master-div
{
overflow: hidden;
height: 100%;
}
</style>
<script type="text/javascript">
function subst()
{
//process the GET parameters and accordingly set the Header Region text info
}
</script>
</head>
<body onload="subst()">
<div id="master-div">
//The actual content goes here
</div>
</body>
</html>
I have checked this for atleast 7 to 8 different paper sizes (including setting custom page-width and page-height. Also checked with different Header Region content size (ranging from 1 line to 20 lines).
The only catch is that this logic of 1.33 times the header region height seems to work only if the Header Margin(b)/Footer Margin is less than or equal to one-third the paper-height. If the margin height goes beyond that the content gets clipped as the margin-height increases. But having such large header-heights would generally not be required, i guess.
Related
Using paperjs if I rotate p.view.rotate(update.deg); it is working fine with out issue.
If I refresh the page and call the above function p.view.rotate(update.deg); onload then the view is different. it is displaying a slight zoom.
default image rotation
After reloading the page I am rotating p.view with the previous value. then it is displaying as
Here is my js file
https://github.com/muralibobby35/annotateJs/blob/master/opentok-whiteboardnew.js
I was not able to run your code but I would suggest, for an easier project state preservation, that you use transformations (scale, rotation, ...) through layer rather than through view.
That would allow you to easily export/import your project whithout having to manually restore state by calling view.rotate() like methods on window reload.
Here is a fiddle demonstrating the solution.
It simulates window reload by exporting/importing a project from one canvas to another empty one.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Debug Paper.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.min.js"></script>
<style>
html,
body {
margin : 0;
overflow : hidden;
height : 100%;
}
main {
display : flex;
height : 100vh;
}
canvas {
flex : 1;
border : 1px solid;
}
</style>
</head>
<body>
<main>
<canvas id="canvas1" resize></canvas>
<canvas id="canvas2" resize></canvas>
</main>
<script type="text/paperscript" canvas="canvas1">
// draw a square
var rectangle = new Path.Rectangle({
from: view.center - 50,
to: view.center + 50,
fillColor: 'orange'
});
// rotate layer rather than view so transformations are persisted when exporting
project.activeLayer.rotate(30);
// export datas and store them in global variable just for the demo, to simulate a page reload
window.exportedDatas = project.exportJSON();
</script>
<script type="text/paperscript" canvas="canvas2">
// import the exported datas
project.importJSON(window.exportedDatas);
// see that rotation is preserved
</script>
</body>
</html>
I am using go-gin and have a re-direct
c.Redirect(http.StatusMovedPermanently, myurl1).
Can I add a timer and call another re-direct once the first one completes in the same handler?
c.Redirect(http.StatusMovedPermanently, myurl1)
// sleep for 5 seconds
c.Redirect(http.StatusMovedPermanently, myurl2)?
Can I pause a handler's execution for a few seconds?
Simply put inside your page:
<meta http-equiv="refresh" content="5; url=http://example.com/" />
Another solution with javascript:
<script type="text/javascript">
setTimeout("location.href = 'http://example.com/';",5000);
</script>
your html logout page with 3-d party logout page inside
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="refresh" content="5; url=https://localhost:8080/login" />
<title>Test Layout</title>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
}
</style>
</head>
<body>
<div id="content">
<iframe width="100%" height="100%" frameborder="0" src="http://example.com/" />
</div>
</body>
</html>
If you want to redirect once the page is loaded, you have to do that in javascript.
The base of HTTP protocol is 1 query, 1 answer: "Get me this page" -> "Here it is".
You can't answer once to a query, and one second later and say "Oh, now you have to display this other page" (that's how the protocol was defined).
Therefore, if you want to redirect to another page after a short break, you have to insert a javascript call at the end of your file: Once the first redirection is done, then JS will execute itself, and you can put something like "Wait 5 seconds then call for this second page".
I have 48 coordinates/markers in 1 column/row.
When I double-click in that row and open preview KML link, it shows 48 coordinates.
But when I create my own map and show that marker using fusion tables and SQL queries,
the map only shows 3 markers.
Why is the output different in Fusion tables versus my own map?
Or, is there any technical limitation when using Google Fusion and Map APIs
Thanks Guys
------------------EDIT-------------------
in coordinate column [Koordinat Pohon] in rowid 17001 actualy it has 48 coordinate but it only show 3 coordinate in my own map.
TABLE ID : 1O5aIPnHBCimWsYg0gOXIeRH6eL-6byD95Nd2pdXR
ROW ID : 17001
<!DOCTYPE html>
<?php
$id=$_GET['id'];
?>
<input type="hidden" value="<?php echo $id;?>" id="rowid"/>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Fusion Tables queries</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var rowid=document.getElementById("rowid").value;
var map;
function initialize() {
var centerMAP = new google.maps.LatLng(-7.402438, 110.446957);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: centerMAP,
zoom: 16,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var layer = new google.maps.FusionTablesLayer({
query: {
select:"Koordinat Pohon",
from: "1O5aIPnHBCimWsYg0gOXIeRH6eL-6byD95Nd2pdXR",
where: "rowid = "+rowid
}
});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
<?php
?>
When I use your code I don't see 3(as mentioned) or 48(as expected) markers, I see 10 markers.
The reason may be found at
https://developers.google.com/maps/documentation/javascript/fusiontableslayer#limits
When looking at the map, you may notice: The ten largest-area components of a multi-geometry are shown.
The KML is a multi-geometry, the number of features that will be shown is limited to 10
What you can do:
store only single points in a column
ommit the FusionTablesLayer and instead request the geometry via AJAX and create the markers on your own
I'm using wkhtmltopdf 0.10.0 rc2 for Mac
I have an html like this one :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="print.css" rel="stylesheet">
<style type="text/css" media="screen,print">
.break{
display: block;
clear: both;
page-break-after: always;
border :1px solid red
}
.page-breaker {
display: block;
page-break-after: always;
border :1px solid red
}
</style>
</head>
<body>
<div class="container break">
page 1
</div>
<div class="page-breaker"></div>
<div class="container">
page 2
</div>
</body>
</html>
I simply try :
wkhtmltopdf test.html test.pdf
But it didn't produce a page-break, I doing something wrong ?
Possibly unrelated as your pdf generated ok with an earlier version of wkhtmltopdf. Either way, I had similar issues with page breaks not being applied correctly. My problem was parent elements of the page-breaked element having an overflow other than visible.
This fixed my issue:
* {
overflow: visible !important;
}
Of course, you can be more specific about the tags this applies to ;)
try using as follows
<div style="page-break-before:always;">
//your content
</div>
this should work.
I am usinf wkhtmltopdf 0.12.3.2
For me page-break-after works when a border is set, and when the breaker div is an immediate child of body.
.page-breaker {
clear: both;
display: block;
border :1px solid transparent;
page-break-after: always;
}
break-break-before does not work.
--print-media-type not needed.
I am using version wkhtmltopdf 0.12.0
For me, page breaks ONLY work with --print-media-type.
Without it, page break protection for images works, but not page-break-after or before.
I had to make a special css file for print media to get it work.
Setting the paper size to 'A3' or using the 'overflow: visible' didn't make any difference.
Also see WKHTMLTOPDF with pdfkit on Rails ignoring table page breaks
It is working fine after remove media print
Before:
#media print {
.page-break { height:0;page-break-after: always; margin:0; border-top:none;}
}
above code not working in new version.
Now
.page-break { height:0;page-break-after: always; margin:0; border-top:none;}
Update the wkhtmltopdf to version 0.12.5. Page break issue not occuring for me after updating.
Use --disable-smart-shrinking to avoid empty white space ( If you have any)
Use --zoom <value> to avoid page page (If entire page not showing)
Noticed a problem with a simple splash page using jquery.cycle.
http://www.rynicdesign.com/
With firefox (firebug installed), the rotating images will not display the first time the page is accessed (without cache - ctrl-f5) yet will load properly on subsequent requests.
Not seeing this condition with other browsers (ie, chrome, safari).
Any ideas why?
(page is small - but here is relevant info)
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css&2.8.0r4/build/base/base-min.css" />
<link rel="stylesheet" type="text/css" href="/templates/splash/css/splash.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.73.js"></script>
<script type="text/javascript"><!--//--><![CDATA[//><!--
$(document).ready(function() {
$('.middle').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
autostop: 1,
timeout: 2500 // milliseconds between slide transitions (0 to disable auto advance)
});
});
//--><!]]></script>
</head>
<body id="page">
<div id="doc4" class="main-frame">
<div class="top"></div>
<div class="middle" align="center">
<img src="/templates/splash/images/rynic-design.gif" alt="Welcome to RYNiC Designs" />
<img src="/templates/splash/images/enter.gif" alt="click to enter website" />
</div>
<div class="bottom"></div>
</div>
</body>
</html>
And here is splash.css
html, body, #page, #doc4 {height:100%;margin:auto;}
.top, .middle, .bottom {clear:both;overflow:auto;display:block;}
.middle {background-color:#ffffff;overflow:hidden;}
.top, .bottom {height:35%;}
.top {background: #ffffff url(/templates/splash/images/left-bg.gif) repeat-y scroll top left;}
.bottom {background: transparent url(/templates/splash/images/right-bg.gif) repeat-y scroll top right;}
#doc4 {background:transparent url(/templates/splash/images/right-bg.gif) repeat-y scroll right bottom;}
I've seen this problem before (this is an excerpt of my earlier answer to Jquery Cycle + Firefox Squishing Images).
The problem is that Firefox fixes the img element's size once and for all at the point the display style is set to none (when you start cycle). So if the image hasn't finished loading (which it probably hasn't on an initial GET request), its height and width style attributes are small (I'm not sure exactly what they correspond to - perhaps the size of Firefox's image placeholder, though in your case it comes up 164 X 16 pixels).
On subsequent requests, Firefox knows their dimensions since they're in the cache (I'm guessing a bit here: maybe it just loads them before cycle can set display: none).
You can solve this by specifying your middle div's size in advance:
#middle {
width: 974px;
height: 110px;
}
(That is, as long as you're not doing anything complicated with your images - my web site is dynamically loading images of varying size so I had to perform additional footwork.)