jQuery Visualize Plugin: Accessible Charts & Graphs from Table E
Posted by Maggie on 03/12/2010 Topics: accessibility dwpe book jQuery progressive enhancement A while ago, we came up with a technique for creating accessible charts and graphs that uses JavaScript to scrape data from an HTML table and generate bar, line, area, and pie chart visualizations using the HTML5 canvas element. We've updated the Visualize plugin — adding ARIA attributes to clarify the chart's role to screen reader users, so they're better informed about which elements contain useful data; and providing two style variations to demonstrate how you can use CSS to customize the charts' appearance. Visualize is one of the 12 fully-accessible, project-ready, progressive enhancement-driven widgets that accompanies our new book, Designing with Progressive Enhancement. How the Visualize plugin works The Visualize plugin parses key content elements in a well-structured HTML table, and leverages that native HTML5 canvas drawing ability to transform them into a chart or graph visualization.
Dynamisez vos tableaux avec jqGrid
Dans un article du blog officiel, j’ai présenté rapidement JQuery comme une librairie facilitant grandement l’utilisation du javascript dans les interfaces html. Cependant, l’un des autres intérêts de JQuery se trouve dans la variété des plugins disponibles (après tout, nous ne sommes pas là pour réinventer la roue). Aujourd’hui, je vais vous présenter jqGrid. Ce plugin permet d’injecter des tableaux dynamiques dans votre page html. Parmi tous les avantages que propose ce plugin, je citerai: la possibilité de redimensionner les colonnes du tableau par drag-&-drople tri et le filtrage des données assurés au niveau du javascriptla pagination des données gérée par le javascriptla possibilité d’alimenter le tableau à partir de données xml ou Jsonles cellules du tableau pouvant basculer en mode “édition” afin d’en modifier le contenu Pour celà, il faut déclarer un élément html vide de type table (une convention de jqGrid). jQuery("#grid_id").jqGrid(options);
Simple CSS - HostM.com Web Hosting
Cascading Style Sheets (CSS) is a good way to specify the styles of fonts and other page elements on your sites. It makes it easier for you to update styles too, because when done right, you only need to make a single change to update the styles on multiple pages and elements. Another bonus is that your visitor's browser needs to load less data per page, helping you reduce your data transfer usage while serving the same information. That means you'll be able to accommodate more site visitors without having to spend more on data transfer. To help you work with CSS, we've created a free tool called Simple CSS, which runs on Mac OS X and Windows. With Simple CSS, you can manage multiple CSS projects and import your existing style sheets.
start
jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl. jqGrid uses a jQuery Java Script Library and is written as plugin for that package. For more information on jQuery, please refer to the jQuery web site. jqGrid's Home page can be found here. Working examples of jqGrid, with explanations, can be found here. The last development version can be obtained from GitHub JqGrid was developed by Tony Tomov at Trirand Inc., a software development firm based in Sofia. Tony got the idea for jqGrid when he needed an easy way to represent database information in a project. Tony developed jqGrid and made it available for free as a way of making a contribution to the open-source community.
How to Mimic the iGoogle Interface
Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. In this tutorial, I'll show you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface, which has plenty of potential applications! First, let's list exactly what we'll be creating here and what features it'll have: This interface will contain several widgets.Each widget can be collapsed, removed and edited.The widgets can be sorted into the three seperate columns by the user (using a drag and drop technique).The user will be able to edit the color and title of each widget.Each widget can contain any amount of regular HTML content, text, images, flash etc. Please note that we will only be covering the front-end aspect of the project in this tutorial. Since it's all about the user and because the idea was influenced by iGoogle we're going to be calling this project 'iNettuts'. First column: inettuts.js:
Sky CSS Tool
jQuery.timepickr.js
Downloads Google Code Subversion svn co jquery-timepickr Known issues In 24h mode, 12h does not swap to 00h as it should when hovering am/pm Broken in IE6 (might take a while to fix, unless someone contribute a patch) I am aware that there is no such thing as am and pm in 24h convention Some people reported that it didn't work so well in the iPhone. Report a bug Please use the project's bug tracker to report bugs, also check if the bug is not already reported. To report a bug, click on New issue and fill up the form. About Author My name is Maxime Haineault, I'm the co-owner of a multimedia company named Motion Média. I'm mostly developping this plugin in my spare times, so don't expect bugs to be fixed over night. For that matter, if you really want a bug to be fixed quickly you can speed up the process by sending me your patches, I'll be glad to merge them into trunk if the code looks decent and doesn't break the unit tests.
Editor / IDE for PHP, Symfony, Prado, eZ publish, PHPUnit
