Posts Tagged ‘plugins’

Announcing the TranslateThis Button for WordPress

Announcing the TranslateThis Button for WordPress

I just released a new WordPress plugin to leverage the TranslateThis Button, a Javascript translation widget that uses the Google Language API. This plugin provides an easy interface for customizing the options in the TranslateThis Button. The widget can be either be displayed anywhere in your theme with a template tag, or be included as part of the widgetized sidebar.

The plugin provides a variety of settings that can be accessed in the WordPress admin section:

  • Control the languages in the dropdown and the text of the various UI elements.
  • Enable Google Analytics tracking for translation events.
  • Use new button imagery, or disable images altogether, opting for text-only links.
  • Confine the translation to the post/comments, or translate the entire page.
  • Disable the cookie, or allow the plugin to translate all the pages on your site automatically.
  • And more…

jQuery Contra Plugin – Up, up, down, down, left, right, left, right, B, A, enter

jQuery Contra Plugin – Up, up, down, down, left, right, left, right, B, A, enter

Remember the code from Contra on original Nintendo? Up, up, down, down, left, right, left, right, B, A, start; it’s also known as the Konami Code and the 30 Lives Code.

This famous sequence of buttons from the 80’s isn’t going anywhere: in more recent times it’s been in a Moldy Peaches song, and used as an easter egg in Google Reader and Facebook, to name a few.

But I’m sure tons of great things can still be done with the code from Contra, so I built it into a simple jQuery plugin that can be easily used on any site.

The jQuery Contra Plugin allows you to call a function of your choice whenever a user enters the Konami Code (up, up, down, down, left, right, left, right, b, a, enter).

Download the Contra Plugin

Read the jQuery Contra docs

How to use … Read more…


TranslateThis – A Javascript Translation Widget for Noobs and Nerds Alike

TranslateThis – A Javascript Translation Widget for Noobs and Nerds Alike

TranslateThis is a new Javascript widget that provides 52 languages of translation by leveraging the Google Language API.

Installing TranslateThis couldn’t be easier—simply copy and paste the widget code anywhere on your website, you don’t have to upload any files or change any settings.

Besides being easy to use, TranslateThis also provides many attractive features for developers. First off, requests to the Language API run in Javascript, so the translation is pretty fast. Additionally, the script is lightweight, weighing in at just over 11kb with another 7kb of imagery. And since it doesn’t depend on any Javascript library, TranslateThis can be implemented on any website without additional overhead. Finally, TranslateThis has been tested in all modern browsers and its user interface is designed to be straightforward and seamless.

What can you customize in TranslateThis?


Yet Another Featured Posts Plugin for WordPress (YAFPP)

Yet Another Featured Posts Plugin for WordPress (YAFPP)

Yet Another Featured Posts Plugin provides an easy-to-use interface for featuring specific posts in a WordPress blog. After installing the plugin, you can feature and unfeature posts by clicking on each post’s ‘featured star’ in the WordPress edit posts page.

Yet Another Featured Posts Plugin has a variety configuration options, allowing you to control a number of display options as well as which users can feature posts. For developers YAFPP allows several output options besides the default: it can return a data array, modify the next query for WordPress’ the_loop(), and or return formatted data (which can be easily formatted through the admin panel).

Download Yet Another Featured Posts Plugin (YAFPP)

YAFPP Screenshots

Read the documentation

How to use YAFPP

To start, download YAFPP and upload it to your site’s wp-content/plugins/ directory. Activate the plugin and go to the posts listing in your WordPress admin … Read more…


QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler

QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler

I’m happy to announce the release of QuickFlip 2, a major reworking of the jQuery plugin that flips any piece of HTML markup over like a card. The new version is faster and even easier to use—simply call the flip animation through a jQuery selector and the QuickFlip will flip the front panel to show its back. The flip effect is similar to the UI animation on the iPhone

Download QuickFlip 2 for jQuery

Read the QuickFlip documentation

QuickFlip works by using an animation shortcut that is barely noticeable when flipped quickly (hence the name). This shortcut improves performance while allowing the flip effect to work smoothly with any piece of markup regardless of images, backgrounds or CSS.

It provides an attractive alternative to other slower and more resource heavy Flash and jQuery flip animations. However if you want a smoother option with … Read more…


YouTubin’ Plugin for jQuery

YouTubin’ Plugin for jQuery

YouTubin’ is a jQuery plugin that makes embedding YouTube videos clean, easy and unobtrusive. In its simplest form, YouTubin’ grabs any links that point to a YouTube page and replaces them with an embedded video. To do so, YouTubin’ leverages SwfObject 2 if available, but otherwise just embeds the video through standard markup.

Advanced options include flagging specific video elements using a jQuery selector and setting a variety of swf properties such as dimensions, flash version, flashvars and params. Youtubin’ can even be used to cause the video to embed once a link is clicked rather than when the page loads.

Download YouTubin’ jQuery Plugin


Scrolling Parallax: A jQuery Plugin

Scrolling Parallax: A jQuery Plugin

Scrolling Parallax is a new jQuery plugin that binds a parallax effect to the scrollbars and mouse wheel. This allows a background image or anything else to scroll at a different pace than the web page when a user scrolls around. The parallax effect that results is an easy way to create an illusion of depth on your website.

Basic use of the Scrolling Parallax plugin is extremely easy. Simply pass the path to an image, and the plugin takes the image and stretches it to the window width and 150% of the height. The extra 50% of the height is scrolled down along with the document, smoothly reaching the end at the same time as the page.

The Scrolling Parallax plugin is also very versatile. There are a wide variety of options including scrolling faster, slower, looping and reversing the animation and tiling the … Read more…


Contact-Pop: Contact Form Overlays with a Simple jQuery Plugin

Contact-Pop jQuery Plugin

Contact-Pop is a jQuery plugin that makes contact forms with grayed out overlays incredibly easy. The basic script grabs any links that point to your contact page and flags them for the Contact-Pop popup. When these links are clicked, Contact-Pop grays out the page and pulls in the contact form using AJAX. That means that with just a few lines of code, you can convert your site to use Contact-Pop’s form and overlay rather than your current contact page.

While there are a lot of options for producing grayed out overlays in jQuery, Contact-Pop provides a more robust and specialized solution for in-page contact forms. The main advantage is ease of use: simply flag any links to your current contact page by href or jQuery selector, and ContactPop does the rest. Combining this simplicity with a plethora of customizable options, Contact-Pop is a useful plugin for … Read more…


QuickFlip jQuery Plugin

Quickflip Plugin for jQuery

QuickFlip is a jQuery plugin I wrote that uses a CSS trick to cause a div, paragraph or any other piece of HTML markup to flip like a card. With a result similar to the UI animation on the iPhone, this jQuery plugin is easily integrated into your webpage to make any portion appear to flip and show its back.

When a flip occurs, the front panel is split in half with Javascript. The right and left halves slide into one another, and afterwards the opposite occurs with the back panel. While it's not as smooth as some Flash animation, it all happens so quickly that it really looks like the panel is flipping over (more…)


Handy CSS Cleanup Tool

Dust-Me Selectors

Inevitably, when finishing development of a front-end, I find myself going through the painstaking process of cleaning up extraneous CSS styles. This style was for debugging, this block was for a page that got nixed, this piece I used when conceptualizing the site another way: I don’t think it’s possible to develop a website without removing some styles at the end. Dreading another round of CSS cleanup, I considered programming a tool to spider a site and tell me which parts of the stylesheets were used. It seemed a daunting task so I checked online, and sure enough, someone had already developed it, and far better than I could have. The tool I found, Dust-Me Selectors, is a Firefox extension that makes cleaning up CSS a snap. It can spider an entire site or a group of pages to determine which CSS blocks are unused … Read more…