Ver Mensaje Individual
  #1 (permalink)  
Antiguo 27/01/2008, 13:17
Avatar de chiquirf
chiquirf
 
Fecha de Ingreso: noviembre-2005
Ubicación: Madrid
Mensajes: 215
Antigüedad: 21 años
Puntos: 3
Ayuda para cambiar un código

Hola a todos, he encontrado en Internet el código para hacer un menú tipo acordeón y estoy adaptándolo a la Web que estoy haciendo, quiero cambiarle algo pero no se como hacerlo.

El código JavaScript que tengo es el siguiente:

Código PHP:

var ContentHeight = 400;
var 
TimeToSlide = 250.0;

var 
openAccordion = '';

function 
runAccordion(index)
{
  var 
nID = "Accordion" + index + "Content";
  if(
openAccordion == nID)
    
nID = '';
    
  
setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" + openAccordion + "','" + nID + "')", 33);
  
  
openAccordion = nID;
  
  
}

function 
animate(lastTick, timeLeft, closingId, openingId)
{  
  var 
curTick = new Date().getTime();
  var 
elapsedTicks = curTick - lastTick;
  
  var 
opening = (openingId == '') ? null : document.getElementById(openingId);
  var 
closing = (closingId == '') ? null : document.getElementById(closingId);
 
  if(
timeLeft <= elapsedTicks)
  {
    if(
opening != null)
      
opening.style.height = ContentHeight + 'px';
    
    if(
closing != null)
    {
      
closing.style.display = 'none';
      
closing.style.height = '0px';
    }
    return;
  }
 
  
timeLeft -= elapsedTicks;
  var 
newClosedHeight = Math.round((timeLeft/TimeToSlide) * ContentHeight);

  if(
opening != null)
  {
    if(
opening.style.display != 'block')
      
opening.style.display = 'block';
    
opening.style.height = (ContentHeight - newClosedHeight) + 'px';
  }
  
  if(
closing != null)
    
closing.style.height = newClosedHeight + 'px';

  
setTimeout("animate(" + curTick + "," + timeLeft +",'" + closingId + "','" + openingId + "')", 33);
} 

En el HTML tengo lo siguiente:

Código HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu acordion</title>

<style type="text/css">
<!--
.AccordionTitle, .AccordionContent, .AccordionContainer {  position:relative;   width:200px;}

.AccordionTitle {  height:20px;  overflow:hidden;  cursor:pointer;  font-family:Arial;  font-size:8pt;  font-weight:bold;  vertical-align:middle;  text-align:center;  display:table-cell;  -moz-user-select:none;}

.AccordionContent {  height:0px;  overflow:auto;  display:none; }

.AccordionContainer{  border-top: solid 1px #C1C1C1;  border-bottom: solid 1px #C1C1C1;  border-left: solid 2px #C1C1C1;  border-right: solid 2px #C1C1C1;
}
-->
</style>
<script type="text/javascript" src="acordion.js"></script>
</head>
<body>

<div id="AccordionContainer" class="AccordionContainer">
	<div onclick="runAccordion(1);">
		<div class="AccordionTitle" onselectstart="return false;">
			Accordion 1
		</div>
	</div>
	<div id="Accordion1Content" class="AccordionContent">
    	<table border="0" id="tabla1" height="100">
			<tr><td>tabla1.celda1</td></tr>
			<tr><td>tabla1.celda2</td></tr>
			<tr><td>tabla1.celda3</td></tr>
			<tr><td>tabla1.celda4</td></tr>
		</table>
	</div>

	<div onclick="runAccordion(2);">
		<div class="AccordionTitle" onselectstart="return false;">
			Accordion 2
		</div>
	</div>
	<div id="Accordion2Content" class="AccordionContent">
    	<table border="0" id="tabla2" height="250">
			<tr><td>tabla2.celda1</td></tr>
			<tr><td>tabla2.celda2</td></tr>
			<tr><td>tabla2.celda3</td></tr>
			<tr><td>tabla2.celda4</td></tr>
		</table>
	</div>

	<div onclick="runAccordion(3);">
		<div class="AccordionTitle" onselectstart="return false;">
			Accordion 3
		</div>
	</div>
	<div id="Accordion3Content" class="AccordionContent">
    	<table border="0" id="tabla2" height="150">
			<tr><td>tabla3.celda1</td></tr>
			<tr><td>tabla3.celda2</td></tr>
			<tr><td>tabla3.celda3</td></tr>
			<tr><td>tabla3.celda4</td></tr>
		</table>
	</div>
</div>

</body>
</html> 

El funcionamiento el código lo pueden ver aquí, que es donde lo saqué:
http://blog.paranoidferret.com/index...cordion-menus/

Bueno, lo que necesito es cambiar en el código el valor de la variable "ContentHeight" no sea un valor exacto, sino que lo coja de cada una de las tablas usando el ID.

He logrado coger el valor del height de la tabla con:

Código PHP:
var tabla_z = document.getElementById('tablaz');
var 
tabla_z_alto = tabla_z.height; 

Pero ahí me quedo, no se donde ni como meter ese valor, y ni que modificar para que funcione.

¿¿Alguien me puede ayudar??

Gracias

Carlos