/* * SCROLLER * (c) 2004 Thomas Unterthiner * * Scrolls a given text on a HTML-table * * so this is what happens if you're discussing about pointless things on the * airport, waiting for your plane and desperatly needing a piss ;-) * * project start: 07.04.2004 * last change: 21.04.2004 * */ /* * settings */ var FOREGROUND_COLOR = "red"; var BACKGROUND_COLOR = "white"; var SCROLL_DIRECTION = 0; // 0 = left, 1 = right /* * hash containing the bitmaps for each letter */ var CHARS = new Array(); CHARS['a'] = new Array( new Array(0, 1, 0), new Array(1, 0, 1), new Array(1, 0, 1), new Array(1, 1, 1), new Array(1, 0, 1)); CHARS['b'] = new Array( new Array(1, 1, 0), new Array(1, 0, 1), new Array(1, 1, 0), new Array(1, 0, 1), new Array(1, 1, 0)); CHARS['c'] = new Array( new Array(0, 1, 1), new Array(1, 0, 0), new Array(1, 0, 0), new Array(1, 0, 0), new Array(0, 1, 1)); CHARS['d'] = new Array( new Array(1, 1, 0), new Array(1, 0, 1), new Array(1, 0, 1), new Array(1, 0, 1), new Array(1, 1, 0)); CHARS['e'] = new Array( new Array(1, 1, 1), new Array(1, 0, 0), new Array(1, 1, 1), new Array(1, 0, 0), new Array(1, 1, 1)); CHARS['f'] = new Array( new Array(1, 1, 1), new Array(1, 0, 0), new Array(1, 1, 0), new Array(1, 0, 0), new Array(1, 0, 0)); CHARS['g'] = new Array( new Array(1, 1, 1), new Array(1, 0, 0), new Array(1, 0, 1), new Array(1, 0, 1), new Array(1, 1, 1)); CHARS['h'] = new Array( new Array(1, 0, 1), new Array(1, 0, 1), new Array(1, 1, 1), new Array(1, 0, 1), new Array(1, 0, 1)); CHARS['i'] = new Array( new Array(0, 1, 0), new Array(0, 1, 0), new Array(0, 1, 0), new Array(0, 1, 0), new Array(0, 1, 0)); CHARS['j'] = new Array( new Array(1, 1, 1), new Array(0, 0, 1), new Array(0, 0, 1), new Array(0, 0, 1), new Array(1, 1, 0)); CHARS['k'] = new Array( new Array(1, 0, 1), new Array(1, 0, 1), new Array(1, 1, 0), new Array(1, 0, 1), new Array(1, 0, 1)); CHARS['l'] = new Array( new Array(1, 0, 0), new Array(1, 0, 0), new Array(1, 0, 0), new Array(1, 0, 0), new Array(1, 1, 1)); CHARS['m'] = new Array( new Array(1, 0, 0, 0, 1), new Array(1, 1, 0, 1, 1), new Array(1, 0, 1, 0, 1), new Array(1, 0, 0, 0, 1), new Array(1, 0, 0, 0, 1)); CHARS['n'] = new Array( new Array(1, 0, 0, 0, 1), new Array(1, 1, 0, 0, 1), new Array(1, 0, 1, 0, 1), new Array(1, 0, 0, 1, 1), new Array(1, 0, 0, 0, 1)); CHARS['o'] = new Array( new Array(0, 1, 0), new Array(1, 0, 1), new Array(1, 0, 1), new Array(1, 0, 1), new Array(0, 1, 0)); CHARS['p'] = new Array( new Array(1, 1, 1), new Array(1, 0, 1), new Array(1, 1, 1), new Array(1, 0, 0), new Array(1, 0, 0)); CHARS['q'] = new Array( new Array(0, 1, 0), new Array(1, 0, 1), new Array(1, 0, 1), new Array(1, 0, 1), new Array(0, 1, 1)); CHARS['r'] = new Array( new Array(1, 1, 1), new Array(1, 0, 1), new Array(1, 1, 0), new Array(1, 0, 1), new Array(1, 0, 1)); CHARS['s'] = new Array( new Array(1, 1, 1), new Array(1, 0, 0), new Array(1, 1, 1), new Array(0, 0, 1), new Array(1, 1, 1)); CHARS['t'] = new Array( new Array(1, 1, 1), new Array(0, 1, 0), new Array(0, 1, 0), new Array(0, 1, 0), new Array(0, 1, 0)); CHARS['u'] = new Array( new Array(1, 0, 1), new Array(1, 0, 1), new Array(1, 0, 1), new Array(1, 0, 1), new Array(1, 1, 1)); CHARS['v'] = new Array( new Array(1, 0, 1), new Array(1, 0, 1), new Array(1, 0, 1), new Array(1, 0, 1), new Array(0, 1, 0)); CHARS['w'] = new Array( new Array(1, 0, 0, 0, 1), new Array(1, 0, 0, 0, 1), new Array(1, 0, 1, 0, 1), new Array(0, 1, 0, 1, 0), new Array(0, 1, 0, 1, 0)); CHARS['x'] = new Array( new Array(1, 0, 1), new Array(1, 0, 1), new Array(0, 1, 0), new Array(1, 0, 1), new Array(1, 0, 1)); CHARS['y'] = new Array( new Array(1, 0, 1), new Array(1, 0, 1), new Array(0, 1, 0), new Array(0, 1, 0), new Array(1, 0, 0)); CHARS['z'] = new Array( new Array(1, 1, 1), new Array(0, 0, 1), new Array(0, 1, 0), new Array(1, 0, 0), new Array(1, 1, 1)); CHARS['!'] = new Array( new Array(0, 1, 0), new Array(0, 1, 0), new Array(0, 1, 0), new Array(0, 0, 0), new Array(0, 1, 0)); /* * scroll a given text on a given table with a given speed, where speed * is the interval in milliseconds betweeen one movement and another * * if there's another text already scrolling (meaning there's already * a callback installed), stop that scrolling by stoping it's timer * * global vars CALLBACK_HANDLE (to store the timer-handle), ACTUAL_POS * (to store the position of the first pixel of the first letter in the * table) and SCROLL_DIRECTION (defines wether we scroll left or right) * must exist. */ function scrollText(text, speed, tableId) { if (CALLBACK_HANDLE) { stopScrolling(); } text = text.toLowerCase(); if (SCROLL_DIRECTION) // false: scroll left; true: scroll right { ACTUAL_POS = 0 - calcTextLength(text); CALLBACK_HANDLE = window.setInterval("moveRight(\"" + text + "\"," + tableId + ")", speed); } else { ACTUAL_POS = document.getElementById(tableId).rows[0].cells.length; CALLBACK_HANDLE = window.setInterval("moveLeft(\"" + text + "\"," + tableId + ")", speed); } } /* * calculate the length in pixel (meaning in cells) of a text * a space has a width of 1 px */ function calcTextLength(text) { var length = 0; for (var j = 0, dist = 0; j < text.length; ++j) { length += CHARS[text.charAt(j)][0].length + 1; // +1 for the space } return length; } /* * move the given text 1 cell to the right/left of its actual x-Position * (meaning the actual position of the first pixel of the first letter) * USED AS CALLBACK! * * if the text scrolled completely out of the window, stop this function by * using the global CALLBACK_HANDLE - var * * ASSUMPTIONS: * the text must already be in lower-case... anything else won't work, * because only lowercase letters can be used as index in the CHARS-Hash * * There must be a global variable ACTUAL_POS storing the actual xPos of * the text (there aren't any static-vars in Javascript, and as this function * is used as callback it's much easier this way) * * There must be a global variable CALLBACK_HANDLE, which stores the handle * which is used to install and deinstall this function as callback * */ var CALLBACK_HANDLE = 0; var ACTUAL_POS; function moveRight(text, tableId) { rows = document.getElementById(tableId).rows; clearTable(tableId); for (var j = 0, dist = 0; j < text.length; ++j) { drawLetter(ACTUAL_POS + dist, text.charAt(j), tableId); dist += CHARS[text.charAt(j)][0].length + 1; } // uninstall callback if (ACTUAL_POS > rows[0].cells.length) { stopScrolling(); } else { ++ACTUAL_POS; } } function moveLeft(text, tableId) { rows = document.getElementById(tableId).rows; clearTable(tableId); for (var j = 0, dist = 0; j < text.length; ++j) { drawLetter(ACTUAL_POS + dist, text.charAt(j), tableId); dist += CHARS[text.charAt(j)][0].length + 1; } // uninstall callback if (ACTUAL_POS > rows[0].cells.length) { stopScrolling(); } else { --ACTUAL_POS; } } /* * stops the timer with the handle stored in CALLBACK_HANDLE * set CALLBACK_HANDLE to 0 * * the global variable CALLBACK_HANDLE must already exist */ function stopScrolling() { window.clearInterval(CALLBACK_HANDLE); CALLBACK_HANDLE = 0; } /* * clear the table with a given ID * * NOTE: the background color the table should be cleared to has to be stored * into the global var BACKGROUND_COLOR */ function clearTable(tableId) { background = BACKGROUND_COLOR; rows = document.getElementById(tableId).rows; for (var i = 0; i < rows.length; ++i) { for (var j = 0; j < rows[i].cells.length; ++j) { rows[i].cells[j].bgColor = background; } } // rows[1].cells[rows[0].cells.length].bgColor = "blue"; } /* * draw a certain letter on the table with a given id. On the table, start * on a given column. In case not the whole letter can be drawn, because column * is out of borders, draw only those parts of the letter which can be * displayed on the table. * * NOTE: * global vars FOREGROUND_COLOR and BACKGROUND_COLOR must exist and contain * valid HTML-colors. */ function drawLetter(column, letter, tableId) { foreground = FOREGROUND_COLOR; background = BACKGROUND_COLOR; var rows = document.getElementById(tableId).rows; for (var i = 0; i < rows.length; ++i) { // check borders letterLength = CHARS[letter][0].length; startIndex = 0; endIndex = letterLength if (column < 0) { if (letterLength + column < 0) return; else startIndex = Math.abs(column); } if (column + letterLength >= rows[i].cells.length) endIndex = letterLength - (column + letterLength - rows[i].cells.length) - 1 for (var j = startIndex; j <= endIndex; ++j) { if (CHARS[letter][i][j]) color = foreground; else color = background; rows[i].cells[column + j].bgColor = color } } } /* * create an empty (meaning empty cells) table with a given * amount of rows and columns and a certain ID. * The table won't have any borders, paddings or margins between the cells. * The cells will be 10px * 10px big, the table's CSS is defined within this * function */ function createScrollerTable(rows, cols, tableId) { tableCss = " style=\"padding:0; margin:0; background-color:" + BACKGROUND_COLOR + "\""; tableAttributes = " id=\"" + tableId + "\" cellspacing=\"0\" cellpadding=\"0\"" + tableCss; cellAttributes = "width=\"10px\" height=\"10px\""; document.write("
"); } document.write(" |