Printing MooTools Accordion Items
Sometimes we're presented with unforeseen problems when it comes to our JavaScript effects. In this case, I'm talking about printing jQuery and MooTools accordions. Each "closed" accordion content element has its height set to 0 which means it will be hidden when the user tries to print the page. Luckily MooTools Core Developer Thomas Aylott provides a simple fix.
The CSS Fix
@media print {
.element { height:auto !important; }
}
That's it -- no joke. Setting a print-specific height of auto with the ever-useful !important declaration fixes everything.
Big ups to @subtlegradient for the solution. Another reason I'm so happy to be surrounded by clever developers.
![39 Shirts – Leaving Mozilla]()
In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...
![5 Ways that CSS and JavaScript Interact That You May Not Know About]()
CSS and JavaScript: the lines seemingly get blurred by each browser release. They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely. We have our .js files and our .css, but...
![Create Spinning, Fading Icons with CSS3 and jQuery]()
![MooTools-Like Element Creation in jQuery]()
I really dislike jQuery's element creation syntax. It's basically the same as typing out HTML but within a JavaScript string...ugly! Luckily Basil Goldman has created a jQuery plugin that allows you to create elements using MooTools-like syntax.
Standard jQuery Element Creation
Looks exactly like writing out...
wow… that is really enlightening. thanks for sharing
I tell you what, i don’t have a use for this right now, but it’s one of those things that will undoubtably drive me crazy in the future. Very nice dude, i’ll keep it mind.
Thanks for posting about print stylesheets – they are something which are all too often overlooked, but a very important part of web development in my opinion.
So simple… Thanks for the tips.
@media print { .element { display:inline !important; } }should also work
I’ve recently run up against this problem. The script provided works fine, but as far as I can tell, you can’t use the opacity effect with the accordion.
I’ve added:
body div.element { height:auto !important; display:inline !important; opacity:1 !important; filter:alpha(opacity=1); !important; }To my print css, but it doesn’t fix the problem. If anybody knows of a solution, then I’m certainly listening. :)
(Accordion mootools)…can be linked to any part of which is not active? How? I thank you in advance
@David: The same problem. Height:auto works but no text is show.
Thanks for this was bugging me for ages. The text was disappearing for me too but the “display:inline !important” seems to fix it (Thanks to Gui).
Saf
Neither of the fixes presented here have worked for me. Only the section headline shows up on print.
If anyone still comes across this problem: only the following code helped me (jQuery Accordion):
.ce_accordion { display: block !important; height: auto !important; }