Height transitions - Simple tabmenu para jugar con las transiciones

Publicado por Nikko el dia 11 Nov 2007 - Guardado en 99 Views Javascript, Scripts, Diseño Web 99 Views

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

PLAIN TEXT

JavaScript:

<script type="text/javascript" src="archivos/mootools.js"></script>
<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

PLAIN TEXT

CSS:

#contentElement1,#contentElement2{
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

PLAIN TEXT

HTML:

<div id="contentWrapper">
<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>

delicious, digg, barrapunto, meneame, digg , technorati , stumble it!

ThemePassion - Best stuff about design! » Height transitions - Simple tabmenu para jugar con las transiciones

11 - 11 - 2007


[...] 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


[...] Gino D. wrote an interesting post today!.Here’s a quick excerpt [...]
fecazbldpr

11 - 11 - 2007


Hello! Good Site! Thanks you! eudcmpoycareh
Panel superior con deslizamiento utilizando mootools « Xyberneticos

11 - 11 - 2007


[...] 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


[...] 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


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.

Xyberneticos

Height transitions - Simple tabmenu para jugar con las transiciones