|
home / programming / javascript / ne / 1 |
  [previous] |
The latest part of the code is very simple, and as I said before it's used to show, hide arrow keys and to scroll the text:
var __scrollText='';
var __showArrows=false;
var C_SCROLL_SPEED=50;
var C_HIDE_TIME=1000;
function scrollForward(o) {
if (o.scroll) {
o.value= o.value.substring(1) + o.value.substring(0,1);
setTimeout(
function () {
scrollForward(o);
}
, C_SCROLL_SPEED);
}
}
function scrollBackwards(o) {
if (o.scroll) {
o.value=o.value.substring(o.value.length-1,o.value.length) + o.value.substring(0,o.value.length-1);
setTimeout(
function () {
scrollBackwards(o);
}
,C_SCROLL_SPEED);
}
}
function hideIcons(o){
if (!o.scroll && !__showArrows) {
var oRight=document.getElementById('right');
oRight.style.display="none";
var oLeft=document.getElementById('left');
oLeft.style.display="none";
}
}
function stopScroll(o) {
__showArrows=false;
if (!o.scroll) {
setTimeout(function () {
hideIcons(o);
}, C_HIDE_TIME);
}
}
function showIcons(o) {
var styleLen=o.offsetWidth;
var b=document.getElementsByTagName('body')[0];
var span = document.createElement('span');
span.innerHTML=o.value;
b.appendChild(span);
var len=span.offsetWidth;
b.removeChild(span);
if (len>styleLen) {
__showArrows=true;
var oLeft=document.getElementById('left');
oLeft.style.left=getX(o)-10;
oLeft.style.top=getY(o)+5;
oLeft.style.display='';
oLeft.onmouseup=function () {
o.scroll=false;
}
oLeft.onmousedown=function () {
o.scroll=true;
__showArrows=true;
scrollBackwards(o);
}
oLeft.onmouseover=function () {
__showArrows=true;
}
oLeft.onmouseout=function () {
o.scroll=false;
stopScroll(o)
}
var oRight=document.getElementById('right');
oRight.style.left=getX(o)+parseInt(o.style.width.replace('px', ''), 10);
oRight.style.top=getY(o)+5;
oRight.style.display='';
oRight.onmouseup=function () {
o.scroll=false;
}
oRight.onmousedown=function () {
o.scroll=true;
__showArrows=true;
scrollForward(o);
}
oRight.onmouseover=function () {
__showArrows=true;
}
oRight.onmouseout=function () {
o.scroll=false;
stopScroll(o)
}
}
}
A complete working example can be downloaded here.
| Compatibility Table | |
 | Internet Explorer 5.5 |
 | Firefox 1.5 |
 | Netscape 8.1 |
 | Opera 8.5 |
This article demonstrates a non-conventional manner to show tabular data, addressing all issues to make it work in any browser and using layout best practices. The example used in this article is simple and straightforward. This code can be easily modified, for example, two more arrows can be added to go to the beginning and end of the text, prevent scrolling if the beginning or end of the text has been reached, or any other modification according to your needs.
Nicolas Erlijman is a System Engineer specialized in Web technologies working at Tata Consultancy Services, Asia's biggest IT Company. For more information please visit http://www.tcs.com.
|
home / programming / javascript / ne / 1 |
[previous] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
URL: http://webreference.com/programming/javascript/ne/1
