Chrome 21 (and below) has some strange behavior towards elements with the “contenteditable” attribute, if you dynamically clear its text/content on click using $('.className').text("") or $('.className').html(""). After one click, the text/content clears, but there’s no cursor. If you click again, then the cursor appears.

Note 1: Clicking an empty area of the "contenteditable" element makes the cursor appear. Clicking the text itself, however, makes you click a 2nd time to show the cursor.
Note 2: Tabbing/focusing into the element DOES NOT have the same problem.

This is very annoying, and surprising that only Chrome behaves this way. Basically, when you're hooking onto the "focus" event to clear your element's content, clicking the text of the element doesn't trigger the "focus" event you need. That's why the second click is required – to trigger the actual focus event. And again, clicking into your element's empty area fires off the focus event with one click.

Code example after the jump...

A few days ago I was working on a project where I needed to set the "active" state of <li> elements across multiple containers. These containers were divided into separate tabs, so one could be viewed at a time, but when one container updated, all the others needed to be updated as well.

Check out the instructions and code after the jump!

The launch of WordPress 3.0 skyrocketed the amount of tutorials available for creating Custom Post Types and Taxonomies. Anyone that has worked on highly-customized WordPress themes is familiar with the tedious process. Rest assured, the repetitiveness has been eased thanks to Themergency, a growing resource for WordPress plugins, tutorials and more.

View the Custom Post Type & Taxonomy generators!

Enormous credit must also be handed to Brad Williams, the creator of the Custom Post Type UI plugin, which has been around for quite some time. This plugin automatically takes care of the code without you having to copy and paste generated data into the functions.php file.

Happy theming!

When somebody clicks a search box, you expect the default text to clear away. If they click away without typing anything, the default text should return. Typical behavior, right? Here's how it's done:

1

<input type="text" value="Search..." onclick="if(this.value=='Search...'){this.value=''}" onblur="if(this.value==''){this.value='Search...'}">

Steps + Explanation

1. Locate your standard input/search field
2. Insert the following into the input tag:
   onclick="if(this.value=='Search...'){this.value=''}"
   This is responsible for clearing textbox when someone clicks in it.
3. Insert the following into the input tag:
   onblur="if(this.value==''){this.value='Search...'}"
   This is responsible for resetting the default text if it was left blank.

So, with some super-basic JavaScript, you can achieve this tiny detail that makes a world of a difference in the world of Interaction Design. Note: Don't forget to change "Search..." to your own value!

Passing parameters in the URL within WordPress Page Template such as "website.com/page/?name=Lasha&version=214" is generally OK, but be aware! If you use a parameter such as "year" in the URL, it will overwrite WordPress' own "year" variable (if you have pretty URLs enabled) and throw a 404! How did I learn this?

I wrote some PHP code within a Page Template that retrieved data from a custom database by passing parameters through the URL, using the $_GET method. One of my parameters was "year=2010", and I kept getting 404s until I changed it to "fiscalyear" where it no longer interfered with the mod_rewrite rules.

I hope this saves you the headache it caused me when writing custom PHP code within WordPress! 🙂

If you work only on the web, learn about print design and production. If you work only in print, learn the basics of web design & development. Expanding your skills will up your competitive level in a market that has become overly saturated with basic talent.

One cannot express how important it is to design for the web. The web has become an instant phenomenon that is being quickly taken over by the big dogs of the media world. Methods of content consumption based on the Internet are multiplying faster than any other form of media in the past.

First there was the Amazon Kindle, and now we have the Android-based Nook eBook reader. Rumors about Apple releasing a Tablet of their own are flying around like aimless torpedoes. If you were to ask me, Apple is definitely planning something, and it'll probably be a huge hit.

To put it simply, the world is changing very quickly. If we fail to keep up to date with what's happening, our jobs will leave us for someone else. Stay open minded and read a lot of design blogs. See what people are raving about so that you can contribute in your own way. Don't forget to collect inspiration along your journey.

PS.  Print is not dead. As long as creativity isn't lost, it will continue to be a dominant form of media, regardless of the changes it goes through.

Design is something that lives off the thoughts and ideas we develop from a multitude of inspirational sources. These sources include but are not limited to nature, product design, print materials, motion special effects, and so forth.

Whether you're into web design, print design, or both, collecting and storing inspirational pieces of work are essential. Browser bookmarks can be used to save website links for future gazing, while print samples can be stored inside a folder/drawer for easy access.

Some may look at this as cheating and being unoriginal, but design it is all about forming new ideas from the things we like and the things that inspire us. Some of the most creative works out in the wild have clear representations of where the concept and visual execution ideas came from.

Bonus Tip: If you have a camera phone, use it to capture inspiration. It's fast, and easier to store than having a physical sample. Have a digital folder for storing all the snapshots.

If you are an aspiring designer of any kind, you should know that a book store is one of the most valuable sources of inspiration, ideas, and knowledge. Of course, depending on your location, it may be hard to come by a shop with a good collection of design publications.

I pay a visit to my local Barnes & Noble store every week, spending a minimum of 1 hour on reading, learning, and broadening my creative outlook. There are magazines for Web Designers and Developers, Advanced Photoshop Users, and Photographers, all of which contain tutorials, interviews, tips, and so forth.

One may think "why visit a book store when I can browse the entire internet for creative inspiration?" Well, to put it simply, there is a lot of garbage out there on the internet. When you're reading trusted publications that have been in the business for years, you're more likely to gain valuable knowledge.

Helpful links: (continue reading...)

If you're serious about going green, here are some easy steps you can take to make it happen. Yes, installing Fluorescent bulbs throughout the home and driving a hybrid can do a lot, but some of these you may not have thought of.

1. Hitting the right water temperature: Things like taking a shower, brushing your teeth, washing dishes, and so forth require a lot of water. Of course, we all love the soothing hot water as we bathe, but a nice warm temperature does just fine. Avoiding hot temperatures takes it easy on the boiler, which results in a smaller oil bill. This may not be the case for apartment dwellers, but taking it easy on the building's boiler can help on overall energy consumption (tell the neighbors!).
   Sub-Tip: You jump in the shower and turn the hot and cold water knobs to steady flow. The temperature is too cold, so what do you do? Instead of ADDING more hot water, try lessening the amount of cool water flow. This will save water, and the amount of heat generated by the boiler.
2. Shut off and unplug: Done charging something? Unplug it. Not using computer speakers? Shut them off. Putting the computer to sleep? Shut it down. Don't charge something unless it needs charging. On top of that, keep chargers unplugged since they use up energy even though nothing is charging. Easy solution to most problems: A power strip/surge protect, something you should already have. Sleep/Stand-by mode still wastes energy, don't do it!
3. Saving those plastic bags! Whenever you get plastic bags, save them! You never know what you can use them for. Yes, they make great garbage bags but they're terrible for the environment. Instead, try BioBags! For things like groceries and general carry-around stuff, cloth bags work best. They can be found everywhere for cheap prices so don't go saying they're too much or they're hard to find.

Here is a tutorial showing how to recreate the world famous Fox News logo. A Google search for the Fox News logo gave poor results so I figured I'd show you how to make one yourself. The techniques in this tutorial can be applied to many other tasks throughout the suite of Adobe applications.

View the tutorial after the jump!