Dynamic String Shortening for JavaScript - Readme & Instructions

Author: Sebastiaan Mindreau
Date: 25/01/2007
Version: 0.1

Overview

Although Dynamic String Shortening (DSS) for Javascript (JS) can be a very simple and basic appliance of the web developper, it may be the key element to succes.
Imagine having lots of data to administer, fields with lots of data, tables stuffed with information that totally mess up your layout. Frustrating hey? Most of your customers (or you yourself) are only interested in the details of this information in about 10% of the cases, so why bother fixing your layout, if you can just compact the data on the client side?

This is just what DSS:JS does. You select the tables you wish to compact the data of. Then you execute the checkTable() function on your page (or when it loads every time!) and DSS:JS replaces the cells which exceed a certain TRIGGER_VALUE with a compacted version of the original data, of the form blablabla..., where blablablaandso-on was your original text.

So basically, you don't have to compact the data server-side (if possible!), you just let the client do all the work. This is the new wave many web-based applications take: they leave the mission-critical and sensitive data processing on the server-side and let the easy, safe logic be processed in the clients own browser. This not only lowers the load on your servers (by sparing you the compacting time and the unneeded extra coding), but also delivers a more dynamic and fast look to your users, as they don't need to request the page with the full data everytime they want to see some detail.

If the users wants to see the actual data in its totallity, there are several ways to present the data, but do read on to find out how.

Demo

To convince you even more, here's a very short example.

Short Long String Doesnt end!!!! And keeps going!!!! 123456789
Test LONGER TEST TEST TEST TEST 1234567890

Of course, we dont want this table to appear this way. So we can execute the script (using the checkTable() method), to check the only instance on this page. The TRIGGER_VALUE is set to 10, so every table cell will contain at most 10 characters (including spaces) after the string shortening. Press the "Fix table" button to fix the table to 10 characters. Press "Reset" to set it back to its original value. Note that by hovering over a table cell, the full data is displayed as the tooltip. Of course, even the tooltip has its limitations, but for larger and especially broader tables, it does the trick. In the other case, smart use of LightBox JS would be advised.

This is a rather stupid example, but I am certain that you can think of better ways to use DSS:JS for your own purposes.

How to use it

Then come all the questions... One of the most important is probably this one. Well, I'll keep it short for the impatient among you.

That is basically all it takes for you to get things going on your page. Read on to learn more about DSS:JS.

Features

This is a non-exhaustive list of the available features in this release:

Packaging

DSS:JS comes in a zip file by default. These are the contents of the zip file (version 0.1):

Bugs

No bugs have been found so far, as it this the first alpha release.
Did you encounter problems or think you've found a bug? Contact me at: Sebastiaan.Mindreau [AT] belgacom [DOT] net.

Version History

0.1
Alpha version, basic features included, together with two demos and readme document.

Downloads

The script file is included in the download. You can find it here.

Legal Info

DSS:JS is published under the GNU Public License. You are free to use this software any way you please, modify and deploy it anywhere you want it. You may NOT remove the copyright notice in the script file, and you may not redistribute the file saying you are the owner. My ownership of the software should never be doubtable. You may not use it as part of a commercial distribution, but may use it in a commercial system after contacting me.

Evovle today - with the simple triplet: {xhtml, css, javascript}