p51 Labs » Javascript

Simply-Buttons v2

Kevin — Wed, 11 Nov 2009 08:36:32 +0000

TESTED IE6 IE7 FF(PC/MAC) Safari SafariMobile Opera(PC/MAC)

Background

I had some time a while back and read a few interesting articles on buttons:

These got me thinking… these techniques are pretty nice, but I think they can meet somewhere in the middle and make something even better, after all the button tag was created to make really nice buttons for your sites (W3 Button Element). After a little work I came up with the “Simply-Buttons Technique”.

Benefits

Buttons size to fit text.
There are 3 states: Inactive, Active, and Hover.
They look and behave the same way in every browser and operating system.
The do not need the javascript to work, they work with just the css
Way better looking buttons than what anyone else can do with XHTML/CSS, isn’t that reason enough?!

How it Works

The markup is pretty simple, as you can see below. The thing to notice here is that both the button and link tags each have a nested-nested span tag.

 


  Button

Now there are two parts involved here, the first thing to know here is that this method will work with just CSS. However it works a little better with some Javascript enhancements. Let’s take a look:

Generic (no javascript)

Now we see the buttons load nicely here, we are using the Sliding Doors Technique. The caveats are:

There are outlines on the buttons.
The text is selectable.
These buttons are not mobile friendly (the button tag).

The Solution

In comes the the Simply-Buttons Javascript component. The library solves the caveats above as you can see below:

YouTube Style (w/ javascript)

Below is the object you can configure to further customize the buttons to suite your design.


  options : {
    hyperlinkClass : 'button' // 'a' tags with this class will be processed
    ,activeButtonClass : 'button_active' // Active class for active buttons
    ,states : { // The various states and css properties, define them as normal
      outer : {
        active : {
          backgroundPosition : 'bottom left'
        }
        ,inactive : {
          backgroundPosition : 'top left'
        }
      }
      ,inner : {
        active : {
          backgroundPosition : 'bottom right'
        }
        ,inactive : {
          backgroundPosition : 'top right'
        }
      }
    }
    ,iphone : {
      replaceButtons : true // if iPhone; replace buttons with inputs?
    }
  }

Download the Code/Sample

Below you can download not only the core CSS and Javascript files but you also will get a few samples. I am not the greatest at tutorials so I will update this post as feedback comes in, however there are quite a few comments throughout the files. The important files are: stylesheets/buttons.css, javascripts/simply-buttons-v2.js.

Download Simply Buttons v2 (zip)

Installation

Simply include the stylesheet and javascript and make sure they can find your images. Then simple call the init function, either using the default options as below or configuring it as show above.

Customize

As shown in the YouTube example, you can easily modify the buttons look and feel. You can do this by creating your own stylesheet and you can use the one supplied as an example, its filled with comments. There are also options that can be changed and configured on the javascript end as show above.

SUPPORT: Feedback and Donations help to support this Plugin and future development.

Spread the Word

WP Additions – Pagination

Kevin — Sat, 07 Nov 2009 10:49:35 +0000

I am happy to announce the release of the first of many plugins coming soon for wordpress, WP Additions – Pagination! The WP Additions plugins will be a series of Wordpress plugins designed to improve and extend what Wordpress already does. The Pagination plugin is the first, and a useful one too.

Pagination in the Wordpress Administration has always been a bit tedious when you have hundreds if not thousands of rows to go through. This is no longer an issue, the WP Additions – Pagination plugin converts the pagination for a variety of panels (posts, pages, comments, users) to an ajax pagination slider. This slider allows you to easily and quickly scroll your posts for example, getting right to what you want without the fuss. Below is a screenshot of what the new pagination looks like.

WP Addtions - Pagination Slider Screenshot

Download WP Additions – Pagination via Wordpress

Questions and/or Comments?

Please post your questions and comments below for now and I will get to them as quickly as I can.

SUPPORT: Feedback and Donations help to support this Plugin and future development.

Spread the Word

Upgraded Typography with sIFR3

Kevin — Fri, 19 Dec 2008 10:16:38 +0000

I work from day to day on a mac. That being said, web pages look much better on my screen than say on a windows machine. Well the other day I saw my site on a windows machine… what a horrid pixelated mess the type is on Windows XP. That being said I upgraded much of the typography on the site with sIFR3, I am not sure if this is how it will end up but for now I think it works rather well.

Spread the Word

Simply-Buttons Technique

Kevin — Sun, 07 Dec 2008 01:12:57 +0000

UPDATE! Version 2 is out, check it out ».

TESTED IE6 IE7 FF(PC/MAC) Safari SafariMobile Opera(PC/MAC)

Background

So I have decided to share a button technique I have been using for awhile with the public. I had some time a while back and read a few interesting articles on buttons:

These got me thinking… these techniques are pretty nice, but I think they can meet somewhere in the middle and make something even better. After a little work I came up with the “Simply Buttons Technique”.

How it Works

The markup is pretty simple, as you can see below. The thing to notice here is that both the button and link tags each have a nested-nested span tag (…say that 3 times fast!).




  Button

Generic (no javascript)

YouTube Style (no javascript)

Now we see the buttons load nicely here, we are using the Sliding Doors Technique. The caveats are:

There are outlines on the buttons.
The text is selectable.
These buttons are not mobile friendly (the button tag).

The Solution

In comes the the Simply Buttons Javascript component. It is currently written using the Prototype framework. I will be writing a version that is framework independent soon, but this works just as well. The library solves the caveats above as you can see below:

Generic (w/ javascript)

YouTube Style (w/ javascript)

Below is the object you can configure to further customize the buttons to suite your design.

this.options = Object.extend({
  hyperlinkSelector: 'a.button',
  activeButtonClass: 'button_active',
  states: {
    outer: {
      active: {
        backgroundPosition: 'bottom left'
      },
      inactive: {
        backgroundPosition: 'top left'
      }
    },
    inner: {
      active: {
        backgroundPosition: 'bottom right'
      },
      inactive: {
        backgroundPosition: 'top right'
      }
    }
  }
}, options || {});

Download the Code/Sample

Download Simply Buttons (zip)

Thoughts

I will be updating the Javascript in the weeks to come with a version that is not framework dependent. Other than that I would love to hear thoughts, suggestions, or even new takes on this technique. Let’s bring the button back!

NOTE To see this button style in action, check out the Contact Page.

Spread the Word

Free YES Radio API

Kevin — Thu, 04 Dec 2008 09:35:23 +0000

Jeremie Miller has been hard at work over at YES.com API. He has created something really special here, it’s an api (JSON/XML) that allows you to get real-time information about actual physical Radio Stations. Everything from the current song, to logs, charts, download links, artist & song information and a whole lot more.

…and its FREE!

This is pretty nice, and really opens up a whole new realm of possible applications for the web. Especially with the MTV API that is available now. Stay tuned to this blog for some widgets/applications being launched soon using this new api. In the meantime you can check out the new YES widget that uses this api.

New YES.com (Widget uses new YES.com API)

Spread the Word