Este post es una especie de continuación del anterior sobre como girar un div y posicionarlo en vertical. Siguiendo con la página Las Edades de la Tierra, en la zona derecha de la pantalla tenemos una ventana oculta, simpre fija, la cual se muestra, se despliega, al pinchar sobre la pestaña vertical llamada "notas". En este post voy a intentar explicar cómo realizamos este efecto con la ayuda de jQuery.
Lo primero el HTML:
En el código (en HTML5) el div "notas" engloba el div "vertical" (el que giramos para ponerlo como pestaña) y el "aside" con id "fijoderecha" que, en este caso, contiene el texto que queremos mostrar. El div "notas" es al que haremos referencia en el script en jQuery para mostrarlo y ocultarlo. Pero, primero, el CSS correspondiente al anterior HTML:
El CSS es el normal para dar formato a los elementos. Podéis ver que uso códigos que ya he descrito en otros posts. Aquí el más importante es el id "#notas", el cual posicionamos oculto pero no con "hidden" sino con la linea "left: 96.5%", la cual lo sitúa fuera de la pantalla, dejando sólo visible la etiqueta ".vertical". Lo podemos hacer también con píxeles en lugar de porcentajes pero es mejor así (en porcentaje) para que se pueda ver igual en otros tamaños de la ventana y en otras resoluciones (responsive web).
Ahora toca lo más importante, el código jQuery para desplegar y ocultar la ventana "#notas":
Lo primero el HTML:
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8" />
<title>Las de la tierra</title>
<link rel="stylesheet" href="estilos.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-1.7.1.min.js"></script>')</script>
<!-- Aquí podemos colocar el script en jQuery (descrito más abajo). Aunque también lo podemos colocar más abajo, antes del final del </body> -->
</head>
<body>
<div id="notas">
<div class="vertical">Notas</div>
<aside id="fijodcha">
<section>
<h3>Consideraciones a tener en cuenta</h3>
<article>
<p><strong>Lo primero, sobre las divisiones que que hago:</strong> <br/>
-Tanto el Cenozoico, el Mesozoico como el Paleozoico son <strong>Eras</strong> que se engloban dentro del <strong>Eón</strong> Fanerozoico. Estas eras las divido en <strong>Periodos</strong> que, a su vez, tienen épocas y edades.<br/>
-En cuanto al Precámbrico, este es un <strong>Supereón</strong>, el cual engloba el 88% de la historia de la tierra. Aquí nombro sus correspondientes Eones (Proteozoico, Arcaico, Hadeico), los cuales también se subdividen en sus correspondientes eras, periodos, épocas y edades.</p>
</article>
<article>
<p><strong>Lo segundo, es hacer incapié en la duración de estos Eones, Eras y Periodos:</strong><br/>
-No se deben de tomar al pié de la letra. Es muy complicado determinar la duración y la edad exacta, sobre todo cuando hablamos de hace cientos de millones de años. Puede que estemos hablando de variaciones en millones de años.<br/>
-También podemos hablar de variaciones en millones de años de la duración de determinadas especies antes de su extinción. Debemos tener en cuenta que aún puede haber cientos de miles de fósiles por descubrir que darían nuevas pistas sobre su evolución y su duración en la tierra.</p>
</article>
</section>
</aside>
</div>
</body>
</html>
En el código (en HTML5) el div "notas" engloba el div "vertical" (el que giramos para ponerlo como pestaña) y el "aside" con id "fijoderecha" que, en este caso, contiene el texto que queremos mostrar. El div "notas" es al que haremos referencia en el script en jQuery para mostrarlo y ocultarlo. Pero, primero, el CSS correspondiente al anterior HTML:
@charset "utf-8";
/* CSS Document */
html {
font-size: 100%;
background-color:#fff;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin:0 auto;
font-family:"Times New Roman", Times, serif;
font-size:100%;
width:98%;
}
#notas {
left: 96.5%;
overflow: hidden;
position: fixed;
top: 20%;
width: 40%;
z-index: 100;
}
#fijodcha {
background-color: rgba(0, 0, 0, 0.7);
border-color: #00FF99;
border-image: none;
border-radius: 15px 0 0 15px;
border-style: solid none none solid;
border-width: 4px 0 1px 2px;
box-shadow: -6px 0px 10px black;
clear: left;
color: #00FFFF;
float: right;
overflow: hidden;
padding: 10px 0 0 10px;
position: relative;
top: 35%;
width: 90%;
z-index: 100;
}
.vertical{
background-color: black;
border-radius: 10px 10px 0 0;
border-style: solid solid none solid;
border-width: 2px;
clear: both;
color: #00FF99;
cursor: pointer;
float: left;
font-size: 1em;
padding: 2px;
position: absolute;
top: 45%;
right: 84%;
text-align: center;
-ms-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
transform: rotate(-90deg);
width: 110px;
z-index: 150;
}
.vertical:hover {
font-size:1.1em;
font-weight:bold;
text-decoration:underline;
}
El CSS es el normal para dar formato a los elementos. Podéis ver que uso códigos que ya he descrito en otros posts. Aquí el más importante es el id "#notas", el cual posicionamos oculto pero no con "hidden" sino con la linea "left: 96.5%", la cual lo sitúa fuera de la pantalla, dejando sólo visible la etiqueta ".vertical". Lo podemos hacer también con píxeles en lugar de porcentajes pero es mejor así (en porcentaje) para que se pueda ver igual en otros tamaños de la ventana y en otras resoluciones (responsive web).
Ahora toca lo más importante, el código jQuery para desplegar y ocultar la ventana "#notas":
<script type="text/javascript">
$(document).ready(function(){
$('#notas').on('click', '.vertical', function(){
var $notas=$('#notas');
if ($notas.hasClass('activo')){
$($notas).animate({'left':'96.5%'},500);
$($notas).removeClass();
} else {
$($notas).addClass('activo');
$($notas).animate({'left':'60%'},500);
}
});
})
</script>
El código es corto y sencillo. Sólo tenemos que jugar añadiendo y quitando una clase a '#notas'. En este caso primero comprobamos si '#notas' tiene la clase 'activo' (hasClass), si es así es que ya está desplegado,entonces, con 'animate' cambiamos la propiedad CSS 'left' a su posición inicial, en este caso al '96.5%' a una velocidad de 500 milisegundos. En caso contrario (else), es que no tiene la clase 'activo', así que se la añadimos (addClass) y cambiamos la propiedad CSS 'left' al '60%' también a una velocidad de 500 milisegundos. Así de sencillo. Con este código conseguimos desplegar y ocultar la ventana lateral. El ejemplo anterior también podéis verlo aquí.
bhjmbj
ResponderEliminarcalabaza quemada
ResponderEliminar