Posts Tagged ‘Html’

jQuery Visualize: Updated accessible charts and graphs

July 11th, 2009 No comments

Scott Jehl has released jQuery Visualize, the plugin that groks HTML tables and generates lovely charts from it, all from a simple $('table').visualize(); (lot’s of options for you to twiddle too if you want).

First, you create a bog standard table like:




  1. <table>

  2. <caption>2009 Individual Sales by Category</caption>

  3. <thead>

  4. <tr>

  5. <td></td>

  6. <th>food</th>

  7. <th>auto</th>

  8. <th>household</th>

  9. <th>furniture</th>

  10. <th>kitchen</th>

  11. <th>bath</th>

  12. </tr>

  13. </thead>

  14. <tbody>

  15. <tr>

  16. <th>Mary</th>

  17. <td>150</td>

  18. <td>160</td>

  19. <td>40</td>

  20. <td>120</td>

  21. <td>30</td>

  22. <td>70</td>

  23. </tr>

  24. <tr>

  25. <th>Tom</th>

  26. <td>3</td>

  27. <td>40</td>

  28. <td>30</td>

  29. <td>45</td>

  30. <td>35</td>

  31. <td>49</td>

  32. </tr>

  33.                 …repetitive rows removed for brevity.

  34. </tbody>

  35. </table>


Then you visualize it. You end up with pretty graphs like these:


Categories: Programming Tags: , ,

How to skin HTML form elements in seconds

May 19th, 2009 No comments

In the past weeks I received some requests from my readers which asked to me to suggest a simple way to skin HTML form elements. There are a lot of ways to do that and a lot of posts with interesting resources about this topic. But if you want to save time and obtain a nice result I suggest you to use jqTransform or NiceForms.

Both scripts are very useful and simple to use. If you want to use a "native" script which doesn’t use an external JS framework (such as jQuery or MooTools) I think a good choice is NiceForms otwerwise, if you use jQuery, a good alternative is jqTransform. Take a look how they work.

1. jqTransform

jqTransform is a jQuery styling plugin wich allows you to skin quickly form elements in a very easy way. The only thing you have to do is to add a javascript inclusion to this plugin in the header section of your web page, create your form and add two lines of JS code to apply the transformation to your form.
Use this code to add a javascript inclusion to jqTransform:

<script type="text/javascript" src="jquery.jqtransform.min.js">

…now create a form with class property equal to jqTransform:

<form class="jqTransform">
<!– Add form elements here… –>

…then add this JS code to apply the transformation:

<script type="text/javascript">
$(function() {

2. NiceForms

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.
To implement form style transformation you have to add a javascript inclusion to NiceForms in your web page using this code:

<script type="text/javascript" src="niceforms.js">

…then create a form with class property equal to niceform:


<form class="niceform">
<!– Add form elements here… –>
Categories: Webmasters Resources Tags: ,