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.

You can find the dss.js file in this distribution.
Include the following line in the head section of your page:
<script type="text/javascript" src="dss.js"></script>
Add the following attribute to the table you want to fix:
<table ... id="myBelovedTable" ...
If you have only one table, you should use the checkTable() function, else use the checkTables() function. They work fundamentally different in the way they address the tables, the former one is more compatible with older browsers. The checkTable() and checkTables() functions use the default TRIGGER_VALUE, but you can give the function an extra parameter, which tells the function what the maximum allowed number of characters is. Don't use both functions on the same page.
Then add the following attribute to your body tag:
<body ... onload="checkTable(differentTriggerValue);" ...
or
<body ... onload="checkTables();" ...
You can also use the onclick attribute of buttons and other HTML elements to suit your needs.

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:

Smooth integration into your theme, no CSS used in the script itself, only text-based processing.
Every page can have different TRIGGER_VALUES depending on the parameter you give one of the functions.
You can also set the default value in the dss.js file.
If no table with the id attribute set to myBelovedTable exists, then nothing happens, so no unneeded JS exceptions!
Empty cells and rows are allowed, DSS:JS checks the contents and non-null characteristics of every table cell and row.
The title of the HTML objects (tr and td/th) are set to the original contents, but only if the cell contained too much data.
The original text is replaced (if needed) by the function fixString(txt, maxSize). The default behaviour is to cut off all characters at the end, and replace them by "...", so that the result contains exactly TRIGGER_VALUE characters. You can always change this function to reflect your own desires.

Packaging

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

dss.js: JavaScript script file;
DynamicStringShorteningDemo1.htm and ~2.htm: Demo files for illustration;
Readme.htm: This document;
readme.js: Extra script definitions for the Readme file;
style.css: Style definitions for the Readme file.

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}