(ayudenme porfa): Poner div flotante

[Mautematico]

Saludos y buenos días (tardes por acá) a todos! :)

Bueno, eso: necesito ayuda para hacer algo mas o menos como lo que está aqui

squidoo.com/ptcsitesguide#

donde hay un botón del lado izquierdo que, al hacer click, muestra un div (creo que es un div) flotante, quiero hacer algo similar.

Ya se como colocar el div flotante, pero quiero que se cierre, tengo un par de códigos (uno lo leí por ahi, otro me lo "fusilé") que hacen eso, pero además quiero que se active AL HACER CLICK.

Una cosa más, supongo que usando cookies, que se muestre una vez cada determinado tiempo:

1.- Alguien visita la página web (en realidad, varias páginas, pero es molesto que aparezca el aviso con cada impresión), al hacer esto, aparece el aviso "flotante"
2.-Un algo (cookie, seguramente) guarda la info necesaria para que el aviso no se muestre sino hasta dentro de X horas, por ejemplo.
3.-El aviso debe poder cerrarse, y, naturalmente, abrirse, como en la página que puse hace rato (squidoo.com/ptcsitesguide#)

Espero puedan aydarme :) les agradeceré bastante

Saludos!!

[hades87]

Lo que necesitas se llama Lightbox y hay infinidad de ellos y un montón de información por internet, si te pasas por el foro de AJAX o javascript te ayudarán :D

[XLogus]

Hola
Para ese tipo de cosas no te recomendaria lightbox o clones ya que esos sirven principalmente para mostrar imagenes, mas adecuado seria usar jquery con un pequeño plugin llamado simplemodal que nos permite convertir cualquier div en uno modal (o como tu lo llamas flotante)
Puedes ver mas detalles en su web y algunos demos, aunque te adelanto que es muy simple basta asignar el evento, el div que va a ser modal, automaticamente aparece el boton cerrar.

En cuanto a tus otras dudas, si efectivamente debs usar una cookie para saber si el usuario ya visitó esa página o es la primera vez, puedes ver mas detalles de como usarlas aqui, aunque te diré que me han dado dolores de cabeza en IE6 y Safari asi que prefiero usarlas con una clase

[Mautematico]

Muchas gracias a ambos! :)
Me pongo a revisar la información que me proporcionan, seguro de aqui sale! :)

Que tengan un genial día!

[danistrein]

hola Mautematico aki te dejo los codes de un VID flotante , te digo ya lo eh utilisado para crear una web asi que sirbe , mira este es la web que eh creado con el DIV flotante : L2 Fox Die

css:

Código HTML:

.mensajeflotante #barraregistro {
	position: absolute;
	font-size: 8x;
	height: 292px;
	width: 440px;
	background-color: #;
	font-size: 8px;
}
.mensajeflotante #barraregistro #sitiumweb {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8x;
	color: #C4E27A;
	background-color: #C4E27A;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #F2F1DA;
	background-repeat: repeat-y;
	font-weight: bold;
}
.floatmensaje
{
	background: #;
	font: 9pt tahoma,verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	color: #36444F;
}

js:

Código HTML:

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(IdLayer,persistclose){
if (persistclose)
document.cookie="remainclosed=0"
document.getElementById(IdLayer).style.visibility="hidden"
}

function staticbar(IdLayer, horizontalpos, verticalpos, persistclose, startX, startY){
   try {
       barheight = document.getElementById(IdLayer).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;
           if (horizontalpos == "fromRight") {
               el.sP = function(x, y){
                   this.style.right = x + "px";
                   this.style.top = y + "px";
               };
           }
           else {
               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(IdLayer);
       stayTopLeft();
   } catch (e) {
          }
}

if (window.addEventListener)
   window.addEventListener("load", staticbar, false)
else
   if (window.attachEvent)
       window.attachEvent("onload", staticbar)
   else
       if (document.getElementById)
           window.onload = staticbar 

en la web:

Código HTML:

<div style="visibility:visible"  id="barraregistro"><div id="darkcheats">
<div align="right"><a href="#" onclick="closebar('barraregistro','0'); return false">Cerrar</a></div>
</div>
  <table class="floatmensaje" width="100%" border="0">
    <tr>
      <td width="25%" height="80"><img src="images/fload.png"></td>
      <td class="floatmensaje" width="80%">
<center> 
<font color="#FF6600"><b>Ejemplo!!</b></font></center>
<br>
<br>
<br>
</td>
    </tr>
  </table>
</div> 

bueno espero que te sirba saludos!!!!

[Mautematico]

hola danistrein
muchas gracias :) :) ya lo veo y está bien :)
Se parece al que uso en los SMF, la cosa era que me interesaba el botón que lo accione.
Mira, al final quedó así (ya lo hice, y leí tu respuesta después)

mautematico.co.cc/mauriciadas/simplemodal/

Esto trabajando en el contenido... no tengo muchas ideas para diseño jaja.

Por cierto, me agrada la vista de tu web :)
Saludos!

[danistrein]

Iniciado por Mautematico

hola danistrein
muchas gracias :) :) ya lo veo y está bien :)
Se parece al que uso en los SMF, la cosa era que me interesaba el botón que lo accione.
Mira, al final quedó así (ya lo hice, y leí tu respuesta después)

mautematico.co.cc/mauriciadas/simplemodal/

Esto trabajando en el contenido... no tengo muchas ideas para diseño jaja.

Por cierto, me agrada la vista de tu web :)
Saludos!

esta muy bueno el fload que isiste
a y que web? si no tengo web :P
responde por mp ..
saludos!!!

[tunait]

Tema trasladado desde Web general