Può capitare, nella creazione di applicazioni per il web, di avere la necessità di una barra dei comandi che abbia una posizione assoluta rispetto allo schermo e non rispetto alla pagina. Questa necessità si ha soprattutto quando la quantità di dati causa uno scroll eccessivo della pagina.
Per fare questo basta un po’ di CSS e di Javascript.
Innanzitutto il CSS. Niente di particolare, dà semplicemente uno stile alla barra dei comandi
#topbar
{
PADDING-TOP: 5px;
PADDING-BOTTOM: 5px;
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
VISIBILITY: hidden;
BORDER-TOP: black 1px solid;
BORDER-BOTTOM: black 1px solid;
BORDER-RIGHT: black 1px solid;
BORDER-LEFT: black 1px solid;
WIDTH: 450px;
FONT-FAMILY: Tahoma;
POSITION: absolute;
BACKGROUND-COLOR: white
}
e poi il javascript che oltre alle istruzioni per tenere la barra sempre ad una stessa posizione, contiene una funzione closebar() per la chiusura della stessa ed un gestore di cookie (la chiusura della barra setta il cookie come preferenza per la sessione in corso).
var persistclose = 1
var startX = 3
var startY = 3
var verticalpos = "frombottom"
function iecompattest()
{
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name)
{
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0)
{
offset = document.cookie.indexOf(search)
if (offset != -1)
{
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar()
{
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar()
{
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id)
{
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else
{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop")
{
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else
{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
Nel <BODY> del html la barra è un layer così richiamato
<div id="topbar">
<table width="100%">
<tr>
<td width="99%">
<strong>Barra dei comandi</strong>. <br />
Da qui puoi stampare o <a href="javascript:location.replace(location.href)">effettuare calcoli</a> in questa pagina</td>
</tr>
</table>
</div>
Qui una demo dell’effetto e qui lo zip dell’esempio.
Funziona con Firefox e Internet Explorer 6 e 7.
(tasto destro per scaricare questa immagine).