Estructuras arboreas en HTML

He creado una pequeña utlidad a la que podeís acceder aquí. La cual os permitirá generar una estructura de  árbol y os generará el código HTML y javascript necesario y que posteriormente podreís modificar a vuestro gusto. La estructura de árbol que se genera es como la que se presenta a continuación.

Elemento 1

Elemento 1.1

Elemento 1.2

Elemento 2

Elemento 2.1

Elemento 2.1.1

Se trata de una primera versión, pero espero que os sea de utilidad.

Carrusel de imágenes en movimiento con javascript 2

Anteriormente he puesto un post con como crear un carrusel de imágenes usando una librería javascript en este caso os indico como crear vuestro propio carrusel de imágenes de modo que las  imágenes tengan movimeinto como podeís ver en el siguiente ejemplo.

El código para crear este carrusel de imágenes es el siguiente:

<!-- Cargamos la librería jquery que vamos a usar -->
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"/>

<script>

   // Función a ejecutar una vez cargado el documento
   $(document).ready(function() {
    try
    {

      // Lista de imágenes que queremos cargar
      var imagenes = new Array();
      imagenes[0] = 'carrusel01.png';
      imagenes[1] = 'carrusel02.png';
      imagenes[2] = 'carrusel03.png';

      var numero_imagenes = 3;
      var imagen_actual = 0;

      var width_image = 800;
      var height_image = 450;

      // Calculamos el máximo que podemos mover una imagen tanto 
      // verticalmente o horizontalmente
      var max_y = height_image - $('#carrusel').height();
      var max_x = width_image - $('#carrusel').width();

      $('#carrusel').css('backgroundPosition', '0 0');      // Velocidad del desplazamiento
      var scrollSpeed = 50;
     
      // Posición actual de la imagen
      var current_x = 0;
      var current_y = 0;


      // Iniciamos un temporizador que ejecutará la función que
      // realiza el movimiento cada cierto tiempo
      var timer = setInterval(function() {
        moveBackground()
      }, scrollSpeed);

      var estado = 1;

      // Función encargada de realizar el movimiento
      function moveBackground() {
      
        // Se definen estados que indican que movimiento realizar
        // en cada momento
        if (estado == 1) // nos desplazamos vertical y horizontalmente
        {
          if (current_x > (-1 * max_x))
          {
            current_x = current_x - 1;
          }
          current_y = current_y - 1;
          if (current_y == (-1 * max_y)) // Cambio de movimiento, hemos llegado al máximo
          {
            estado = 2;
          }
        }
        else if (estado == 2) // nos desplazamos horizontalmente
        {
          current_x = current_x - 1;
          if (current_x <= (-1 * max_x))
          {
            estado = 3;
          }
        }
        else if (estado == 3)
        {
         
          // Se va a proceder al cambio de imagen, antes
          // de nada se para el temporizador, para que no se 
          // ejecute mientras realizamos el cambio
          clearInterval(timer);
          current_x = 0;
          current_y = 0;
          estado = 1;                            
         
          // Se oculta el contenedor mientras se cambia la imagen
          // esto es simplemente para crear un efecto de difuminado
          // al cambiar la imagen, para ello usamos la función fadeOut 
          // de jquery
          $('#carrusel').fadeOut(2000, function() {
            <!-- Se selecciona la nueva imagen -->
            imagen_actual = imagen_actual + 1;
            if (imagen_actual == numero_imagenes)
            {
              imagen_actual = 0;
            }
            // Se sustituye la imagen
            $('#carrusel').css('background-image', "url('" + imagenes[imagen_actual] + "')")
              $('#carrusel').fadeIn(2000, function() {               
                 // Se reinicia el temporizador
                 timer = setInterval(function() {
                  moveBackground()
                }, scrollSpeed);
              }
            );
          });
        }

        // Se cambia la posición
        $('#carrusel').css("backgroundPosition", current_x + "px " + current_y + "px");
      }
    }
    catch (err)
    {
      alert(err);
    }
  });
</script>


<div id="carrusel" style="width:600px; height: 400px; background-image: url('carrusel01.png')">

Como puede verse la idea es bastante sencilla, se trata de usar las imágenes como fondo e ir desplazando la posición del mismo cada cierto tiempo.

En este caso he definido  sólo dos tipos de movimientos pero es posible definir todos los estados que uno desee y generar los movimientos en la dirección que se deseen.

Carrusel de imágenes con javascript

Hay ciertas ocasiones en que alguien nos pide un carrusel de imágenes en su página web. Si buscamos un poco es posible que encontremos diferentes librerías que nos permitan crear nuestro carrusel de manera sencilla. Aunque no todas tienen la suficiente flexibilidad. A continuación os voy a mostrar una librería muy flexible en cuanto a sus opciones, lo que nos va a permitir crear interesantes carruseles para nuestros desarrollos web. Esta librería es: carouFredSel.

Lo primero que debemos hacer es descargarnos la librería desde aquí

 

Una vez que hemos descargado la librería al descomprimir el archivo nos encontramos con varios archivos JavaScript y un archivo HTML con diferentes ejemplos y que nos pueden servir como guía para crear nuestro carrusel.

Vamos pues a crear un carrusel de ejemplo. Primero debemos crear nuestra página web y en la cabecera añadir la inclusión de las librerías. 

<html>

  <head>
    <script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>
  </head>

</html>

A continuación debemos añadir el bloque donde se encontrará nuestro carrusel:

<html>

  <head>
    <script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>
  </head>

  <body>
    <div id="carrusel">
      <img src="img01.jpg" alt="building1" width="990" height="450" />
      <img src="img02.jpg" alt="building2" width="990" height="450" />
      <img src="img03.jpg" alt="building3" width="990" height="450" />
      <img src="img04.jpg" alt="building4" width="990" height="450" />
      <img src="img05.jpg" alt="building5" width="990" height="450" />
      <img src="img6.jpg" alt="building6" width="990" height="450" />
    </div>
  </body>

</html>

En este caso lo único que hemos hecho ha sido añadir un div al que le debemos asignar un identificador único, en este caso le hemos puesto como identificador carrusel. Y dentro del mismo hemos añadido los elementos que se van a mostrar en el carrusel (en este caso son imágenes pero si examináis el ejemplo que viene con la librería vemos que es posible realizar un carrusel de bloques HTML, lo que resulta bastante interesante).

Finalmente es necesario añadir el código JavasSript necesario para que nuestro carrusel se ejecute:

<html>

  <head>
    <script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>

    <script type="text/javascript" language="javascript">
        $(function()
        {           
            $('#carrusel').carouFredSel();
        })
    </script> 
  </head>

  <body>
    <div id="carrusel">
      <img src="img01.jpg" alt="building1" width="990" height="450" />
      <img src="img02.jpg" alt="building2" width="990" height="450" />
      <img src="img03.jpg" alt="building3" width="990" height="450" />
      <img src="img04.jpg" alt="building4" width="990" height="450" />
      <img src="img05.jpg" alt="building5" width="990" height="450" />
      <img src="img6.jpg" alt="building6" width="990" height="450" />
    </div>
  </body>


</html>

Como veis se trata de un sencillo JavaScript que usa JQuery (para aquellos que no han usado nunca JQuery es recomendable que se den una vuelta por la web de la librería pues se trata de una de las librerías más usadas por los desarrolladores de páginas web).

Lo único que estamos haciendo aquí es tomar el elemento definido con el nombre carrusel y le decimos a la librería que nos muestre su contenido como un carrusel. Sin embargo esto nos muestra el carrusel más básico posible es posible inicializar la librería con múltiples parámetros. Como ejemplo vamos a mostrar cómo hacer que se muestren tres imágenes a la vez:

<html>

  <head>
    <script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>

    <script type="text/javascript" language="javascript">
        $(function()
        {           
        $(function()
        {          
            $('#carrusel').carouFredSel({
                    width: '100%',
                    items: {
                        visible: 3,
                        start: -1
                    },
                    scroll: {
                        items: 1,
                        duration: 1000
                    }
                    }
                );
        })
        })
    </script> 
  </head>

  <body>
    <div id="carrusel">
      <img src="img01.jpg" alt="building1" width="990" height="450" />
      <img src="img02.jpg" alt="building2" width="990" height="450" />
      <img src="img03.jpg" alt="building3" width="990" height="450" />
      <img src="img04.jpg" alt="building4" width="990" height="450" />
      <img src="img05.jpg" alt="building5" width="990" height="450" />
      <img src="img6.jpg" alt="building6" width="990" height="450" />
    </div>
  </body>


</html>

Como puede verse hemos cambiado ligeramente nuestro JavaScript de modo que hemos inicializado diferentes parámetros:

• width. Indicamos que el carrusel usara todo el ancho de la página.
• items. Se trata de un objeto que nos permite definir que elementos se van a mostrar. con visible le indicamos que nos muestre cuantos elementos se muestran al mismo tiempo y start nos indica con que elemento se comienza.
• scroll. Nos permite indicar como se va a realizar el cambio de imágenes. En este caso items nos indica el número de elementos que se van a desplazar con cada movimiento, si no se pone se toma como valor el valor indicado anteriormente en el campo items.visible. Para indicar el tiempo que dura la transición se usa el campo duration donde se indican los milisegundos que se tartará en la misma.

Existen muchas mas opciones que pueden configurarse. Si queréis una lista completa de la misma podéis ir a la siguiente página donde se encuentra la documentación de la librería.

Si queréis ver múltiples ejemplos de que es posible hacer con esta librería, podéis encontrarlos en este enlace. Seguro que aquí encontráis alguna configuración que se ajusta a vuestras necesidades.

Sincronizar Scroll de contenedores DIV

Cuando estamos desarrollando páginas Web en ciertos casos necesitamos usar un mismo scroll para diferentes contenedores.

Un ejemplo sería el tener una tabla de gran tamaño (tal y como se muestra en el siguiente ejemplo) y que necesitemos que la cabecera nunca se oculta al desplazarnos con el scroll.

Columna 1	Columna 2	Columna 3	Columna 4	Columna 5
Dato 1.1	Dato 2.1	Dato 3.1	Dato 4.1	Dato 5.1
Dato 1.2	Dato 2.2	Dato 3.2	Dato 4.2	Dato 5.2
Dato 1.3	Dato 2.3	Dato 3.3	Dato 4.3	Dato 5.3
Dato 1.4	Dato 2.4	Dato 3.4	Dato 4.4	Dato 5.4
Dato 1.5	Dato 2.5	Dato 3.5	Dato 4.5	Dato 5.5
Dato 1.6	Dato 2.6	Dato 3.6	Dato 4.6	Dato 5.6
Dato 1.7	Dato 2.7	Dato 3.7	Dato 4.7	Dato 5.7

En la tabla de ejemplo si nos desplazamos con el scroll vertical, se perderán las cabeceras de la tabla. Una solución para ello es colocar la cabecera en un div diferente, como se ve a continuación.

Columna 1

Columna 2

Columna 3

Columna 4

Columna 5

Dato 1.1	Dato 2.1	Dato 3.1	Dato 4.1	Dato 5.1
Dato 1.2	Dato 2.2	Dato 3.2	Dato 4.2	Dato 5.2
Dato 1.3	Dato 2.3	Dato 3.3	Dato 4.3	Dato 5.3
Dato 1.4	Dato 2.4	Dato 3.4	Dato 4.4	Dato 5.4
Dato 1.5	Dato 2.5	Dato 3.5	Dato 4.5	Dato 5.5
Dato 1.6	Dato 2.6	Dato 3.6	Dato 4.6	Dato 5.6
Dato 1.7	Dato 2.7	Dato 3.7	Dato 4.7	Dato 5.7

Ahora no se perderán las cabeceras, sin embargo, si usamos el scroll horizontal, las cabeceras no coincidiran con las columnas. Para solucionar esto vamos a sincronizar mediante javascript el scroll en ambos contenedores. Veamos el código correspondiente.

<div id="cabeceraTabla" style="border: 1px solid; overflow: hidden; width: 600px;">
<table>
 <!-- Aquí la cabecera de la tabla -->
</table>
</div>
<div  id="valoresTabla" style="border: 1px solid; height: 100px; overflow: auto; width: 600px;">
<table>
  <!-- Aquí los datos de la tabla -->
</table>
</div>

 <script>

                    document.getElementById("valoresTabla").onscroll = function ()
                    {
                        try
                        {
                            document.getElementById('cabeceraTabla').scrollLeft = document.getElementById('valoresTabla').scrollLeft;
                        }
                        catch (ex){alert(ex);}
                    };
</script>

Se trata de asignar un nombre a cada uno de los contenedores (cabeceraTabla y valoresTabla), posteriormente lo que se está haciendo es asignar una función al evento de scroll, de modo que al modificar la posición del scroll se asigna esa misma posición al scroll de la cabecera.

Se puede hacer lo mismo con el scroll vertical en caso de que queramos que la primera columna no se oculte. En tal caso la propiedad del objeto que se modifica es scrollTop.

Columna 1

Columna 2

Columna 3

Columna 4

Columna 5

Dato 1.1	Dato 2.1	Dato 3.1	Dato 4.1	Dato 5.1
Dato 1.2	Dato 2.2	Dato 3.2	Dato 4.2	Dato 5.2
Dato 1.3	Dato 2.3	Dato 3.3	Dato 4.3	Dato 5.3
Dato 1.4	Dato 2.4	Dato 3.4	Dato 4.4	Dato 5.4
Dato 1.5	Dato 2.5	Dato 3.5	Dato 4.5	Dato 5.5
Dato 1.6	Dato 2.6	Dato 3.6	Dato 4.6	Dato 5.6
Dato 1.7	Dato 2.7	Dato 3.7	Dato 4.7	Dato 5.7