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.
Tuesday, April 8th, 2008
Category: Component, JavaScript, UI
Kristian Thornley had a unique requirement for displaying data change overtime and thought that he would build a Mac Leopard JS Time Machine.
Kristian told us that "currently the effect suffers if the data in the panels are too detailed and I will probably set up some event handlers e.g. onScale preScale postScale which could trigger Ajax calls and preload data a bit like Livegrid."
-1496.5 rating from 20 votes
Tuesday, March 11th, 2008
Category: Component, JavaScript, Prototype, Scriptaculous
Obaid Ahmed has written a coverflow-like component on top of Prototype and Script.aculo.us called ProtoFlow.
It is simple to use:
HTML:
-
-
-
<img src="imgs/DSCN0940_91360.jpg"/>
-
<img src="imgs/stimme_von_oben_187192.jpg"/>
-
<img src="imgs/Tropfen_1_Kopie_201721.jpg"/>
-
<img src="imgs/farbraum_012_147508.jpg"/>
-
<img src="imgs/IMG_4906_199357.jpg"/>
-
<img src="imgs/Tropfen_1_Kopie_201721.jpg"/>
-
<img src="imgs/Fries_201253.jpg"/>
-
<img src="imgs/Fries_201253.jpg"/>
-
</div>
-
-
<ul id="protoCaptions" class="protoCaptions">
-
-
-
-
-
-
-
-
-
-
</ul>
-
JAVASCRIPT:
-
-
Event.observe(window, 'load', function() {
-
cf = new ProtoFlow($("protoflow"), {captions: 'protoCaptions'});
-
});
-
Monday, February 25th, 2008
Category: Ajax, Component
Gaiaware, developers of Gaia .Net Ajax suite of components, have released a new version of their suite called Tranquility. The release focuses heavily on improving the overall quality and performance of the framework with much client-side refactoring done. They've also upgraded to the latest release of Prototype and Scipt.aculo.us.
We have refactored the client side JavaScript a lot which makes a much more clean API for our users who wants to extend Gaia Controls
In addition, they've updated the installers to integrate nicely with prior installations of Visual Studio making it easier for .Net developers to immediately take advantage of Gaia components.
A complete list of updates can be reviewed via their changelog. To see the new features of Gaia Tranquility in action, be sure to visit the demos:
Thursday, December 27th, 2007
Category: Component, jQuery
The nice folks over at Dynamic Drive have created a new jQuery plugin that lets you turn ordinary pieces of HTML content on your page into an interactive, "glide in" slideshow, with several
configurable options:
This script lets you painlessly showcase new or featured contents on your page, by turning ordinary pieces of HTML content into an interactive, "glide in" slideshow. For the ultimate in the
ability to customize its look, the pagination links are also ordinary links that you define on the page, but with special CSS class names inserted when it should perform a certain task (ie: "toc" class if it's a pagination link). This means the pagination links can be styled and arranged any way you like. The script enlists the help of the jQuery library for its engine. Lets see a rundown of the script's features now:
- Both the contents to show as part of the glider plus the pagination links used to toggle them
are created from ordinary HTML content on the page. The pagination links can
be styled, arranged, even selectively removed anyway you like.
- Pagination interface is gently faded into view.
- Supports two different display modes- "manual" and "slideshow."
In slideshow mode, the glider automatically rotates the contents until the user
explicitly clicks on one of the pagination links to view a particular content.
- With slideshow mode, specify optional number of cycles glider should go
through in slideshow mode before it stops.
- Ability to configure the "glide in" duration (in milliseconds), such as 1
second, 600 milliseconds etc.
- Optional persistence feature to remember and recall the last content
viewed by the user when they return to the page within the same browser
session (session only cookies).
- Multiple Featured Content Sliders per page supported.
The site has all of the details for setting up the content with simple CSS classes, init script, and such.
Friday, December 14th, 2007
Category: Canvas, Component
The champion of unobtrusive canvas, Christian Effenberger, has come out with a new microformat script that enables you to add bevels to your images (and also shading, shining and glowing).
Why would you want to do this via canvas?
- Fast and easy to implement. Just add class="bevel" to the image and your good to go
- Don't need to spend time in an image editor creating images with corners
- Works really well with forum avatars. Doesn't require additional server work
- It's dead easy to change the attributes of the corners
- Free of charge use on non-commercial and private web sites.
The microformat
- Initialisation class "bevel"
- vary the radius by adding iradius followed by the desired radius in percent:
Image radius class "iradius20" - min=20 max=40 default=20
- vary the masking by adding usemask:
Image masking class "usemask"
- vary the masking by adding ibackcol followed by the color:
Mask color class "ibackcol" - min=000000 max=ffffff default=0080ff
- vary the masking by adding ifillcol followed by the color:
Mask color class "ifillcol" - min=000000 max=ffffff default=ibackcol
- vary the glowing by adding noglow:
Image glowing class "noglow"
- vary the glowing by adding iglowopac followed by the desired opacity in percent:
Glow opacity class "iglowopac" - min=1 max=100 default=33
- vary the glowcolor by adding iglowcol followed by the color:
Glow color class "iglowcol" - min=000000 max=ffffff default=000000
- vary the shining by adding noshine:
Image shining class "noshine"
- vary the shining by adding ishineopac followed by the desired opacity in percent:
Shine opacity class "ishineopac" - min=1 max=100 default=40
- vary the shinecolor by adding ishinecol followed by the color:
Shine color class "ishinecol" - min=000000 max=ffffff default=ffffff
- vary the shading by adding noshade:
Image shading class "noshade"
- vary the shading by adding ishadeopac followed by the desired opacity in percent:
Shade opacity class "ishadeopac" - min=1 max=100 default=50
- vary the shading by adding islinear:
Shade gradient class "islinear"
- vary the shadecolor by adding ishadecol followed by the color:
Shade color class "ishadecol" - min=000000 max=ffffff default=000000
