Sanitizing Input Fields on the Client Side

Some example code for stripping out all non word characters. So only letters, underscores/spaces, and numbers. This would not be good for email sanitization, but could be good for other input fields.

var search_term = $('.search_tag_input').val();
// strip tags
search_term = search_term.replace(/(<([^>]+)>)/ig,"");
//spaces as underscores
search_term = search_term.replace(' ', '_');
//remove nonword characters (and underscores)
search_term = search_term.replace(/\W/ig, '');
//underscores to dashes (or whatever is needed)
search_term = search_term.replace('_', '-');

The Best Way to Handle Scroll Events

John Resig has an excellent post on his blog about scroll events, efficiancy, and how that recently affected twitter. Below is some example code he wrote for working with scroll events.

Read more…

Cross Browser CSS3 and MS Filter Matrix Transform Rotation Using jQuery

Drag the waves.
Click the waves to disable mouse rotating.

Flip the waves 90 degrees clockwise
Flip the waves 90 degrees counter-clockwise
Flip the waves 270 degrees clockwise (same as above)
Flip the waves 26 degrees clockwise
Flip the waves 84 degrees counter-clockwise
Flip the waves 108 degrees counter-clockwise
Flip the waves 180 degrees either direction
Flip the waves container 90 degrees clockwise
Flip the draggable container 90 degrees clockwise
Enable mouse following
Disable mouse following

The borders and markup above are meant to display behavior of various browsers when applying a CSS3 transform. Try flipping the draggableContainer and moving the waves around. IE has serious performance issues when applying the mouse following rotation, unless you click and hold within the draggableContainer while mouse following is enabled. Perhaps this can be helped tying the mouse following behavior to an absolutely positioned element within waveContainer div.


Read more…

Universal Clearfix Hack

I’ve been using this little piece of code all over the place for months now.

Tracked down the original use here:

/* CLEARFIX !! -- slightly enhanced, universal clearfix hack */
.clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; }
.clearfix { display:inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height:1%; }
.clearfix { display:block; }
/* close commented backslash hack */

Detecting IE6 in jQuery

if ($.browser.msie && parseInt($.browser.version)< 7) {
//code goes here
}

position:fixed; cross browser solution using jQuery

This is an easy way to accomplish position:fixed; across all browsers using jQuery. Works in IE6.
$(window).scroll(function() {
$('#elementName').css('top', $(this).scrollTop() + "px");
});

Suckerfish Menus, Flash and wmode

So in some versions of IE, Suckerfish drop down menus show up behind Flash videos unless you add the WMODE parameters to the HTML code.

Add the following parameter to the OBJECT tag:
<param name=”wmode” value=”transparent”>
Add the following parameter to the EMBED tag:
wmode=”transparent”

BizDev 2.0

Or Business Development 2.0. This idea falls into the “ask for forgiveness, not permission” style of work, which I personally subscribe to. It’s an interesting article, my favorite paragraph is in the end:

Traditional business development meant spending a lot of money on dry cleaning, animating your powerpoint, drinking stale coffee in windowless conference rooms and scouring the thesaurus looking for synonyms for “synergy”. Not to mention trying to get hopelessly overbooked people to return your email. And then after the deal was done, squabbling over who dealt with the customer service. Much, much better this way!


Read more…

Add Mootool’s Squeezebox functionality to your Joomla template

Joomla uses Mootools as a Javascript framework by default, and also has a light-box effect called Squeezebox built in by default. It’s quite easy to add Squeezebox functionality to your Joomla template.
Read more…

Web Tools

This is going to be a list of web development tools that I use. Right now, it’s pretty small. Inspired by this page from elementiks.com.

Templates:
Bulletproof Templates – Joomla Blank Skeleton Templates
Sandbox by Plaintext – WordPress Blank Skeleton Template

jQuery:
Visual jQuery
jQuery API

Adventures in Aspell – Installing and Configuring for Dreamhost

I’m working on a special project involving Aspell, here are some instructions for updating Aspell on your Dreamhost server.
Read more…

Manually call Joomla Module to store as PHP variable, Allow HTML in Menu Title

This is a handy piece of code I use for whenever I need to load the output of a Joomla module as a PHP variable. One common use for this is to allow for HTML tags in menu titles. It’s also handy if you need to do string searches.
Read more…