Thursday, January 8th, 2009
Category: Component
, Examples, jQuery
Scott Robbin (Songza co-founder) has created a very cool jQuery plugin for pageSlide, an interaction based off of Aza's prototypes for Firefox Mobile and Ubiquity mouse gestures. The plugin wraps body content into a container and shifts it off of the page whenever a click event is fired, revealing a secondary interaction pane.
This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.
HTML:
-
-
-
$(document).ready(function() {
-
$('a.pageslide').pageSlide({
-
width: "300px"
-
});
-
});
-
</script>
-
For some reason I enjoy thinking of my desktop as a virtual area that I can shift around.... so this can suite me well.
Wednesday, January 7th, 2009
Category: Component
Sébastein Gruhier has released a new address component that integrated a map with the address that you are filling. The UX is interesting as when you first get typing it doesn't really narrow down the address so you are seeing maps of bizarre places.
As well as a basic version, you can also tie in auto complete.
Features include:
- Javascript framework-agnostic. You can use it as is or with any great frameworks like Prototype, JQuery …
- Mapping system independent. The current implementation is based on Google Map using a Google Map proxy object.
- Interactive map display location while you arex typing an address.
- Center map on user location (based on its IP) if mapping system allows it.
- Fully customizable.
- Fully documented with pdoc.
- Works on Safari, Firefox, IE 6/7, Chrome and Opera.
- ...
Thursday, December 11th, 2008
Category: Component
Joseph Woods of PHPCow sent us a note about SmartMarkUP, a "universal markup editor":
SmartMarkUP is a lightweight and powerful JavaScript library that allows you to turn any textarea into a fancy markup editor. HTML, CSS, XML, Wiki syntax, BBCode or any other desired markup language can be implemented and/or adjusted to your preferences and business needs. SmartMarkUP doesn't depend on any other JavaScript library and can be integrated with any already existing JavaScript library or code.
Although SmartMarkUP is stand-alone, they've created a jQuery plug-in wrapper for it. The documentation is quite extensive and includes detailed notes on how to use the editor to edit your own markup.
While the editor has buttons and such to make it easier to manipulate the markup (a la Wordpress' own code editor) the editor itself doesn't have any kind of syntax highlighting or auto-indent / auto-complete features.
Still, it's a pretty neat little package:
* SmartMarkUP is completely free and open source
* SmartMarkUP is a small script, compressed version weights only 10kb
* SmartMarkUP is completely skin-able you can fit it's design with your applications easily
* SmartMarkUP can be used from any other script
* SmartMarkUP is self contained and doesn't depend on any third party scripts. You can use it with Prototype, jQuery, Mootools or any other JavaScript libraries.
* SmartMarkUP doesn't requires changing of already existing markup or code infrastructure.
* SmartMarkUP degrades gracefully, that means your application will continue working in browsers with disabled JavaScript.
What do you think?
Thursday, November 13th, 2008
Category: Component, jQuery
Several months ago, we covered jsTree, a promising new tree component built on top of jQuery. It's since gained its own website and is nearing a 1.0 release. There have been a few changes since we last wrote about it:
* A lot of focus on the JSON data source
* Native async support (meaning correct data loading, event handling, etc).
* In the last public version there is a simple instance manager.
* The instance manager enabled full multitree support - node dragging between trees, with language cleanup (if languages differ), and also and most important - the receiving tree's dragrules are respected.
* There have been a lot of bugfixes, optimizations, enhancements.
It's coming along nicely since the initial story; give it another look and pass on bug reports and feedback to Ivan at his blog prior to the 1.0 release.
Thursday, September 25th, 2008
Category: Browsers, Component, Firefox, HTML, Mozilla
There are a substantial number of iPhone apps that tie into the builtin native components such as the camera.
Brad Lassey has been hacking on Fennec (the Mozilla mobile browser) as well as Firefox itself to integrate with camera phones and Webcams alike:
I wrapped a video tag, image and a few buttons in xbl and bound it to <input type=”camera” />. When a user hits a website using this tag, he or she currently will see a live video preview and a “take photo” button. When the user clicks the button, the photo is grabbed from the camera and shown to the user in the image element. The image element and video element are in a deck element so only one is shown at a time. After the photo is taken, there is a button that reads “Take another photo,” in case the user doesn’t like the one they just took. Once the user is satisfied, this element works like any other form element and the file can be uploaded to a web service.
After talking to a few people this should actually be bound to <input type=”file” accept=”image/png”/>. Also, it needs some UI design both for what it looks like in content and for a configuration dialog. Finally, we’ll need to think about security and make sure no one can snap a photo of you when you’re not looking your best.
I kinda like having an input type="camera" myself, to be more explicit. It would be cool if you can get access to the image as data (e.g. the value is data:......). I love it.
Monday, August 4th, 2008
Category: Component, JavaScript
The NoGray Time Picker is a component that lets you add a time picker that is visual. The clock shows up, and you move the hands to wherever you need to be. All via a simple:
JAVASCRIPT:
-
-
var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', {format24:true});
-
Or a more complex version that tracks the changes:
JAVASCRIPT:
-
-
var tp = new TimePicker('time_picker', null, null, {onChange:function(){
-
if (this.time.hour <12) var ampm = this.options.lang.am;
-
else var ampm = this.options.lang.pm;
-
-
var hour = this.time.hour%12;
-
if (hour <10) hour = "0"+hour;
-
var minute = this.time.minute;
-
if (minute <10) minute = "0"+minute;
-
$('time3_value').setHTML(hour+":"+minute+" "+ampm);
-
} });
-
After all that though, is it easier than asking to put in the time?
Friday, July 11th, 2008
Category: Component, JavaScript, Library, Yahoo!
Kent Johnson has released YPulse a simple open source wrapper for the YUI Animation library that makes creating highlight fades and pulsing button glows a bit easier.
You pulse away with something like:
JAVASCRIPT:
-
-
var pulser = new YAHOO.squarebits.YPulse(
-
‘my-div’,
-
‘backgroundColor’,
-
‘#FFFFFF’, // starting
-
‘#FFFF00′, // ending
-
0.75, // The number of seconds for the start-end transition
-
0.10, // The number of seconds to wait after completing the start-end transition
-
0.75, // The number of seconds for the end-start transition
-
0.75, // The number of seconds to wait after completing the end-start transition
-
YAHOO.util.Easing.easeBoth, // The YAHOO easing method to use for the start-end transition
-
YAHOO.util.Easing.easeBoth // The YAHOO easing method to use for the end-start transition
-
);
-
Friday, June 27th, 2008
Category: Component, JavaScript
Dan Vanderkam has announced a new component dragtable:
Over the past several years, Stuart Langridge’s sorttable Javascript library has found widespread use. It’s easy to see why. Just add class=sortable to a table tag and its column headers automatically support click to sort. Pretty slick.
But sometimes sorting just isn’t enough. What if you want to focus on just one or two of the columns in a table? In a client-side application you could drag the columns you care about next to each other. Why not in a web application?
Enter dragtable. Like sorttable, it teaches HTML tables a new trick through a simple class attribute.
Once you have the JavaScript in place, you can simply add a class="draggable", and you can even work with both via class="draggable sortable"
Take a peak at a test bed, and the open source project.
Friday, June 20th, 2008
Category: Ajax, Component, JavaScript
Ivan Bozhanov walked us through his jQuery-based tree component recently. The state of trees out there is interesting. YUI! has a nice, stable tree control but Dojo's once feature-rich tree has been replaced with a fairly basic tree (i.e., doesn't appear to have in-line editing and drag-and-drop still seems flakey; Dojo guys, correct me if I'm wrong) at the moment and jQuery UI lacks an official tree component (though a few tree plug-ins are out there); as you might expect, Ext JS has a nice tree component.
Let me highlight a few areas where jsTree stands out. First, it has some basic features that many trees out there lack:
jsTree allows the user to create, rename, reorder, move, and delete note (which is realised in a file-browser manner - eg. inplace)
It also has a rich event API which is fairly standard across most editable tree components, though the event types are finer-grained than in most trees I've seen (not sure whether that's a good thing):
You can attach callbacks to almost every action:
- onbeforechange
- onchange
- onrename
- onmove
- oncreate
- ondelete
- onopen
- onclose
It also allows you to provide rules that govern what the user may or may not do based on the "type" of a node:
jsTree lets developers define rules for moving, selecting, deleting, and focusing nodes. The rules are based on developer-definable types of each node passed in the data (different sources define it differently). This limits the user in his actions. The developer can also attach inline rules which override global rules. One scenario in which these rules are useful is when you build a CMS and need a fixed number of top level nodes because of a design restriction.
While you could accomplish the same functionality with event handlers, it's nice to have a simple built-in scheme that can be easily data-driven.
These rules are applied real-time as the user attempts to interact with the tree:
When you drag a node around a pointer tells you where you are about to insert it, and prevents the user from dropping anywhere against the rules. The warning is real time - as you drag and drop the pointer is replaced by a red cross if the action is against the defined rules. I'm still working on displaying definable text messages.
jsTree can be configured to reference a custom property in each node object to determine its type.
It also has built-in localization support; you specify string identifiers corresponding to the different languages that the tree should support on construction:
JAVASCRIPT:
-
tree1.init($("#nested"), {
-
data : "nested.xml",
-
xsl : "nested.xsl",
-
languages : [ "en", "bg" ],
-
// other stuff omitted
-
});
and then in this case each node in the XML tree fed to the component specifies its language:
XML:
-
-
<name lang="bg" icon="images/f.png">Ðачало</name>
-
<name lang="en" icon="images/f.png">Home</name>
-
In addition to XML data types, it also supports JSON and in-line HTML. But it also has built-in support for doing XSL transforms on XML data sources, including a scheme that lets you include flat data that it then makes into a hierarchy:
jsTree supports XSL transformations when using the XML data source option. This is a bit faster than javascript parsing. It includes an XSL stylesheet for transforming a flat list of entries into a tree. This can be useful if you use adjacency for maintaing a tree in a database. In such situations it is quite heavy on the server to dump the whole tree as you need N-1 queries where N is the number of nodes in the tree. With this XSL solution you can just dump the table flat out with id and parent_id attributes and the XSL will transform it into a nested structure.
Unfortunately, what jsTree is lacking is the visual refinement of many of the trees out there, but as jsTree is built on top of jQuery, we suppose Ivan can add that kind of polish easily.
For many data-driven applications, high-quality grid and tree components are really important; kudos to Ivan for some interesting ideas in jsTree. The docs are certainly better than some I've seen, but not as complete as I'd like.
Monday, April 28th, 2008
Category: Component, Flash, JavaScript, MooTools
Harald Kirschner has created a new version of FancyUpload "a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar."
A good example is the Queued Photo Uploader which is coded by:
JAVASCRIPT:
-
-
var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
-
'url': $('form-demo').action,
-
'fieldName': 'photoupload',
-
'path': '../../source/Swiff.Uploader.swf',
-
'onLoad': function() {
-
$('demo-status').removeClass('hide');
-
$('demo-fallback').destroy();
-
}
-
});
-
-
/**
-
* Various interactions
-
*/
-
$('demo-browse-all').addEvent('click', function() {
-
swiffy.browse();
-
return false;
-
});
-
-
$('demo-browse-images').addEvent('click', function() {
-
swiffy.browse({'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'});
-
return false;
-
});
-
-
$('demo-clear').addEvent('click', function() {
-
swiffy.removeFile();
-
return false;
-
});
-
-
$('demo-upload').addEvent('click', function() {
-
swiffy.upload();
-
return false;
-
});
-
Wednesday, April 23rd, 2008
Category: Component, JavaScript, Library, Prototype
Stephen Celis got tired of wiring together two date pickers for the common use case of grabbing a date range, so he created timeframe, which is "Click-draggable. Range-makeable. A better calendar."
Based on Prototype, you can whip up some code such as:
JAVASCRIPT:
-
-
new Timeframe('calendars', {
-
startfield: 'start',
-
endfield: 'end',
-
previousbutton: 'previous',
-
todaybutton: 'today',
-
nextbutton: 'next',
-
resetbutton: 'reset' });
-
And then you get:
Check out the live example to really see it at work.
Tuesday, April 22nd, 2008
Category: Component, Examples, Framework, JavaScript, Yahoo!
I've been talking about event driven application design in JavaScript in January last year and inspired Caridy Patiño to write his Bubbling Library based on these ideas.
Caridy now upped the ante a bit by talking about decoupling using the bubbling library over on the YUI blog.
In essence, his solution allows you to have custom events on application modules and listen to them independent of execution order or availability. Simply using custom events can get you in a pickle if you make yourself dependent on their order. With the decoupling solution proposed by Caridy this becomes one less issue to worry about.
