Super Tables v0.30 Released

The latest version of Super Tables is out. I decided to call it version 0.30 instead of version 0.26 because I feel like it has earned the bigger jump speedwise. Enjoy!

Version 0.30 Change Log:

• Rendering speed increased significantly in Firefox and Internet Explorer.
• Required CSS styles have lessened dramatically.
• rowSpan and colSpan support added.
• onStart option added. onStart is a function run before the superTable script begins to re-render the table. Any this.variableNameHere variables you create here can be used later ( eg. onFinish function )
• Fixed various minor bugs.

Have a look, it's now much faster.

Super Tables - HTML Tables with Fixed Headers and More

What are Super Tables?

Something that's not really that super yet but may be someday. Super Tables are large HTML tables enhanced with cross-browser fixed vertical and horizontal scrolling headers with custom skins and features.

How do they work?

Using a small (10kb uncompressed) javascript file and an equally small (4kb) CSS skin file, a rendered HTML table is taken by the superTables.js script and is turned into a Super Table using only a single line of javascript code.

Why would I need them?

You might need them if you have one or more large tables on your website and/or application and wish to:

• Enhance the user experience.
• Constrain tables sizes while still keeping the headers in view.
• Turn static tables into web-based spreadsheets.
• Avoid having to rewrite old HTML table code into javascript or XML for use in similiar products.

Creating Draggable HTML Element Panes With Javascript

Updated on 7/13/2008.

If you're an aspiring javascript developer, a truly powerful object worth familiarizing yourself with is the event object. Capable of capturing and controlling almost any form of communication between an internet surfer and your website, the event object can turn your static HTML page into one powerful app.

To demonstrate some of the cool features that you can create with the event object, here's a script/demo that gives HTML elements the ability to be dragged around the page with your mouse. Feel free to try it out yourself by clicking on one of the elements/panes below and moving it around:

Hello!

Please keep in mind that these are the simpler draggable panes as the entire area within the pane can be clicked on for dragging. Things get a little more interesting if you have a pane where only certain areas are designated as the points where you can click and drag the pane around. To see these kinds of panes in action, please visit the test page linked to below. The source code of the demo page is also available for viewing further in this article. Read more...

How to Have Isolated Internet Explorer 6 and 7 Stylesheets

In its infinite wisdom, Microsoft decided when developing Internet Explorer that the idea of following standards was out of the question. It never occurred to them that one - not everyone uses their browser, and two - that by making their own standards, they would be giving webmasters years worth of frustration. And in such tradition, I present to you, fellow frustrated webmasters, a snippet of code that will allow you to make IE-read-only cascading style sheets.