Problema al mostrar y ocultar capas [No carga JS]

JuaNiNNaio · #1 (**permalink**) 03/08/2009, 02:54

Bien tengo una pagina en html en la que muestro unas 3 o 4 capas de CSS, segun pulso un link u otro lo que hago es que oculto todas las capas, y muestro solo la que quiero en cada momento, esto funciona correctamente.

El problema viene en la carga de codigo javascript, estoy intentando mostrar un gráfico con JSCharts en cada una de las capas pero no me los muestra, no llega a ejecutar el codigo JS.

Al parecer el JS lo ejecuta al cargar la pagina, pero al mostrar y ocultar capas ya no funciona.

¿Hay alguna solucion factible para esto?

JuaNiNNaio · #2 (**permalink**) 03/08/2009, 06:56

Nadie sabe solucionarlo?

JuaNiNNaio · #3 (**permalink**) 04/08/2009, 00:39

Ayuda plz!

JuaNiNNaio · #4 (**permalink**) 05/08/2009, 02:15

Una ayudita que sigo cno este problema...

jonasmz · #5 (**permalink**) 05/08/2009, 09:26

porque no mostras el codigo y vemos que podemos hacer....

JuaNiNNaio · #6 (**permalink**) 06/08/2009, 02:41

Código:

<html>
<head>
  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  <link rel="StyleSheet" href="css/estilo.css" media="screen" type="text/css">
  <script type="text/javascript" src="utils/jscharts.js"></script>
  <script type="text/javascript" src="utils/funciones.js"></script>
  <title>.: Gabinete de Diseño y Organización S.A. - Cuadro de Mandos :.</title>
</head>
<body onResize="sizeGrafico();">
  <!-- Página con todas las capas -->
  <div id="completa">
    <div id="top">
      <p class="titulo">Pantalla de indicadores</p>
    </div>
    
    <div id="Superior">
      <!-- Pestañas -->
      <div id="header">
          <div id="headerPrincipal">
            <ul>
                <li id="current"><a href="javascript:abreCapa('DerechaPrincipal','headerPrincipal');">Principal</a></li>
                <li><a href="javascript:abreCapa('DerechaBarras','headerBarras');include('utils/grafico.js');">Gr&aacute;fico de Barras</a></li>
                <li><a href="javascript:abreCapa('DerechaTarta','headerTarta');">Gr&aacute;fico de Tarta</a></li>
                <li><a href="javascript:abreCapa('DerechaLinea','headerLinea');">Gr&aacute;fico de L&iacute;nea</a></li>
                <li><a href="javascript:abreCapa('DerechaAlerta','headerAlerta');">Alerta</a></li>
            </ul>
          </div>
          <div id="headerBarras">
            <ul>
                <li><a href="javascript:abreCapa('DerechaPrincipal','headerPrincipal');">Principal</a></li>
                <li id="current"><a href="javascript:abreCapa('DerechaBarras','headerBarras');">Gr&aacute;fico de Barras</a></li>
                <li><a href="javascript:abreCapa('DerechaTarta','headerTarta');">Gr&aacute;fico de Tarta</a></li>
                <li><a href="javascript:abreCapa('DerechaLinea','headerLinea');">Gr&aacute;fico de L&iacute;nea</a></li>
                <li><a href="javascript:abreCapa('DerechaAlerta','headerAlerta');">Alerta</a></li>
            </ul>
          </div>
          <div id="headerTarta">
            <ul>
                <li><a href="javascript:abreCapa('DerechaPrincipal','headerPrincipal');">Principal</a></li>
                <li><a href="javascript:abreCapa('DerechaBarras','headerBarras');">Gr&aacute;fico de Barras</a></li>
                <li id="current"><a href="javascript:abreCapa('DerechaTarta','headerTarta');">Gr&aacute;fico de Tarta</a></li>
                <li><a href="javascript:abreCapa('DerechaLinea','headerLinea');">Gr&aacute;fico de L&iacute;nea</a></li>
                <li><a href="javascript:abreCapa('DerechaAlerta','headerAlerta');">Alerta</a></li>
            </ul>
          </div>
          <div id="headerLinea">
            <ul>
                <li><a href="javascript:abreCapa('DerechaPrincipal','headerPrincipal');">Principal</a></li>
                <li><a href="javascript:abreCapa('DerechaBarras','headerBarras');">Gr&aacute;fico de Barras</a></li>
                <li><a href="javascript:abreCapa('DerechaTarta','headerTarta');">Gr&aacute;fico de Tarta</a></li>
                <li id="current"><a href="javascript:abreCapa('DerechaLinea','headerLinea');">Gr&aacute;fico de L&iacute;nea</a></li>
                <li><a href="javascript:abreCapa('DerechaAlerta','headerAlerta');">Alerta</a></li>
            </ul>
          </div>
          <div id="headerAlerta">
            <ul>
                <li><a href="javascript:abreCapa('DerechaPrincipal','headerPrincipal');">Principal</a></li>
                <li><a href="javascript:abreCapa('DerechaBarras','headerBarras');">Gr&aacute;fico de Barras</a></li>
                <li><a href="javascript:abreCapa('DerechaTarta','headerTarta');">Gr&aacute;fico de Tarta</a></li>
                <li><a href="javascript:abreCapa('DerechaLinea','headerLinea');">Gr&aacute;fico de L&iacute;nea</a></li>
                <li id="current"><a href="javascript:abreCapa('DerechaAlerta','headerAlerta');">Alerta</a></li>
            </ul>
          </div>
      </div>
      
    </div>

Ese es el codigo, mediante la funcion abreCapa, abro la que quiero y oculta las demas:

Código:

function cierraCapas() {
    document.getElementById("DerechaPrincipal").style.display = "none";
    document.getElementById("DerechaBarras").style.display = "none";
    document.getElementById("DerechaTarta").style.display = "none";
    document.getElementById("DerechaLinea").style.display = "none";
    document.getElementById("DerechaAlerta").style.display = "none";

    document.getElementById("headerPrincipal").style.display = "none";
    document.getElementById("headerBarras").style.display = "none";
    document.getElementById("headerTarta").style.display = "none";
    document.getElementById("headerLinea").style.display = "none";
    document.getElementById("headerAlerta").style.display = "none";
}

//Sin uso actualmente
function abreCapa(capaDerecha, capaHeader) {
    cierraCapas();
    document.getElementById(capaDerecha).style.display = "inline";
    document.getElementById(capaHeader).style.display = "inline";
}

A ver que me podeis decir.

deirdre · #7 (**permalink**) 06/08/2009, 10:17

Hola JuaNiNNaio

Este hilo tuyo ¿tiene algo que ver con este otro?, también tuyo, porque no sé si lo resolviste (lo de la carga de los js) utilizando ajax o si has cambiado el método de carga para buscar una solución al mismo problema.

Para intentar ayudarte es necesario, al menos para mi, todo el conjunto de problema, incluyendo css y js.

Bye

JuaNiNNaio · #8 (**permalink**) 07/08/2009, 04:09

Hola deirdre, gracias por tu respuesta, ese otro hilo al que haces referencia era cuando estaba intentando otra forma de hacerlo, actualmente acabo de conseguirlo hoy mismo mostrando u ocultando capas, por lo que los dos hilos se pueden dar por resueltos, lo que he hecho es llamar a la funcion javascript al mismo tiempo que muestro la capa.

Gracias y un saludo!