AnythingSlider printing issues

[slminneman]

I’m new to using AnythingSlider, and I just printed the demo pages and got a showstopper result for adopting this tool…all off the images seem to be printing (not just the current one), and they underprint the rest of the page’s content. It’s a real mess. Firefox 4. Chrome is even worse.

Is there some trick I’m missing, or is this a browser-only tool? It’s too well-designed for this to have been neglected, but I’m not seeing any earlier discussion of the issue.

Thanks!

[TheDoc]

You should be using a print stylesheet.

http://www.webdesignerdepot.com/2010/01/10-tips-for-better-print-style-sheets/

[slminneman]

Ok, I’ll bite — any examples of somebody having done this for an AnythingSlider page? Any reason why there isn’t an example of that for the AnythingSlider demo page? I’m not seeing exactly how to limit/change the AnythingSlider’s print behavior, because I’m not really even sure *why* it’s doing the horrible thing it’s currently doing.

Take a look…

https://css-tricks.com/examples/AnythingSlider/

…and see if you can explain what’s happening when you print (use a preview and don’t kill trees).

Thanks!

[TheDoc]

Because you can’t replicate Javascript on a sheet of paper.

The best thing to do is to put display: none; on the slider in a print stylesheet.

[slminneman]

Yes, I understand that I’m not going to get slider behavior on a sheet of paper (yet).

What I can’t see is why this…

http://www.dnote.nl/index.php?option=com_content&view=article&id=40&Itemid=33

…(which uses AnythingSlider) prints just one of the content pages (always the last one, but still), while the AnythingSlider demo page prints *all* of the list items in the slider. (one after the other, on top of other printed content).

I’ve poked around, and don’t see what’s different (e.g., no print stylesheet I can find).

I can live with the thing printing the final image, and I’ll hopefully, eventually get under the covers enough to fix it for good (so it prints the image that was onscreen when print was requested). Is it extremely apparent what’s causing the different behavior between these two pages?

[TheDoc]

Hmmmmm – very interesting.

I can’t figure out where, but I know he’s changing how everything on the page is printed. It could be server-side, in which case I can’t see it.

You can tell because certain elements on the page aren’t printing, something that he’s set up himself.

[slminneman]

Ok, so I created a print stylesheet that hides the sliders, and I added some corresponding code for stuff to print (and hide that during screen display). That gets me much closer to something I could live with.

Unfortunately, there’s some detritus that doesn’t get hidden when I hide slider1 and slider2…like a random blue hrule and the dots that are later filled to become the slide controller in the demo. And there’s a bunch of white vspace between the image I add with my print-only hack and those buttons. Do I need to assert that something is “important” to cure this?

The detritus elements change if I switch to a different mode before I do the print preview.

[slminneman]

Hmmm….still struggling to get the ugly printing behavior of the Anything Slider under control. I can eliminate the printing of the whole collection of images in every case (the default) by using a printing stylesheet, but there are spacing and (I presume) javascript-generated elements that insist on printing and make it impossible to get any sort of acceptable page. It seemed to me that the print stylesheet would do the trick, but it’s going to take more to supress the rest of the stuff that’s making the print versions ugly.

I can’t imagine that I’m the first to encounter this…any further help out there?

Thanks!

[jayroh]

Ran into this thread after googling for an answer to the same issue and figured I would tack on my approach to get things to look somewhat respectable. A print stylesheet with the following fixes the layout problems that come with the style attributes being set by the anythingslider JS

.anythingSlider,

.anythingSlider *[style] {

width: auto;

height: auto;

left: auto;

top: auto;

display: block;

position: static;

}

.anythingControls { display: none; }

[Author]

Posts