Contenido por pestañas

[junihh]

Hola señores

Recientemente comence a trastear con CSS y algo de JavaScript y por el momento no me va tan mal. Para mi blog personal necesitaba mostrar contenido con efectos de pestañas tal como "The CrunchBoard" en esta pagina.

Como no supe lograr ese efecto por no manejar bien JavaScript, localice uno muy bueno denominado Yetii, pero aun no me resultaba suficiente por lo pesado del archivo para mi gusto (8kb). Trate de hacer mi propia funcion en JS basado en mi manejo de AS2 y la mucha ayuda de la informacion en W3schools.

Finalmente logre hacer mi propia funcion, aplicable a multiples objetos en una sola pagina, tal como hago habitualmente con AS2. Lo pueden ver aqui.

Aunque hace el trabajo que debe hacer, encontre dos problemas que no he sabido solucionar:
1) Al cargar la pagina me muestra todos los divs con el contenido de cada pestaña, cuando deberia esconder todos menos el primero que tengo asignado. Luego de elegir una pestaña, ya funciona como necesito.
2) Todos los div's del contenido no se ponen justo debajo de las pestañas como deberia ser y en su lugar aparentan "volar".

Para inicializar el script quiero dejar claro que uso lo siguiente: bot (arTbs[0],arBxs[0]);. Esa parte se encuentra al final del JS.

En mi muestra esta contenido todo, tanto los CSS como el JS. Lo pongo para ver si me sugieren alguna solucion. Si tienen algun cuestionamiento extra, por favor dejenmelo saber.

Cualquier idea sera muy agradecida por mi.

[german82]

creo que deberias poner como defuault en tu css la visibility de los div en hidden asi no se veran la primera ves y los haces visible cuando tu quieras(osea al hacer click sobre el menu correspondiente)
luego con respecto a que aparescan flotando tendrias que modificar el top y left de cada uno segun el top y left de los menues para que aparescan alineados con el que coresponda
espero haber entendido bien lo que quieres hacer

[junihh]

Hola @german82 y gracias por responder.

Para inicializar la funcion ponia bot (arTbs[0],arBxs[0]) al final de esta como hago con mis funciones en Flash, pero no me funcionaba como entenderas. No me quedo mas remedio que sustituirlo por:

Código PHP:

  document.getElementById(arTbs[ini-1]).className='active'; 
document.getElementById(arBxs[ini-1]).style.visibility = 'visible';  
   

Y como tu sugieres, puse "hidden" todos los div con un For. Ya trabaja como debe ser, sin embargo aun tengo el problema que los div no se ponen bajo los tabs aunque les aplique margin-top/margin-left en 0.

Se que mi problema en este punto lo es el CSS, pero la verdad no se como hacerle. Puedes revisar mi muestra a ver si tienes alguna sugerencia ???

[junihh]

Problema solucionado

Antes tenia lo siguiente:

Código PHP:

  document.getElementById(arBxs[i]).style.visibility = 'hidden';
--------
document.getElementById(arBxs[i]).style.visibility = 'visible';  
   

segun el caso. Eso lo cambie por

Código PHP:

  document.getElementById(arBxs[i]).style.display = 'none';
--------
document.getElementById(arBxs[i]).style.display = 'block';  
   

Para quien le pueda interesar, aqui les dejo la funcion completa:

Código PHP:

  <script type="application/x-javascript">
    
        function setTabbing (tbs, bxs, ini)
        {
            var arTbs = new Array();
            var arBxs = new Array();
            var arCnt = tbs.split('-').length;
            //
            for (var i=0; i < arCnt; i++)
            {
                arTbs[i] = tbs.split('-')[i];
                arBxs[i] = bxs.split('-')[i];
                document.getElementById(arBxs[i]).style.display = 'none';
                //
                bot (arTbs[i],arBxs[i]);
            }
            //
            function bot (tb,bx)
            {
                document.getElementById(tb).onclick = function()
                { 
                    for (var i=0; i < arCnt; i++)
                    {
                        document.getElementById(arTbs[i]).className = 'normal';
                        document.getElementById(arBxs[i]).style.display = 'none';
                    }
                    document.getElementById(tb).className = 'active';
                    document.getElementById(bx).style.display = 'block';
                }
            }
            //
            document.getElementById(arTbs[ini-1]).className = 'active';
            document.getElementById(arBxs[ini-1]).style.display = 'block';
        }
        
</script>  
  

Se aplica de la siguiente forma:

Código PHP:

  <div>
        
        <ul class="nav">
            <li><a id="t21" href="#">Tab 01</a></li>
            <li><a id="t22" href="#">Tab 02</a></li>
            <li><a id="t23" href="#">Tab 03</a></li>
        </ul>
        
        <div style="clear:both;"></div>
        
        <div class="boxes" id="b21">Contenido en el box1 con suficiente texto para una buena lectura, aunque este tiene mas contenido que los demas.</div>
        <div class="boxes" id="b22">Contenido en el box2 con texto.</div>
        <div class="boxes" id="b23">Contenido en el box3 con un poco mas de texto.</div>
        
    </div>
    
    
    <script type="application/x-javascript">
        setTabbing ('t11-t12-t13', 'b11-b12-b13', '1');
        setTabbing ('t21-t22-t23', 'b21-b22-b23', '1');
    </script>  
  

Tiene la salvedad que deben crear una clase llamada "normal" que el JS aplica a la pestaña para mostrar esta como inactiva y otra clase llamada "active" para mostrarla activa.

Esta es la primera funcion en JS importante hecha por mi, por lo que tiene cierto "valor sentimental". Espero les sirva.

[caricatos]

Hola:

Te paso mi sistema de pestañas: Sistema de pestañas... y accesible, de paso te comento que si quieres que sea un script accesible (como el de mi página), deben estar todos los contenidos de las distintas pestañas en el momento de cargarse la página, porque si se tiene javascript desactivado, esos contenidos serían inaccesibles.

Saludos

[junihh]

Hola @caricatos y gracias por tu sugerencia.

Es interesante que a medida que voy trabajando con JS me doy cuenta lo facil que se me hace, gracias a AS2, por tanto algunas de las clases y eventos las he podido aplicar tal como estoy acostumbrado en AS.

Sobre esto, me gusto como aplicas el evento .onload, pero para el uso final que le dare al script (WordPress) no me conviene aplicarlo en el header, para eso prefiero como lo tengo actualmente que es cargando todos los elementos (pestañas y div's) necesarios y luego insertando el script.

El script que prepare es simple de aplicar y de primera mano no se notan errores, pero es curioso que el navegador mas famoso (Internet Explorer) sea el unico que no muestra adecuadamente el script. Esa conclusion fue luego de haber visto como se ve en los demas navegadores y OS gracias a BrowserShots, en el que de 48 navegadores que elegi para probar, 6 mostraban problemas con los elementos y 4 de ellos eran justamente IE (vaya record, con razon su tan mala fama).

Todos los IE (incluido el 8), muestran los elementos de mi muestra desorganizados, cosa que no tiene sentido. Es la razon para que en ocasiones me olvide de IE y solo diseñe para los estandares, aunque eso rompa con la accesibilidad.

[naked]

Buenas.
Junihh, me podría decir como conseguir el CSS del ejemplo de la página que has posteado de Yetii?.
Gracias, no se si es sencillo conseguirlo, pero más vueltas que le doy no logro sacarlo.

Caricatos, cuando te refieres a que el contenido sea accesible, ¿te refieres también a que Google no tenga problemas para indexarlo, o solo pensando en los usuarios que no tengan JavaScript activado?.


Gracias
Saludos.

[junihh]

Hola naked

El script que publique arriba ya no lo uso, lo reestructure para que fuera mas simple de aplicar. Si te interesa el nuevo script, lo puedes tomar de aqui. Alli tienes un ejemplo del script y la forma como se usan los CSS.

Sobre Yetii, no te podria servir de gran ayuda porque la verdad no recuerdo como funciona. De hecho no me interesa, a sabiendas que tengo mi propio script para el efecto.

Espero te sirva mi link, suerte.

[naked]

Muchas gracias junihh, realmente ligero y sencillo de utilizar.
Un saludo.

[naked]

Buenas de nuevo junihh.

Tengo una duda respecto al código de las pestañas, que por cierto es muy bueno.

No me funcionan las tablas al meterle funciones de php.

Código PHP:

<ul class="tbBx">
            <li><?php  flush();  get_links(); ?></li>
              <li> <?php flush();  wp_get_archives('<li>','type=monthly','<li>');  ?>  </li>
            <li><ul><?php flush(); posts_mas_comentados(); ?></ul></li>
        </ul>
 

Me muestra el contenido de las tres tablas.

Si dejo la tabla del centro vacía funciona bien, pero si meto las tres se fastidia. Por separado funcionan todas bien.

Saludos.