My problem is that I want to style my CSS page to make it looks like in "print preview". I used #media print CSS to make rules for printing. But I don't know exactly how to design my HTML page, for example: I set div size as A4 format, but if text inside this div is longer than A4 height how can I move some part of div to other "A4" div?
If text inside this div is longer than a4 height how can I move some part of div to other "a4" div?
You need to use page-break in CSS to make the content come correctly against the pages. There are two properties, which help you achieve this: page-break-after, page-break-before, page-break-inside. You can refer to MDN for more information about that.
I don't know exactly how to design my HTML page.
Make sure you don't use position, and float inside your pages. That's a good way. Keep only those that are required and use display: none to hide others.
Related
I have 2 divs on a page and the first div has text content only.
Currently, when the content of the first div overflows it gets truncated since the CSS for the first div is:
.one {
overflow: hidden
width: 100%;
white-space: nowrap;
}
But on an overflow, could I make the overflow text appear in a 2nd div?
For example, let's say the text content in the first div is "Hello there" and it displays "Hello" but "there" is cut off because of overflow hidden, can I make "there" appear in a 2nd div?
I'm sure this is not out the box behaviour but I wondered if its possible or if anyone knows a lib to do this. Thanks.
The native capacities of CSS do not allow for this kind of behaviour, since it is quite special.
If you want to manipulate the text so that it gets displayed in different parts of your DOM, depending on a determinate critera, you will have to use Javascript to do so.
Use Javascript to create a kind of parser that detects if the text matches the criteria needed to separate them, and if it does so, manipulate the content so that it is displayed in the correct element.
EDIT:
If what you are trying to do, though, is basically format differently the first line from the rest of the text, what you might need is simple the ::fist-line pseudoselector.
This way you can set the first line to have a determinate size, color, etc.Notice though that only a certain amount of properties can be applied to this selector.
I had this exact problem tonight. I have 2 divs side by side, I want the text of the first div to spill over into the 2nd div if needed. I solved it with z-index, make the div with the text that spills out have a higher z-index than the adjacent one that you want to spill over.
I generate a PDF File from a HTML Source. Each Page has a height of 1402px. First solution was, a DIV for each side.Placing Footer and Header was easy then. Problem is: if the content (dynamically generated) doesn't fit the page div, it overlaps the footer and in worst case, destroys the layout. So all the Pages and their content goes into one div, but how do i add 300px of margin, which I need for Footer and Header?
I tried to display my problem in this picture:
The whole white thing is one Div.
The black lines display each page in the Div but they are not in the code.
The green lines display where I need a margin so the red content doesn't overlap, but continues on the second page instead.
Red -> current situation
Blue -> what I need
I can also use Javascript in the document.
Can you help me?
http://i.stack.imgur.com/iMFBb.png
Here is the fiddle of how its solved until now:
https://jsfiddle.net/8yvpavd7/1/
I suggest you ensure that the height of your page is lower than a specific limit. Since you are using absolute sizes and positioning anyway you can easily check that using jquery (example:)
$('#page1').height() / $('#page1').outerHeight()
Since we don't know anything about your datastructure, i can only assume what you need. The following fiddle should explain what i'm talking about https://jsfiddle.net/rkvs5s1z/2/
You could remove parts of your content until it fits the height. You need to store the removed data.
The fiddle does not store the data in the correct direction - it should only demonstrate how this could work
Afterwards you append a new page including your headers and footers.
You might need to repeat these steps if the content of one page is bigger than two pages.
I would also suggest to improve the shown example by not slicing single characters but complete words. If your pages contain html you might also need to check for html code and correct nesting.
I have a fluid-width div filled with thumbnails from a JSON query, and I am attempting to evenly distribute these thumbnails across the width of the div. These thumbnails must be allowed to wrap and reflow if the width of the enclosing div changes, and may vary in x- and y- dimensions, as well as in the number of thumbnails loaded.
I have found using text-align: justify; and display: inline-block does exactly what I want with static HTML elements, like so:
http://jsfiddle.net/skywalkar/gUcvq/
When I do the same thing with content fetched via JavaScript, however, it reverts to plain left-justified alignment (if it even renders at all-- Chrome and Firefox render it as left-justified, but IE seems to give up displaying the thumbnails altogether!):
http://jsfiddle.net/skywalkar/KdLyx/
My question, then, is this:
How can I force the JavaScript-loaded thumbnails to be horizontally justified like the HTML version?
You have 2 problems here. First, your span is outside of the div (honestly, you don't even need the span, just use the :after pseudo element).
Second, justification relies on whitespace. You're inserting your images without including a space/newline/etc. That's why they won't justify.
http://jsfiddle.net/KdLyx/7/
I want to print the contents of a div(a table containing info) using jquery. I was wondering if it's possible to resize the table in order to use the whole A4s width.
Thanks a lot
Do you mean you want to use a bleed to print right up to the edge of the page, or to simply have your navigation and other elements disappear so the width can take up the whole printing area (but still have page margins)?
I don't believe browsers support full bleed printing.
However, if you just want to use the full area with margins, most browsers should auto-size to the largest element on the page. So, use a print stylesheet.
For testing, Firebug can conveniently show the print view in the browser, or you can simply remove the media="print"
Hide other elements and make the div take up the full width of the viewport
Make sure to use width:auto; on that for best results. Since paper and screen are very different proportions, you don't want the browser mistakenly sizing-down your text because both are defined in pixels and it thinks you want it to preserve proportions.
me and a friend are working on a html app for smartphone (part of an internship).
Im trying to get a webpage to display in a seperate div. I can get this done easily enough with an iframe but the problem is the divs width can be expanded.
What would be the simplest way to get a webpage in a div that resizes to fit the dimensions of the div it is in?
My mate is doing all the javascript and is using jquery and I am focusing on the html and css work. I have very little experience with js.
You can use CSS or width and height attributes of an <iframe> to match its width with the div it is placed in. But whether the webpage resizes exactly to fit in the div so that you don't get horizontal scrollbars depend upon the webpage itself. It will fit if the div is big enough for the webpage or if the webpage has a fluid layout i.e. the width of its contents is defined in %.
Another way would be to send a server side request to another server, then use an XML phaser to get only the body content and then write that HTML to the div. Then you would have to adjust width with css and/or javascript.
But I would advice to do with Iframe, because it's its nature ;)