I'd like to style a lengthy HTML document I intend to print (/ convert to a PDF) so that, on a particular physical page, the body is styled in one way, while on every other page, it is styled another way. Specifically, I want the page which contains a particular paragraph (say <p id="dramatic-scene">) to have a different background image from the other pages.
(The document itself is not structured for particular pages - instead of having a div for each page, we have a single container for the full content of the piece. If it were, we could probably just make the div for the page cover the entire dimensions of the page and give it the image - but I'm hoping to avoid having a rigid structure for the pages.)
In Selectors Level 4, there's a :has() pseudo-class (although part of a working draft, so it's not supported anywhere yet). Is there anything similar which could specify a page to apply CSS to? Something like #media print and (page-has: #dramatic-scene) {}. I doubt there is - some quick searching didn't find anything - but I figure it's worth asking here.
More realistically, is there any way I could simulate that with JavaScript? That'd be a fine solution for my use case. I couldn't find any info about that in searching though - any JS discussion related to printing seems to be about making buttons to print, swapping screen for print stylesheet before printing, etc, not making the page style react to the visible content.
Related
We use jsPDF + html2canvas Javascript libraries to export HTML to PDF without the need for Native Browser support. Some of our big corporate customers use browsers which do not have Print to PDF functionality.
The current solution works pretty well, it creates a container DIV element with "overflow:hidden" and positions the HTML that is being exported such that only 1 page is visible, since we know exactly how many pixels wide/tall the page should be, then we use the library to export the view at that moment, then reposition things for the next page by scrolling down (actually we use a negative top margin, since html2canvas doesn't respect the "scrollTop" property).
The problem, though, is that this solution does not handle well at the borders of the pages. Images and text will get cut in the middle, and then continues on the next page. The end result looks weird, but at least there is nothing missing.
Is there a way to prepare this HTML in such a way that it will behave nicely at the borders? I am given an HTML element that when placed into an element of pageWidth pixels wide needs to be cut into pieces of exactly pageHeight pixels tall. I can modify the HTML any way that I want, b
I feel like there should be some solution, since I've noticed using the native PDF Print on Chrome solves this somehow because the output looks fine there - it somehow moves images around so it doesn't get cut off.
Here is a sample JS that I created that demonstrates how my code will create multiple pages.
http://jsfiddle.net/56u9Lxgt/
Basically, you have to check the actual page size always before adding new content.
In this link the answer:
jsPDF multi page PDF with HTML renderer
I'm trying to understand if there is an efficient way to have a preview of potentially long HTML content.
For example, I have a very long article with markup and tables, with tables sometimes being the very first thing in the article. I want to be able to efficiently render the first 300px (in height), which upon a click I will display in a scrollable dialog.
My current solution was to strip all HTML tags and just render x number of lines in plain text, however this solution is not acceptable as it fails pretty badly on tables.
On a page I might have multiple elements with long html content previews, so I would prefer some other approach than just have CSS restricted height blocks, but with all content rendered by the browser, as I assume this will be quite inefficient.
I am trying to adjust the soundcloud embed widget but am having some difficulty. I would like to do two things:
1) Override the CSS for the div.sc-truncate ( overflow: hidden; white-space: nowrap ) which contains the text "Wanderlust Basement Tapes" but will currently not display the entire text due to the aforementioned text. I have added my own style to the site stylesheet with !important but they seem to have no effect which I think has to do with the widget being an iframe.
2) Force the widget layout proportions to show full song list by default. Normally this requires scrolling to the bottom of the list. Ex:
vs
I'm guessing that the proportions change after scrolling via some javascript but all the javascript being used by the widget is minified as far as I can tell and is thus difficult to analyze and/or modify. For this reason I am hoping that a developer of the widget will be able to recommend a possible method.
Thanks!
It's not possible to modify the styles of any page in an iframe from the containing document (including the SoundCloud widget).
Having it spread over two lines does look pretty fine in this case, but obviously title lengths of all sizes also need to be considered. I will pass on the request to investigate removing the truncation.
I'm writing my first jQuery plugin and part of the functionality involves dynamically generating a "frame div" around each image on a page. The frame has to fit "snug" around the image, as it serves as the relative parent of an absolutely positioned overlay image that is dynamically added.
I want this to be unobtrusive obviously. What can I do to minimize the side effects it will have on a user's own CSS? I guess there are certain problem situations that will be unavoidable, right? I'm thinking for ex. if the user CSS has targeted images with..
div.gallery > img
..child selectors to give them border/margin/etc, as one example.
Is it impossible to dynamically generate a parent div of an element in a way that is "safe" on unknown pages? Will there always be a risk of breaking the user CSS?
I suppose I can always just give a warning in the documentation, but I would love to make it idiot-proof if possible.
It just occurred to me that I could use JQ to read any CSS on the contained IMG .. and then transfer any properties "up" to the new parent div. Is this crazy?
In theory you could copy all styles. This answer even shows a plugin to get all computed styles cross-browser. But that would be an overkill, wouldn't it? If you really want to have that, add it as an option (that defaults to false, preferably). Then let the users fix it by styling the class you provide, as Blender suggested in the comments.
You could use the selector .css, or .height or .width to get any dimension properties of the image, and then generate the div based on that.
For example,
thisWidth = $('theImage').width();
thisHeight = $('theImage').height();
$('yourFrame').css({'height':thisHeight,'width':thisWidth});
Hope this is of some help...
So, I am developing the first serious web site. I want to implement the following scenario, but I need guidance and advice. There is a button <input type="submit"> on my web page. When the user clicks it, I want it to open some HTML content which will be shown on top of all page content (and positioned centrally, but I don't care about that detail at the moment). It should act very similar to the way the photos are viewed on Facebook. When the user clicks the photo thumbnail, the photo opens on top of and across all page content.
Now, I've implemented this already, but I think that my approach is not recommendable, as it looks a bit clumsy to me, especially when I think about the maintenance of the site:
I added a <div> as the last element to the <body>; it is positioned absolutely and collapsed and serves as a container. When the button is clicked, that <div> is filled with the content and the state is changed from collapsed to visible.
I would very much appreciate if someone would like to share the standard methods used to achieve this effect and opinions . I am guessing that AJAX and jQuery should be used heavily for this (I used pure JavaScript in my design described previously). I am looking for some code samples and resources. Thank you so much.
What you are looking for is a modal dialog and not a pop-up. Pop-ups are new windows, while modals are HTML elements that block the page behind it for emphasis on forward content.
One way is to have a <div> appended to the body, usually to the end of the body and have it positioned absolute. That div will have top, bottom, left and right zero to stretch to fit the viewport. Within that div is another div that is also positioned absolute, relative to the parent, viewport-fitting div. Positioning is up to you, but usually it's centered using a formula:
center = (total length - modal length)/2
Content is up to you. You can have the content already loaded and hidden in the DOM which you can just display later. Or load the content via AJAX if you wish.
jQuery already has a modal plugin in the jQueryUI suite which you can use that packs a lot of methods to add and customize.
There are a lot of approaches out there. You could use jQuery UI (http://jqueryui.com). But I like the approach Twitter's Bootstrap is taking: http://twitter.github.com/bootstrap/javascript.html#modals
This is a very clean setup and you can load the content via AJAX with a little selfwritten function. You don't need to write everything yourself because there are plenty of plugins out there. And the bootstrap modal plugin is standalone so you can just use this one.
I like to use it and generate the content div with an AJAX request.
You can position: absolute; the popup box and set it where on the screen you want it. Then use z-index to put it over the content.
Here is a demo: http://jsfiddle.net/e6BEu/
I believe what you're looking for might be Lightbox-like? It could give you some ideas at the very least.
Edit: Or this one which supports text and such.