I am using jsPDF to generate PDF's out of dynamic HTML content of my web-application.
Right now I am trying to give those PDF's a unique layout. I want to add a "header" & "footer" for each page of my PDF. jsPDF generates page breaks automaticly and there is no command to act on those.
Is there any known work-a-round to implement a fixed header/footer for each page without depending on doc.addPage();
Looking forward for any help or ideas.
See https://github.com/MrRio/jsPDF/pull/260
You can use HTML's elements <header> and <footer> for that purpose, for example:
<footer>
<div style='text-align:center;'>Page <span class="pageCounter"></span>/<span class="totalPages"></span></div>
</footer>
Related
In creating a page with blog-style content in the middle section, it would be good to use embed/iframe to load content from a separate (html) document into this section. Such a solution would make it more straightforward to update the blog. However, the question is if it's possible to do this without PHP and MySQL (both of which are beyond the scope of this coder).
The code as it stands goes something like this:
<section id="bio">
<p>Name</p>
<ul><li>Some data</li></ul>
</section>
<section id="blog">
<iframe src="blog.html" style="width:100%;height:100%;border:none;"></iframe>
</section>
<section id="links">
<ul><li>Links listed here</li></ul>
</section>
Now, with a blog of some length scrollbars pop up around the blog section. Would it be somehow possible for the iframe content to be considered an intergral part of the page so that the entire content of the iframed file appears prior to the last section, and so that the scrollbars include the entire page content (rather than only the iframe content)?
Iframes can't do that by definition.
However, there are some libraries to help you resize the iframe according to it's content.
Check this: https://github.com/davidjbradshaw/iframe-resizer
You'll need to place a script inside your blog.html and other one in your host page HTML.
I'm wondering, is it possible to use HTML/CSS to create a page break before an element if there is a page break in the middle of it. For example, now when i'm saving as PDF a table is split into two different pages.
Any ideas, thanks?
-Timo
You mean this:
<div style="page-break-before:always"> </div>
Here can you read more: http://www.w3schools.com/cssref/pr_print_pagebb.asp
or here:
https://css-tricks.com/almanac/properties/p/page-break/
Previously I'd lay out a main container on an HTML page to wrap most of my body content in. for example, an 'about' page:
<header>
<!--header markup -->
</header>
<div id="container">
<!--articles, images, etc for the about section -->
</div>
<footer>
<!--footer markup -->
</footer>
would HTML5's <main> tag be ideal to take the place of my 'div id="container"' in this case?
In a word yes.
The main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.
w3c specs
See here for more info
You should use it for content that is unique to the page. So yes, headers and footers are naturally left out. From there on, it depends what else you have there. If there's a sidebar, for example, with template-loaded content that is common across many pages, you should consider leaving that out as well.
Just replace the tag of most important part of your website with <main>. Mostly <main> will replace <section>(In your case, <div>, and originally it should be <section>). Notice that I put emphasis on the word part because <main> is not for sectioning your document, its purpose is just: point out what's the most important part of your website/application.
Here's the way I've set-up my site. I have a page called "news.html". The content of this page is just an iframe with a fixed size. The iframe links to "innernews.html", which is the actual content I'm trying to display. I have it set-up this way to keep every page consistently sized. The iframe prevents the height of the page from expanding due to extra content, and is scrollable.
How would I create a link targeting a specific element/header within my "innernews.html" page? If there isn't a way to achieve this, I'll remove the iframe and just plug content straight into "news.html". But still I wouldn't know how to create a link that targets a specific element/header...
You can link to an element (on another page or on the same page) only if the element has the id attribute or it is an a element with the name attribute. In both cases, put the fragment identifier #foo at the end of the URL in the link, where foo is the value of the attribute.
If the page being linked to does not contain such an attribute, and if it is outside your control, you are out of luck
Basically, you can simply create a link to specific header of a page:
<a name="your_header_name"></a>
<h1>Header Text</h1>
...
Link to the header
I strongly recommend you to remove iframes from the page if there is no reason to keep them. Iframes can complicate your life when you're trying to do something not trivial.
Have you considered using a container such as:
#newsContainer {
overflow: scroll;
height: /*whatever*/
}
Every web page load from top to bottom means first my header will be loaded then content and finally footer. How can i make it to load from bottom to up.means first footer then content and then finally header content.
Are you getting what i am trying to say.??
OR
to make it load from right to left OR
left to right..
This is probably one of the more bizarre questions I've seen here...
You cannot change the order in which the browser loads the file, it will always start at the beginning and read to the end. However, if you change the order of the file such that the footer is first and the header is last, the browser will render it in that order. As long as the CSS places each element in the correct place, it should work.
This will probably have some strange side effects since the browser will have to rerender or move elements several times as it moves the footer down the page to make room for the elements above it.
Is there really a need for this? Web pages generally load fast enough that users won't notice what direction they load in, and if your page isn't loading that fast, then I would focus on finding out why instead of trying to render it in a different order.
A web page is HTML + additional files.
The HTML file is loaded and read start-to-finish. When it gets to a point in the file where it requests another file (such as CSS, .JS, an image, etc.) it then sends a request to get that image.
You have control over that in that you can rearrange your HTML any way you want to.
What you don't have control over is how long it takes to request and then retrieve each of the individual files.
If you want full control, then you pretty much need to load everything but keep it hidden, and then reveal the items in the order you want them to appear via javascript and CSS.
All that said, though, the better answer is "No. You can't. That's just how the web works".
If this is for some kind of cool effect on your page, you could check out Page Transitions. These only work in IE though. If that is the case, it looks like you want the Wipe effect.
If you want it to just look like its loading from bottom to top then you could hide everything with css in the header and then have javascript unhide them starting from the bottom of the page - but I really don't know why you'd want to do this. Can you give us some more information on the effect you're trying to create?
Visually, you could get the sort of effect where one would see the content before the header by putting the header after the content in the HTML output then use CSS to make the header appear first visually.
If you want to scroll your content in somehow, I'd check out jquery and animations.
Assumption 1: Load content before styles/javascript.
In this assumption you care about the page loading first THEN the css/javascript executing thus allowing the user to get the content before all scripts/styles load and thus speed up the usability of the page.
To accomplish this put the style/script tags as the last elements in your body.
Assumption 2: Bizarro-world loading.
In this assumption you want the footer loaded/displayed first, then content, then header in that exact order.
1) The html head element will load before the body. No way to change that. Header = page header in my wording.
2) Use the following html pseudocode
<html>
<head></head>
<body>
<div id="footer"></div>
<div id="content"></div>
<div id="header"></div>
</body>
</html>
And in your css float everything to the right having them take up 100% width. This will cause the page to load backwards but when it is displayed it will be displayed appropriately.
#header,#footer,#content { width: 100%; float: right; }