Usability / Accessibility Archives

Smooth Scrolling with MooTools Fx.SmoothScroll

Published by David Walsh on Monday, April 5, 201013 Comments

I get quite a few support requests for my previous MooTools SmoothScroll article and the issue usually boils down to the fact that SmoothScroll has become Fx.SmoothScroll. Here’s a simple usage of Fx.SmoothScroll.

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.

Checkbox Filtering Using MooTools ElementFilter

Published by David Walsh on Thursday, February 4, 20108 Comments

When I first wrote MooTools ElementFilter, I didn’t think much of it. Fast forward eight months later and I’ve realized I’ve used the plugin a billion times. Hell, even one of the “big 3″ search engines is using it for their maps application. There’s one more place I’d like to use it. My employer uses a basic SPAM filtering system which allows me to see emails that were incorrectly (or correctly) caught in SPAM, click a checkbox, and click a “Deliver” button. The problem is that it will catch a bunch of valid emails with very similar subject lines, so I have to hunt down all of the emails, check the email’s checkbox, and keep searching. Inefficient to say the least. That’s why I’ve used ElementFilter to find LABEL elements with the given search text and automatically check their checkboxes.

iPhone-Style Passwords Using MooTools PassShark

Published by David Walsh on Wednesday, December 9, 200924 Comments
iPhone

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:

New York Times-Style Text Selection Widget Using MooTools or jQuery

Published by David Walsh on Wednesday, November 4, 200925 Comments

NY Times Widget

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.

JavaScript Copy to Clipboard

Published by David Walsh on Monday, October 19, 200925 Comments

Providing your users the ability to copy text to the clipboard can make your website much more convenient and valuable. Unfortunately Flash 10 broke most of the methods for doing so. Luckily a great library named ZeroClipboard exists. ZeroClipboard uses a pinch of Flash and touch of JavaScript to make copying to the clipboard happen.

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.





© David Walsh 2007-2010. Contact David Walsh. Powered by the remarkable MooTools JavaScript framework.