Ethan Hackett Design Just another WordPress site Wed, 16 Sep 2015 18:58:49 +0000 en-US hourly 1 HTML5 ContentEditable Wed, 16 Sep 2015 18:34:27 +0000 image

When we built the new, we switched to WordPress as our CMS in order to give our business team the ability to manage content rather than taking up developer resources for simple copy changes.

While creating the necessary inputs required to manage the headers, paragraphs and bullets, we quickly realized the admin pages were turning into a long pages filled with inputs.

Aside from making an overwhelming form for our marketing team, that method also separated copy and design elements. When a page is reduced to a series of inputs it becomes difficult to understand what impact, if any, copy changes will have until they are saved and viewed on the front end.

We knew the best solution would be one where editors could simply click on an element, make the copy change, and immediately see the impact it would have on the page.

HTML5’s ContentEditable attribute provided the user-side functionality we wanted. We created a simple javascript snippet that would take any text changes in a ContentEditable element and pass it to a paired hidden input.

$(document).ready(function() {
// Loop through each of the empty .editable elements and add filler edit text.
$(this).text(Edit Me);
// On .editable blur() – when a user clicks off of an .editable element take it’s text and pass it to the corresponding input.
$(.editable).blur(function() {
var editableContent = $(this).text();
var inputID = # + $(this).data(editable-input-id);
// If there isn’t any content in the input area replace it with edit text filler text.
if (editableContent == ) {
var editableContent = ;
$(this).text(Edit Me);
// Replace the input’s value

view raw
hosted with ❤ by GitHub

With the Javascript in place, we just needed the editable element and it’s companion input 


  • The ContentEditable attribute tells the browser how to engage the content.

  • The editable class is used by the javascript to target the element.

  • The data-editable-input-id points to the id of the input where the value is saved.


  • It needs an id to target

  • The type attribute should be set to hidden so users don’t see it.

  • Placeholder isn’t necessary unless you’re showing the input.

<div contenteditable=true class=editable data-editable-input-id=input-name></div>
<input id=input-name type=text name=input-name value= placeholder=Don’t Touch Me />

view raw
hosted with ❤ by GitHub


The end product is a robust yet simple interface that our marketing and business teams love. It also has freed up extra development time and removed the delay in getting copy changes deployed.

For more complex editing capabilities and streamlining of data binding save you’re updated values into a single JSON string then save and parse for element values.

Originally Posted on the Cotap Engineer Blog – Click Here

]]> 0
Post Tiles Wed, 10 Jun 2015 13:30:41 +0000 Read More...]]>

Reimagining How The World Displays Posts.

Post tiles is a WordPress plugin designed to display posts in a tiled format. The current version allows WordPress users to select which categories and posts to display. It also allows admins to control the number of slides,  category color, and whether to utilize some fancy jQuery animation affects.

I’m a huge fan of WordPress and I’ve been involved in the WordPress community for years. I’m glad to finally have a chance to give back to the community by sharing my WordPress plugin Post Tiles.

Start using the Post Tiles plugin today. It’s free.

Download Post Tiles

]]> 0
Merry Christmas 2014 Sun, 07 Dec 2014 16:14:49 +0000

Christmas illustration of the family.

]]> 0
Alien Illustration Mon, 07 Jul 2014 15:08:42 +0000

]]> 0
Dune Poster Tue, 15 Apr 2014 14:55:17 +0000 Here’s a fun illustration I created for a competition put on by The Little Theater.

]]> 0
Winter Wondergift – Facebook Page Mon, 26 Nov 2012 16:00:49 +0000 Read More...]]>

Leverage Facebook Pages/Apps to create a unique way to engage your social community

Facebook’s custom pages allow for a some fun flexibility leveraging iframe technology and custom API’s for incentivised engagement. There’s a technique called “Reveal Page” or “Reveal Tabs“. This technique requires that a user like the page prior to gaining full access to the app.

I went the PHP route for Facebook’s API through a hosting account and CheapSSLs for the SSL. As of october 2012 facebook is requiring all linked in content to have an SSL certificate. Both of these offered inexpensive solutions and were relatively easy to setup. It did require contacting both of their support but with live online chat it took only a matter of minutes to configure the ssl.

As a facebook developer (register for free) you can access their libraries and sample codes including the facebook library. Once I had the hosting setup I created a php page which checks to see if the user has liked NextStepU’s facebook page. If they do display the page content if not display the splash page.

I used a simple AJAX registration form so that the page doesn’t have to reload or do a redirect.

The most fun aspect of the project was the illustration and leveraging fancy javascript for snow.

At NextStepU, we started with a super simple sketch while brainstorming. We mapped out the content we wanted to use then did some quick doodling which got us onto the idea of using some ice burgs, penguins and an adorable narwhal. We added some fun little stylistic flairs and just had fun.

It’s not very often that you get to use fancy javascript code like snow falling. Seldom are flashy javascript techniques appropriate, so it was nice to use some fun snow falling for a change.

See The Facebook Page

[See image gallery at]

]]> 0
Winter 2012 Sketch Sun, 18 Nov 2012 22:56:54 +0000 Here’s a fun little winter yeti desktop picture and facebook timeline photo.

Facebook Timeline Photo

Download Facebook Timeline Image

Desktop Image

Download Desktop Photo

]]> 0
BuyDelay Sat, 10 Nov 2012 21:39:48 +0000 Read More...]]>

I created a web application that would help users develop wiser purchasing habits.

The idea was simple, Allow users to add items that they want to buy and set a delay date which will give them more time to think through the purchase. The additional time will help reduce impulsive purchases by challenging the user to wait until the end of the delay period before making a purchase.

BuyDelay on iPhones

Mobile Power

Sometimes walking out of the store is half the battle. With the mobile flexibility of the app we’ve made it super easy for users to access on the fly with their smart phones. They can enter a price, set the delay time, and even add a url to that item if it’s listed on a website.

The main focus of stores and advertisers is to convince you to buy their product. They use all kinds of methods and tactics to convince users that purchasing the item is the best option. And as a consumer giving yourself time to step back and think through a purchases drastically decreases the potency of their advertising efforts.

After an item goes through it’s delay period the user has the option to Buy, Pass or Delay again.


Some items are necessary to purchase and after carefully thinking through the pros and cons the user can decide to buy the item. Once the the user decides to buy the delayed item it moves over to their savings section under purchases.


Some items at first seem like a great idea or appear to be necessary but after careful thinking through the purchases or sometimes simply walking out of the store reveals that the users money may be more useful spent elsewhere. Also, in the time it takes for an item to be delayed other more important or unexpected expenses can arise that would otherwise be unaffordable had the user spent that money.


And for users who find themselves still unsure if they should purchase and item at the end of the delay period can put the item back into buy delay and give themselves a little more time to think it through.

In the savings section of the application there are two columns. In the Savings column all the items along with their prices the user decided to Pass on are listed and totaled. To the right is the Purchases column with items the user ended up buying.

View BuyDelay

]]> 0
Sparrows Feather Fri, 13 Apr 2012 14:09:50 +0000 Read More...]]>

Incredibly Beautiful Handmade Headbands

Sparrows Feather was a creative and fun project to brand the Sparrows Feather headband. We decided to use for their ability to print out multiple color versions of their mini cards all in one run.

The mini business cards were designed to serve two purposes. One of the uses was the traditional business card exchange and the other use was as tags on the custom headbands.

We also branded the page with custom banners and a profile icon.

Visit Sparrows Feather

]]> 0
The Fathers House Tue, 10 Apr 2012 13:44:22 +0000

For such a modern technologic church they needed an equally modern and flexible website.

The Father’s House is in the top 30 largest churches in all of New York. Avereging over 3000 per services and this year their conjoined Easter services at the Blue Cross Arena marked their largest services yet at over 14,000 attendees. The Father’s House is a leader in more ways than just size. They’ve integrated advanced technologies such as live church streaming, member networking, and native IOS and Android app integration.

Ethan has been amazing to work with. Great ideas, fast implementation and awesome support!  Will definitely continue the relationship with EH Design into the future. – Jonathan Malave

We wanted to build a site that would properly delivery their content across multiple devices from desktops and tablets to mobile smart phones. We utilized CSS3 Media-Query techniques to serve up their content in accessible ways.

We chose to build the site on the WordPress CMS system to take advantage of their native custom post type architecture and build an advanced custom admin panel which allows them to manage the more advanced functionality of the site. WordPress provides an incredibly advanced and powerful solution to back churches, ministries, and businesses of all sizes.

We integrated the Amazon S3 hosting to lighten the load on the local server. The Amazon S3 hosting serves up the heavy items like videos, audio, and images. This helps decrease the load time and get content to their users on a faster and more consistent rate.

Take a look at the website or look through the gallery below.

View The Fathers House Website

[See image gallery at]

Featured On

CSSLuxury.comCSS Winner

]]> 0