JQuery Print Page

Tami,

We just started using jQuery Print, which allows you to print the contents to a specific DOM. I imagine that you could accomplish printing each chart/section to a different page with that method.

Matt, 
I could use a little guidance regarding how to implement jQuery print within skuid.  Can you provide some simple code samples or at least point me in the write direction?

Thanks,
James

James,

You can save the jquery print code as a static resource, and then pull that into any squid pages where you want it.

What we do is throw all the elements that we want to print into a panel or wrapper, and give that a unique id… something like ‘printThisSection.’

then put a button on your page to run the following javascript code:

skuid.$('#printThisSection').print()

I tried this by placing a button on the page. 

Button Snippet Name: PrintGraph
Static Resource Name: PrintGraph
Wrapper ID: printmediaID

This is the js code found in a zipped static resource: 

skuid.$('printmediaID').print() 

Nothing happens when I click on the button. Any ideas how I can make this work?

You can’t call a static resource as if it was a snippet. If you want to use a static resource (which is encouraged), you will have to register your snippet in that resource. I believe the syntax is something like this:

(function (skuid){<br>skuid.snippet.registerSnippet('PrintGraph',function(){<br>&nbsp; skuid.$('printmediaID').print();<br>});<br>})(skuid);

you can name your static resource whatever you want. You just have to create a reference to it in the page builder. Then you can call ‘PrintGraph’ anywhere skuid asks for a snippet.

All that being said, I’ve moved away from jQuery Print, having found the print media CSS tags to be much more reliable.

Where can I find more info on the skuid print media CSS tags? Thanks!

I finally figured it out with CSS3!

Can you throw some light on how to use CSS3 for this?