sorted by: recent | see :
popular
Content Tagged with Page + component
AddressChooser: address picker in real-time
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.
- ...
SmartMarkUp: Universal Markup Editor
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?
jsTree Nears 1.0; Solicits Feedback
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.
input type=camera to give us a simple way to integrate to Webcams
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.
NoGray Visual Time Picker
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:
-
-
var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', {format24:true});
-
Or a more complex version that tracks the changes:
-
-
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?
YPulse: Fades and Pulsations Library
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:
-
-
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
-
);
-
dragtable: drag-and-drop reorderable columns for an HTML table
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.
jsTree: jQuery-based JavaScript tree component
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:
-
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:
-
-
<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.
FancyUpload: Swiff meets Ajax
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:
-
-
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;
-
});
-
Timeframe: Prototype date range component
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:
-
-
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.
Making application modules communicate with each other using Decoupling
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.
JS Time Machine
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."
ProtoFlow: Coverflow for Prototype
Obaid Ahmed has written a coverflow-like component on top of Prototype and Script.aculo.us called ProtoFlow.
It is simple to use:
-
-
<div id="protoflow">
-
<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">
-
<li>Caption 1</li>
-
<li>Caption 2</li>
-
<li>Caption 3</li>
-
<li>Caption 4</li>
-
<li>Caption 5</li>
-
-
<li>Caption 6</li>
-
<li>Caption 7</li>
-
<li>Caption 8</li>
-
</ul>
-
-
-
Event.observe(window, 'load', function() {
-
cf = new ProtoFlow($("protoflow"), {captions: 'protoCaptions'});
-
});
-
Ajax
JavaScript
component
page
Prototype
front
Scriptaculous
Gaia Tranquility - Ajax Components for .Net
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:
jQuery Glider Component
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.
Canvas Bevel Script
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
Use the Google Chart API to create charts for your web applications
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
MooTools Calendar Component
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:
-
-
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:
Scal: Calendar widget for 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:
-
-
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).
