E mai mult ca posibil ca acest termen (“autoderulant”) să nu existe în limba română. Nu-i nimic. Îl introducem acum. Pentru cei învăţaţi cu xenismele, “autoderulant” desemnează ceva care face în mod automat “scroll”.

Implementarea o aveam de mai mult timp, dar ea a ieşit la iveală în urma unei întrebări pe Webdesignbox.

Iată şi soluţia propusă:

Codul HTML:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=windows-1250″>
</meta><meta name=”generator” content=”PSPad editor, www.pspad.com”>
<title>Widget – Scroller</title>
<style>
* {
font-family: arial;
font-size: 11px;
}

a {
color: blue;
}
</style>

<script type=”text/javascript” src=”./js/widgets/scroller.js”></script>

<link rel=”stylesheet” type=”text/css” href=”./styles/widgets/scroller.css”/>
</meta></head>
<body>
<div id=”orase” class=”scroller”>
<ul id=”orase_c”>
<li><a href=”#”>Alba</a></li>
<li><a href=”#”>Bistrita-Nasaud</a></li>
<li><a href=”#”>Arad</a></li>
<li><a href=”#”>Arges</a></li>
<li><a href=”#”>Brasov</a></li>
<li><a href=”#”>Arges</a></li>
<li><a href=”#”>Timis</a></li>
<li><a href=”#”>Constanta</a></li>
<li><a href=”#”>Maramures</a></li>
<li><a href=”#”>Mures</a></li>
<li><a href=”#”>Giurgiu</a></li>
<li><a href=”#”>Hunedoara</a></li>
<li><a href=”#”>Caras Severin</a></li>
</ul>

<div class=”navi”>
<div class=”topper” onmouseover=”scrollControlUp(‘orase_c’);” onmouseout=”stopScroll();” onclick=”_scrollTop(‘orase_c’);”></div>
<div class=”bottomer” onmouseover=”scrollControlDown(‘orase_c’);” onmouseout=”stopScroll();” onclick=”_scrollBottom(‘orase_c’);”></div>
</div>
</div>
</body>
</html>

Codul CSS:

.scroller {
border-left: 1px solid #aaa;
border-top: 1px solid #aaa;
border-right: 3px solid #aaa;
border-bottom: 3px solid #aaa;
width: 160px;
height: 100px;
}

.scroller ul {
margin: 0;
padding: 2px;
list-style: none;
line-height: 18px;
overflow: hidden;
float: left;
height: 96px;
width: 132px;
}

.scroller ul li {
display: block;
background: #fff url(‘del.jpg’) no-repeat 2px center;
}

.scroller ul li a {
display: block;
height: 18px;
text-decoration: none;
padding-left: 14px;
border: 0;
}

.scroller ul li a:hover {
background: #eee url(‘del.jpg’) no-repeat 2px center;
}

.topper, .bottomer {
font-family: arial;
font-size: 10px;
cursor: pointer;
height: 18px;
padding-top: 1px;
}

.navi {
background-color: #fcfcfc;
height: 100px;
margin-left: 134px;
border-left: 1px solid #ccc;
}

.topper {
border-bottom: 1px solid #ccc;
background: #fff url(‘up.jpg’) no-repeat center center;
text-align: left;
height: 22px;
}

.bottomer {
border-top: 1px solid #ccc;
background: #fff url(‘down.jpg’) no-repeat center center;
margin-top: 56px;
}

Şi, în fine, codul Javascript:

var _scroller_time;
var _scroler_controlName;
var _scroler_up;

function stopScroll() {
if (_scroller_time)
clearTimeout(_scroller_time);
}

function scrollControlUp(name) {
_scroler_up = true;
_scroler_controlName = name;

scrollControl();
}

function scrollControlDown(name) {
_scroler_up = false;
_scroler_controlName = name;

scrollControl();
}

function scrollControl() {
var BY_PX = 6;
if (!_scroler_up) {
document.getElementById(_scroler_controlName).scrollTop = document.getElementById(_scroler_controlName).scrollTop + BY_PX;
}
else {
document.getElementById(_scroler_controlName).scrollTop = document.getElementById(_scroler_controlName).scrollTop – BY_PX;
}

_scroller_time = setTimeout(’scrollControl()’, 100);
}

function _scrollTop(name) {
stopScroll();
document.getElementById(name).scrollTop = 0;
}

function _scrollBottom(name) {
stopScroll();
document.getElementById(name).scrollTop = 10000;
}

Implementarea completă o puteti vedea aici: http://
www.publionline.ro/jurnal/examples/scroller/scroller.html

Ca şi explicaţie suplimentară, spun doar că “sufletul” acestui mini-cod sunt metodele setTimeout() şi clearTimeout(). După cum spun şi definiţiile:

Metoda setTimeout() este folosită pentru a chema o funcţie sau pentru a evalua o expresie după trecerea unui interval de timp definit în milisecunde.
Metoda clearTimeout() opreşte execuţia codului definit în metoda setTimeout().