The HTML

<a href="#contact">Contact Us</a> <!-- goes down to the contact area -->

<!-- more stuff here -->

<a name="contact" id="contact"></a>
<h2>Contact Us</h2>

<-- more stuff here -->

The only HTML requirement for Fx.SmoothScroll is that all named anchors be given an identical id attribute.

The MooTools JavaScript

new Fx.SmoothScroll({
	duration: 200
},window);

Fx.SmoothScroll accepts two arguments: the area to scroll (defaults to the window) and options for the class. The default options are usually sufficient. One recommendation I do have is to make the duration quick — no one wants to wait for the animation to finish.

Happy scrolling!

Smooth Scrolling with MooTools Fx.SmoothScroll is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The Sample HTML

<ul id="my-list">
<li><input type="checkbox" id="chkADDRESS" /> <label for="chkADDRESS">ADDRESS</label></li>
<li><input type="checkbox" id="chkAPPLET" /> <label for="chkAPPLET">APPLET</label></li>
<li><input type="checkbox" id="chkAREA" /> <label for="chkAREA">AREA</label></li>
<li><input type="checkbox" id="chkA" /> <label for="chkA">A</label></li>
<li><input type="checkbox" id="chkBASE" /> <label for="chkBASE">BASE</label></li>
<li><input type="checkbox" id="chkBASEFONT" /> <label for="chkBASEFONT">BASEFONT</label></li>
<li><input type="checkbox" id="chkBIG" /> <label for="chkBIG">BIG</label></li>
<!-- ... more ... -->
</ul>

I’ve used a simple list of HTML elements for my example. Having 100 “VIAGRA!!!” labels really wouldn’t be helpful.

The MooTools JavaScript

/* usage */
window.addEvent('domready',function() {
	var myFilter = new ElementFilter('search-term', '#my-list label', {
		trigger: 'keyup',
		cache: true,
		onShow: function(element) {
			$(element.get('for')).checked = true;
		},
		onHide: function(element) {
			$(element.get('for')).checked = false;
		}
	});
});

If you aren’t familiar with ElementFilter, be sure to read the original post. The only code specific to my purpose is in the onShow and onHide methods. Awesome!

Give it a shot. I’ll be bribing my IT team to put something like this in place. It will make managing SPAM much easier!

Checkbox Filtering Using MooTools ElementFilter is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Every once in a while I come across a plugin that blows me out of the water and the most recent culprit is PassShark: a MooTools plugin that duplicates the iPhone’s method of showing/hiding the last character in a password field. This gem of a MooTools plugin, which conquers some problems that plague jQuery counterparts, was authored by valued MooTools contributors Luis Merino and Nathan Querido.

The MooTools PassShark Usage

window.addEvent('load',function() {
	new PassShark('pass',{
		interval: 300,
        	duration: 1500,
        	replacement: '%u25CF',
        	debug: false
    });
});

The only required parameter is the ID of the input/password element you’d like to act as an iPhone password field. Options include:

• interval: Amount of time between new character checks.
• duration: Amount of time to show a given character before obfuscating it.
• replacement: The character to replace the character.

Sometimes the less options the better!

PassShark is yet another perfect showcase of what MooTools allows you to accomplish. Big ups to Luis Merino and Nathan Querido for releasing this gem. To get more specific information about their great plugin, visit their blog post. MooTools FTW!

iPhone-Style Passwords Using MooTools PassShark is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Aaron Newton made a great request to me last week: why not make my MooTools Documentation Bookmarklet function more like the New York Time’s text selection widget. NYT’s text selection widget listens for text selection and presents the user with a “search” icon they may click on to learn more about that term. I’ve tried to answer that challenge — not in bookmarklet form but in website widget form.

The Sample HTML

<div id="content-area">
	.htaccess AJAX Apache / Server APIs Blog Bookmarking / Social Books Browsers CSS / Design Google Guest Blogger Hosting / Domain JavaScript jQuery
	link() Microsoft MooTools MySQL Optimization PHP Poll rand() Security Shell Theory / Ideas Usability / Accessibility XML / XHTML
	This blog is targeted toward all levels of web designers and developers. All web topics are discussed, including CSS, JavaScript (MooTools and jQuery), PHP, and more.
</div>

The above code is next to meaningless per the widget — I simply want to illustrate the area I’d like it to work in has an ID of content-area.

The MooTools JavaScript

window.addEvent('domready',function(){
	(function($) {
		//gets the selected text
		var getSelection = function() {
			return $try(
				function() { return window.getSelection(); },
				function() { return document.getSelection(); },
				function() { 
			        var selection = document.selection && document.selection.createRange();
					if(selection.text) { return selection.text; }
					return false;
			      }
			) || false;
		};
		//vars 
		var url = 'http://davidwalsh.name/?s={term}', selectionImage;
		//event to listen
		$('content-area').addEvent('mouseup',function(e) {
			var selection = getSelection();
			if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
				//ajax here { http://davidwalsh.name/text-selection-ajax }
				if(!selectionImage) {
					selectionImage = new Element('a',{
						href: url,
						opacity:0,
						id: 'selection-image',
						title: 'Click here to learn more about this term',
						target: '_blank'
					}).inject(document.body,'top');
				}
				//handle the every-time event
				//alert(selection);
				selectionImage.set('href',url.replace('{term}',encodeURI(selection))).setStyles({
					top: e.page.y - 30,	//offsets
					left: e.page.x - 13 //offsets
				}).tween('opacity',0);
			}
		});
		
		$(document.body).addEvent('mousedown',function() {
			//hider
			if(selectionImage) { selectionImage.tween('opacity',1); }
		});
		
	})(document.id);
});

During the mouseup event within the selected container (content-area), we determine if any text has been highlighted. If so, we:

1. Insert the A element if it has not yet been injected into the body.
2. Change the A element’s URL to accommodate for the new search term.
3. Position the element to at an offset position above where the mouse goes up.

During every mousedown event we hide the A element.

The jQuery JavaScript

/* attempt to find a text selection */
function getSelected() {
	if(window.getSelection) { return window.getSelection(); }
	else if(document.getSelection) { return document.getSelection(); }
	else {
		var selection = document.selection && document.selection.createRange();
		if(selection.text) { return selection.text; }
		return false;
	}
	return false;
}
/* create sniffer */
$(document).ready(function() {
	var url = 'http://davidwalsh.name/?s={term}', selectionImage;
	$('#content-area').mouseup(function(e) {
		var selection = getSelected();
		if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
			//ajax here { http://davidwalsh.name/text-selection-ajax }
			if(!selectionImage) {
				selectionImage = $('<a>').attr({
					href: url, 
					title: 'Click here to learn more about this term',
					target: '_blank',
					id: 'selection-image'
				}).hide();
				$(document.body).append(selectionImage);
			}
			selectionImage.attr('href',url.replace('{term}',encodeURI(selection))).css({
				top: e.pageY - 30,	//offsets
				left: e.pageX - 13 //offsets
			}).fadeIn();
		}
	});
	$(document.body).mousedown(function() {
		if(selectionImage) { selectionImage.fadeOut(); }
	});
});

Follows the same principal as above.

Ideas & Enhancements

• Depending on your philosophy, you may want to implement a minimum character check as well:

  if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,'')) && selection.length > 4) { //5 char min
  

• You may want to also fidget with adding/modifying text selection with keyboard keys as well. I’ve chosen to pass on that.
• Saving the selection content via AJAX for analytical reasons may not be a bad idea either.

Have any other ideas for improvement? Would you have any use for this on your website(s)?

New York Times-Style Text Selection Widget Using MooTools or jQuery is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The Sample HTML

<script type="text/javascript" src="ZeroClipboard.js"></script>
<textarea name="box-content" id="box-content" rows="5" cols="70">
	The David Walsh Blog is the best blog around!  MooTools FTW!
</textarea>
<br /><br />
<p><input type="button" id="copy" name="copy" value="Copy to Clipboard" /></p>

The above HTML features a form element with the ID “box-content” and a button with the ID “copy”. Both of those element IDs will come into play with ZeroClipboard.

The ZeroClipboard JavaScript

//set path
ZeroClipboard.setMoviePath('http://davidwalsh.name/dw-content/ZeroClipboard.swf');
//create client
var clip = new ZeroClipboard.Client();
//event
clip.addEventListener('mousedown',function() {
	clip.setText(document.getElementById('box-content').value);
});
clip.addEventListener('complete',function(client,text) {
	alert('copied: ' + text);
});
//glue it to the button
clip.glue('copy');

With the ZeroClipboard object loaded we:

• Set the path to the SWF file.
• Create what ZeroClipboard calls a “client”: A client is a single instance of the clipboard library on the page, linked to a particular button or other DOM element.
• Add a mousedown event listener that places text from inside our textarea into the clipboard.
• Add an optional complete event where we can add functionality to execute once the text has been successfully added to the clipboard.
• “Glue” the button to the functionality we’ve added in the steps above.

That’s it! ZeroClipboard is an outstanding utility to allow copy to the clipboard functionality on any website.

JavaScript Copy to Clipboard is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The XHTML

<select class="ajax">
	<option value="">-- Select a Site--</option>
	<option value="David Walsh Blog">David Walsh Blog</option>
	<option value="Script & Style">Script & Style</option>
	<option value="Band Website Template">Band Website Template</option>
</select>

<br /><br />

<input type="text" id="my-text" class="ajax" />

Elements with the “ajax” CSS class will be our target.

The jQuery JavaScript

$(document).ready(function() {
	//create image
	$('<img src="move-spinner.gif" id="spinner" />').css('position','absolute').hide().appendTo('body');
	//for every field change
	$('.ajax').change(function() {
		//get element position
		var position = $(this).offset();
		//position image
		$('#spinner').css({ top: position.top , left: position.left + $(this).width() + 30 }).fadeIn();
		//ajax
		$.post('<?php echo $_SERVER['REQUEST_URI']; ?>',{
			ajax:1,
			value: $(this).val()
		},function() {
			$('#spinner').fadeOut();
		});
	});
});

We inject the spinner image into the page and reposition it depending on which field is doing the request. Very simple!

Isn’t JavaScript fun? Oh yeah…and it makes the user experience better too.

Form Element AJAX Spinner Attachment Using jQuery is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The XHTML

<select class="ajax">
	<option value="">-- Select a Site--</option>
	<option value="David Walsh Blog">David Walsh Blog</option>
	<option value="Script & Style">Script & Style</option>
	<option value="Band Website Template">Band Website Template</option>
</select>

<br /><br />

<input type="text" id="my-text" class="ajax" />

Add the “ajax” class (or any class for that matter) to the elements you’d like the spinner to display by.

The MooTools JavaScript

window.addEvent('domready',function() {
	//inject image
	var spinner = new Element('img',{
		src: 'move-spinner.gif',
		styles: {
			position:'absolute'
		},
		opacity: 0
	}).inject(document.body);
	//form element events
	$$('.ajax').each(function(el) {
		//get coordinates
		var coords = el.getCoordinates(document.body);
		//ajax request object
		var request = new Request({
			url: '',
			method: 'post',
			onRequest: function() {
				spinner.setStyles({
					left: coords.right + 10,
					top: coords.top + 5
				}).fade('in');
			},
			onComplete: function() {
				spinner.fade('out');
			}
		});
		//change event
		el.addEvent('change',function() {
			//ajax request
			request.send({
				data: {
					ajax: 1,
					value: el.get('value')
				}
			});
		});
	});
});

We first add the spinner image to the document but hide it right away. When any of the form elements with the “ajax” class changes value, we move the spinner image to the right of the element. Then we use Reqeust’s onRequest and onComplete methods to show and hide the spinner. Simple!

Look forward to a jQuery version tomorrow.

Form Element AJAX Spinner Attachment Using MooTools is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The XHTML

<table id="highlight-table">
       <colgroup></colgroup>
       <colgroup class="slim"></colgroup>
       <colgroup class="slim"></colgroup>
       <colgroup class="slim"></colgroup>
       <colgroup class="slim"></colgroup>
    <thead>
       <tr>
           <th></th>
           <th></th>
           <th></th>
           <th></th>
           <th></th>
       </tr>
    </thead>
   	<tbody>
   		<tr>
   			<td></td>
   			<td></td>
   			<td></td>
   			<td></td>
   			<td></td>
   		</tr>
   		<tr>
   			<td></td>
   			<td></td>
   			<td></td>
   			<td></td>
   			<td></td>
   		</tr>
		<!-- MORE ROWS -->
	</tbody>
</table>

A normal table. The cells being empty is inconsequential to the functionality — place whatever you’d like in the table.

The CSS

table               { border-collapse: collapse; width: 100%; margin-top:10px; }
td                  { border: 1px solid #ccc; padding: 10px; }
thead               { width: 100%; height: 109px; background: url(header.png) no-repeat; }
.slim               { width: 88px; }
.column-hover		{ background:#eee; }
.row-hover			{ background:#ddd; }
.cell-hover			{ background:#fffea1; }

Note that I’ve created 3 separate hover classes — one for each type of hover possible within the table.

The MooTools JavaScript Version 1 – Inefficient

	window.addEvent('domready',function(){
	// variables and settings
	var table = document.id('highlight-table');
	table.getElements('td').each(function(el) {
		var parent = el.getParent('tr');
		var siblings = parent.getElements('td');
		var index = siblings.indexOf(el) + 1;
		var childSelector = 'tr td:nth-child(' + index + ')';
		//add events to the table cell
		el.addEvents({
			mouseenter: function() {
				//this column
				table.getElements(childSelector).addClass('column-hover');
				//this row
				parent.addClass('row-hover');
				//this cell
				el.addClass('cell-hover');
			},
			mouseleave: function() {
				//this column
				table.getElements(childSelector).removeClass('column-hover');
				//this row
				parent.removeClass('row-hover');
				//this cell
				el.removeClass('cell-hover');
			}
		});
	});
});

The first step is grabbing every TD within the table. Iterate through that array of TDs adding mouseenter and mouseleave events to the element. The mouseenter method adds the necessary CSS classes, the mouseleave event removes them. The difficult part, in theory, is the column highlighting. Using a CSS 3 “nth-child” selector made the column-highlighting process easier than I had expected.

The MooTools JavaScript Version 2 – More Efficient

window.addEvent('domready',function(){
/*  METHOD 2:  Better  */
var table = document.id('highlight-table');
var rows = table.getElements('tr');

//for every row...
rows.each(function(tr,trCount){
	//we don't want the header
	if(tr.getParent().get('tag') == 'thead') { return false; }
	//add the row class to the row
	tr.addClass('row-' + trCount);
	//add the row listener
	tr.addEvents({
		'mouseenter': function(){
			tr.addClass('row-hover');
		},
		'mouseleave': function(){
			tr.removeClass('row-hover');
		}
	});
	//for every cell...
	tr.getElements('td').each(function(td,tdCount) {
		//remember column and column items
		var column = 'col-' + tdCount;
		var friends = 'td.' + column;
		//add td's column class
		td.addClass(column);
		//add the cell and column event listeners
		td.addEvents({
			'mouseenter': function(){
				$$(friends).erase(td).addClass('column-hover');
				td.addClass('cell-hover');
			},
			'mouseleave': function() {
				$$(friends).erase(td).removeClass('column-hover');
				td.removeClass('cell-hover');
			}
		});
	});
});	
});

This version is much faster because more of the work is done up front and done only once. I give all the proper class names at the beginning of the script and access the collections only when I need them.

A Few Thoughts

• Remember that since every TD is analyzed, this process can be very taxing on large page.
• You can use simple CSS :hover definitions for the row and cell highlighting in all browsers except IE6.
• Nested tables will raise havoc on this system. The easy way to get prevent the problem is checking the element’s TABLE parent ID to make sure it’s the same as the initial table you wanted to highlight.
• Since this was more of an experiment than anything, I skipped making this into a MooTools class. If anyone wanted to give that a go, I’d love to see what you come up with.

Great idea and execution by Chris. I am obligated to say MooTools FTW though!

Highlight Table Rows, Columns, and Cells Using MooTools 1.2.3 is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

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.

Select Dropdowns, MooTools, and CSS Print is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Adding to my mental portfolio is important to me. First came MooTools, then jQuery, and now Dojo. I speak often with Peter Higgins of Dojo fame and decided it was time to step into his world. I chose a simple but useful plugin, QuickBoxes, to port over from MooTools. The following is the result.

The Dojo JavaScript

//safety closure
;(function(d, $){
	//plugin begins
    d.QuickBoxes = function(args, node){
		//scoping
		node = d.byId(node);
		//settings
		var active = 0;
		args.elements = $(args.elements);
		//for every checkbox
		args.elements.forEach(function(el) {
			//connect the MouseDown event
			d.connect(el,'onmousedown',function(ev){
				d.stopEvent(ev);
				active = 1;
				el.checked = !el.checked;
			});
			//connect the MouseEnter event
			d.connect(el,'onmouseenter',function(e){
				if(active == 1) {
					el.checked = ('toggle' == args.mode ? !el.checked : 'check' == args.mode);
				}
			});
			//connect the Click event
			d.connect(el,'onclick',function(e){
				el.checked = !el.checked;
				active = 0;
			});
			//fix the labels
			var label = $('label[for=' + el.getAttribute('id') + ']');
			if(label.length) {
				d.connect(label[0],'onclick',function(e){
					el.checked = !el.checked;
				});
			}
		});
		//add the mouseup event to the Window
		d.connect(d.body(),'mouseup',function(){ active = 0; });
	};	
	//usage
	d.addOnLoad(function(){
		var togglers = new d.QuickBoxes({ elements: '.toggle', mode: 'toggle' });
		var checked = new d.QuickBoxes({ elements: '.checked', mode: 'check' });
		var unchecked = new d.QuickBoxes({ elements: '.unchecked', mode: 'uncheck' });
	});
})(dojo, dojo.query);

If you take a look at the Dojo version and the MooTools version, they’re very much the same. Like I’ve preached with Moo and jQuery, the frameworks all do the same thing but with a different syntax.

A special thanks to Peter Higgins for his help — in all honestly, I was pretty lost at a few points of this simple plugin. It was good to dabble in Dojo and I look forward to more experimentation.

QuickBoxes for Dojo is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.