Split HTML into pages, each with header and footer - javascript

I have an HTML document that I need to convert to PDF. The problem is that I need to have some header and footer on every page of the converted PDF document.
Because content has a different size (some tables), I can't hardcode height.
The app is written using ASP.NET if that matters.
Can you please suggest some way to handle that problem?

Related

HTML Page - same top menu (header) and footer in all HTML pages?

I am developing a static website (don't need any server-side support. I have Basic HTML and JAVAscript) which have a number of pages.
all pages have the same top menu (header) and footer.
what is the best practice considering SEO?
I have two options :
Option 1. Should I copy header.html & footr.html code on every HTML page?
Option 2. Should I include header.html & footer.html on every HTML page?
which Option is better? Does any of them affect SEO?
if Option 2 is the right solution then my follow up question is "How to include common header.html and footer.html ?" I don't want to use PHP/ iframe.
For easy client end work , I could have suggested jquery or javascript for client end rendering of header and footer, but you are looking for SEO friendly web pages.
Considering SEO you need to have rendered HTML pages with header and footer so crawlers can read it (and above solution won't work for that as it renders extra stuff after page load). So either you go for copying and pasting header footer to each page or use PHP/.NET etc for server end rendering that will handle header and footer while rendering.
How often do you change the content of the header? When I was starting with web design I used to include the whole menu with/copy paste, and then do search/replace across all files. But this was before PHP and JS were around.
Content-wise, it should be the same. There could be a difference in the number of HTTP requests and load time if you are including something from another file.
These are so small speed differences that I don't think that it will make any difference SEO-wise.
I personally like to use PHP to include content but you have said that this is not an option for you. Depending on whether you want to use jquery, pure JS, or some other way there is a bunch of different approaches.

Render HTML with page breaks in browser

I have dynamic HTML generated based on user entered content. I want to show that HTML as A4 pages. The content may span to any number of pages as it is continous.
A code pen like this one https://codepen.io/rafaelcastrocouto/pen/LFAes helps how to show html as A4 pages. This is quite good but my problem is that I don't know in advance how much content one page can have. Will the content be rendered in first page tag or two page tags or more, I don't know since this is user generated content.
<page size="A4">
<!-----Dynamic HTML comes here, can confine to this page or overflow out of that---->
</page>
How do I show html structured into multiple pages in this scenario?
I know a hint that it might be possible with use of Javascript or query to create multiple page tags and place html chunks inside that but I would prefer CSS way of doing it as JS mechanism is susceptible to inaccuracies due to calculation of heights.
Is that possible?
Also how about using page-break-before and page-break-after property of CSS. I have used that property but that renders only in PDF, I want to show that in HTML in browser, is that possible with that?

How to make iframe content to be indexed as a part of it's parent container?

I have a website that I update some of it's content on monthly basis.
The content for those pages include tables in iframe format. Now when I search for that particular keyword i see that google is indexing my iframes individually.
Therefore their contents doesn't add any value to the main parent container.Below you'll see one the pages with iframe.
http://www.reguluspc.com/parts/case.html
I want to keep the content intact but keep the table in iframe and update the table only. To avoid duplicated content, I keep the iframe but it doesn't look good as it doesn't have any navigation or proper CSS file.
Any ideas how to make the iframe content to be indexed as part of the main parent page?
Cheers.
As these are two separate urls, they will be indexed as separate content.
Why are the tables being loaded from iframes? Do you have any server-side languages like PHP, JAVA, .NET, etc? Your might also have *.shtml which would allow you to do server side includes for content like that.

Trouble inserting a javascript variable into an HTML tag [duplicate]

I want to add twitter card meta tags to my website. i cannot add static tags since the content attribute in the meta tag has to change dynamically.
Plz help if someone has a solution.
You can't, at least not in any way that Twitter is going to recognise.
When Twitter fetches the page, it is always going to get the meta elements that are in the HTML, never ones added with client side JavaScript.
If you are changing content dynamically then make use of the history API to update the URI, and make sure that the server will generate all the content for each URI when the URI is used as an entry point (you can still use JavaScript to generate the content when moving from another page on the site).
You can generate pages dynamically (server side) as long as you don't intend to change them after. Think about the process in the same way you would build landing pages for SEO purposes. Twitterbot is in many ways really similar to Googlebot and similar indexers.
See https://dev.twitter.com/blog/twitter-cards-tips-tricks for a few examples of sites doing this.

Break the HTML file into fixed size pages

I would like to display the content of a HTML file,in the form of book with many pages(not side by side pages, but one after the other, like PDF), when opened in some browser. Say, i define page width=600px and height=800pz, the content should fit into one page and the remaining should overflow to next page and like that. And it should work for any HTML file.
How can i break the content into pages ? In any way XSL helps me to achieve it ?
This should be theoretically possible by putting the document into an iframe that is 800 pixels high, and changing the scroll position inside that iframe (Page 1 = 0px; Page 2 = 800px; Page 3 = 1600px ....)
The HTML page in question would have to be on your domain, though.
There is no proper way to actually display those pages side by side, though. You'd have to clone the whole document for as many times as there are pages, and display as many iframe s with the page scrolled to different positions.
Depending on what you want to do, it might be better to use a different technology for this (e.g. having a browser print out a web page to a PDF file, splitting the content into pages in the process.)
If you want PDF style functionality, convert the html on the fly into a pdf and then embed it in the page. You can specify the width and other params when you are generating the pdf.

Categories

Resources