Adaptar contenido de dos Divs diferentes

Seazoux · #1 (**permalink**) 30/04/2011, 17:53

A ver si me explico, yo tengo dos divs (uno es invisible, porque cuando le hago clic se muestra y el otro es de fondo), bien, lo que quiero hacer es que cuando se haga visible, se adapte al de fondo, es decir, que el de fondo tome los píxeles exactos del primer div (el insible), espero que no os haya confundido, perdonad mi ortografia pero es que tengo sueño, saludos

fishdesign · #2 (**permalink**) 30/04/2011, 18:32

Supongo que el hacerlo visible lo harás con JavaScript...que problema sería cambiarle el tamaño entonces?

Explica un poco más como lo haces, si usas jquery, etc.

Naahuel · #3 (**permalink**) 30/04/2011, 22:39

Si entendí correctamente podés intentar encerrando ambos div's en otro. El padre deberá tener position:relative y las dimensiones que necesitás. Los dos div's hijos tendrán position:absolute con left y top puestos en 0 y también las mismas dimensiones. De esa forma ambos divs estarán en el mismo lugar y ocuparán el mismo espacio. Podés ocultarlos y mostrarlos con javascript.

Seazoux · #4 (**permalink**) 01/05/2011, 03:28

Bien, gracias por la ayuda.
Pero ya probéa ponerle position:relative y me lo cargue todo...
Se puede hacer con algún tipo de Script?

Te dejo el script por capas que hice:

El cuadro padre su respectivo CSS:

Código CSS:

Ver original.GloboTrans.GlbTransparent{
background: #f5f6f6; /* old browsers */
 
background: -moz-linear-gradient(top, #f5f6f6 0&#37;, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%); /* firefox */
 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f6f6), color-stop(21%,#dbdce2), color-stop(49%,#b8bac6), color-stop(80%,#dddfe3), color-stop(100%,#f5f6f6)); /* webkit */
 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* ie */
 
background: -o-linear-gradient(top, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); /* opera */
    border:6px solid #000000;
        width:1140px;
    height:5100px;
        position:absolute;
        top:230px;
        left:100px;
        padding:5px;
}

Tiene oro padre para varios en común, pero eso no creo que afecte, en todo caso te dejo su CSS:

Código CSS:

Ver original.GloboTrans {
z-index:1; 
filter:alpha(opacity=75); 
-moz-opacity:.75;
opacity:.75;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
   box-shadow: 4px 4px 3px #000;
   -webkit-box-shadow: 4px 4px 3px #000;
   -moz-box-shadow: 4px 4px 3px #000;
   filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.40');
}

Y el java Script, con su recuedro para enlazar las dos páginas:

Código Javascript:

Ver originalfunction Code() {
document.write ( '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script language="Javascript"> function mostrar(nombreCapa){ document.getElementById(nombreCapa).style.visibility="visible"; } function ocultar(nombreCapa){ document.getElementById(nombreCapa).style.visibility="hidden"; } </script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head><body><div id="window1" style="position:absolute; z-index:10; left:1px; top:1px; width:1146px;background-color:#dde3eb; border:1px solid #464f5a; visibility:hidden"> <div style="padding-bottom:8px; width:1146px; height:20px; background-color:#718191; border-bottom:1px solid #464f5a;" onMouseDown="beginDrag(this.parentNode, event);"><div style="position:absolute; top:1px; left:5px; font-size:20px; font-weight:bold; color:#FFFFFF;"> <center>' )
}
 
function Code0() {
document.write ( '</center> </div><div style="position:absolute; top:3px; left:1132px; float:right;"> <div onclick="ocultar(\'window1\')"><img src="http://i.imgur.com/Fd6Q2.png" border="0" title="Cerrar" /></div></div> </div> <div style="margin-left:5px;">' )
}
 
function Code1() {
document.write ( '</div></div></body></html>' )
}
 
function Code2() {
document.write ( '<div id="capa1" onclick="mostrar(\'window1\')">' )
}
 
function Code3() {
document.write ( '</div>' )
}

Y el enlace:

Código HTML:

Ver original<script src="SP Tabs JS.js"></script>

Sí, el archivo JS se llama 'SP Tabs JS', jeje, saludos

Ah, por cierto donde quiero poner la ventanita, solo hago esto:

Código HTML:

Ver original<script>Code()</script>El título<script>Code0()</script>Contenido<script>Code1()</script><script>Code2()</script>Botón para activar variables<script>Code3()</script>