jQuery Tags Input
Magically convert a simple text input into a cool tag list with this jQuery plugin.
Do you use tags to organize content on your site? This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The plugin handles all the data - your form just sees a comma-delimited list of tags!
Jump to: Examples, Download, Instructions, Options, License
Examples
Download
Download the latest from Github
And then follow XOXCO on Twitter for updates!
And bookmark our official jQuery project page.
Instructions
First, add the Javascript and CSS files to your <head> tag:
<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
Create a real input in your form that will contain a comma-separated list of tags. You can put any default or existing tags in the value attribute, and they'll be handled properly.
<input name="tags" id="tags" value="foo,bar,baz" />
Then, simply call the tagsInput function on any field that should be treated as a list of tags.
$('#tags').tagsInput();
If you want to use jQuery.autocomplete, you can pass in a parameter with the autocomplete url.
$('#tags').tagsInput({autocomplete_url:'http://myserver.com/api/autocomplete'});
You can also send in options to the autocomplete plugin, as described here.
$('#tags').tagsInput({
autocomplete_url:'http://myserver.com/api/autocomplete',
autocomplete:{selectFirst:true,width:'100px',autoFill:true}
});
You can add and remove tags by calling the addTag() and removeTag() functions.
$('#tags').addTag('foo');
$('#tags').removeTag('bar');
Options
$(selector).tagsInput({
'autocomplete_url': url_to_autocomplete_api,
'autocomplete': { option: value, option: value},
'height':'100px',
'width':'300px',
'unique':true,
'defaultText':'add a tag'
});
License
This code is released under the MIT software license.
Helsinki Design Lab launches "Dossiers"
We just helped the fine folks at Helsinki Design Lab launch a major new piece of their site: Dossiers.
From the HDL blog:
We needed the ease of use of a blog, where content is stored in a database and easily manipulated, with the flexibility of a sketchpad, where the presentation is freeform and maleable. And since this is a tool that we intend to use in the daily course of HDL's work, it needs to have a sense of history as well. It needed to be able to keep track of time by allowing versions which the user can then "scrub" back and forth between.
Announcing SendTab
Today, we are releasing SendTab, a Safari extension that lets you send tabs from your laptop or phone to your living room computer.
We live in a connected household, where laptops and iPads outnumber residents. Our living room TV is connected to a Mac Mini, which we use for all of our media consumption - we stream a lot of video from all over the web. However, we do most of our browsing and discovery on our laptops and iPads, and right now, the process of sending something from a laptop to the big screen is really annoying.
That's why we built SendTab. Now, with a single tap, the current tab we're viewing will appear within seconds on the big screen. Any page can instantly be sent from Safari, Firefox, Chrome and any iOS device to the big screen.
Of course, not everyone has a computer connected to their TV. SendTab is handy for all sorts of other things:
- Quickly send a tab from one browser to another...
- Send tabs from your iPhone or iPad to your laptop...
- Send tabs to your girlfriend!
SendTab also has an easy to use API, so developers can send tabs from within their apps. Neat, eh?
Many thanks to XOXCO's #1 intern, Damien Bell, for his hard work on SendTab, and to all of our talented designer friends who helped us design the SendTab button, and to our computer-tv having friends who helped us test. Thanks, dudes!
Helsinki Design Lab Launches
It's been a busy time here at XOXCO. I am very happy to announce our second launch of the month, Helsinki Design Lab. It was our first time working with an organization on another continent, but HDL's Bryan Boyer and his nightowl tendencies made it easy for us.
HDL's mission, in part, is as follows:
We assist decision-makers to view challenges from a big-picture perspective, and provide guidance toward more complete solutions that consider all aspects of a problem. Our mission is to advance this way of working - we call it strategic design.
HDL is collecting case studies of strategic design projects to be featured on the site and at their conference later this year. Applications for inclusion to HDL are accepted through the site.
We wanted the website to do justice to the beauty of HDL's identity and collateral, so we partnered with Andy Pressman at Rumors Studio, who did an excellent job of creating the website's design.
We're especially proud of bringing to life the special features around the site:
- Subtle animation effects in the case study and around the site highlight portions of the content.
- Case studies "come to life" as they are created using the submission tool thanks to tons of fancy CSS and jQuery magic.
- Each time the page is loaded a randomized version of the logo appears!
- "Exquisite" PDFs are generated through a custom javascript-based pagination function.
- Behind the scenes, all of the editorial tools feature autosave!
Of course, PeoplePods is providing the community components necessary for running the intense multi-user creative and editorial process Bryan and his internationally distributed team use to craft the case studies they feature. Thanks to Bryan, Andy and their teams for their hard work on this!
Just Launched: dooce Community
We're excited to announce today that our latest project, dooce Community has launched! We've been working closely with Heather and Jon on this new branch of the mega popular dooce empire, and we're very proud of the results.
The new site will allow members of the dooce community to get to know each other in a way their semi-anonymous commenting system never did. The site is a question/answer site ala Yahoo Answers, but members will be welcome to discuss whatever they like - from babies to cameras to politics.
Like the main dooce blog, the community is powered by Drupal. XOXCO built a bunch of new social gadgets for this site, and if you'd like to learn more about how we did it, come see Jon and I give our talk all about the site at this year's Do It With Drupal conference.
Many thanks to Jon and Heather, Ben Durbin, the support staff at LiquidWeb, and our friends at Lullabot whose help with Drupal's idiosyncrasies was invaluable.
NeighborGoods Launches in LA
According to TechCrunch and GigaOm, NeighborGoods has officially launched in Los Angeles! They've got lots of nice things to say about our work, and we're super proud to have worked with Micki to get this far!
NeighborGoods is built on top of PeoplePods, XOXCO's new social software toolkit. Using PeoplePods means we were able to skip all of the infrastructure building, and instead spend all of our time in product design and ideation. Throughout our alpha release, and now moving into our beta release, we've been able to quickly and easily add functionality to the site simply by creating new "pods" of content and functionality.
PeoplePods will be released under an open source license within the next few weeks! Follow PeoplePods on Twitter for the latest information.
Soul of the Community Launches
It is our pleasure to announce the launch of our latest client project, Soul of the Community.
Soul of the Community (SOTC) is three-year study conducted by Gallup of the 26 John S. and James L. Knight Foundation communities across the United States employing a fresh approach to determine the factors that attach residents to their communities and the role of community attachment in an area's economic growth and well-being. The study focuses on the emotional side of the connection between residents and their communities.
We had the help of some great folks on this project: Jesse Keyes, Courtney Patubo and Brian Oberkirch. We're pleased with the result of our combined efforts and we feel lucky to have worked with the Knight Foundation on such an important study.
New features at SMITHTeens.com
To coincide with the Sept 1 launch of SMITH Magazine's newest book, I Can't Keep My Own Secrets: Six-Word Memoirs by Teens Famous & Obscure, XOXCO designed and built several new community features for the SMITHTeens site. We launched a brand new forum for the talkative teen memoirists, improved profiles, a smoother user experience for posting memoirs and comments, and an activity tracker that, for the first time in the site's history, gives it's members a way to see who is talking about their memoirs.
In the weeks ahead, we'll be expanding some of these features to include even more ways for the teens to connect with their friends and collaborate on creative projects. And, we'll be bringing some of this magic to the main SMITH site so that adult memoirists can also benefit!
XOXCO's Busy Summer
We have been having an extra busy summer here at XOXCO. Check out some of the nifty stuff we've launched in the last few weeks:
We worked with Total Immersion to create the Go Hamster Go! game to promote the KIA Soul. The game uses augmented reality head tracking software so that you can control the game with your face. We built the Facebook application portion of the game.
NeighborGoods, a platform for community-based lending and renting, has just gone into alpha! Our project with Micki Krimmel, NeighborGoods hopes to make it easier for you to save money by borrowing stuff from your friends instead of buying new stuff. NeighborGoods is built on our PeoplePods framework, and we worked with designer Mari Sheibley to implement Micki's vision.
Speaking of PeoplePods, we've been working with designer Mark Bult to get PeoplePods launched. As soon as we're doing building the new site, the community building framework will (finally) be available to developers.
Finally, we launched a new blog a few weeks ago called Must Share Hair - a place for real people with real hair to share their hair awesomeness with the world. The submissions of great hair have been pouring in, and The Wall Street Journal covered our launch. The blog has already clawed its way up the Tumblr popularity scale, where we are currently the third most popular blog about hair.
Coming Soon: Neighborgoods
XOXCO has been working with Micki Krimmel over the past few months on a really cool project, and we are now getting tantilizingly close to letting you play with it.
NeighborGoods is a tool that will make it easier for you to share your stuff with your friends and neighbors, and to save money by borrowing or renting stuff that you'd otherwise have to buy and then store in your closet. We can't wait to loan you our awesome (but hard to store) collapsible 16-foot ladder!
Sign up to be one of the first people to use Neighborgoods, and follow us on Twitter for tantalizing tidbits of info that Micki will be releasing over the next few months.
Just Launched: Six-Word Memoirs for AARP
We just helped our pals at SMITH Magazine to launch a new branch of their ever expanding network of personal storytelling sites. The newest addition is a print and online collaboration between SMITH and AARP Magazine, collecting six-word memoirs from seniors about life, death, and most importantly, food.
We're always happy to work with the folks at SMITH. They were doing the wordcount thing way before Twitter made it hip.
Stephen Elliot on How to Launch a Content Website
Earlier this year, we helped Stephen launch his awesome magazine, The Rumpus. In an interview with the LA Times book blog Jacket Copy, Stephen talks about the aggressive way we got started.
If I were giving a seminar on how to start a website, which would be ridiculous, I would talk about the importance of launching a site this way. We were gathering content as we worked out our design. Because of that the content pushed the design, not the other way around. The Rumpus is a content-driven magazine. We will never have more people working on technology or design than we will writers and editors.
Anyway, the worst thing you could do, I now realize, would be to launch a site without content. You would have to completely redesign it, which would have been out of our budget.
It was actually Ben Brown's idea. He's at XOXCO and is responsible for the design and back end of the site and he's kind of a genius. He was the one who told me to start gathering content right away rather than waiting for the site to launch.
Stephen is right. We absolutely believe that the best way to launch a website - any website - is to start posting content online, even if the "final" design and functionality is weeks away. Like any activity, it takes a while to build up the muscle memory of actually doing before you can get good at something. The "beta" period we had with The Rumpus allowed the magazine to gather an early audience while it was still learning how to be a magazine, and we were able to "launch" with a site filled to the brim with good stuff to read.
Read the full interview here