• View Demo
• Plugin
• Minified Plugin

Version: 3.2 – Added a “className” option so you don’t have to use “.slider” as the wrapper

Version 3.1: Changed “children” to “find” so it will work with a UL. Thanks to Oro for the feedback

Version 3 of Sliding Labels brought some big changes, the largest being that I finally converted it into a working jQuery plugin.

Maybe it was the 200 e-mails requesting an official plugin, maybe it was my curiosity. Whatever it was, I heard everyone and I wanted to let you know that I’m listening to all the feature requests and bug reports; and I really do appreciate them.

Additions to version 3

Plugin status: Obviously creating an official plugin was the biggest change

Position: relative: It seemed like a lot of the questions I was getting had to do with adding position:relative to the .slider element in the CSS, so I just moved that into the script.

Animation speed: I added an option to easily control the animation speed. It can take strings like “fast” and “slow” or any numeric value.

Axis option: I got a lot of requests to add in some functionality to have the label slide up rather than only to the left. I added this in with an “axis” variable which can take either “x” or “y” for sliding direction

Subtractions to version 3

Label Color: Originally I had this in the script so it looked nicer inline to the field, but I got to thinking that this really should be defined in the CSS, and it’s just color; so I took it out.

Using the plugin

Just like the previous version, you need an element wrapping the <label> and <input> elements. I use a <div> in the demo, but you can use whatever you’d like. The only requirement is that it have the class name “slider”. I can change that if anyone finds it to be annoying, but let me know and I’ll update the script

HTML

<div class="form-slider">
<label for="user">User name</label>
<input type="text" id="user" name="user">
</div>

JavaScript

$(function(){

	$('#contactform').slidinglabels({

		/* these are all optional */
                className    : 'form-slider', // the class you're wrapping the label & input with -> default = slider
		topPosition  : '5px',  // how far down you want each label to start
		leftPosition : '5px',  // how far left you want each label to start
		axis         : 'x',    // can take 'x' or 'y' for slide direction
		speed        : 'fast'  // can take 'fast', 'slow', or a numeric value

	});

});

That’s all there is to it. Let me know what you think, any extra features you’d like and any bugs. I should be submitting this to jQuery.com in the next few days.

Lately, I’ve been having to work with a lot of redirects and I was going through different redirection options with a client. So I thought I would do a quick write up about the different types of redirection.

I also haven’t seen a collection of these in one place, so I thought I would put this together.

There are a few different types that are commonly use when redirecting users:

• .htaccess / apache
• php header
• javascript
• meta refresh

The top two are the one’s you’ll be using most often, I don’t really recommend the last two. But they are available, so I think they’re worth noting. So here they are in the order I would recommend:

.htaccess / apache redirects

Redirect /old_directory http://example.com/newdirectory

This redirection is most efficient at the apache level, but if you’re like me and are on shared hosting, getting into the apache installation probably isn’t an option. In that case you can put this in an .htaccess file in the root directory of your site.

Using an .htaccess redirection is great for moving entire sites because you can not only redirect a page, but you can redirect entire sites and subdirectories with one line of code.

PHP header redirects

<?php header('Location: http://example.com/newdirectory/'); ?>

PHP header redirects are good for single page redirects and if you’re not comfortable working with the .htaccess file. This code goes at the very top of the page you’re trying to redirect. If it’s not there you may get a “headers already sent” error.

If you’re publishing out static HTML files, you can still use this by adding this code into your .htaccess file:

AddType application/x-httpd-php .php .html .htm

This will let you execute PHP in an HTML file.

JavaScript redirects

<script type="text/javascript">
<!--
window.location = "http://example.com/newdirectory"
//-->
</script>

JavaScript redirects are generally not used unless you’ve exhausted the other two options. If you don’t have access to the .htaccess file AND you can’t run server-side script on your page, this is an OK fallback option, but you have to make sure to provide a link to the forwarding page incase a user is browsing without JavaScript.

Meta redirects

<meta http-equiv="refresh" content="0;URL=http://example.com/newdirectory">

As your last option, I don’t see this in the wild anymore, but it’s worth mentioning that it does exist and does technically work (I’m not sure about it’s validity in HTML 5). You would place this in the document HEAD with the rest of the meta elements.

content=0 is a second timer for the redirect, I have this one set to 0 so it will redirect immediately.

Those are the options I’ve used in the past; did I miss anything? Maybe an ASP redirect? Let me know!

Hi all,
I had a new article published over the weekend at Smashing Magazine. Check it out and let me know what you think!

Behavioral CSS

I wrote it quite a while ago and it seems to be showing a bit in the comments, but overall, I’m pretty happy with the way it came out and the reader responses it’s getting. Hope you enjoy Behavioral CSS

I know I haven’t posted in a while, but I wanted to stop by and let everyone know that I have a new article out on Noupe.com called “CSS Techniques I Wish I Knew When I Started Designing Websites”

It was pretty fun to write trying to think back to my beginnings in the Web and sort of relive that frustration. I tried to include something for beginners and some for the more advanced users, so hopefully everyone will be able to take something away from the article.

Let me know what you think!

The Problem

The font family in this text area default to Courier New, but that’s pretty ugly.

The Goal

Look at the nice font in this textarea!

The Solution

You have to redefine the font-family for a textarea. Just a weird quirk.

textarea{
font-family:Verdana, Arial, Sans-Serif;
}

I was building an RSS reader for a project last week and it turned out to be a cool little app. So I thought I’d share some of the code.

View demo

Download demo files

Let’s start off with the HTML we need to get some user interaction with the form. It’s a pretty basic, just some of checkboxes.

HTML

<form action="" method="post" id="selection">
  <h2>Choose your news sources</h2>
 <!--
  Setting all the checkbox names to "source[] helps us build the array on submit"
  We're also adding the RSS feed url to the checkbox value so we can save it in the array values
  -->
  <ul>
  <li><input type="checkbox" id="csskarma" name="source[]" value="http://www.csskarma.com/blog/feed/"/><label for="csskarma">CSSKarma</label></li>
  <li><input type="checkbox" id="cnn" name="source[]" value="http://rss.cnn.com/rss/cnn_topstories.rss"/><label for="cnn">CNN</label></li>
  <li><input type="checkbox" id="espn" name="source[]" value="http://sports-ak.espn.go.com/espn/rss/news"/><label for="espn">ESPN</label></li>
  <li><input type="checkbox" id="vitamin" name="source[]" value="http://feeds.feedburner.com/vitaminmasterfeed"/><label for="vitamin">Think Vitamin</label></li>
  </ul>

  <!-- Setting the submit name to "btn" -->
  <input type="submit" value="submit" name="btn" id="btn-submit"/>
  </form>
  </div><!--/#selectnews-->

The only real thing worth noting in the form code are the names of the checkboxes. We use all the same name to group them together and the [ ] helps create the array on submit. I just chose to use source[] because it made sense to me, but you can use anything as long as the names are consistent and the brackets are there. Just adjust your PHP accordingly.

SimplePie PHP

<?php
/* Get the SimplePie library */
require_once ('inc/simplepie.inc');

/* Create a new instance of SimplePie */
$feed = new SimplePie();

/* Get array */
// If the form has been submitted and the user selected news sources
if (isset ($_POST['btn']) && isset($_POST['source'])) {

    // Save the array of news sources to a variable $checked
    $checked = $_POST['source'];

    // Pass the array of news sources through the SimplePie set_feed_url() function
    $feed->set_feed_url($checked);

    // Also, save this data to a cookie called "feedurls" that will expire when the browser closes
    setcookie('feedurls', serialize($checked));

// If the form wasn't submitted look for the "feedurls" cookie
} else if (isset ($_COOKIE['feedurls'])) {

	// If the cookie was found, pass the data through set_feed_urls()
	$feed->set_feed_url(unserialize($_COOKIE['feedurls']));
}

/* Set item limit */
$feed->set_item_limit(3);

/* Enable caching */
$feed->enable_cache(true);

/* Provide the caching folder */
$feed->set_cache_location('cache');

/* Set the amount of seconds you want to cache the feed */
$feed->set_cache_duration(1800);

/* I don't know what "init" means */
$feed->init();

/* Handle the content type (atom, RSS...) */
$feed->handle_content_type();
?>

This is nothing that can’t be read in the comments, but the guts of the PHP comes in right under the “Get Array” comment. We’re checking to see if the form was submitted and the user selected news sources; if so, dump the values into SimplePie and save them to a cookie we can refer to later. The initial idea was for this to live at a pretty open place (a computer lab or something), that’s why the cookie expires on browser close.

I limited the per-feed output to 3 to keep it a little clean, but you can set that to whatever you want. It’d be pretty easy to let the user choose this as well with a select menu:

<select name="displayNumber">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

And replace $feed->set_item_limit(3); with $feed->set_item_limit($_POST['displayNumber']);. There may be some extra tweaking beyond that, but the general idea is to pass the submitted value into SimplePie.

jQuery

Now that we have the form fully functional we can layer some JavaScript on top of it to make it a little more nifty. This is using the jQuery Form Plugin. It’s the first time I’ve really used this plugin, but it’s actually pretty nice and easy to use. I had some little quirks with it, but nothing too major.

$(function() {

/* If JavaScript is active create a link to slide the form out */
$('#getform a').click(function(){
	$('#selection').slideToggle('slow');
	return false;
});//

/* make it look like something happened */
$('#selection, #reader').hide(); //
$('#reader').fadeIn('slow'); //

 /* bind form using 'ajaxForm' */
$('#selection').ajaxForm(options); 

/* Submit form via Ajax */
var options = {
    target:       '#rssloader',
}; //

});// End jQuery

View demo

Download demo files

Anyway, that’s all I have for today. It’s a pretty unpolished demo so let me know what you think, where I screwed up and if you can build on it and make it better. I’ll try to write some more soon.

Ingredient list

• SimplePie
• Starter files from CSS-Tricks
• jQuery
• jQuery Form Plugin
• Hill’s Brain
• Coffee

Web Design Mistakes

Duration: 3m 52s

Watching someone use a screen reader

Duration: 3m 31s

This is really boring but any designer/developer really should watch it.

SxSW 08 with Jeffrey Zeldman

Duration: 9m 12s

Design Coding

Duration: 3m 22s

Web Design in 2 Minutes

Duration: 2m 17s

CSS3 Rounded Corners

Duration: 3m 25s

ExpressionEngine 2.0 Preview

Duration: 7m 52s

Dan Rubin Singing Piano Man

Duration: 2m 55s

SxSW 2008 with Kevin Lawver

Duration: 9m 17s

Faster HTML and CSS: Layout Engine Internals for Web Developers

Duration: 1hr 1m

This is something I use on all my projects now. It’s designed for a search box, but can be used with any sort of input field.

The great thing about this is that the field value “Search” will only come back onBlur if the field is empty (or doesn’t say “Search”). So if you started typing something it won’t erase your text, which is something that has always irritated me about search boxes.

Anyway, I’ve been sitting on this post for a while, but I really wanted to get it out. So here it is:

XHTML

<div id="search">
<form method="post" action="">
   <label for="field">search</label>
   <input type="text" id="field"/>
   <button type="submit">go</button>
</form>
</div><!--/search-->

jQuery

$("#search input").focus( function() {
if ($(this).val()=="Search") {$(this).val("");}
});

$("#search input").blur( function() {
if ($(this).val()=="") {$(this).val("Search");}
});

The word “Search” in the jQuery is case sensitive, so watch out for that.

Problem

Image replacement can be easily abused; but when used properly (like replacing logo text) it’s a great resource.

Image replacement without extra markup usually means setting text-indent:-9999px on your link. And this works great great. But in a lot of browsers it leaves a focus outline that runs way off the page to the left on click.

We need to keep the outline there for accessibility reasons, so most developers just leave it alone. But there’s a way to make, both, designers and accessibility gurus happy.

view demo

Problem CSS

#branding h1 a{
display:block;
height:70px;
width:289px;
background:url(../images/logo.png) no-repeat 0 0;
text-indent:-9999px;
}

Goal

Solution

By adding overflow:hidden to the link we can cut off the extended :focus outline.

Solution CSS

#branding h1 a{
display:block;
height:70px;
width:289px;
background:url(../images/logo.png) no-repeat 0 0;
text-indent:-9999px;
overflow:hidden;
}

view demo

One of the great things about the folks at Twitter is that they really stick to what they’re good at and they let the community define what they want out of the service. So much so that they’ve responded with some really great community-driven Twitter services.

MySpace

The downfall of MySpace started when users were given too much control in design their profiles. Then the spam started pouring in like crazy. Everyone had a MySpace account, even corporations, and they were all collecting “friends”. Profiles became bloated and ugly; and shortly after that, a viable alternative came along and users started migrating over to Facebook in an attempt to flee the spam.

Facebook

Facebook solved the MySpace design problem by removing that level of control from the users. Then (maybe to make up for it) they opened up to customizations through user-created applications. And the downward spiral began, yet again.

Users began abusing the apps and we were all subject to invites to Mafia teams and Vampire squads.

It’s gotten so bad that I can’t log into Facebook without some sort of asinine notification or spam coming from one of these wonderful apps generated by the “community”. You know there’s no way Facebook will step in and take control of the apps, so we just have to find ways around them as they add in (false sense of) security features.

Unfortunately, when we look at these 2 monsters of social networking, it appears that the problems all start with giving users too much control.

Do they actually want control?

Where’s the problem? Is it a perception of the user? Or is it that I’m way off base here, and the user actually wants a web site they can be totally engulfed in all day long? I’m not convinced users want the amount of control sites like Facebook and MySpace give them.

I know millions of people use Facebook apps, but maybe they’re just using them because they’re available. I don’t get the feeling that if all these apps never existed anyone would really care. I didn’t hear anyone complain about lack of control in Facebook before the apps came along; not a single person.  They were just happy to get out of MySpace.

Look at what Twitter’s done so far:

• They’ve stripped down user profiles – no one cares
• They gave you very controlled design options – there’s been no outcry
• The pretty much made your personal Twitter page useless – I’m not even sure anyone has noticed
• They allow almost anyone to follow your updates – so what?

If anything, the Twitter model is showing us users just want some core functionality. They really don’t want a place they can list their favorite books, movies and TV shows; it’s all just fluff.

Telling the user no

Twitter’s found a way to let us know that what we want isn’t a priority for them. And by using a “Do it yourself” attitude and releasing a well thought out and flexible API, we love them for it. It’s a little twisted, but it’s working really well. They’re picking and choosing what users have requested they want to address.

By releasing an API with so many options Twitter’s essentially hired thousands of developers for free to build add-ons to their site that are completely independent from Twitter (that have nothing to do with pirates OR vampires). And it allows them to really focus on features they think are important like search and giving a false sense of control.

Telling the community “if you want it, build it yourself, but keep it out of my site” accomplishes something Facebook really fails at: keeping out the crap. By forcing these user apps to be external you can cut out the spam and let users find them on their own. Of course, we’re already starting to see the much anticipated “Twitter Trends” starting to get hit with spam.

Great services that came from the community

• TwitPic
• WeFollow
• TwitLonger
• Remember the Milk for Twitter
• TwitterFeed
• Twitter PollDaddy

Giving power to the community is a good thing, but if we learned anything from MySpace and Facebook it’s that this power needs to be well thought out and controlled in a way where the users don’t feel like they’re being controlled.

Whomever can come up with that will come out as the real social networking giant.