Jump to the jQuery Hyphenate Demo

Download the Source Code

Requirements

• jQuery
• The jQuery.Hyphenate Plugin

In the head of your document, be sure to include your references to the jQuery library and the Hyphenate Plugin:

  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/jquery.hyphenate.js"></script>

Following that, we can instantiate our plugin on any dom element:

jQuery(document).ready(function(){
  // Document is ready
  $('div.hyphen').hyphenate();
  // Hyphenate all divs with a class of 'hyphen'
});

By default, the plugin will hyphenate the strings based off the current width of the element we are hyphenating. You can, however, pass in an optional oWidth parameter to define a width for the element.

jQuery(document).ready(function(){
  // Document is ready
  $('div.hyphen').hyphenate({ oWidth : 100 });
  // Hyphenate all divs with a class of 'hyphen' to a width of 100px
});

This plugin works best with block level elements (DIV, P, H1, LI), but can also work on inline elements (SPAN, EM, STRONG), just note that the plugin will modify them to block level via display:block.

Known Issues

This plugin is in its initial release, so please do not consider this a complete and polished plugin.

• Nested DOM elements will be removed. If you are performing a hyphenation on a DIV that has child SPANs or As, then those elements will be removed, though there inner-text will remain.

Please enjoy! Feel free to leave comments and suggestions below, and don’t forget to come back often to check for updates.

Enough with the chit-chat.  Parallax can best be described by seeing it in action:

View the Parallax Demo

Parallax is typically used for creating captivating 3d scenes and landscapes, but here we’ll use it just to create some really nice image rollovers.

On with the tutorial

Requirements

• Basic understanding of HTML/CSS
• Basic understanding of creating PNG transparency
• jQuery
• jQuery – Parallax Plugin by Stephen Band

Feel free to download the entire project here.

Step 1. Design your image

Using Photoshop, or your image editor of choice so long as it supports .PNG alpha transparency, create an interesting design including several elements. You can create a scene like Stephen did or something simple like my demo.

Be sure to keep your design larger than you plan on using it in the final product.

Image Rollovers with jQuery Parallax - Step 1

Step 2. Set up your layers

Now pull apart your document, creating a 24-bit PNG for each layer. In my example I made three layers:
Layer 0 – The background: bg.png
Layer 1 – The guides: guides.png
Layer 2 – Text: name.png

Step 3. HTML

Now, with a separate PNG for each layer in our parallax, we can create a new HTML document with the following code in the body.

<div id="parallax">
        <!-- Layer 0 // Background -->
  	<div style="width:500px; height:500px;">
  		<img src="bg.png" alt="" />
  	</div>
 
        <!-- Layer 1 // Guides -->
  	<div style="width:500px; height:500px;">
  		<img src="guides.png" alt="" />
  	</div>
 
        <!-- Layer 2 // Text -->
  	<div style="width:500px; height:500px;">
  		<img src="name.png" alt=""/>
  	</div>
 </div>

Set the size of each DIV equal to the size of the image it is holding.

Step 4. CSS

We use CSS to define the window in which our parallax will render. Place the following rule in your stylesheet.

#parallax { 
  position:relative;
  overflow:hidden;
  width:400px;
  height:100px;
  margin:auto;
}

Step 4. Make it come alive with jQuery

In the head of your document, be sure to include the jQuery and jQuery.paralax libraries:

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.jparallax.js"></script>

Now we can add our jQuery:

$(document).ready(function(){	
	$('#parallax').jparallax({
		// Options
	},
	{xtravel: '30px', ytravel: '30px'}, // Layer 0 : bg.png
	{xtravel: '50px', ytravel: '60px'}, // Layer 1 : guides.png
	{xtravel: '200px', ytravel: '80px'} // Layer 2 : name.png
	);	
});

Each line of {options} creates a unique set of rules for that layer. Reduce the xtravel/ytravel values in order to lessen the parallax effect. Background layers move less than foreground layers so make sure their xtravel/ytravel values are smaller than foreground layers. Feel free to tweak these numbers as you see fit. jQuery Parallax supports a multitude of options, consult the plug-in page for more information.

And that’s it! You should have something very similar to my completed demo. If not, please post a comment or drop me an email and I can help you out. Enjoy.

Ubiubi

Birdfeed

Go Bible

2udoku

Dockyard

Fever

EveryBlock

Spendly

Spiffing

Weightbot

Big Deep Fitness

Reportage

Pokeseo

Little Snapper

Tea Round

Thermometer

Barista App

Daylite Touch

iShots

Mock Draft

Parking App

Tic a Tac Poker

Where To?

Conclusion

I believe there is something to be learned from iPhone microsite design. Whether it’s brevity, clear communication, large calls to action, or just plain captivating, these designers got it right.

Hungry For Change

Prairie Fest 2009

Juan Diedo Velasco

Literary Bohemian

The Design Hippy

Cedevita Go!

Dragon Interactive

Font ex

Julius Mattson

Kashmir Creative

Inner Metro Green

Outlaw Design

Tea Around

Ditley

Danny Diablo

Progressive Red

Archstudio

Corvus Design Studio

Agote

Peter Pearson

Viral Film Festival

Todd Adams

Creative People

Australia FIFA Bid

Pirata

Snopp

World Nude Day

Terry Noel

Strategy 1: The Hammer

This anecdote adds to the point that It’s not about the time spent on a project, It’s about the value of the service rendered.

The manager of a manufacturing plant who, unable to solve a mechanical breakdown, sent for the retired engineer who had installed the machinery. Following a brief inspection, the engineer took a hammer and hit a pipe which did the trick. The next day the engineer submitted a bill for $1,000 to a horrified manager. Above the protests at the charge for a solitary hammer-blow the retired engineer explained, “Only $1.00 of it is for hitting the pipe. The other $999 is for knowing where to hit it.”

We can easily put this into web terms. Let’s say you have a client that needs a social/community portal with user profiles, user blogs, a forum, and a custom theme. Little does the client know, but I could hack their site together in a matter of minutes with Drupal, phpBB, and a couple plug’n'play modules. Now do I charge them a pro-rated amount based off my typical hourly wage or do I charge based off the value of the website I just built?

Strategy 2: Picasso in the Park

The moral of this story is that a service with higher price tag is not necessarily a scam. Consider this often quoted story about Picasso:

Legend has it that Pablo Picasso was sketching in the park when a bold woman approached him.

“It’s you — Picasso, the great artist! Oh, you must sketch my portrait! I insist.”

So Picasso agreed to sketch her. After studying her for a moment, he used a single pencil stroke to create her portrait. He handed the women his work of art.

“It’s perfect!” she gushed. “You managed to capture my essence with one stroke, in one moment. Thank you! How much do I owe you?”

“Five thousand dollars,” the artist replied.

“B-b-but, what?” the woman sputtered. “How could you want so much money for this picture? It only took you a second to draw it!”

To which Picasso responded, “Madame, it took me my entire life.”

That story gives me shivers every time I hear it it’s so true. What many clients and freelancers sometimes fail to realize is that sometimes an hourly rate just isn’t the most effective metric for invoicing. Expertise must come into consideration.

Convincing a client your worth that much

The beautiful thing about the internet is how easy it can be for anyone, and I mean anyone to publish themselves. Don’t let the ease at which you can publish to the internet mitigate the value of what you are doing for a client. If a client fails to see the value in what you are proposing, then it’s time to educate them!

Prove to the client that what you are proposing is an investment, and they will be less hesitant to hire you.

Websites have real value

Show the client how their website is an extension of their entire business: sales, marketing, customer service, and especially PR. A website is akin to digital plot of land with the potential for millions of users.

Give them the right perspective

Put your project rates in with the same context as other popular media vectors. How much would a client expect to pay for traditional media space? For a TV ad, a billboard, or a magazine space? Is a weeks worth of newspaper ads worth more than a website that can persist indefinitely?

Be the confidence man

Most clients have little or no experience working with freelancers and will often try to barter to a lower rate. In fact, no matter how low your rates are, clients will typically always try to challenge it. It’s important to remain confident in your pricing, not budging on your rate, but instead offering up the fact of “Oh really? I’ve found my prices to be quite competitive in this area.”

A surprised, yet confident, demeanor will calm a client and reassure that you’re worth your rate.

In conclusion..

The sooner you as a freelancer can determine the value of what you do versus the value of your time, the sooner you can begin confidently scaling your rates as you see fit. This is an important issue in web work, so keep an eye out for more posts on adding value to your work.

So why make a blog?

I spend a lot of time monitoring web trends including (but not limited to) web design, web standards, PHP development (CodeIgniter of course), client side frameworks (Flex, Mootools, jQuery), social applications, and monetizing.  Much of what I discover will be discussed here.

About this template

I built the WP template rather quickly so there may be some UI bugs here and there.  I apologize in advance for that.  I would, however, like to thank Kyle Neath at Warspire for developing the wonderful theme Hemingway, which became the foundation for this template as it stands.  I think there is something to be said for a designer that can take risks with minimalism all the while maintaining elegance, so here I am with my attempt at minimalis elegance in this theme.

So where’s your portfolio?

The conception of this blog also signifies what I would call “career realignment”. I am basically moving away from being a service provider, or freelancer, and instead I am moving towards living off a product-based business. In the meantime, I am gainfully employed at a great company, ExactTarget. So with no potential employers/clients to impress, I don’t see any purpose on keeping my portfolio online. If you are still interested in seeing it, you may email me.