Foros del Web » Programando para Internet » Javascript »

Ayuda para cambiar un código

Estas en el tema de Ayuda para cambiar un código en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/01/2008, 13:17
Avatar de chiquirf  
Fecha de Ingreso: noviembre-2005
Ubicación: Madrid
Mensajes: 215
Antigüedad: 20 años, 11 meses
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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:57.