JMiur [E]

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

Y el resultado sería algo así: DEMO Cartel con Scroll

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>

Y el resultado sería algo así: DEMO Cartel con Fade

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:

Cartel 1 | Cartel 2 | Cartel 3 | Cartel 4

14 comentarios:

Marcos Cousseau  

Está fantastico! me muero por aplicarlo!...aunque todabia nose a que :D
Gracias JMiur!

Responder
Hikaru  

muy bueno, lo voy a implementar.

Responder
Quique  

Por cierto, no se si te diste cuenta, pero has subido a PR5! Felicidades!!!

Responder
JMiur  

Marcos, Hikaru: yo tampoco sé que uso puede darse a esto pero es interesante en caso de tener que dar alguna información.

Quique, lo sabé, me avisaron hace unos días porque tampoco me había dado cuenta :D

Responder
Gem@  

Con el efecto FADE te pasaste ;)

Responder
JMiur  

Gem@: da la impresión de ser una variante del script que mostrabas; imagino que son del mismo autor.

Responder
Bonzu Pipinpadaloxicopolis III  

Y así como este script puede incrustarce sin un servidor externo, ¿Se puede hacer con cualquiera?,

Responder
JMiur  

Sí, en principio, cualquier script puede ser insertado directamente aunque, en Blogger hay algunas restricciones. En este post hay algo de eso explicado.

Responder
Yebra  

Hola buenos días,
Es la primera vez que escribo en el blog aunque llevo ya algún tiempo siguiendolo.
Quiero darte las gracias y felicitarte por el gran trabajo que estas haciendo.
Me gustaria hacerte una pregunta, he puesto en practica estos mensajes pero me gustaria si me puedes explicar como hago para que salga el mensaje al mismo tiempo que cargo la pagina.
De todas maneras reitero mis felicitaciones y muchas gracias.

Responder
JMiur  

¿Cuál de ellos? Si se trata de los que sólo utilizan CSS, debes colocarlos inmediatamente despues de <body> para que sea lo primero que se cargue. EN el caso de los scripts, dependerá.

Responder
Yebra  

Muchas gracias por la aclaracion.

Responder
Amiitha  

Hola Buenas noches JMiur ^^

Después de intentarlo varias veces, al fin pude poner el cartel en mi blog~ ;) pero una vez que lo cierro, cuando vuelvo a abrir la página ya no me aparece... ¿Hay algun cambio que se le puede hacer al código para que vuelva a aparecer el cartel cuando abra de nuevo la página?

Responder
JMiur  

Deberías indicarme cuál es el ejemplo que usas y en dónde lo has colocado. Si se abre al cargar la página, lo hará siempre que entres porque la página se recarga.

Responder
Amiitha  

Disculpe la molestia :$ es verdad, si se abre... es solo que intenté hacerlo rapido con el f5 pero al parecer lo apreté mal, porque ahora que la volví a abrir la página si me apareció el cartelito (^^)/

Le agradezco muchísimo su ayuda :P y por su respuesta.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR