JoelPeterson

Home | Blog | 2012 50/50 Poker Tournament | Fundraiser Mailing List

Putting down the things I Pick up

Tips and Tricks I have gathered in web development

Tweet

Heroize jQuery Plugin

By Joel Peterson on June 24, 2011

The Heroize plugin generates a customizable animated hero/feature pane for use on your site. Features include

  • play/pause toggle
  • jump to pane buttons
  • keeps code clear and optimized for search engines
  • timer
  • Default panel display if Javascript is not enabled
  • slide transitions.

Download

Click here to download jQuery Heroize Plugin (226.29 kB)

Sample

How to implement

Setup your HTML in the following format:

Feat One
Feature 1 text
Feat Two
Feature 2 text
Feat Three
Feature 3 text

Be sure to include the jQuery library and the Heroize plugin files.

Then simply run the function “heroize” on the #hero container.

jQuery(document).ready(function() {
  jQuery('#hero').heroize();
});

How to Customize

The hero pane is highly customizable.
You can override the default settings of the plugin by passing parameters

jQuery('#hero').heroize({
	'heroTransitionSpeed': 700,   //transition time in miliseconds
    'heroTimeDelay': 8000,		  //panel display length in miliseconds
    'heroPlayImg': 'play.png',	  //path to custom play button
    'heroPauseImg': 'pause.png',  //path to custom pause button
    'heroNextChar': '>'        //Character to use in "Next" button
});

In addition the included CSS file has been clearly marked to easily configure the

  • height
  • width
  • fonts
  • opacities
  • colors
  • text bar properties

References

  • I built this plugin using Stefan Gabos’ jQuery Plugin Boilerplate – A great starting place for kick starting a jQuery plugin.

Posted in Javascript, jQuery, plugins, Tips & Tricks | Tagged CSS, HTML | Leave a response

Tweet

Streaming Netflix and Video from iPhone in the Car

By Joel Peterson on June 7, 2011

With a couple of long car trips on tap this summer it was time to address the backseat entertainment options for my 21 month old. He’s an antsy ball of energy that would rather run his head into the headrest over and over than be subject to a car ride longer than 4 miles.

Brandishing my iPhone and a streaming Netflix account like a sword in battle I felt confident that a solution was only a Google search away. What I discovered, however, through perseverance and several trips to multiple electronic stores is that one can never realize exactly how little the customer service people actually know.

The good news is the easy solution exists – but there is a lot of noise out there and plenty of ways to get tripped up along the way. The goal of this article is to save a few trips to the store and a few headaches to anyone who comes after me who chooses to pick this fight.

Goal
The goal, at the outset, seems simple enough.
“To harness the ability to stream Netflix and Videos from the iPhone to an external screen in the car while keeping the iPhone and screen charged.”  To be clear – I am not looking for a custom installation job here – just a temporary ad hoc solution that can easily be removed when not using the car.

Simple Enough. And here’s your grocery list complete with my Amazon referral link to help pay for all of the gas I used getting to and from Best Buy and Radio Shack to make this thing work:

  • Griffin Component Video Cable for iPod
  • Sony DVP-FX970 9-Inch Portable DVD Player
  • Case Logic PDVK-9 7 to 9-Inch In Car Portable DVD Player Case (Black)
  • Belkin Dual USB Car Charger for iPod (Black)
  • Female to Female 3-RCA Coupler

If your car only has one Cigarette lighter then you’ll need a splitter not unlike this one:

  • BESTEK Twin 12 Volt 24 Volt Input Car Cigarette Lighter Socket Charger Splitter 150W with Dual USB Ports (black) MRS152UV-3

Let’s break down picture style:

  1. Plug the iPhone into your car charger
  2. Plug your video cable into your iPhone.
  3. Get your AV out capable CD player ready with the included RCA plug adapter
  4. Connect the griffin RCA outs with the CD player’s RCA outs with a female-to-female connecter
  5. Set the case up in the car, hide the cables, and you should be about ready to entertain

End result? Exactly what I was looking for…  iPhone streaming Prison Break (season 2) via Netflix to the Screen in the car while everything remains plugged in and fully charged.  Mission Accomplished!

Here is the setup:

Posted in DIY, iPhone, Netflix | Tagged Mission Statement | Leave a response

Tweet

Obama’s Visit to WTC [Video]

By Joel Peterson on May 6, 2011

The company I work for is located on the 32nd floor of World Trade Center 7. As such we are privileged to have amazing views of New York City – especially of Ground Zero and the ongoing construction of the Freedom Tower and the 9/11 Memorial.

Yesterday President Obama visited New York which included a trip to a local fire company and paying his respects at the site of the terrorist attacks.

Luckily the bomb dogs stationed in our lobby didn’t seem to mind that I brought my video camera to work. Please enjoy a few select shots from my vantage point.

Note: The hand held video camera is on a tight zoom which makes for shaky video. This is especially noticeable when I laugh at Bob Slade’s joke. If you tend to experience motion sickness I would recommend you grab a plastic bucket before enjoying this video.

Posted in Off Topic, Video | Tagged Bob Slade, Freedom Tower, Ground Zero, President Obama | 2 Responses

Tweet

What the Internet Looked Like Upon Bin Laden’s Death

By Joel Peterson on May 3, 2011

Absorbing the news yesterday morning with the rest of the world I was struck at how one single event could shape the internet in an instant. The moment was both powerful and fleeting. In an attempt to ‘capture’ the moment I started taking screen shots. Below is a montage of news websites from around the world taken at approximately 7am EST on May 2nd. No dressing up. No ad removal. No retouching.
Internet Montage Bin Laden Dead

Posted in Off Topic | Tagged EST | Leave a response

Tweet

jQuery/CSS3 Clock Getting Some Love

By Joel Peterson on April 29, 2011


It has been fun and exciting to watch the viral effect of the jQuery/CSS3 Colour Clock Rebuild ripple across the internet. On April 18th Webdesigner Depot featured the clock in What’s New for Web Designers – Apr 2011. On April 28th the Brazilian website www.brunoavila.com.br posted Um relógio hexadecimal?! .

And the loves keeps coming:

  • http://www.lafermeduweb.net/
  • http://www.scriptdeck.co.uk/links/
  • http://www.jquerybuzz.com/
  • http://www.delicious.com/

Posted in Javascript, jQuery | Tagged Webdesigner Depot | Leave a response

« PreviousNext »
Thanks for scrolling all the way down here! Want more? Catch me on Twitter, FourSquare, Delicious, LinkedIn and My RSS Feed