eDesign.nl » Projects http://www.edesign.nl Thoughts and concepts on software development Fri, 08 Apr 2011 13:35:29 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Decoration aid http://www.edesign.nl/2010/08/03/decoration-aid/ http://www.edesign.nl/2010/08/03/decoration-aid/#comments Tue, 03 Aug 2010 14:36:28 +0000 Jurgen http://www.edesign.nl/?p=783 When it comes to designing websites choosing what colors to use is one of the first steps. Nowadays online applications often let users personalize the look and feel of the site by offering a way to customize the colors the website wears. JavaScript and HTML can be used effectively to this end. A problem is arising for component developers using JavaScript: what framework to use? There is MooTools, ProtoType, YUI library, jQuery, etc, etc… This is the reason I developed a standalone color picker. It also works with every JavaScript framework, as it does not depend on one or interferes with one. It is one single .js file, no extra images, css, javascript or whatsoever.

Using it is easy. Basic usage has tree steps.

  1. Include the colorpicker.js in the <head> of the HTML file.
  2. Add the class ‘colorpicker’ to the <input> tag you use in a form for the color to choose.
  3. On document load, initialize the color picker with: ColorPicker.init();

It is as simple as that. Example:

<hmtl>
 <head>
  <title>ColorPicker example</title>
  <script type="text/javascript" src="colorpicker.js" />
 </head>
 <body onload="ColorPicker.run();">
  <form>
   Choose a color: <input type="text" name="color" class="colorpicker" />
   <input type="submit" />
  </form>
 </body>
</html>

Multiple pickers can be added by inserting more <input> tags with the classname ‘colorpicker’ which the standard ColorPicker.init() method all transforms into color pickers.

The manual way to initialize color pickers is by calling:

new ColorPicker(element);

You’ll need to repeat that line for every color picker you have if you don’t want to use ColorPicker.init().

Customizing

The look and feel of the color picker can be modified by adding an configuration hash table as argument to the init() function. This way you can change the colors, borders and language to your needs. For instance, in Dutch the word ‘Cancel’ means ‘Annuleren’. So if I want a color picker on a Dutch website I would change the init() call to:

ColorPicker.init({'language': {'cancel': 'Annuleren'}})

This way you can set parts of the configuration (e.g. only the word ‘cancel’) or the entire configuration by extending the hash table.

Download

You can get the latste version of the ColorPicker from http://projects.edesign.nl/colorpicker/latest/colorpicker.js. The project page is available at http://projects.edesign.nl/colorpicker/.

]]> http://www.edesign.nl/2010/08/03/decoration-aid/feed/ 0 Ratings, Ranks and Scores http://www.edesign.nl/2009/04/09/ratings-ranks-and-scores/ http://www.edesign.nl/2009/04/09/ratings-ranks-and-scores/#comments Thu, 09 Apr 2009 07:34:54 +0000 Jurgen http://www.edesign.nl/?p=137 Rater 2.0Recovered from the ancient spelunks of about two years ago, the somewhat popular Rater is back. When this rating widget was first released, it soon got attention from all over the world. Now, after the eDesign server crash, this JavaScript rating control is reinstated.

Rater 2.0 can be used to have your website visitors assign scores to subjects in nice intuitive way. You then will be able to rank subjects by popularity, quality or anything you make the rater about. You probably have seen more of these rating widgets. When watching a video on Youtube for instance you can assign “stars” to it to rate the video. You can check out the example page of Rater 2.0 to see the diversity in its appearance and functional possibilities. Custom configurations can be made using the Rater 2.0 API page.

Currently Rater 2.0 is a Prototype based control, optionally with Scriptaculous. As the web is evolving, so should eDesign. Therefor MooTools and jQuery versions of Rater are expected by the end of May 2009.

]]> http://www.edesign.nl/2009/04/09/ratings-ranks-and-scores/feed/ 0