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.
![9 Mind-Blowing Canvas Demos]()
The <canvas> element has been a revelation for the visual experts among our ranks. Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead. Here are nine unbelievable canvas demos that...
![Responsive and Infinitely Scalable JS Animations]()
Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...
![MooTools Image Preloading with Progress Bar]()
The idea of image preloading has been around since the dawn of the internet. When we didn't have all the fancy stuff we use now, we were forced to use ugly mouseover images to show dynamism. I don't think you were declared an official...
![Create a Sexy Persistent Header with Opacity Using MooTools or jQuery]()
I've been working with the Magento eCommerce solution a lot lately and I've taken a liking to a technique they use with the top bar within their administrative control panel. When the user scrolls below a specified threshold, the top bar becomes attached to the...
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; }