Tutorials

Creating List Icons with Pure CSS3

Upon waking up this morning, I came across a wonderful article about Creating Fancy Checkmark Icons with Pure CSS3, and wanted to extend the functionality beyond just checkmarks. After all, what if I want to show an exclamation point or an 'x', or even all the suits in a deck of cards?

download source filesview demo

At first I was hesitant that this would be possible with just CSS3, but much to my chagrin, it ended up being FAR easier than I ever expected. In fact, the biggest issue I ran into was just finding a way to make sure everything aligned properly.

jQuery Accordion Made Easy

Having recently adding jQuery to my arsenal of web tools I've been experimenting with new ways of organizing content. While tabs is one obvious way of doing this (tutorial to come), my newly preferred method is the Accordion widget in jQuery UI.

It offers a nice flexible options and can be used for nearly all types of content. And the best part of this particular option has to do with the fact that the required code is very minimal and straightforward. Enjoy!

download source filesview demo

Use of jQuery noConflict();

In my short time of using jQuery I've come across the invaluable method of noConflict(). Why is it so handy? Well, in the world of web design and development, there are lots of very useful JavaScript libraries out there (i.e. YUI, MooTools, Prototype) and several of them use "$" to represent an object. If you are using this syntax within jQuery and another conflicting library simultaneously, you are likely going to run into some unexpected behavior.

Luckily noConflict() is very simple to use and you won't have to go swapping out all your "$" with "jQuery". And to keep it simplistic I'll use the following code to show you how to implement it.

$(function() {
  $("#foo").click(
    // your code here
  )
 
  // any additional code
});

Still using $(document).ready in your jQuery scripts?

With the amount of jQuery tutorials being written, tweeted, and retweeted I keep seeing one common theme in nearly all of them. None of them use the jQuery shorthand to launch their scripts when their DOM is loaded.

Of course there's nothing wrong with this and it is perfectly valid, but if you are able to cut out code, that means you cut down on development. If you are familiar with jQuery then you're most likely familiar with starting your scripts like so:

$(document).ready(function() {
  //your code here
});

Tutorial: Super Simple iPhone Tethering (w/o Jailbreaking)

iPhone TetheringWith my recent purchase of a MacBook Pro, I set out to find a way to tether my iPhone 3G. My primary reasoning is two-fold: I don't have the ability to hook up the MBP to our domain AT&T has drug their feet rolling out their own tethering functionality. Needless to say, I found a solution.

There is 3 steps to setting this up and it can all be done from JUST THE iPHONE! As a disclaimer, I initially had issues with my visual voicemail not working, but after several attempts I'm almost 100% sure I figured out how to keep it from being disabled. I have tried my latest method 7 times and each time it's worked perfectly.

NOTE: This has been tested on a non-jailbroken iPhone that is on the AT&T network.

jQuery FAQs: Scroll To and Highlight Tutorial

Yesterday I set out with the goal of creating some Frequently Asked Questions (FAQs), with the idea of using jQuery to provide some added functionality. That's when I stumbled across the Bit Repository. They provided a very nice way of accomplishing what I wanted, so I decided to follow their tutorial.

It gave me great inspiration and while implementing the idea, I decided to go ahead and improve upon what they had done. My solution had to be developed so it could easily be reused without having to touch any of the script's again. The following steps outline the approach I took and the accompanying results. Enjoy!

download source filesview demo

Intro to jQuery

jQueryYesterday, I began my jQuery journey. After honing my JavaScript skills over the past year or so, it became evident I needed to add a JavaScript library to my toolbox of web knowledge. I'm almost 24 hours into my endeavor and I can sum it up in a single word: . Wait, I take that back...words can't describe how awesome jQuery is! (Ok, maybe there is a little too much "man love" for a JavaScript library, but...so what!)