Fijando DIVs en la página

Growl es un script para Prototype que muestra información en una ventanita con una serie de efectos. No es difícil de implementar pero parece poco flexible para usar en Blogger así que resulta mucho más cómodo usar el modelo que explicaba Gem@ hace unos días: Un cartel de aviso flotante.

Es más cómodo porque podemos agregarlo, tanto a la plantilla como a un post en particular. En ambos casos, necesitamos el script que podríamos agregar antes de </head> copiando y pegando el código:

<script type='text/javascript'>
//<![CDATA[
....... aquí copiamos el código .......
//]]>
</script>

o bien, alojarlo en un servidor y cargarlo cuando lo queremos utilizar:

<script src="URL_archivo.js"></script>

var persistclose = 1 // una vez cerrada permanece cerrada (0 se muestra cada vez que se abre la página)
var startX = 20 // posición horizontal de la ventana (en pixeles)
var startY = 5 // posición vertical de la ventana (en pixeles)
var verticalpos = "fromtop" // va arriba de la pantalla ("frombottom" va abajo)

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.left=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

Una vez que tenemos el script, podemos colocar el contenido en un DIV al que identifiquemos con un ID específico llamado topbar:

<div id='topbar'>
....... aquí va el contenido del mensaje a mostrar .......
<a href="javascript:void(0);" onclick="closebar(); return false">CERRAR</a>
</div>

Conviene agregarle algún enlace para cerrar la ventana o bien hacer que se cierre al hacer click en ella:

<div id="topbar" onclick="closebar(); return false">
....... aquí va el contenido del mensaje a mostrar .......
</div>

Todo lo que faltaría, sería agregar las definiciones CSS que pueden ser de cualquier tipo:

#topbar{
background-color: #F35D5D;
border: 2px solid #FFFFFF;
color: #FFFFFF;
height: 70px;
padding: 10px;
position:absolute;
width: 500px;
visibility: hidden;
z-index: 640;
}

StickyNote es un script similar de DynamicDrive pero, al que se le agrega un efecto de fade.

Lo usamos de la misma manera, necesitamos el script que insertamos de la misma manera que el anterior y un poco de CSS para establecer las propiedades del cartel:

<style type="text/css">#fadeinbox{
background-color: lightyellow;
border: 2px solid #FFFFFF;
left: 0;
padding: 10px;
position:absolute;
top: -400px;
visibility:hidden;
width: 350px;
z-index: 100;
}</style>

<script type="text/javascript">
//<![CDATA[

var displaymode="always";  // la forma en que se mostrará 
var enablefade="yes" // habilita el efecto fade
var autohidebox=["yes", 5] // oculta el cartel tras  cierta cantidad de tiempo
var showonscroll="yes" // se ueve mediante scroll
var IEfadelength=1 // tiempo del fade para IE
var Mozfadedegree=0.05 // datos del fade para NS6+

if (parseInt(displaymode)!=NaN)
var random_num=Math.floor(Math.random()*displaymode)

function displayfadeinbox() {
var ie=document.all && !window.opera
var dom=document.getElementById
iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
objref=(dom)? document.getElementById("fadeinbox") : document.all.fadeinbox
var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
var docwidth=(ie)? iebody.clientWidth : window.innerWidth
docheight=(ie)? iebody.clientHeight: window.innerHeight
var objwidth=objref.offsetWidth
objheight=objref.offsetHeight
objref.style.left=docwidth/2-objwidth/2+"px"
objref.style.top=scroll_top+docheight/2-objheight/2+"px"
if (showonscroll=="yes")
showonscrollvar=setInterval("staticfadebox()", 50)
if (enablefade=="yes" && objref.filters) {
objref.filters[0].duration=IEfadelength
objref.filters[0].Apply()
objref.filters[0].Play()
}
objref.style.visibility="visible"
if (objref.style.MozOpacity) {
if (enablefade=="yes")
mozfadevar=setInterval("mozfadefx()", 90)
else {
objref.style.MozOpacity=1
controlledhidebox()
}
} else
controlledhidebox()
}

function mozfadefx() {
if (parseFloat(objref.style.MozOpacity)<1)
objref.style.MozOpacity=parseFloat(objref.style.MozOpacity)+Mozfadedegree
else {
clearInterval(mozfadevar)
controlledhidebox()
}
}

function staticfadebox() {
var ie=document.all && !window.opera
var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
objref.style.top=scroll_top+docheight/2-objheight/2+"px"
}

function hidefadebox() {
objref.style.visibility="hidden"
if (typeof showonscrollvar!="undefined")
clearInterval(showonscrollvar)
}

function controlledhidebox() {
if (autohidebox[0]=="yes") {
var delayvar=(enablefade=="yes" && objref.filters)? (autohidebox[1]+objref.filters[0].duration)*1000 : autohidebox[1]*1000
setTimeout("hidefadebox()", delayvar)
}
}

function initfunction() {
setTimeout("displayfadeinbox()", 100)
}

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;
}

if (displaymode=="oncepersession" && get_cookie("fadedin")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0) {
if (window.addEventListener)
window.addEventListener("load", initfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", initfunction)
else if (document.getElementById)
window.onload=initfunction
document.cookie="fadedin=yes"
}

//]]>
</script>

Para usarlo, usamos un código parecido a este:

<div id="fadeinbox" onclick="hidefadebox(); return false" style="filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=1) progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); -moz-opacity:0">
....... aquí va el contenido del mensaje a mostrar .......
</div>

Una última opción un poco más limitada pero efectiva, es usar la propiedad position: fixed de CSS y "fijar" un DIV en la pantalla sin necesidad de agregar scripts.

Es cierto que no tiene la espectacularidad del scroll pero es muy flexible y sencilla de implementar; basta declarar una clase tal como nos muestran en DailyCoding:

<style type="text/css">
.cartelFijo {
background-color: #0080FF;
border: 2px solid #FFFFFF;
color: #FFFFFF;
font-family: Tahoma;
font-weight: bold;
left: 20px; /* la coordenada horizontal donde se muestra */
padding: 10px;
position: fixed;  /* esto es lo que lo fija */
text-align: justify;
top: 30px; /* la coordenada vertical donde se muestra */
width: 200px;  /* el ancho del cartel */
z-index: 10000;
}

El HTML lo colocamos en cualquier parte, incluso dentro de un post:

<div class="cartelFijo" onclick="this.style.display='none'; return false">
....... aquí va el contenido del mensaje a mostrar .......
</div>

Como es una clase CSS, podemos aplicarla repetidas veces así que también es útil cuando se quieren mostrar varios mensajes simultánemamente.