This add-on is planned at Gravity Forms at some point but we just couldn’t wait as there is a big need now for this kind of functionality, so we took a first stab at it.

The plugin can be found at the WordPress Plugin Repository: Gravity Forms – Update Post v0.5.1

If you have any questions/suggestions/issues please email them to support@p51labs.com and if you would like to donate towards further development and rapid bug fixes a donation is always welcome!

Happy Editing!

• No Related Post

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:

• How to make sexy buttons with CSS
• Rediscovering the Button Element

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>
  <span><span>Button</span></span>
</button> 

<a class="button">
  <span><span>Button</span></span>
</a>

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.

<link rel="stylesheet" type="text/css" href="stylesheets/SimplyButtons.css" media="screen" />
<script type="text/javascript" src="javascripts/SimplyButtons.js"></script>
<script type="text/javascript">
  window.onload = function()
  {
    SimplyButtons.init();
  };
</script>

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.

• Simply-Buttons Technique
• Upgraded Typography with sIFR3
• WP Additions – Pagination
• Holy Grail Layout
• Free YES Radio API

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.

• Simply-Buttons v2
• Upgraded Typography with sIFR3
• Simply-Buttons Technique
• Free YES Radio API

…. there is more on the way.

• No Related Post

• Chat and Vote
• Check Logs/Charts for the last 7 days
• Watch YouTube Videos
• Download the Songs
• Win $100,000.00, an iPhone or some free music

Check out WFNX via YES

• Upgraded Typography with sIFR3
• YES API PHP Wrapper
• Free YES Radio API

• Simply-Buttons v2
• Simply-Buttons Technique
• WP Additions – Pagination
• YES Television Widget
• Holy Grail Layout
• Free YES Radio API

So what do we have here?

There a number of ‘Holy Grail’ layouts out there:

• A List Apart
• Ultimate Holy Grail
• 3-Column Holy Grail

The problem with them is that they are usually only for one purpose, or they have validation problems. Way back I was presented with a problem, I needed a multi-column layout for a CMS engine that could allow infinite design possibilities with only one template. I needed a true ‘Holy Grail’ layout. Hence the following was born.

• p51′s Holy Grail Layout

Now I know the name is suggestive, I apologize, its more me trying to be sarcastic. However this is a pretty mean-lean-green little layout in its own right. Let’s see how we can have some fun with it.

The Guts

The layout starts out as a 3 column layout with optional navigation bars as such:

The Markup

<div id="wrapper">

	<div id="header"></div>

	<div id="navigation-container-upper"></div>

	<div id="masthead"></div>	

	<div id="navigation-container-lower"></div>

	<div id="main">

		<div id="content">

			<div id="left"></div>

			<div id="center"></div>

		</div>

		<div id="right"></div>

	</div>

	<div id="footer"></div>

</div>

The CSS

*,
html,
body {
	margin: 0;
	padding: 0;
}

/* NN6/7 min-width is needed for scrollability when wrapper is centered */
body {
	min-width: 770px;
}

/* Use wrapper for Left Faux Column */
#wrapper {
	text-align: left;
	width: 770px;
	margin: 0 auto;
}

#header,
#navigation-container-lower,
#navigation-container-upper,
#masthead,
#footer {
	clear: both;
	width: 100%;
}

#navigation-container-lower,
#navigation-container-upper,
#masthead,
#footer {
	padding: 1px 0;
}

/* Use main for Right Faux Column */
#main {
	float: left;
	width: 100%;
}

#main:after {
 	/* Clear floating elements for NN6/7 */
    content: ".";
    display: block;
	height: 0px;
    clear: both;
    visibility: hidden;
}

#center {
	margin: 0 170px 0 170px;
}

#content {
  	float: left;
  	width: 100%;
	margin: 0 -95% 0 0;
}

#left {
  	float: left;
  	width: 170px;
}

#right {
  	float: right;
  	width: 170px;
	margin: 0;
}

/* IE Fixes for Win/Mac */
* html div#content {
	margin: 0 -100% 0 0;
}

Now three things of note:

1. The entire layout is wrapped in a div called ‘wrapper’.
2. ‘left’ and ‘center’ are wrapped in a container called ‘content’ while ‘right’ is after the ‘content’ container.
3. All of the #2 containers are wrapped in the ‘main’ container.

How to achieve other layouts

Ok, so we see on the demo page that we have some nice javascript links to change the layout. We have started with the core and added a basic theme. The following modifications show how we can make this layout anything we want, as the javascript shows off.

Fluid Layout

#wrapper {
	width: 100%;
	margin: 0 auto 0 auto;
}

Fixed Layout

body {
	min-width: 770px;
}

#wrapper {
	width: 770px;
	margin: 0 auto 0 auto;
}

Fixed Left Layout

body {
	min-width: 770px;
}

#wrapper {
	width: 770px;
	margin: 0 0 0 0;
}

One Column Layout

#right, #left {
	display: none;
}

#center {
	margin: 0 0 0 0;
}

Two Column Layout

#right {
	display: none;
}

#center {
	margin: 0 0 0 175px;
}

Three Column Layout

#right, #left {
	width: 175px;
}

#center {
	margin: 0 175px 0 175px;
}

NOTE When creating the columns here, the margin on the left and right of the ‘center’ column needs to be equal to or greater than the width set for the respective left and right columns.

For example

#right, #left {
	width: 200px;
}

#center {
	margin: 0 200px 0 200px;
}

NOTE When you change the page width, you should change the body min-width as well.

Get Source Files

Grab the demo and the css files below.

• Source Files (zip)

Thoughts?

So there it is, my version of a lean-mean-flexible layout that validates. Thus far it has proven to be pretty handy, however there is always room for improvement, thoughts?

• Simply-Buttons v2
• Upgraded Typography with sIFR3
• Simply-Buttons Technique

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:

• How to make sexy buttons with CSS
• Rediscovering the Button Element

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 type="button" value="Button">
  <span><span>Button</span></span>
</button>

<a class="button">
  <span><span>Button</span></span>
</a>

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)

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

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/buttons.js.

• 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.

• Simply-Buttons v2
• Upgraded Typography with sIFR3
• WP Additions – Pagination
• Holy Grail Layout
• Free YES Radio API

• YES API PHP Wrapper

< ?php

//  YES API Wrapper version 1.0
//  (c) 2008 Kevin Miller
//
//  This script is freely distributable under the terms of an MIT-style license.

class YESAPIWrapper
{

	const API_URL = "http://api.yes.com";
	const API_VERSION = "1";

	public function __construct()
	{
	}

	public function execute($method = null, $options = array())
	{
		if ($this->allowed_method($method))
		{
			return $this->fetch(self::API_URL . "/" . self::API_VERSION . "/" . $this->method . "?" . $this->options_string($options));
		}
	}

	protected $method;

	protected $allowed_paramaters = array(
		"station" => array(
			"name" => true,
			"callback" => false
		),
		"stations" => array(
			"match" => false,
			"freq" => false,
			"media" => false,
			"genre" => false,
			"loc" => false,
			"max" => false,
			"callback" => false
		),
		"log" => array(
			"name" => true,
			"ago" => false,
			"callback" => false
		),
		"recent" => array(
			"name" => false,
			"max" => false,
			"callback" => false
		),
		"chart" => array(
			"name" => false,
			"date" => false,
			"genre" => false,
			"hot" => false,
			"max" => false,
			"callback" => false
		),
		"media" => array(
			"q" => false,
			"mid" => false,
			"callback" => false
		),
		"related" => array(
			"mid" => true,
			"max" => false,
			"callback" => false
		),
		"artist" => array(
			"artist" => true,
			"callback" => false
		)
	);

	private function allowed_method($method)
	{
		foreach ($this->allowed_paramaters as $key => $value)
		{
			if ($key == $method)
			{
				$this->method = $method;
				return true;
			}
		}

		throw new Exception($key . " is a required parameter for the method (" . $this->method . ")!");
	}

	private function validate_options($options)
	{
		foreach ($this->allowed_paramaters[$this->method] as $key => $value)
		{
			if ($value && !array_key_exists($key, $options))
			{
				throw new Exception($key . " is a required parameter for the method (" . $this->method . ")!");
			}
		}		

		foreach ($options as $key => $value)
		{
			if (!array_key_exists($key, $this->allowed_paramaters[$this->method]))
			{
				throw new Exception($key . " is not an valid parameter for the method (" . $this->method . ")!");
			}
		}		

		return true;
	}

	private function options_string($options = array())
	{
		if ($this->validate_options($options))
		{
			return http_build_query($options);
		}
	}

	private function fetch($url = "")
	{
		return ($contents = file_get_contents($url)) ? json_decode($contents) : null;
	}

}

?>

• Free YES Radio API
• YES Television Widget

…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)

• YES API PHP Wrapper
• Simply-Buttons v2
• WP Additions – Pagination
• YES Television Widget
• Upgraded Typography with sIFR3
• Simply-Buttons Technique