[SOLUCIONADO] Sobre la carga de las tab (tambien de spry)

[ryckycarrizo]

Hola a todos, espero haber posteado correctamente, les comento mi problema, e probado que las tab (solapas que se colapsan) antes de aparecer como uno desea, se carga todo el material, el inconveniente en mi caso, es que si tiene que cargar muchos documentos (unos 40 +/-) tarda un montón hasta que finaliza. ¿es posible que cargue todo el "esquema" y a medida que se abre las pestañas o solapas cargue el material?
Espero haber sido claro en la consulta.
Desde ya muchas gracias

[Cotelandia]

Para que alguien te responda tenes que ser más específico, como por ejemplo dejar el enlace al sitio o mostrar tu código.

[ryckycarrizo]

Iniciado por Cotelandia

Para que alguien te responda tenes que ser más específico, como por ejemplo dejar el enlace al sitio o mostrar tu código.

Ok, gracias dejo este link como ejemplo

[URL="http://pastoralurbana.com.ar/web/carlos-galli.php"]http://pastoralurbana.com.ar/web/carlos-galli.php[/URL]

acá hay 6 textos, pero tengo que hacer una (en esta misma web) que debe cargar uno 35 textos, por esto es la consulta de mas arriba.
Espero haber sido más claro, y disculpen la desproligidad

[Cotelandia]

Probá posteandolo en javascript » jquery, preguntando si saben (por ejemplo) de un plugin que haga eso. Podes probar con "lazyload" que es un plugin de jQuery.

[ryckycarrizo]

Gracias Cotelandia, posteare en javascrip y veré el lazyload.
Saludos

[caricatos]

Hola:

Acabo de borrar un tema en javascript porque no está permitido duplicarlos. Si crees que este tema está mal ubicado puedes reportarlo para que sea movido, aunque en principio no creo que la solución esté en javascript, porque lo que haría javascript es manipular etiquetas o estilos, cosa que se puede hacer sin ese lenguaje.

Saludos

[ryckycarrizo]

Primeramente, disculpas, soy nuevo por acá, y no me di cuenta que no se podia duplicar el post, simplemente seguí la sugerencia de un colega (que era la de postear en javascrip, no de duplicar) pero la cuestión es que de momento no encuentro solución a mi tema. desde ya muchas gracias

[Cotelandia]

Iniciado por ryckycarrizo

....

Osea, al entrar en la página, no queres que se carguen las demás pestañas no? Solo la actual. O entiendo mal?

Edit: O decis porque primero se muestra el contenido y después cuando carga se minimiza? Eso sería problema del código que utilizas, no de html o css.

[caricatos]

Hola:

Si el tema fuese solo sobre la carga del texto tal vez fuese un problema de otro foro, y en tal caso se reporta el tema, y el moderador que atienda el reporte sabrá moverlo; pero aunque el contenido sea cargado dinámicamente, se puede evitar el solapamiento usando las etiquetas y los estilos adecuados... No he urgado en el código, pero con cualquier elemento de bloque (div, p) se generan saltos de línea y no existen solapamientos... pero no estoy participando para resolver el tema, aunque creo que la cuestión es usar etiquetas y estilos adecuados (puedo estar equivocado...)

Saludos

[pzin]

El problema real es que ocultas el contenido de las pestañas mediante JavaScript. Probablemente después de cargar la página. Si ocultaras las pestañas con CSS no tendrías ese problema.

[ryckycarrizo]

Primeramente gracias por las respuestas, voy a buscar como hacer sectores que colapsan en css, ya que la sugerencia de pzin, parece interesante, así antes de plantear como resuelto, voy a buscar como se hace lo pruebo y comento....

[ryckycarrizo]

Iniciado por Cotelandia

Osea, al entrar en la página, no queres que se carguen las demás pestañas no? Solo la actual. O entiendo mal?

Edit: O decis porque primero se muestra el contenido y después cuando carga se minimiza? Eso sería problema del código que utilizas, no de html o css.

Hola cotelandia, el tema es ese, primero carga todo el material y luego se colapsan hasta que uno haga click en abrir.

Ante la sugerencia de que la solución posible sea con css, en mi torpeza, e estado buscando y no encuentro como se hace a través de css, alguien podria darme una punta para empezar?

Gracias

[Cotelandia]

Para ocultar contenido con css

Código CSS:

.elemento_a_ocultar{
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
 

Pero, para mostrar mostrar el contenido al hacer click podes usar o javascript (preferible) o css3 cambiandole los valores a

Código CSS:

.elemento_a_ocultar
{
clip: auto;
height: auto;
margin: 0; /* o proba con auto*/
position: relative;
width: auto; 
}
 

[ryckycarrizo]

Te agradezco tu esfuerzo, pero parece que soy mas madera de lo previsto, tendrías un ejemplo sencillo y completo, porque con los css que pusiste no llegue a buen puerto...
Gracias

[pzin]

Fui a ver cómo ocultaba JavaScript esos elementos, y me topé con algo muy feo. Luego una hice una validación HTML de tu sitio, y tiene 1379 errores; un error cada tres lineas de código. Creo que deberías replantearte algunas cosas.

[ryckycarrizo]

upsss la verdad es que me habia fijado este tema de validación, ya que el dreamweaver (uso el CS6) no me indicaba errores, me pondre a ver eso....
Gracias

[ryckycarrizo]

Revisando la lista de "errores" marcados por la validación que muchisimos me resulta extrañisimo que los muestre como error, ej:
<nav class="art-nav">
<li><a href="eventos/2008.php">2008</a>
</ul>
<div class="fb-like" data-send="true" data-layout="button_count" data-wid…

lo que esta en rojo es lo que marca como error, y la verdad es que como dije arriba, es rraro, cierto es que hubo algunos que son claros y fu corregido, pero estos no los entiendo.....

Pero volviendo al tema, es no me queda claro como hacer sectores que esten ocultos en css y al hacer clic (a un titulo por Ej) este se despliegue hacia abajo y muestre el contenido, y que asu ves este contenido no se muestre mientras carga esa pagina.....

Espero que puedan ayudarme, sobre todo con algun eçjemplo chiquito, despues lo llevo a lo grande, pero como punta de lanza para empezar...
Gracias

[ryckycarrizo]

Bueno, más allá de este asunto de los "errores de validación", solucione el tema original de la siguiente manera.

con el siguiente scrip:

Código HTML:

<script language="JavaScript" type="text/javascript">
    function desplegar(id){
        if(document.getElementById("desc_" + id).style.display=="none"){
            document.getElementById("desc_" + id).style.display="block";
        } else {
            document.getElementById("desc_" + id).style.display="none";
        }
    }
</script>
 

y despues en el html:

Código HTML:

<li><strong><a href="javascript: desplegar('1')" class="mediumtitulo">Titulo 1</a></strong><br />
            <div id="desc_1" style="display:none">
    
             <?include("Documento 1"); ?>
                
            </div><br />
        </li>
 
        <li><strong><a href="javascript: desplegar('2')" class="mediumtitulo">Titulo 2</a></strong><br />
            <div id="desc_2" style="display:none">
                
                <?include("Documento 2"); ?>
                
            </div><br />
        </li>
 

y así sucesivamente, entonces carga la lista de los titulos, y cuando clicleas en ese titulo recién aparece el documento en cuestión.
La "class" es para el formato del texto, lo aclaro por algun otro lego como yo no lo entendia....

Edit 01-09-2013 Les agrego un link para que vean como quedo, es una prueba de solo 16 documentos, pero es la idea:

http://pastoralurbana.com.ar/web/eventos/p2.php

Por tanto esta resuelta la consulta original
Gracias a todos por sus aportes