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
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    PHP IMDB Scraper

    It's been quite a while since I've written a PHP grabber and the itch finally got to me. This time the victim is the International Movie Database, otherwise known as IMDB. IMDB has info on every movie ever made (or so it seems). Their...

  • By
    Using Opacity to Show Focus with MooTools

    I'm a huge fan of using subtle effects like link nudging (jQuery, MooTools) to enhance the user experience and increase the perceived dynamism of my websites. Trust me -- a lot of little things are what take websites to the next level.

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!