-
COMMENTS WITH DISQUS.COM
Comments have been added to every blog post using Disqus.com. It was very easy to add their plugin however the performance impact is not great so we'll see how it goes.
-
MOOTOOLS AND CANVAS CHART WITH TOOLTIPS
There's a lot of good stuff out there these days when it comes to drawing charts and graphs using the (relatively) new <canvas> tag. This is great to see because the benefits of switching to canvas for charting needs are certainly persuasive. It's psuedo cross browser (thanks Google), works on smartphones and is a lightweight and fast solution at a time when web page performance is becoming increasingly important in large web applications and on mobile devices.
The following is my attempt at writing a cross browser Mootools-based pie chart class with tooltip support. It has been thoroughly tested in IE 6-8, Firefox, Safari, Chrome, Opera and on the iPad (tips won't show but the chart renders nicely). The tooltip feature itself uses a technique I found online by Greg Houston, author of Mocha UI, who used an image map with polygon-shaped pie slices as a way to track mouse move events effeciently over the pie chart (interesting related tidbit). Documentation to follow.
Matts411.com Visitors:
Browser Percent Avg. Time on Site Firefox 39.20% 00:01:33 Internet Explorer 30.58% 00:03:04 Chrome 22.91% 00:02:01 Safari 3.63% 00:01:03 Opera 2.28% 00:00:48 Other 1.40% 00:00:14 GitHub project page | View Script Source | View CSS Source
I suspect we'll soon start to see some crazy 3D charts once more browser vendors implement WebGL. In the meantime hope you guys find this code useful!
-
DISABLING SPELLCHECK IN TEXTAREA ELEMENTS
To disable spell checking on HTML elements in newer browsers (eg. Firefox 3.6) set the attribute spellcheck="false" in the element's opening tag. Note: Some browsers (eg. Safari 5) will not show the red underline for mispelled words until you focus your cursor on a word and then remove it.
<TEXTAREA spellcheck="false">
<TEXTAREA spellcheck="true"> (default)
For more detailed information refer to the W3C Specification.
-
MOOGRID - A MOOTOOLS-BASED GRID COMPONENT
I've been working on a better grid component as of late and have what I believe to be a solid foundation at this point. Documentation to follow. Demo
// // MooGrid - A Mootools-based grid component // // MIT-style license. Copyright 2010 Matt V. Murphy | bW11cnBoMjExQGdtYWlsLmNvbQ== // MooGrid requires Mootools 1.3 and Mootools 1.3 More (Class.Binds, Element.Delegation) // ////////////////////////////////////////////////////////////////////////// // Links: // // - Demo: http://www.matts411.com/post/moogrid/ // - GitHub: http://github.com/mmurph211/Grid // ////////////////////////////////////////////////////////////////////////// // Features: // // - Cross browser compatible (Internet Explorer, FireFox, Chrome, Safari) // - JSON, XML remote and inline loading supported // - Fixed header, footer, columns // - Column resizing // - Grid resizing // - Row selection (singular and multi-select) // - Multiple grids per page supported // ////////////////////////////////////////////////////////////////////////// // Future Features and TODO: // // - Documentation // - Double click column header to auto fit content // - Relative column widths // - Graceful degradation // - Keyboard shortcut options for row selection // - Zebra row support in older browsers. In newer browsers try: // .mgBR:nth-child(odd) { background-color : [color]; } // - More... // -
SETTING THE NAME ATTRIBUTE IN IE'S DOM
An old problem with IE is that you can't set the name attribute on form elements in the DOM directly. Fortunately there is a workaround to this issue using IE's mergeAttributes method. By creating a temporary named element acceptable by IE's createElement method, you can merge the name attribute into the element you desire, allowing you to name or rename an element. An example demo follows.
var setName = function(el, newName) { el = (typeof el === "string") ? document.getElementById(el) : el; el.name = newName; if (/*@cc_on!@*/0) { // Internet Explorer test (needs to be modified for IE8) el.mergeAttributes(document.createElement("<INPUT name='" + newName + "'/>"), false); } };In Mootools 1.2.1:
var setName = function(elementId, newName) { var el = (!!elementId) ? $(elementId) : null; if (!elementId || !newName || !el) return; el.set({ "name" : newName }); if (Browser.Engine.trident4 || Browser.Engine.trident5) { el.mergeAttributes(document.createElement("<INPUT name='" + newName + "'/>"), false); } };