Ajax Updates

Roar – Notifications : MooTools Plugin
3D Tag Clouds Using jQuery
DrasticTools : DataGrid with Tagcloud and Google Map Component

Posted: 14 Aug 2009 06:54 AM PDT

Roar is a notification widget that streamlines incoming messages, such as updates or errors, without distracting the user from their browser experience or breaking their work-flow by displaying obtrusive alerts. Roar is inspired by Growl, the notification system for Mac OS X and is realised with MooTools.

Features

* Show any informations you want and style them with class-names.
* Messages are queued and interactive
o Hover them to read them longer
o Add optional click-interaction to provide more information
* Customize them via external CSS to your own needs.

How to use

 Javascript |   copy code | ?  
1 // Wait for the content ... 
2 window.addEvent('domready', { 
3  
4     // Default options, reuse this Roar 
5     var queue = new Roar(); 
6  
7 });

Demo: http://digitarald.de/project/roar/1-0/showcase/ad-infinitum/
Download: http://digitarald.de/project/roar/1-0/source/Roar.js
http://digitarald.de/project/roar/1-0/assets/Roar.css
Source: http://digitarald.de/project/roar/

tafbutton blue16 Roar Notifications : MooTools Plugin

Related Listings:

Growl style notifications Script This website is a placeholder for Notimoo sample demos.Notimoo is...
MooTools Autocomplete Ajax Script A MooTools Autocompleter widget that creates a unobtrusive and customisable...
ReMooz Images Ajax Widget ReMooz is an open-source widget for great looking and unobtrusive...

3D Tag Clouds Using jQuery

Posted: 14 Aug 2009 06:22 AM PDT

With browsers rendering JavaScript faster than ever before, it's a great opportunity to get creative with jQuery. This tutorial will show how to create a scrolling 3D tag cloud…it's not as difficult as you might think.

What exactly will we be building? It's somewhat like a carousel, but we're going to have the take fade off into the distance like the lone ranger at the end of cheesy "B" western flick….very dramatic.

We're also going to have our tag cloud interact with the users mouse. The further the mouse is away from the center, the faster it will rotate.

Simple HTML

As the sub title suggests the HTML is painfully simple. Most of the complicated stuff is in the jQuery. All we'll need is a list of anchor tags wrapped in a div. Told you it was simple, here is the HTML.

 HTML |   copy code | ?  
01 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
02     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
03 <html> 
04 <head> 
05     <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
06     <title>jQuery 3D</title> 
07     <script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript" charset="utf-8"></script> 
08 </head> 
09 <body> 
10  
11 <div id="list"> 
12     <ul> 
13         <li><a href="#">ajax</a></li> 
14         <li><a href="#">css</a></li> 
15         <li><a href="#">design</a></li> 
16         <li><a href="#">firefox</a></li> 
17         <li><a href="#">flash</a></li> 
18         <li><a href="#">html</a></li> 
19         <li><a href="#">Devirtuoso</a></li> 
20         <li><a href="#">jquery</a></li> 
21         <li><a href="#">PHP</a></li> 
22         <li><a href="#">SEO</a></li> 
23         <li><a href="#">usability</a></li> 
24         <li><a href="#">www</a></li> 
25         <li><a href="#">web</a></li> 
26         <li><a href="#">xhtml</a></li> 
27  
28     </ul> 
29 </div>  
30  
31 </body> 
32 </html>

Styling the List

For the most part the CSS is just to make the links pretty. There are a couple of things that need to happen though. The anchor links need to have a position: absolute. This way the jQuery can give it x and y co-ordinates and the links will obey. Also we need to give a height and width of the div wrapper. The jQuery reference the dimensions of the wrapper to help layout the links. It might also be a good idea to give the wrapper a position:relative to keep the links inside the wrapper, this isn't necessary though.

Here is the CSS:

 CSS |   copy code | ?  
01 /* Set font and background for body*/   
02 body{ 
03     font-family: Arial, "MS Trebuchet", sans-serif; 
04     background-color: #111; 
05 } 
06  
07 /* Styles the div wrapper 
08 the important part is the 
09 width and the height */ 
10 #list{ 
11  
12     /*Influences layout of list*/ 
13     height:600px; 
14     width:600px; 
15  
16     background-color: #000; 
17  
18     /* Keeps list inside of wrapper*/ 
19     position:relative; 
20     margin:0 auto; 
21     overflow:hidden; 
22 } 
23  
24 /* Reset the list*/ 
25 #list ul, 
26 #list li{ 
27     list-style:none; 
28     margin:0; 
29     padding:0; 
30 } 
31  
32 /* List requires an absolute position 
33 so jQuery can move the items around 
34 freely */ 
35 #list a{ 
36     position:absolute; 
37     text-decoration: none; 
38     color:#666; 
39 } 
40 #list a:hover{ 
41     color:#ccc; 
42 }

The Fun Part (jQuery)

Now comes the trigonometry….see…your high school teacher was right, you will use this stuff in the real world. It really isn't that bad though…3 lines of trigonometry is more than acceptable. I'm not going to go into great detail with the math. If you want to learn more about the math behind the 3D I recommend reading Kirupa.com tutorial on it. The tutorial is for flash, but you will get the gist of how it works.

Here is the jQuery:

 Javascript |   copy code | ?  
01 $(document).ready(function(){ 
02  
03 //Setup variables 
04 var element = $('#list a'); // all the list elements 
05 var offset = 0;             // angle offset for animation 
06 var stepping = 0.03;        // how fast the list rotates 
07 var list = $('#list');      // the list wrapper 
08 var $list = $(list); 
09  
10 /* Handles mouse movement, the closer to the center 
11 the faster the list will rotate */ 
12 $list.mousemove(function(e){ 
13  
14     var topOfList = $list.eq(0).offset().top 
15     var listHeight = $list.height() 
16  
17     // Sets variable that controls the speed of rotation. 
18     stepping = (e.clientY - topOfList) /  listHeight * 0.2 - 0.1; 
19  
20 }); 
21  
22  
23 /* Disperse elements evenly around the circle */ 
24 for (var i = element.length - 1; i >= 0; i--) 
25 { 
26     element[i].elemAngle = i * Math.PI * 2 / element.length; 
27 } 
28  
29 // call render function over and over 
30 setInterval(render, 20); 
31  
32  
33 // Handles how and where each element will be rendered. 
34 function render(){ 
35  
36     //Steps through each element... 
37     for (var i = element.length - 1; i >= 0; i--){ 
38  
39         // offset adds degrees to where the element 
40         // is currently on the circle 
41         var angle = element[i].elemAngle + offset; 
42  
43         // Trig to figure out the size and where the 
44         // text should go 
45         x = 120 + Math.sin(angle) * 30; 
46         y = 45 + Math.cos(angle) * 40; 
47         size = Math.round(40 - Math.sin(angle) * 40); 
48  
49         // Centers the text, instead of being left aligned. 
50         var elementCenter = $(element[i]).width() / 2; 
51  
52         // Figure out the x value of the element. 
53         var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px" 
54  
55  
56         // Apply the values to the text 
57         $(element[i]).css("fontSize", size + "pt"); 
58         $(element[i]).css("opacity",size/100); 
59         $(element[i]).css("zIndex" ,size); 
60         $(element[i]).css("left" ,leftValue); 
61         $(element[i]).css("top", y + "%"); 
62     } 
63  
64     // Rotate the circle 
65     offset += stepping; 
66 } 
67  
68  
69 });

Just to step through what we did. First we setup the mouse event. We figure out how far the mouse is away from the center and assign it to a variable that controls the speed of the scrolling list.

3d tag clouds

After that we step through each element in our list and give each one a spot on our 3D circle. A for loop walks through each one, and evenly assigns an angle to each element. (e.g. 1st = 0 degrees, 2nd = 5 degrees, 3rd = 10 degrees…etc)

image6 3D Tag Clouds Using jQuery

After we placed each element on our 3D circle it's time to animate it. We use a setInterval to call our render function repeatedly. The render function steps through each element and figures out where and how it should be displayed. The trigonometry basically creates a set of numbers that if you plot it on a graph look like a wave. If you apply those numbers to the size of the text, it gives the appearance of going back and forth in space. If you also apply these numbers to the y, this will give you the appearance that the text is going around in a circle. If you don't understand the math inside this function not to worry. I encourage you to play around with the numbers to see how each number effects the outcome.

3d tags

The Finish Line

That's all there is to it. Here is the code all together so you can have a look. Enjoy.

 HTML |   copy code | ?  
001 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
002     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
003 <html> 
004 <head> 
005 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
006 <title>jQuery 3D</title> 
007  
008 <style type="text/css" media="screen"> 
009     body{ 
010         font-family: Arial, "MS Trebuchet", sans-serif; 
011         background-color: #111; 
012     } 
013     #list{ 
014         margin:0 auto; 
015         height:600px; 
016         width:600px; 
017         overflow:hidden; 
018         position:relative; 
019         background-color: #000; 
020     } 
021     #list ul, 
022     #list li{ 
023         list-style:none; 
024         margin:0; 
025         padding:0; 
026     } 
027     #list a{ 
028         position:absolute; 
029         text-decoration: none; 
030         color:#666; 
031     } 
032     #list a:hover{ 
033         color:#ccc; 
034     } 
035 </style> 
036 <script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript" charset="utf-8"></script> 
037  
038 </head> 
039 <body> 
040  
041 <div id="list"> 
042     <ul> 
043         <li><a href="#">ajax</a></li> 
044         <li><a href="#">css</a></li> 
045         <li><a href="#">design</a></li> 
046         <li><a href="#">firefox</a></li> 
047         <li><a href="#">flash</a></li> 
048         <li><a href="#">html</a></li> 
049         <li><a href="#">Devirtuoso</a></li> 
050         <li><a href="#">jquery</a></li> 
051         <li><a href="#">PHP</a></li> 
052         <li><a href="#">SEO</a></li> 
053         <li><a href="#">usability</a></li> 
054         <li><a href="#">www</a></li> 
055         <li><a href="#">web</a></li> 
056         <li><a href="#">xhtml</a></li> 
057  
058     </ul> 
059 </div> 
060  
061 <script type="text/javascript"> 
062  
063  
064 $(document).ready(function(){ 
065  
066 var element = $('#list a'); 
067 var offset = 0; 
068 var stepping = 0.03; 
069 var list = $('#list'); 
070 var $list = $(list) 
071  
072 $list.mousemove(function(e){ 
073     var topOfList = $list.eq(0).offset().top 
074     var listHeight = $list.height() 
075     stepping = (e.clientY - topOfList) /  listHeight * 0.2 - 0.1; 
076  
077 }); 
078  
079  
080 for (var i = element.length - 1; i >= 0; i--) 
081 { 
082     element[i].elemAngle = i * Math.PI * 2 / element.length; 
083 } 
084  
085  
086 setInterval(render, 20); 
087  
088  
089 function render(){ 
090     for (var i = element.length - 1; i >= 0; i--){ 
091  
092         var angle = element[i].elemAngle + offset; 
093  
094         x = 120 + Math.sin(angle) * 30; 
095         y = 45 + Math.cos(angle) * 40; 
096         size = Math.round(40 - Math.sin(angle) * 40); 
097  
098         var elementCenter = $(element[i]).width() / 2; 
099  
100         var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px" 
101  
102         $(element[i]).css("fontSize", size + "pt"); 
103         $(element[i]).css("opacity",size/100); 
104         $(element[i]).css("zIndex" ,size); 
105         $(element[i]).css("left" ,leftValue); 
106         $(element[i]).css("top", y + "%"); 
107     } 
108  
109     offset += stepping; 
110 } 
111  
112  
113 }); 
114  
115 </script> 
116  
117 </body> 
118 </html>

Demo: http://www.devirtuoso.com/Examples/3D-jQuery/
Download: http://www.devirtuoso.com/Examples/3D-jQuery/example.zip
Source: http://www.devirtuoso.com/2009/08/how-to-create-a-3d-tag-cloud-in-jquery/

tafbutton blue16 3D Tag Clouds Using jQuery

Related Listings:

Tag Clouds – Styling and Adding Sort Options Users have very different opinions when it comes to tag...
Color picker plugin by Farbtastic with jQuery Farbtastic is a jQuery plug-in that can add one or...
JQuery Corners Your Boxes Corner adorners are all the rage in web design these...

DrasticTools : DataGrid with Tagcloud and Google Map Component

Posted: 14 Aug 2009 05:42 AM PDT

DrasticTools is a PHP/Javascript/MySQL based open source package with an Ajax-based datagrid with editing support, a configurable tag cloud and a Google mapping component.

DrasticTools consists of a number of PHP classes together with a number of javascript files, images and style sheets that provide functionality to build the examples on this site. A more detailed description of the functionality, the prerequisites, the usage and the change history is given in the file Doc.txt in the DrasticTools release. Below, you see it’s contents.

HOW TO USE DRASTICTOOLS, VERSION 0.6.17:

1. Introduction
DrasticTools is a PHP5 software package for displaying data from different sources in various visualisations.
In this version the following data sources are supported:
– MySQL (support for other data sources is planned)
and the following data visualisations are supported:
– DrasticGrid: an Ajax-based data grid
– DrasticCloud: an component to display data in a cloud
– DrasticMap: a component to display data on a Google Map

2. Prerequisites:
- PHP5 or higher
- Json (see http://www.json.org); Json is included in PHP by default from PHP 5.2.0 and higher.
- for DrasticMap: GD library installed (see http://www.php.net/gd) and of course a Google ApiKey
- Note: Mootools (see http://www.mootools.net/) is necessary (included in the drastictools zip).

3. Usage:
The best way to see how DrasticTools work is to look at the examples provided in the release
and see them in action on http://www.DrasticData.nl
DrasticTools uses Ajax requests to communicate with the server.
By default DrasticTools calls the same php file from which it was invoked to process AJAX requests.
This means that the instantiation of the data source should be done BEFORE ANY OUTPUT IS GENERATED,
i.e. before the header information is sent to the client. This means: before the tag in the file.
Alternatively you can specify the path option to specify a different php file to call.

4. Connecting to a Data Source:
At this moment only a MySQL can be used as data source. This is done using the class drasticSrcMySQL.
To connect to a single table, put the following in the php file before the tag:

 PHP |   copy code | ?  
1 < ?php 
2 define("PATHDRASTICTOOLS", "<PATHTODRASTICTOOLS>"); 
3 include(PATHDRASTICTOOLS."drasticSrcMySQL.class.php"); 
4 $src = new drasticSrcMySQL("<hostname>", "<username>", "<password>", "<databasename>", "<tablename>"); 
5 ?> 
6 </tablename></databasename></password></username></hostname>

To use parts of a MySQL table, you can use a subclass like this:

 PHP |   copy code | ?  
01  
02 < ?php 
03 define("PATHDRASTICTOOLS", "<PATHTODRASTICTOOLS"); 
04 include(PATHDRASTICTOOLS."drasticSrcMySQL.class.php"); 
05 class mysrc extends drasticsrcmysql { 
06     protected function select(){ 
07         $res = mysql_query("SELECT * FROM $this->table WHERE <putyourwhereclausehere>" . $this->orderbystr, $this->conn) or die(mysql_error()); 
08         return ($res); 
09     }     
10     protected function add(){ 
11         mysql_query("INSERT INTO $this->table (Continent) VALUES('Europe')", $this->conn) or die(mysql_error()); 
12         if (mysql_affected_rows($this->conn) == 1) return(true); else return(false); 
13     } 
14 } 
15 ?></putyourwhereclausehere>

5. Adding a visualisation:
To add a DrasticGrid with default options:

 Javascript |   copy code | ?  
1 <script type="text/javascript" src="js/mootools-1.2-core.js"></script> 
2 <script type="text/javascript" src="js/mootools-1.2-more.js"></script> 
3 <script type="text/javascript" src="js/drasticGrid.js"></script> 
4 <div id="grid1"></div> 
5 <script type="text/javascript"> 
6 var thegrid = new drasticGrid('grid1'); 
7 </script>

To add a DrasticCloud with default options:

 Javascript |   copy code | ?  
1 <script type="text/javascript" src="js/mootools-1.2-core.js"></script> 
2 <script type="text/javascript" src="js/mootools-1.2-more.js"></script> 
3 <script type="text/javascript" src="js/drasticCloud.js"></script> 
4 <div id="cloud1"></div> 
5 <script type="text/javascript"> 
6 var thecloud = new drasticCloud('cloud1'); 
7 </script>

To add a DrasticMap with default options:

 Javascript |   copy code | ?  
1 <script type="text/javascript" src="js/mootools-1.2-core.js"></script> 
2 <script type="text/javascript" src="js/mootools-1.2-more.js"></script> 
3 <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=<YOUR GAPIKEY HERE!!!>"></script> 
4 <script type="text/javascript" src="js/markermanager.js"></script> 
5 <script type="text/javascript" src="js/drasticMap.js"></script> 
6 <div id="map1"></div> 
7 <script type="text/javascript"> 
8 var themap = new drasticMap('map1'); 
9 </script>

5. Advanced Options:
You can use DrasticSrcMySQL with the following options:
public $add_allowed = true; // may the user add records? Default is true.
public $delete_allowed = true; // may the user delete records? Default is true.
public $editablecols; // array of columnnames to be editable. Defaults to all columns except the id column
public $defaultcols; // array of columnnames and values; only records that satisfy these conditions will be selected;
// added records will have these values as default
public $sortcol; // name of column to sort on initially. Defaults to the id column.
public $sort; // sort ascending (a) or descending (d)? Default is a.

Example:

 PHP |   copy code | ?  
1  
2 < ?php  
3 $options = array( 
4     "add_allowed" => false,        
5     "delete_allowed" => false,      
6     "editablecols" => array("Population", "LocalName") 
7 ); 
8 $src = new drasticsrcmysql($server, $user, $pw, $db, $table, $options); 
9 ?>

You can use DrasticGrid with the following options:
path // path of the php file to call
pathimg // path to images
pagelength // length of the grid. If dataset is longer the grid will do pagination
colwidth // default width (in pixels) of a column
pp // page pointer
sortcol // name of column to sort on initially. Overrules the default of the data source
sort // sort ascending (a) or descending (d)? Overrules the default of the data source
columns // optional additional configuration of the columns to show with parameters:
- name: the name of the column in the datasource
- displayname: the name to be displayed for this column
- width: the width (in pixels) of the column
- type: the type of the column, which can be one of DDTYPECHAR, DDTYPEINT, DDTYPEBOOL, DDTYPEURL, DDTYPEMAILTO, DDTYPEENUM, DDTYPETEXT, DDTYPEIMG, DDTYPEKEY
DDTYPEKEY : is like DDTYPEENUM where you want to redefine the values displayed like (0 -> "no", 1 ->"yes", 2->"Maybe")
It can be used in some simple join cases : you edit table A that has an attribute id_b defined in a (small) table B, and you want
to display a comboBox for B's labels (and not their ids) Thanks to Eric David (Paris, France).
- editable: if the column is editable (true or false)
If a parameter is not specified the default from the datasource are taken
addparams // parameter string to pass to PHP GET requests, use "&var1=value1&var2=value2"
sliderposition // position of the slider: "left" or "right" (default is "right")

 Javascript |   copy code | ?  
01  
02         //Events: 
03         onClick         
04         onMouseOver 
05         onAddStart 
06         onAddComplete 
07         onDeleteStart 
08         onDeleteComplete 
09         onUpdateStart 
10         onUpdateComplete

Example 1:

 Javascript |   copy code | ?  
01 var thegrid = new drasticGrid('grid1', { 
02     pathimg:"img/", 
03     pagelength: 10,     
04     columns: [ 
05         {name: 'id', width: 40}, 
06         {name: 'name', displayname: 'First Name'},         
07         {name: 'email', type: DDTYPEMAILTO, width: 140, editable: false}, 
08         {name: 'www', type: DDTYPEURL, width: 180, editable: true}, 
09         {name: 'present', editable: false}                 
10         ], 
11     sliderposition: "left", 
12     onClick: function(id){thegrid.DefaultOnClick(id); alert('clicked on row with id = '+id)}     
13 });

You can use DrasticCloud with the following options:
path // path of the php file to call
nroffonts // The number of different font sizes used in the cloud
namecol // name to show in the cloud
sizecol // column to use to resize the items in the cloud
log // use a logarithmic distribution (true) or linear (false) (default: true)
colorcol // column which should be used to color items
sortcol // name of column to sort on initially. Overrules the default of the data source
sort // sort ascending (a) or descending (d)? Overrules the default of the data source
showmenu // Show the menu? (default: true)
showmenufull // Show the menu opened (default: false)
shownamecol // Show the name selector? (default: true)
shownamecolumns // Array of columns that can actually be chosen by user
showlog // Show the log/linear selector? (default: true)
showsizecol // Show the column selector? (default: true)
showsizecolumns // Array of columns that can actually be chosen by user
showcolorcol // Show the color column selector? (default: true)
showcolorcolumns // Array of columns that can actually be chosen by user
showsortcol // Show the sortcolumn selector? (default: true)
showsortcolumns // Array of columns that can actually be chosen by user
showsort // Show the ascending / descending sort selector? (default: true)
addparams // optional parameter string to pass to PHP GET requests, use "&var1=value1&var2=value2"
//Events:
onClick
onMouseOver

6. Style sheets
You can use style sheets to influence the appearance of the DrasticGrid.
For the grid and the cloud a default style sheet is provided in the DrasticTools release:
grid_default.css
cloud_default.css
For the DrasticMap component, no style sheets are needed.

7. Licenses:
DrasticTools is released under the GPL open source license.
A file License.txt describing this license is distributed with its release package.
DrasticTools uses the mootools library (see http://mootools.net/), which has a MIT Style License.
DrasticMap uses the MarkerManager developed by Doug Ricket and others which has an Apache license: see http://www.apache.org/licenses/LICENSE-2.0

8. Donations:
If you like the DrasticTools software and would like it to be improved in future,
please donate on http://www.drasticdata.nl
If you want to use the DrasticTools software under a different license, please contact info@drasticdata.nl

9. Changes from earlier versions:
From version 0.6.16 to 0.6.17:
- DrasticGrid: support for multiple grids on one page, see ExampleGrid7
- DrasticGrid: new type DDTYPEKEY (a contribution from Eric David, Paris)
- DrasticGrid: new example using DDTYPEKEY: ExampleGrid11
From version 0.6.15 to 0.6.16:
- DrasticGrid: Support for images in cells, see ExampleGrid8
- DrasticGrid: Support for joined tables (for readonly), see ExampleGrid10
- DrasticGrid: click on link in URL cell opens in new window
- Drasticgrid: bug fix MAILTO and URL type of cells could not be edited in IE7
- DrasticGrid: bug fix on blur of enum cell
- DrasticGrid: style of scrollbar changed
- Bug Fix in ExampleGrid5.php: constraints
From version 0.6.14 to 0.6.15:
- Drasticgrid: onAddStart, onDeleteStart, onUpdateStart improved
- Style sheets improved
- Logo removed from grid, cloud and map
- Drasticgrid: Bug fix: characters such as & and # can now be included in cells
- DrasticGrid: transparent background of delete icons
From version 0.6.13 to 0.6.14:
- DrasticCloud: animation in cloud upon changes in menu
- DrasticCloud: cloud menu are configurable via options 'shownamecolumns', 'showsizecolumns', 'showcolorcolumns' and 'showsortcolumns'
- DrasticCloud: many smaller improvements
- DrasticGrid: support for multi-line text fields (textarea)
- DrasticGrid: checkbox centered horizontally
- DrasticMap: new option 'markercolumns' specifies which columns to show in marker
- DrasticMap: supports red and green markers for boolean values
- All: also tested in Google Chrome
- All: addparams parameter also added to refresh function
- Bug Fix: wrong column could be displayed when using 'columns' option with less columns then dataset
- Bug Fix: in DrasticCloud coloring
- Bug Fix: length of scrollbar was sometimes too short
- Bug Fix: in DrasticCloud sort menu
From version 0.6.12 to 0.6.13:
- 'scrollbarposition' option to position scrollbar left or right
- 'addparams' option to pass variables to PHP GET requests and some examples to use it
- redesign of style of grid (background color on mouseover)
- cursors improved in grid
- possibility to give headers of readonly / editable columns a different css style
- some performance improvements
- Bug fix: position of activity indicator is now in the center
- Bug fix: column width can be less than width of column label
- Bug fix: empty rows cannot be selected any more
- Bug fix: no longer display of " " when editing an empty cell
- Bug fix: special symbols like <> in a cell were displayed strange when editing
- Bug fix: when emptying a field the old content was shown
- Bug fix: error when editing an enum field with up/down key
From version 0.6.11 to 0.6.12:
- support for URL's and email adresses (mailto) in the grid
- scrollbar for pagination
- column width of grid in absolute pixel value instead of a percentage
- easier configuration of drasticgrid via the 'columns' option
- some visual redesign
- now using mootools 1.2
From version 0.6.10 to 0.6.11:
- Events: DrasticGrid, -Map and -Cloud now have events such as OnClick, OnMouseOver and OnChange.
- Class DrasticCommon removed. Communication between drastictools components can be done via events such as the Onclick event.
- Drastic* classes use the Mootools Options facility
- Better support for various Character sets
- Better detection of primary key column
- bug fix: insert special characters
From version 0.6.9 to 0.6.10:
- Bug Fix: DrasticTools was not working on FireFox without Firebug. It did work on IE and FF with firebug enabled.
From version 0.6.8 to 0.6.9:
- A huge performance improvement on using Drasticgrid on Internet Explorer
- DrasticCloud was added
From version 0.6.7 to 0.6.8:
- changed look and feel and style
- output is in utf8 to support other character sets
- Bug Fix: adding rows when table is empty
- Bug Fix: grid supports checkboxes
- some minor bug fixes
From version 0.6.6 to 0.6.7:
- redesign in architecture: more javascript, less php
- grid supports checkboxes
- selection of row
- many new options
From version 0.6.5 to 0.6.6:
- options "showcols" and "showcolsnot" were added. May be used to explicitly show or not to show columns.
- option "defaultcols" was added to drasticSRCMySQL to provide easy way to specify a simple WHERE clause and corresponding ADD function (example3a)
- fixed bug: Drasticgrid showing "null" if no content in cell (was a problem in IE)
- DrasticMap (alpha): interactively change the label, tooltip and bar height
- some small bug fixes
From version 0.6.4 (MySQLPHPGrid) to 0.6.5 (DrasticTools):
- grid is now completely Ajax based, also for sorting, paging, delete, add, update
- configurable which columns are editable; configurable look for editable fields
- improved configurability via css, also in ie
- ability to display column names different from table field names
- new component to visualize data on a google map (alpha version)
- new architecture which may support multiple data sources (not only MySQL) and other visualisations
- many more...
From version 0.6.3 to 0.6.4:
- the width of the grid and the individual columns can be controlled in the style sheet
- tooltips on cells and columns headers
- several minor improvements in presentation of grid
- width of input field same as column width
- several bugfixes:
- bug fix: error on adding or deleting a record right on the border of the display page
- bug fix: ability to insert commas
- bug fix: using the example sql file in MySQL strict mode
From version 0.6.2 to 0.6.3:
- using mootools library for ajax update requests
- some visual effects on update and delete
- tooltips on add, delete and sort buttons
- upon add, the grid navigates to the added row
- style sheets updated
- several minor bug fixes
From version 0.6.1 to 0.6.2:
- bug fix in the update of the presentation of the grid
From version 0.5.1 to 0.6.1:
- Update of cells is handled via an AJAX request => no full page load is needed.
- Support for MySQL ENUM Datatype via drop down lists.
- The ability to disallow adding, deleting or cell updating (used to be one setting for all).
- optional arguments removed and implemented as public variables of the class
- you may specify if the id field will be shown or not; it is no longer allowed to edit the id field.
- many smaller bug fixes

Demo: http://www.drasticdata.nl/DrasticTools/ExampleGrid1.php
Download: http://www.drasticdata.nl/DrasticTools0617.zip
Source: http://www.drasticdata.nl/DDHome.php?m=3

tafbutton blue16 DrasticTools : DataGrid with Tagcloud and Google Map Component

Related Listings:

OmniGrid – Advanced DataGrid for Mootools The OmniGrid component is inspired by two similar components FlexGrid...
MooTools Table Plugin MooTables are created from standard html tables, they degrade nicely.MooTables...
Ingrid Table jQuery Plugin Datagrids don’t have to be difficult to use anymore –...

education & Training

Ajax Updates

Ajax Updates

0 comments:

Post a Comment

Online

Blog Archive

Visits