Posts tagged ‘MooTools’
Comparing and cloning objects in JavaScript
Posted Friday, July 23rd, 2010.
Filed under JavaScript, web design and development with the tags How-to, JavaScript, jQuery, MooTools, web design and development
Two simple functions for comparing and cloning JavaScript objects without requiring a framework like jQuery.
TextAreaExpander Class for MooTools
Posted Friday, May 7th, 2010.
Filed under General with the tags How-to, HTML, JavaScript, JavaScript UI Goodies, MooTools, web design and development
It does exactly what is says: expand textareas. No more, no less.
Rounded corners on images using CSS3
Posted Friday, April 2nd, 2010.
Filed under JavaScript, web design and development with the tags CSS, JavaScript, JavaScript UI Goodies, jQuery, MooTools, progressive enhancement, web design and development
Most browsers do not allow images to be cropped using CSS3’s border-radius. Tim Van Damme recently posted a workaround for this issue. Here’s a MooTools script that automates Tim’s workaround yet degrades gracefully when JavaScript is disabled.
A new removeClasses utility for MooTools
Posted Saturday, March 13th, 2010.
Filed under JavaScript, web design and development with the tags How-to, JavaScript, JavaScript UI Goodies, jQuery, MooTools, web design and development
MooTools’ removeClass utility will only work if the classes you want to remove are listed in the same order as the target element’s className property. Here’s a new removeClasses utility that fixes this shortcoming. A framework-neutral version is also provided.
CustomInput Class: Accessible, Custom-Styled Checkboxes and Radio Buttons
Posted Thursday, March 11th, 2010.
Filed under JavaScript, web design and development with the tags accessibility, CSS, How-to, interface design, JavaScript, JavaScript UI Goodies, jQuery, MooTools, web design and development
I’m currently working on a new quiz system at work, and decided I’d incorporate Filament’s wonderful stylized checkboxes and radio buttons into my project, which meant it was time to roll up my sleeves and code me some Moo.
Image-Free Progress Bar using MooTools and Canvas
Posted Friday, March 6th, 2009.
Filed under General, JavaScript with the tags canvas, excanvas, How-to, JavaScript, JavaScript UI Goodies, MooTools, ProgressBar class, Rectangle class
As part of my ongoing experiments with <canvas>, I decided to convert an image-based progress bar to an image-free canvas-based system. I just finished whipping up a proof-of-concept; it uses MooTools to generate the canvas and CSS code. No images were harmed in the making of this progress bar.
More info later (time permitting)
Modal.js updated
Posted Friday, February 27th, 2009.
Filed under JavaScript, web design and development with the tags canvas, JavaScript, JavaScript UI Goodies, Modal class, MooTools, Rectangle class
My Modal.js class is still a work-in-progress. Today I made a few updates, most notably to some CSS handling and to the styling of the ‘close’ button (looks much more sophisticated now). Check it out.
Custom modal windows using canvas and MooTools
Posted Tuesday, February 24th, 2009.
Filed under JavaScript, web design and development with the tags canvas, excanvas, How-to, JavaScript, JavaScript UI Goodies, MochaUI, Modal class, MooTools, Rectangle class, WAI-ARIA
I’ve built a simple modal window class named Modal using MooTools. This class combines a dynamic canvas drawing API (my Rectangle class) with dynamic DOM element generation to create on-demand modal windows using no external images. My goal was to make this about as easy to use as a normal JavaScript alert, prompt or confirm window.
Fun with canvas and MooTools: a Rectangle class
Posted Wednesday, February 18th, 2009.
Filed under JavaScript, web design and development with the tags canvas, excanvas, How-to, JavaScript, JavaScript UI Goodies, MochaUI, MooTools, Rectangle class
Recently at work I realized I needed a good modal window that was more extensible than JavaScript’s built-in confirm and prompt windows. MochaUI looked like a handy way to get slick modal windows into my project, but I soon realized that MochaUI is designed to do much, much more than I need, and therefore is (for my purposes) bloated. So, in typical DIY fashion here at pipwerks, I decided to borrow a page from Greg’s book and make my own MochaUI-inspired modal window using the canvas element, CSS, HTML, and MooTools. After evaluating what I’d need for my little modal window, I whipped up a MooTools-based JavaScript class that produces canvas rectangles in the blink of an eye.
Obfuscating email addresses, revisited
Posted Sunday, February 1st, 2009.
Filed under JavaScript, web design and development with the tags email, How-to, JavaScript, MooTools, progressive enhancement, standards, web design and development
A while back, I posted my method for defeating spambots that harvest email addresses. This post is an update to that original method. It explores cleaner, less obtrusive code approaches and more accessible/usable HTML markup.