Snippets ⇒ Ventana flotante para usuarios no registrados

[Carlos]

Bueno lo primero de todo es tener unas imagenes tanto para la ventana flotante donde sale el aviso como el botón para cerrar la ventana en caso de no registrarse y ser algo molesta.


Mi recomendación para las imagenes son:
- Ventana flotante: 300x100 pixels
- Botón cierra ventana: 25x25 pixels


* Abrir el archivo:
root/styles/tu estilo/template/overall_header.html

* Buscar:

Code: Select all

<!-- IF not S_USER_LOGGED_IN -->

* Agregar después en una nueva línea:

Code: Select all

<style type="text/css"> 

#topbar{ 
position:absolute; 
border: 0px solid black; 
padding: 2px red; 
background-color: ; 
width: 620px; 
visibility: hidden; 
z-index: 200; 
} 

</style> 

<script type="text/javascript"> 

/*********************************************** 
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com) 
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/) 
* This notice must stay intact for legal use. 
* Visit http://www.dynamicdrive.com/ for full source code 
***********************************************/ 

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session 
var startX = 30 //set x offset of bar in pixels 
var startY = 5 //set y offset of bar in pixels 
var verticalpos="fromtop" //enter "fromtop" or "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.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 
</script> 

<div id="topbar"> 
<a href="" onClick="closebar(); return false"><img src="http://tododd.es/images/cierraventanadeslizante.png" border="0" /></a> 
<a href="http://tododd.es/ucp.php?mode=register"><img src="http://tododd.es/images/ventanadeslizante.png" width="300" height="116" border="0" tittle="tododd.es" /></a> 
</div>

* Donde lo único que tienen que cambiar es la dirección donde suban ustedes las imagenes y los nombres que les pongan:

- En color azul la dirección y nombre de la imagen de la ventana deslizante de aviso.
- En color rojo la dirección y nombre de la imagen del icono cierra ventana.
- En color verde la dirección de registro de vuestro foro.
- En color naranja el título de la imagen.

<div id="topbar">
<a href="" onClick="closebar(); return false"><img src="http://tododd.es/images/cierraventanadeslizante.png[/color]" border="0" /></a>
<a href="http://tododd.es/ucp.php?mode=register"><img src="http://tododd.es/images/ventanadeslizante.png" width="300" height="116" border="0" tittle="tododd.es" /></a>
</div>

En mi caso las imagenes las subí a:
root/images/aquí

No os olvideis de actualizar el tema, limpiar el cache y refrescar el navegador para ver los cambios.


Este fué mi resultado:


[img]http://img87.imageshack.us/img87/5812/c ... 108ra1.jpg[/img]

tema original: Ventana flotante para no registrados

[cisco007]

[cisco_note]imagen añadida con highslide![/cisco_note]

[cisco007]

articulo añadido aquí:
Ventana flotante para invitados
mejore esta ventana, créditos al autor original
recuerden que las imágenes tienen que buscarlas ustedes!