accordion.js con problemas de carga

ceaped · #1 (**permalink**) 26/02/2013, 07:21

Buenos días para todos
Estoy utilizando este efecto de acordeón y funciona bien, el asunto es que cada pestaña contiene texto e imágenes y cuando se inicia se abren todas las pestañas y luego se cierran.

¿Cómo hago para que no haga esto?

Código Javascript:

Ver original<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>

Gracias por su ayuda

mdk · #2 (**permalink**) 26/02/2013, 07:58

Has escrito tu el código? Poniendo las lineas de acceso a los archivos en local no nos sirve de nada, tendrías que poner el código o la página de donde lo has sacado.

ceaped · #3 (**permalink**) 26/02/2013, 08:42

Hola mdk
La página todavía no la subo.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>nombre...</title>
 
 
<!--Estilo marcos de colores para diferenciar las zonas-->
<link href="css/estilos_acordeon.css" rel="stylesheet" type="text/css" />
 
 
<!-- Carga de librerías para acordeún -->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>
 
 
 
 
<!-- Para que no halla conflicto entre acordeón y Dropdown  -->
<script type="text/javascript">
jQuery.noConflict();
</script>
 
 
<!-- Código para acordeón -->
<script type="text/javascript">
Event.observe(window, 'load', loadAccordions, false);
        
function loadAccordions() {
                    
var nestedVerticalAccordion = new accordion('contenedor', {
classNames : {
toggle : 'bloque_activador',
toggleActive : 'bloque_activador_activo',
content : 'bloque_contenido'
}
});
            
bottomAccordion.activate($$('#contenedor .accordion_toggle')[0]);
 
}
</script>
 
 
 
 
 
</head>
 
<body>
 
 
 
 
<div id="container">
 
 
<div class="contenido">
 
<div id="contenedor">
 
<!-- ... -->
<h2 class="bloque_activador_" title="Haz clic">nombre</h2>
<div class="bloque_contenido">
 
<?php include("nombre/index_01.html"); ?>
 
</div>
<!-- ... -->
 
<!-- ... -->
<h2 class="bloque_activador" title="Haz clic">nombre</h2>
<div class="bloque_contenido">
 
<?php include("nombre/index_02.html"); ?>
 
</div>
<!-- ... -->
 
 
</div>
</div>
</div>
 
</body>
</html>

Como digo el acordeón me funciona bien, sólo que cuando se carga pro primera vez se abren las pestañas y luego se cierran.

Había pensado en utilizar una precarga, pero no me funcionó, creo que hubo conflicto con el acordeón.

¿Que puedo hacer para que cuando se cargue no se abran?

Gracias por tu ayuda

mdk · #4 (**permalink**) 26/02/2013, 09:37

No lo pones ahí, pero comprueba el código CSS para que los valores iniciales, sean que el acordeón esté cerrado. Y si no, comprueba las variables de asignación en javascript.

ceaped · #5 (**permalink**) 26/02/2013, 09:49

Hola mdk
Como te digo el acordeón está bien, sólo que como tiene imágenes el se abre a cargar la página y luego se cierra.
El funciona bien pero presenta ese pequeño problema.

¿Como puedo solucionar esto?

¿Una precarga sería la solución?, si es el caso cual sabes que precarga podría implementar con el acordeón que no me presente conflicto.

Gracias por tu ayuda

mdk · #6 (**permalink**) 26/02/2013, 10:02

A ver... se abre y se cierra, o está abierto y luego se cierra? Es diferente.. Si está abierto,y se cierra, entonces como ya te he dicho, comprueba las coordenadas iniciales en las hojas de estilos o en las variables. No te puedo decir mucho más con la poca información que aportas. Te digo lo que haría yo en tu caso.

A: Comprobar si realmente los valores iniciales del acordeón, es estando cerrado.
B: Comprobar las variables y funciones del mismo, en el proceso de cargar de la página, para ver si por error realiza esa función.
C: Poner alertas en partes del código, para comprobar que las funciones realmente se ejecutan en el momento adecuado.

P.D: No he dicho en ningún momento que el acordeón este mal.

ceaped · #7 (**permalink**) 26/02/2013, 10:23

Hola mdk
Mira así tengo mi .css:

Código CSS:

Ver original.bloque_activador {
    height: 30px;
    width: 690px;
    line-height: 30px;
    color: #000000;
    font-weight: normal;
    outline: none;
    font-size: 14px;
    color: #000000;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FF6FC6;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #FFFFFF;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    text-indent: 10px;
}
 
.bloque_activador_activo {
    color: #ffffff;
    background-color: #AA0066;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #AA0066;
}
 
.bloque_activador:hover {
    color: #ffffff;
    background-color: #AA0066;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #FFFFFF;
}

ceaped · #8 (**permalink**) 26/02/2013, 12:08

Hola mdk
Ya se cual es el problema.
Yo los contenidos los cargo mediante .php así:

Código PHP:

Ver original<?php include("nombre/index_01.html"); ?>

Eso es lo que me hace abrir todas las pestañas cuando carga la página y luego se cierran.

Como puedo hacer para que la carga externa de los contenidos no me haga abrir al cargar la pagina el acordeón?

Gracias por tu ayuda

mdk · #9 (**permalink**) 26/02/2013, 13:28

Pues si ya sabes que la llamada a ese archivo es la que te produce ese movimiento indeseado. Mira el código de ese archivo a ver porque realiza esa función.

Deduzco que el efecto de acordeón no lo has hecho tu, has mirado en la página del desarrollador o en los foros del mismo si el efecto fuera normal?

ceaped · #10 (**permalink**) 26/02/2013, 13:33

Si ya mire la página del desarrollador

http://www.p51labs.com/accordion/

Pero no encuentro nada relacionado a lo que me sucede

ceaped · #11 (**permalink**) 26/02/2013, 14:47

El archivo no tiene ningún código especial, es sólo un .html con texto e imágenes

Código HTML:

Ver originalindex_01.html

ceaped · #12 (**permalink**) 26/02/2013, 17:45

Alguien mas que me pueda ayudar. Gracias