Monday, April 28th, 2008
Category: JavaScript
, Component, Flash, 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: JavaScript, Library, Component, 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: JavaScript, Component, Examples, Yahoo!, Framework
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: JavaScript, Component, 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: JavaScript, Component, 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: Component, Canvas
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
Thursday, December 6th, 2007
Category: Component, Google
I love simple APIs, and this one eats the pie. With the Google Chart API you can build a URL that will dynamically create a chart for you. This service is used internally for Google Finance, Google Video, and beyond. Now, anyone can use it!
Although it is simple to use (just a darn URL after all) you will see that there are many options.
Here is just a few charts to show how broad this is:
Line Chart
http://chart.apis.google.com/chart?cht=lxy&chs=200x125&chd=t:0,30,60,70,90,95,100|20,30,40,50,60,70,80|10,30,40,45,52|100,90,40,20,10|-1|5,33,50,55,7&chco=3072F3,ff0000,00aaaa&chls=2,4,1&chm=s,FF0000,0,-1,5|s,0000ff,1,-1,5|s,00aa00,2,-1,5
Bar Charts
http://chart.apis.google.com/chart?cht=bvg&chs=200x125&chd=s:hello,world&chco=cc0000,00aa00
Pie Charts
http://chart.apis.google.com/chart?cht=p3&chd=s:Uf9a&chs=200x100&chl=Rails|PHP|Java|.NET
Venn Diagrams
http://chart.apis.google.com/chart?cht=v&chs=200x100&chd=t:100,80,60,30,30,30,10
Scatter
http://chart.apis.google.com/chart?cht=s&chd=s:984sttvuvkQIBLKNCAIi,DEJPgq0uov17zwopQODS,AFLPTXaflptx159gsDrn&chxt=x,y&chxl=0:|0|2|3|4|5|6|7|8|9|10|1:|0|25|50|75|100&chs=200x125
Solid Fill
http://chart.apis.google.com/chart?cht=lc&chd=s:pqokeYONOMEBAKPOQVTXZdecaZcglprqxuux393ztpoonkeggjp&chco=FF0000&chls=4.0,3.0,0.0&chs=200x125&chxt=x,y&chxl=0:|Jun|July|Aug|1:||20|30|40|50&chf=bg,s,efefef
Linear Gradient
http://chart.apis.google.com/chart?cht=lc&chd=s:pqokeYONOMEBAKPOQVTXZdecaZcglprqxuux393ztpoonkeggjp&chco=FF0000&chls=4.0,3.0,0.0&chxt=x,y&chxl=0:|1|2|3|4|5|1:|0|50|100&chs=200x125&chf=c,lg,45,ffffff,0,76A4FB,0.75|bg,s,EFEFEF
Linear Stripes
http://chart.apis.google.com/chart?cht=lc&chd=s:UVVUVVUUUVVUSSVVVXXYadfhjlllllllmmliigdbbZZXVVUUUTU&chco=0000FF&chls=2.0,1.0,0.0&chxt=x,y&chxl=0:|Jan|Feb|Mar|Jun|Jul|Aug|1:|0|25|50|75|100&chs=200x125&chg=100.0,25.0&chf=c,ls,0,CCCCCC,0.2,ffffff,0.2
Legend
http://chart.apis.google.com/chart?cht=v&chs=200x100&chd=t:100,20,20,20,20,0,0&chdl=First|Second|Third&chco=ff0000,00ff00,0000ff
Multiple Axis Labels
http://chart.apis.google.com/chart?chxt=x,y,r,x&cht=lc&chd=s:cEAELFJHHHKUju9uuXUc&chco=76A4FB&chls=2.0&chs=200x125
Fill Area
http://chart.apis.google.com/chart?cht=lc&chd=s:99,cefhjkqwrlgYcfgc,QSSVXXdkfZUMRTUQ,HJJMOOUbVPKDHKLH,AA&chco=000000,000000,000000,000000,000000&chls=1,1,0|1,1,0|1,1,0|1,4,0&chs=200x125&chxt=x,y&chxl=0:|Sep|Oct|Nov|Dec|1:||50|100&chg=25,25&chm=b,76A4FB,0,1,0|b,224499,1,2,0|b,FF0000,2,3,0|b,80C65A,3,4,0
Wednesday, November 28th, 2007
Category: JavaScript, Component, Calendar, MooTools
We just featured SCal, and now we have a MooTools Calendar component created by Aeron Glemann.
I have tried to make Calendar as semantic as possible–with proper usage of CAPTION, THEAD, TBODY, TH and TD elements–and lots of CSS styling hooks. View the Calendar stylesheet for examples of the CSS; see the Styling Your Calendar section in the Manual for references to the XHTML.
You create the beast via:
JAVASCRIPT:
-
-
myCal1 = new Calendar({ date1: 'd/m/Y' }, { direction: 1 });
-
myCal2 = new Calendar({ date2: 'd/m/Y' }, { classes: ['dashboard', ... ], direction: 1 });
-
myCal3 = new Calendar({ date3: 'd/m/Y' }, { classes: ['i-heart-ny', ... ], direction: 1 });
-
And you end up with some pretty stuff:
Monday, November 26th, 2007
Category: Component, Prototype
Scal is a a simple Javascript calendar based on Prototype which features:
- Lightweight
- Fast and easy to setup
- Multiple Calendars can be initiated without conflict
- Valid HTML/XHTML generated code
- Skinnable
- Language translation supported
- Event Planner
To use, you simply tell it the div and callback that you want:
JAVASCRIPT:
-
-
var samplecal = new scal('samplecal', 'scalupdate');
-
The default look and feel isn't quite up to Ext standards, but you can tweak that. A common use case would be to allow input type="date" and rewire the form (or input type="text" class="date" for graceful failback).
Wednesday, November 14th, 2007
Category: Component, Dojo, Articles
One of the best parts of Dojo 1.0 has been how often the team has been blogging of all things. It has been great!
Mike Wilcox has posted about Dijit, the widget platform for Dojo 1.0.
His piece covers dojo.parser, dojo.declare, the widget markup, the lifecycle of widgets, and more. Great stuff.
The lifecycle is very thorough:
preamble()- Originating in dojo.declare, preamble is a new Dojo Core feature. It’s a pre-constructor accessory. By analogy, preamble is to constructor as
postMixInProperties is to postCreate. Since preamble gets the same arguments as the constructor, you may extend another object, and jump in front of the constructor and change the arguments.
constructor()- Originating in
dojo.declare, constructor has a new usage pattern. Previously, it fired last, which I didn’t find particularly useful nor accurate. It now fires early in the widget lifecycle, allowing early initialization with the arguments passed into the object. While more common in use, it’s not exactly necessary, as Dijit handles the job of converting your arguments into object properties.
postMixInProperties()- Originating in
dijit._Widget, postMixInProperties is used more commonly by widget developers. That said, some of its duties are superseded by the addition of constructor and preamble. Its main purpose is firing after the properties have been set, but before the widget has been parsed and created. Pre-creation work on widget properties is typically done in this method.
postCreate()- Originating in
dijit._Widget, postCreate is the “heavy lifter” of Dijit. This fires after creation, but before the widget is rendered to the page. At this time in the widget lifecycle, you have access to the widget’s nodes, so additional parsing, connections, styling, or even attaching more widgets is possible.
startup()- Originating in
dijit._Widget, startup is somewhat misunderstood. startup doesn’t fire unless the widget is a child of another widget. And then it only fires after it, and all of its siblings have been created. Then they all fire together.
Thursday, October 25th, 2007
Category: Component, UI
