Select Dropdowns, MooTools, and CSS Print

By  on  

I know I've harped on this over and over again but it's important to enhance pages for print. You can do some things using simple CSS but today's post features MooTools and jQuery. We'll be taking the options of a SELECT element and generating a list in case the user prints the page.

The XHTML

<label for="websites">Which is your favorite website?</label>
<select name="websites" id="websites">
	<option value="davidwalsh.name" selected="selected">David Walsh Blog</option>
	<option value="scriptandstyle.com">Script & Style</option>
	<option value="csstricks.com">CSS Tricks</option>
	<option value="mootools.net">MooTools</option>
</select>

Just a normal select list, nothing special.

The CSS

@media screen { 
	.print-select   { display:none; }
}
@media print { 
	.print-select   { padding:10px; /* width:40%; */ border:1px solid #ccc; }
}

Simple -- show the generated options DIV only during print.

The MooTools JavaScript

(function($) {
	window.addEvent('domready',function() {
		$$('select').each(function(select) {
			//get options
			var options = select.getElements('option');
			//create div
			var div = new Element('div',{
				'class': 'print-select',
				html: '<p><strong>Options</strong></p>'/*,
				style: 'width:' + (select.getSize().x - 20) + 'px' //subtracting padding */
			}).inject(select,'after');
			//create list
			var list = new Element('ul'), items = '';
			options.each(function(option) {
				items += '<li>' + option.get('text') + (option.selected ? ' <em>(selected)</em>' : '') + '</li>';
			});
			list.set('html',items);
			//list into div
			list.inject(div);
		});
	});
})(document.id);

The script grabs every SELECT element in the page and generates a list of the SELECT's options -- it even notes which element(s) are selected!

The jQuery JavaScript

Want to know how to accomplish this task using the jQuery JavaScript library? Chris Coyier dropped it on his CSS-Tricks blog today!

Just another useful CSS-printing trick brought to you by the warped Script & Style minds.

Recent Features

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • By
    Retrieve Google Analytics Visits and PageViews with PHP

    Google Analytics is an outstanding website analytics tool that gives you way more information about your website than you probably need. Better to get more than you want than not enough, right? Anyways I check my website statistics more often than I should and...

  • By
    MooTools ASCII Art

    I didn't realize that I truly was a nerd until I could admit to myself that ASCII art was better than the pieces Picasso, Monet, or Van Gogh could create.  ASCII art is unmatched in its beauty, simplicity, and ... OK, well, I'm being ridiculous;  ASCII...

Discussion

  1. Darkimmortal

    I can’t think of any situation where this wouldn’t confuse users :/

    They expect their selected option to be printed as it is seen on screen, not all of them.

  2. Pretty good idea! And MooTools is great :D

  3. JustME

    Is it jus me or does this only work once? What if you start the demo select an option, start print preview, close print preview, select another option and start print preview again – under my firefox 3.5 i still see the first selected option not the current one.

  4. Hendra Uzia

    Too bad it doesn’t work in chrome 9.

  5. Hendra Uzia

    Oups, my mistake, it works in chrome 9 :p

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!