I want to print a page on my website via javascript, but it prints in two pages instead of one. What should I change?
All my CSS is inline.
window.print();
Here is my HTML: JSFiddle
Its only table based, but it still is not working. There is no height assigned to it.
A screen has 72ppi, creating things in HTML sticks to this rule as it is on screen so the only thing you can really do is reduce the amount that's in your table or print-screen your table and print it as an image so you can re-size it.
Related
I am trying to create a drop down menu. The smaller DIV inside the main DIV that contains an image gallery does not load properly when the website is live (space is there but images do not show up). I am looking for the proper code to make this work properly. This is the code I am using for the drop down of the main DIV with the smaller image gallery DIVs inside.
Read More
The smaller DIVs with the image galleries work fine when the website is live until I change the beginning of the code to . I would like to get the drop down to start off closed and not open when the page is visited.
I am going blind here, but I am assuming that your div does not have height. Give height property to a div and that should solve the problem. Its a common mistake.
Please leave us some code sample next time. Ty.
Don't see your code yet, but here is some possible help.
With showing or hiding HTML elements, like div's, you are dealing with visibility and display. One hides the element altogether and the other takes up the space but does not display the inner elements.
You can read more about display and visibility here:
https://www.lifewire.com/display-none-vs-visibility-hidden-3466884
I am using this tablescript to display a virtual table but for some reason after a specific point problems occur.
On Google Chrome after the top value (The position value where the row is displayed in the parent div) of 1.677715e+07px (16777150px) is exceed the rows are missing its border-bottom for some reason. This happens on the newest version of Chrome (v69). On version 68 the rows at this top value and more arent rendert at all.
They are still there, you can see them via the inspect tool on the browser.
Does the number 16777150 has something to do with JavaScript or Google Chrome?
On Edge browser something different happens. If the parent div of the virtual table exceed the height of 10737418px, the rendered height of this div will be only as big as its content height So if the last row is ending at top 900px, the table will be 900px height too. If you scoll further down and the new row is rendert, the div will get bigger too. But in the inspector you can see the right height value in this element and it doesnt change at all.
To post this link I need this code..
Here is the Code exampel.
If you want it to test it yourself, the .js and .css are in the github of this tablescript in the example folder.
Maybe this hase something to do with the browsers or JavaScript so I ask this question here.
I dont know how your table is being displayed.
But it's not a good practice to display this much entries at once. Try to use pagination.
Have a look at https://datatables.net/ and try to dynamically load table entries (like pick it up from database or something like this)
You had mentioned that tablescript also do the same thing and i see that after many records it display so long empty space without data.
But here, I want to confirm with you that if you use the pagination and display 20 rows at a time then it should work without any issue.
Then why you want to display large number of records?
If you have any issue with 20 rows then try to let us know about that.
We will try to find the solution for it.
Regards
Deepak
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.
Hey all I am running into an issue trying to print out an image on a page. I'm using the simple Window.print() method in javascript to get this done however in the print preview the image doesn't maintain its border. I can mess with the margin settings in the print dialog that shows up but I can't ever get the whole border to show up.
Does the method autoscale images or something? I'm not sure why it would change the border setting on that image.
The window.print() method doesn't autoscale or modify document in any way. Consider adding a Print CSS (try this tool) to get this right for the printed format without affecting what's already being displayed on the screen.
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.