Paul Irish and Divya Manian have created a fun visualization on readiness of HTML5 and CSS3 standards in various browsers.

It uses a bunch of the usual CSS cool-suspects: -webkit-gradient, -webkit-transition, -webkit-border-radius, and the like (and -moz/-o too).

The added feature is…. do a mouse scroll on the page:

Related posts:

1. YouTube and Vimeo turn on HTML5 video tag At Google I/O the team showed a demo of YouTube...
2. FireDiff: Firebug extension to track changes to DOM and CSS Kevin Decker has released FireDiff a very cool Firebug extension...
3. Custom info windows with jQuery and Google Maps Ben Nolan has a writeup on a new feature in...

Ropox: Thats interesting enough, but still to my opinion there is a lot to be made yet.

Gmail started off with the awful input type="file" “add more” typical solution that we all know and love. Then they added the ability to select multiple files via Flash…. and now they allow the ability to drag and drop files right onto the message compose using HTML5 standards.

Want to do it too? Check out the APIs and how you can do it all, including showing the thumbnails:

function handleFiles(files) {
for (var i = 0; i
var file = files[i];
var imageType = /image.*/;

if (!file.type.match(imageType)) {
continue;
}

var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
preview.appendChild(img);

var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);
}
}

Related posts:

1. The Beast File- Google Θέλουμε δε θέλουμε, η Google είναι στη ζωή μας σχεδόν...
2. YouTube and Vimeo turn on HTML5 video tag At Google I/O the team showed a demo of YouTube...
3. Image upload with AS3 mac problem fix I hit my head several times on the wall before...

thats why i Love jquery, cause everything is so simple…

To get the width and height of the whole page (document), use:

var pageWidth = $(document).width();
var pageHeight = $(document).height();

To get the width and height of the viewport (window), use:

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

Opera though has a different approach. with Opera 9.5 $(window).height() returns the document height (more info here)
you can get around this by using

var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();

Related posts:

1. JQuery wildcard selectors JQuery wildcard selectors on select boxes, how to reset all...
2. Custom info windows with jQuery and Google Maps Ben Nolan has a writeup on a new feature in...
3. HTML 5 section is not just a “semantic div” James Graham of Opera has a post about how section...

How do you visualize data in interesting ways but allow the data to be accessible for all? The jQuery Visualize work is the latest library that groks HTML and replaces the table with pretty graphs:

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. For example, table row data values serve as chart bars, lines or pie wedges; table headers become value and legend labels; and the title and caption values provide title labels within the image. Visualize also automatically checks for the highest and lowest values in the chart and uses them to calculate x-axis values for line and bar charts. Finally, the plugin includes two different CSS styles — one light and one dark — that can be used as is, or can serve as a starting point to customize chart and graph presentation to match any application style.

Someone pointed out that “accessible” means many things. If you have a 10,000 row table, it may not be easy to consume…. but hey!

Source: ajaxian.com

Related posts:

1. why you rent your actual data and you dont know about it I was reading this interesting post about how Scobleizer was...

DHTMLX announced the update of their Ajax UI Toolkit, a comprehensive set of full-featured JavaScript components which enable developers to create rich and high-performing web applications with less efforts and time.

Version 2.1 introduces lots of significant improvements and bug fixes. The updated components bring better stability and performance, and provide compatibility with IE8 RC, Google Chrome 2 and Safari 4 in addition to other supported browsers.

One of the key products, dhtmlxGrid, was enhanced with extended grouping functionality and faster rendering capabilities.

Also, a couple of innovations have been introduced:

The first one is dhtmlxConnector which provides an easy way to connect client-side components to the server-side database (currently available for PHP only). This extension handles client – server interaction for DHTMLX components which content is bound to the server database, such as grid, treegrid, tree, and combo. It also provides such functionality as loading/editing data, server-side sorting, filtering, paging, etc. The video demonstrating some dhtmlxConnector’s features is available here.

No related posts.