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

Incredible Demos

  • By
    Ana Tudor&#8217;s Favorite CodePen Demos

    Cocoon I love canvas, I love interactive demos and I don't think I have ever been more impressed by somebody's work than when I discovered what Tiffany Rayside has created on CodePen. So I had to start off with one of her interactive canvas pens, even though...

  • By
    MooTools History Plugin

    One of the reasons I love AJAX technology so much is because it allows us to avoid unnecessary page loads.  Why download the header, footer, and other static data multiple times if that specific data never changes?  It's a waste of time, processing, and bandwidth.  Unfortunately...

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!