Foros del Web » Programando para Internet » Javascript »

Caja flotante al estilo de Hotmail

Estas en el tema de Caja flotante al estilo de Hotmail en el foro de Javascript en Foros del Web. Hola amigos, primeramente quiero decirles que intente hacer el mismo menu de hotmail que muestra en "MAS" o en "OPCIONES" y en varios de sus ...
  #1 (permalink)  
Antiguo 22/08/2009, 20:28
AvEnTuRa
Invitado
 
Mensajes: n/a
Puntos:
Exclamación Caja flotante al estilo de Hotmail

Hola amigos, primeramente quiero decirles que intente hacer el mismo menu de hotmail que muestra en "MAS" o en "OPCIONES" y en varios de sus servicios, pero lo que pasa es que uso php en el stream de html dentro de este, y para hacer aparecer el cuadro usa variables JS, y php los reconoce y me sale error de sintaxism,
Les pediria un menu parecido que al hacer click en un enlace se abra una caja o capa, (NO MENU CSS. sino un campo donde se puede poner cualquier contenido, imagenes, tablas etc) espeor em ayuden y me pasen uno parecido aqui les dejo una imagen de muestra:

Direccion:
i26.tinypic.com/28mlezd.jpg

Gracias de antemano y saludos
  #2 (permalink)  
Antiguo 22/08/2009, 22:53
Avatar de pato12  
Fecha de Ingreso: septiembre-2007
Ubicación: Salta
Mensajes: 1.620
Antigüedad: 16 años, 7 meses
Puntos: 101
Respuesta: Caja flotante al estilo de Hotmail

Podrias hacer algo haci:
Código html:
Ver original
  1. <style type="text/css">
  2. <!--
  3. #cont {
  4.     background-color: #CCC;
  5.     height: 100px;
  6.     width: 200px;
  7.     position: absolute;
  8. }
  9. -->
  10. <script type="text/javascript">
  11. <!--
  12. var posisionarAbajo=function(dom,obj){
  13.     var dom=typeof dom=="string"?document.getElementById(dom):dom,obj=typeof obj=="string"?document.getElementById(obj):obj,valueT=0,valueL=0,elm=dom; // Definimos algunas cosas
  14.     if(!dom || !obj)
  15.         return;
  16.     do{
  17.         valueL+=parseInt(elm.offsetLeft); // Sumamos
  18.         valueT+=parseInt(elm.offsetTop); // Sumamos
  19.         elm=elm.offsetParent; // Definimos
  20.     }while(elm); // Si sigue true, volvemos a ejecutar
  21.     valueT+=dom.offsetHeight; // Sumamos el alto del boton
  22.     if(obj.style.position=='') // Si no tiene position
  23.         obj.style.position='absolute'; // Le definimos absolute
  24.     obj.style.display=obj.style.display=='none'?'block':'none'; // Si esta oculta la desocultamos y viseversa
  25.     obj.style.top=valueT+"px"; // Posisionamos
  26.     obj.style.left=valueL+"px"; // Posisionamos
  27. }
  28. -->
  29.  
  30. <a href="#" onclick="posisionarAbajo(this,'cont');">Mas +</a>
  31. <div id="cont" style="display: none;">Producto 1
  32. Prducto 2</div>
Suerte
Salu2
__________________
Half Music - www.halfmusic.com
  #3 (permalink)  
Antiguo 22/08/2009, 23:12
AvEnTuRa
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Caja flotante al estilo de Hotmail

Gracias amigo, si me sirvio, solo que a que darle clic de nuevo pa cerar pero es lo demenos, muchas grax lo usare ahora mismo :)
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:07.