capa superior que ocupe el 100% + scroll

SainT90 · #1 (**permalink**) 13/07/2009, 14:41

Hola a todos, estoi intentando acer un modo "cine" en mi pagina web y que al darle click en modo cine se ponga todo en negro.

bien eso ya lo ize pero el tema esque si muevo la pagina para abajo y le doi a modo cine NO me ace eso :(

la parte inferior queda blanca :S

Cita:

<div id="veocine" style="display: none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0; -khtml-opacity: 0; position:absolute; width:100%; height:100%; z-index:2; left: 0px; top:0px; background-color: #000; layer-background-color: #000; border: 1px none #000000">
<div id="modonormal" style="margin-top:20px; visibility: hidden; display: none;" >
<input type="button" value="Desactivar Modo Cine" onclick="modonormal()">
<br />
<input type="button" value="-" onclick="opacidad('menos')">
<input type="button" value="+" onclick="opacidad('mas')">
</div>
</div>
<div align="center" >
<i><font color="red">* Introduce unos valores numericos para cambiar el tamaño del video (ancho/alto)</font></i><br />
<i><font color="red">* el cambio de tamaño no resetea la carga del video, puedes usarlo sin problemas.</font></i><br />
<input type="text" value="992" size="10" maxlength="4" onKeyUp="calculalo()" id="elancho" onkeypress="return solonumeros(event)" >
<input type="text" value="664" size="10" maxlength="4" id="elalto" onkeypress="return solonumeros(event)" disabled="disabled">
<input type="button" value="Cambiar Tamaño" onclick="cambialo()">
<br />
<div id="modocine"><input type="button" value="Activar Modo Cine" onclick="modocine()"></div>

<div id="elvideo" style="z-index:3; width: 994px; height: 662px;">
AQUI VA EL EMBED
</div>

</div>

</div>

y el css

Cita:

html{height:100%; width: 100% }

body {
background-color: #FFF;
color: #000;
margin: 0px;
height:100%;
width: 100%
}

ejemplo: http://www.anime-online.es/vision/11...pitulo%2001/78

PD: no lo considereis spam, la url va cambiar ( si veis esta en new) porque aun no la puse xD

Adler · #2 (**permalink**) 13/07/2009, 15:01

Hola

El div de veocine has de cerrarlo en último lugar. Probablemente después de el hay una tabla o otro div ....

Suerte

SainT90 · #3 (**permalink**) 14/07/2009, 02:55

si, es por eso? estaba hoy en cama y lo he pensado xD

pero el veocine se cierra antes que el embed xD

Adler · #4 (**permalink**) 14/07/2009, 04:38

Hola

La liga que pusistes está muerta. Tal vez echándole un vistazo ....

Suerte

SainT90 · #5 (**permalink**) 14/07/2009, 05:36

arreglada, esque ya abri la web

Adler · #6 (**permalink**) 14/07/2009, 05:57

Hola

Sería meter el div donde tienes los créditos, dentro del div con id veocine

Suerte

SainT90 · #7 (**permalink**) 14/07/2009, 06:40

enton los creditos saldrian arriba de todo :S

el veocine solo es esto

<div id="veocine" style="overflow: auto; display: none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0; -khtml-opacity: 0; position:absolute; width:100%; height:100%; z-index:2; left: 0px; top:0px; background-color: #000; layer-background-color: #000; border: 1px none #000000">
<div id="modonormal" style="margin-top:20px; visibility: hidden; display: none;" >
<input type="button" value="Desactivar Modo Cine" onclick="modonormal()">
<br />
<input type="button" value="-" onclick="opacidad('menos')">
<input type="button" value="+" onclick="opacidad('mas')">
</div>
</div>

Adler · #8 (**permalink**) 14/07/2009, 12:40

Hola

El "problema" está aquí

position:absolute; width:100%; height:100%;

le dices que ocupe el 100% del largo, y eso es lo que hace. Deja de hacerlo cuando hay scroll, por que 100% en este caso se refiere a la porción del documento visible sin hacer scroll.
La solución sería predeterminar height. Después a medida que vaya cambiando las dimensiones del vídeo, ir modificandolo. Para ello puede usar la función cambialo()

var sumaalto = parseInt(alto);
sumaalto += parseInt(200);

if (sumaalto < 460) { //Esto es equivalente a la pantalla disponible y resolución
sumaalto = 460;
}

document.getElementById("veocine").style.height = sumaalto + "px";

Nota._ 200 es simbólico, sería la suma de todo lo que está por encima y por debajo del vídeo

Suerte

SainT90 · #9 (**permalink**) 14/07/2009, 13:09

y como se cuanto es :S el 200 ?

Adler · #10 (**permalink**) 15/07/2009, 06:05

Hola

Lo primero que has de hacer es sacar la resolución de la pantalla. Pongamos que es 800x600, así que sin hacer scroll tienes un largo de 600. El vídeo, de inicio, ocupa 300 de largo, siempre una medida con la que no haya scroll. Pues en el div veocine

<div id="veocine" style="display: none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0; -khtml-opacity: 0; position:absolute; width:100%; height:200px; z-index:2; left: 0px; top:0px; background-color: #000; layer-background-color: #000; border: 1px none #000000">

Ahora en la función cambialo(), haces esto

Código javascript:

Ver originalvar sumaalto = parseInt(alto);
sumaalto += parseInt(200); // 200 es la suma de la cabecera y el pie de página. Ten en cuenta que esto es una estimación. Este valor + el valor de alto es el 100% del alto
 
if (sumaalto < 460) { // Esto es por si la suma de 200 + alto no supera, por ejemplo, 460 que es el total de pantalla disponible
sumaalto = 460;
}

La verdad que esta explicación no me queda muy clara, así que si no la entiendes dímelo y te monto algún ejemplo

Suerte

SainT90 · #11 (**permalink**) 15/07/2009, 06:59

si ya te entendi ^^ thx