Mostrar y Ocultar DIVs con Jquery

Hola Amigos.

Casi terminando el Domingo, espero que les halla gustado los Wallpapers que les deje, pero ahora vamos a darle un poco de efecto a nuestro Tutorial: Mostrar y Ocultar DIVs con Javascript. Vamos a utilizar uno de los mas Famosos Framework para JavaScript: jQuery.

Bueno basta de escribir y vamos al grano, primero les dejo el Codigo HTML del ejemplo anterior (sin efectos):

            function capa1(){
                document.getElementById('capa1').style.display = 'block';
                document.getElementById('capa2').style.display = 'none';
                document.getElementById('capa3').style.display = 'none';
            }
            function capa2(){
                document.getElementById('capa2').style.display = 'block';
                document.getElementById('capa1').style.display = 'none';
                document.getElementById('capa3').style.display = 'none';
            }
            function capa3(){
                document.getElementById('capa3').style.display = 'block';
                document.getElementById('capa1').style.display = 'none';
                document.getElementById('capa2').style.display = 'none';
            }
Mostrar y Ocultar DIVs con Javascript

Capa 1
Capa 2
Capa 3


            Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
             Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
              Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
               Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
        

            * Enlace
            * Enlace
            * Enlace
        

            Texto 3 Texto 3  Texto 3  Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
             Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
              Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
               Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
        

Lo primero que haremos sera Agregar el Archivo de jQuery, tenemos dos formas de hacerlo:

1 – La mas sencilla, agregar este codigo a nuestro HTML:

2 – La otra manera, es descargando el Archivo y subirlo a nuestro Servidor:

Una vez agregado esta linea a nuestro Codigo ya tenemos instalado jQuery.

Lo primero que modificaremos son nuestros Links para mostrar u Ocultar los Divs:

Capa 1
Capa 2
Capa 3

Como ven hemos eliminado los parametros “Onclick” y agregamos un “id” a cada uno (Cada ID debe ser unico).

Ahora cambiemos nuestro codigo JavaScript para que usemos las Funcionalidades de jQuery:

$(document).ready(function(){
    $("#click1").click(function(){
        $("#capa1").show("slow");
        $("#capa2").hide("slow");
        $("#capa3").hide("slow");
    });

    $("#click2").click(function(){
         $("#capa2").show("slow");
         $("#capa1").hide("slow");
         $("#capa3").hide("slow");
    });

    $("#click3").click(function(){
         $("#capa3").show("slow");
         $("#capa2").hide("slow");
         $("#capa1").hide("slow");
    });
});

Acuerdensen que deben borrar el Codigo JavaScript anterior:

function capa1(){
    document.getElementById('capa1').style.display = 'block';
    document.getElementById('capa2').style.display = 'none';
    document.getElementById('capa3').style.display = 'none';
}
function capa2(){
     document.getElementById('capa2').style.display = 'block';
     document.getElementById('capa1').style.display = 'none';
     document.getElementById('capa3').style.display = 'none';
}
function capa3(){
     document.getElementById('capa3').style.display = 'block';
     document.getElementById('capa1').style.display = 'none';
     document.getElementById('capa2').style.display = 'none';
}

Todo este codigo hay que eliminarlo ya que no nos servira.

Una vez ya hecho estos cambios tenemos el Resultado con Efectos Listo, pero antes les voy a pasar a explicar un poco las funciones de jQuery:

$(document).ready(function(){

Esta funcion se encarga de cargar todas las funciones creadas con jQuery para cuando el documento ya este listo para poder usarse.

$("#click1").click(function(){

Aqui definimos que al elemento con id, “click1″ tenga una funcion al hacer clic sobre el. y Todo el codigo que se encuentre entre las llaves sera lo que se ejecutara al hacer click sobre ese elemento.

$("#capa1").show("slow");
$("#capa2").hide("slow");

Casi muy facil de entender, solo mostramos (show) y ocultamos (hide) el elemento con id que le pasemos.

Ya es hora de mostrarle como ha quedado nuestro Ejemplo.

Les deseo mucha suerte y que cualquier duda que surge, no se la guarden que tienen el Foro para que yo los pueda ayudar con lo que sea!

Saludos…
Maty!

Multi Clases CSS

Buenas gente, hoy les traigo un pequeño truco para aquellos que estan comenzando con el Diseño Web o para aquellas personas que todavia no lo conocian.

Muchas veces cuando estamos diseñando le damos estilos a cada elemento HTML y casi siempre tenemos muchos elementos con mismas caracteristicas, por ejemplo tenemos un parrafo que esta en Negrita, y otro parrafo que tambien esta en Negrita pero con un Color diferente.

.parrafo1 {
     font-weight:bold;
}
.parrafo2 {
     font-weight:bold;
     color:red;
}

Asi como ven en el codigo de arriba, pero como se habran dado cuenta tenemos dos veces escrita el codigo para la negrita, que en realidad no seria ningun problema si fuera algo basico, pero en grandes proyectos es necesario usar lo menos codigo posible para que la pagina cargue mas rapido, para que halla menor uso de banda de ancha entre otras cosas.

Ahora les mostrare una manera sencilla de reutilizar cada clase para ahorrarnos todo ese codigo innecesario.

.negrita {
     font-weight:bold;
}
.color {
     color:red;
}

Y ahora vemos como quedaria nuestro codigo HTML:

     Nuestro Parrafo numero 1 que se encuentra en Negrita.


     Nuestro segundo Parrafo que tambien se encuentra en Negrita pero este cambia de color.

Como pueden observar dejando un espacio entre ambas clases se pueden ingresar todas las clases que queremos utilizar.

Esto seria muy util ya que podemos reutilizar todas las clases que quisieramos y nos ahorrariamos mucho Codigo. A continuacion les voy a dejar otro Ejemplo:

Codigo CSS:

.negrita {
    font-weight:bold;
}
.grande {
    font-size:30px;
}
.color {
    color:red;
}

Codigo HTML:

        Multi Clases en CSS - www.matydesign.com
MultiClases en CSS


            Hoy les mostrare como usar Multiples Clases en CSS, para no escribir
            clases innecesarias y reducir la cantidad de codigo.
        

            Estilo Numero 1!
        

            Estilo Numero 2!
        

            Estilo Numero 3!
        

            Todas las Clases Combinadas!
        

Les dejo el ejemplo para ver el Resultado. Demo!

Espero que les halla sido Util y cualquier consultas Tienen los Comentarios o el Foro.

Saludos…
Maty!

Tutorial 960 Grid System

960 Grid System es un Framework CSS, con el se nos va a facilitar la tarea de crear las columnas y no tendremos que luchar con los distintos navegadores para que nuestra Web quede bien visible en todos ellos. Con 960 Grid System creamos diseños de 960px de Ancho y dispones de dos variantes de 12 o 16 Columnas, con cada variante tendremos distintos anchos pero ambas variantes tienen de cada lado 10px margen:

A partir de estas dimensiones seran las columnas que crearemos, en cada seccion se pueden crear todas las columnas que necesitemos siempre y cuando no superemos el ancho maximo de 960px, teniendo en cuenta los pixeles de los margenes. Ej: Una seccion donde tenemos el Contenido y una Sidebar (16 Columnas): Columna 12 (700px) + Columna 4 (220px) + Margenes (40px) = 960px

Ese fue solo un simple ejemplo, nosotros podemos varias los distintos tamaños de columnas con la cantidad siempre teniendo en cuenta que no se superen los 960px de ancho sumando los 10px de margen de cada lado de cada columna.

Bueno ahora comenzaremos con un Ejemplo de tipico diseño de Web, de un Header, Contenido, Sidebar y Footer (Para este vamos a usar el Sistema de 12 Columnas):

Primero Incluimos los archivos CSS de 960 Grid System:

Ahora tenemos que crear un contenedor principal que en este caso va a ser de 12 columnas:

Como ven si fuera un Contenedor de 16 columnas solo tendremos que cambiar el nombre de la clase a “container_16″.
Cada elemento que va a tener este contenedor va a tener el nombre de clase: “grid_xx”, donde xx es el numero de la anchura de la columna (Ver Tabla anterior para conocer los valores).
Así que primero creamos el contenedor del header:

Header

Al usar todo el ancho para el Header use la clase: “grid_12″, un recordatorio importante es que después de cada fila debemos agregar un div con class: “clear” para que no tengamos problemas con los Float. Ahora creamos los divs para el Contenido y el Sidebar (siempre adentro de nuestro contenedor principal):

Header



Contenido de la Web!

Sidebar

Asi ya tenemos nuestro Header, nuestro espacio del contenido y un lindo sidebar para crear nuestro menu
Pero todavia no terminas y seguimos con el Footer:

Header



Contenido de la Web!

Sidebar



Tutorial - 960 Grid System By MatyDesign

Aqui el Ejemplo!

Bueno asi terminamos nuestro diseño Web simple, y concluye este tutorial.

hasta la Próxima.