Height transition es un efecto que cambia dinámicamente a la altura de un elemento. La mayoría de las veces esta transición se utilizan para ocultar o mostrar un elemento determinado en nuestra web. Mediante Height transition se utilizaran botones para activar la transición, y cuando se hace clic en un botón mostraremos el contenido determinado. Height transition nos permite además tener más de un elemento visualizado, ya que este no se vuelve a ocultar al abrir un nuevo elemento, sino que se oculta cuando nosotros lo hacemos también mediante los botones de acción.
Ver Demo - Descarga Ejemplo - Web solutoire
En nuestro encabezado
<script type="text/javascript">
window.onload = function(){
//select the first button
var button1 = $('button1');
//select the second button
var button2 = $('button2');
//select the first content element
var content1 = $('contentElement1');
//select the second content element
var content2 = $('contentElement2');
//The height transition we attach to 'contentElement1'
var b1Toggle = new Fx.Style('contentElement1', 'height',{duration: 500});
//The height transition we attach to 'contentElement2'
var b2Toggle = new Fx.Style('contentElement2', 'height',{duration: 500});
//add an onclick event listener to button1
button1.addEvent('click', function(){
//toggle height transition (hide-show)
if(content1.getStyle('height').toInt()> 0){
//hide
b1Toggle.start(0);
}else{
//show
b1Toggle.start(c1Height);
}
//toggle classname button1 <-> button1 button1_
button1.toggleClass('button1_');
return false;
});
//add an onclick event listener to button2
button2.addEvent('click', function(){
//toggle height transition (hide-show)
if(content2.getStyle('height').toInt()> 0){
//hide
b2Toggle.start(0);
}else{
//show
b2Toggle.start(c2Height);
}
//toggle classname button2 <-> button2 button2_
button2.toggleClass('button2_');
return false;
});
//set css display:block for the contentElements
content1.setStyle('display','block');
content2.setStyle('display','block');
//get the scrollSize of the contentElements
var c1Height = content1.getSize().scrollSize.y;
var c2Height = content2.getSize().scrollSize.y;
};
</script>
Un poco de estilo CSS
height:0px;
font-size:10px;
margin:0 auto;
overflow:hidden;
}
#contentWrapper{
margin:0px auto;
padding:5px 40px;
background:#d3e4a5;
overflow:hidden;
}
#button1, #button2{
display:block;
height:14px;
width:129px;
float:left;
margin-left:2px;
background:#d3e4a5;
cursor:pointer;
text-align:center
}
.button1_,.button2_{
font-weight:bold;
}
#button1{
margin-left:40px;
}
Nuestro contenido
<div id="contentElement1">
<div align="left">Contenido Botón 1<br>
<br>
<img src="logo.jpg" align="left" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus rutrum elit et nunc. Phasellus tincidunt pede in nibh. Maecenas eget ligula non dui nonummy venenatis.
Aliquam tempor nibh. In vitae nulla a turpis elementum fermentum. Phasellus fermentum. Maecenas blandit enim in lorem sollicitudin pretium. Sed gravida diam non nibh. Phasellus imperdiet convallis nulla. Maecenas pulvinar molestie sem. Etiam aliquet volutpat felis. Nullam risus. Nullam eget elit non tortor mollis rhoncus. </div>
</div>
<div id="contentElement2">Contenido Botón 2<br>
<br>
<img src="logo.jpg" align="left" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus rutrum elit et nunc. Phasellus tincidunt pede in nibh. Maecenas eget ligula non dui nonummy venenatis.
Aliquam tempor nibh. In vitae nulla a turpis elementum fermentum. Phasellus fermentum. Maecenas blandit enim in lorem sollicitudin pretium. Sed gravida diam non nibh. Phasellus imperdiet convallis nulla. Maecenas pulvinar molestie sem. Etiam aliquet volutpat felis. Nullam risus. Nullam eget elit non tortor mollis rhoncus. </div>
</div>
</div>
<div id="button1" class="button1">Botón 1 </div>
<div id="button2" class="button2">Botón 2</div>
Loading ...
ThemePassion - Best stuff about design! » Height transitions - Simple tabmenu para jugar con las transiciones
11-11-2007
Permalink
[...] Nick wrote an interesting post today!.Here’s a quick excerptcontent2.setStyle(’display’,’block’);. //get the scrollSize of the contentElements. var c1Height = content1.getSize().scrollSize.y;. var c2Height = content2.getSize().scrollSize.y;. };. . Un poco de estilo CSS. PLAIN TEXT. CSS: … [...]
NBAVids - Basketball Rocks » Height transitions - Simple tabmenu para jugar con las transiciones
11-11-2007
Permalink
[...] Gino D. wrote an interesting post today!.Here’s a quick excerpt [...]
fecazbldpr
11-11-2007
Permalink
Hello! Good Site! Thanks you! eudcmpoycareh
Panel superior con deslizamiento utilizando mootools « Xyberneticos
11-11-2007
Permalink
[...] panel superior (arriba / abajo) con deslizamiento utilizando mootools, algo un poco similar a Height transitions que vimos hace meses. El resultado es muy agradable, o por lo menos a mi, me ha gustado mucho, es [...]
Panel superior con deslizamiento utilizando mootools « Indigo`s Blog
11-11-2007
Permalink
[...] panel superior (arriba / abajo) con deslizamiento utilizando mootools, algo un poco similar a Height transitions que vimos hace meses. El resultado es muy agradable, o por lo menos a mi, me ha gustado mucho, es [...]
Diezko
11-11-2007
Permalink
hola. soy nuevo es esto del js y tengo una pregunta
aparte del css el js y el html tengo q tener el archivo motools.js
ya que veo que el js lo esta llamando --> src="archivos/mootools.js"
de donde lo bajo?
yo ya tengo uno de antes pero tiene el code que necesito?
gracias.