Treehouse

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.

ydkjs-3.png

Recent Features

Incredible Demos

  • MooTools Zebra Tables&nbsp;Plugin

    Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables -- tables with alternating row background colors.

  • Adding Events to Adding Events in&nbsp;MooTools

    Note: This post has been updated. One of my huge web peeves is when an element has click events attached to it but the element doesn't sport the "pointer" cursor. I mean how the hell is the user supposed...

  • Modal-Style Text Selection with&nbsp;Fokus

    Every once in a while I find a tiny JavaScript library that does something very specific, very well.  My latest find, Fokus, is a utility that listens for text selection within the page, and when such an event occurs,...

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. JustMe, you are right.. There is no change event..

  5. Hendra Uzia

    Too bad it doesn’t work in chrome 9.

  6. 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!

Use Code Editor